Match & Win 游戏概念

import React, { useState, useEffect } from 'react';

const App = () => {
  const [cards, setCards] = useState([]);
  const [flippedCards, setFlippedCards] = useState([]);
  const [points, setPoints] = useState(0);
  const [gameStarted, setGameStarted] = useState(false);

  const initializeGame = () => {
    const symbols = ['🍎', '🍌', '🍊', '🍇'];
    const deck = symbols.flatMap(symbol => Array(3).fill(symbol)).sort(() => Math.random() - 0.5);
    setCards(deck.map((symbol, index) => ({ id: index, symbol, isFlipped: false })));
    setFlippedCards([]);
    setGameStarted(true);
  };

  const handleCardClick = (index) => {
    if (flippedCards.length < 3 && !cards[index].isFlipped) {
      const newCards = [...cards];
      newCards[index].isFlipped = true;
      setCards(newCards);
      setFlippedCards([...flippedCards, newCards[index]]);

      if (flippedCards.length === 2) {
        checkForMatch([...flippedCards, newCards[index]]);
      }
    }
  };

  const checkForMatch = (selectedCards) => {
    setTimeout(() => {
      if (new Set(selectedCards.map(card => card.symbol)).size === 1) {
        setPoints(points + 35); // 70% of $0.5 is 35 points
      }
      resetCards();
    }, 1000);
  };

  const resetCards = () => {
    const newCards = cards.map(card => ({ ...card, isFlipped: false }));
    setCards(newCards);
    setFlippedCards([]);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-500 to-purple-600 text-white">
      <div className="container mx-auto p-4">
        <h1 className="text-4xl font-bold text-center mb-8">Match & Win</h1>
        <div className="grid grid-cols-3 gap-4 mb-8">
          {cards.map((card, index) => (
            <div
              key={card.id}
              className="flex items-center justify-center h-24 bg-white text-4xl rounded-lg shadow-lg cursor-pointer transform transition-transform hover:scale-105"
              onClick={() => handleCardClick(index)}
            >
              {card.isFlipped ? card.symbol : '?'}
            </div>
          ))}
        </div>
        <div className="text-center mb-8">
          <p className="text-2xl">Points: {points}</p>
        </div>
        <div className="text-center">
          {!gameStarted && (
            <button
              className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300"
              onClick={initializeGame}
            >
              Start Game
            </button>
          )}
        </div>
      </div>
      <div className="text-center text-sm mt-8">
        <p>Legal Note: This game requires skill in memory and pattern recognition.</p>
        <p>© 2025 Match & Win. All rights reserved.</p>
      </div>
    </div>
  );
};

export default App;