Match & Win 游戏指南

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [cards, setCards] = useState([]);
  const [flippedCards, setFlippedCards] = useState([]);
  const [points, setPoints] = useState(0);
  const [hasFreePlay, setHasFreePlay] = useState(true);

  const symbols = ['🍎', '🍌', '🍊', '🍇'];

  useEffect(() => {
    initializeGame();
  }, []);

  const initializeGame = () => {
    const cardSet = symbols.flatMap(symbol => Array(3).fill(symbol));
    const shuffledCards = cardSet.sort(() => Math.random() - 0.5);
    setCards(shuffledCards.map((symbol, index) => ({ id: index, symbol, isFlipped: false })));
    setFlippedCards([]);
  };

  const handleCardClick = (id) => {
    if (flippedCards.length >= 3) return;
    const updatedCards = cards.map(card =>
      card.id === id ? { ...card, isFlipped: true } : card
    );
    setCards(updatedCards);
    const newFlippedCards = [...flippedCards, id];
    setFlippedCards(newFlippedCards);
    if (newFlippedCards.length === 3) {
      checkMatch(newFlippedCards);
    }
  };

  const checkMatch = (flippedCardIds) => {
    const flippedSymbols = flippedCardIds.map(id => cards.find(card => card.id === id).symbol);
    if (new Set(flippedSymbols).size === 1) {
      setPoints(points + 70);
    }
    setTimeout(() => {
      initializeGame();
    }, 1000);
  };

  const handlePlayNow = () => {
    initializeGame();
  };

  const handleFreePlay = () => {
    setHasFreePlay(false);
    initializeGame();
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-400 to-indigo-600 text-white">
      <h1 className="text-4xl font-bold mb-8">Match & Win</h1>
      <div className="grid grid-cols-3 gap-4 mb-8">
        {cards.map(card => (
          <div
            key={card.id}
            className="w-24 h-24 flex items-center justify-center bg-white text-4xl rounded-lg shadow-lg cursor-pointer transition-transform transform hover:scale-105"
            onClick={() => handleCardClick(card.id)}
          >
            {card.isFlipped ? card.symbol : '?'}
          </div>
        ))}
      </div>
      <div className="text-2xl mb-8">Points: {points}</div>
      <div className="flex space-x-4">
        <button
          className="px-6 py-2 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-600 transition-colors"
          onClick={handlePlayNow}
        >
          Play Now ($0.5)
        </button>
        {hasFreePlay && (
          <button
            className="px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition-colors"
            onClick={handleFreePlay}
          >
            Free Play
          </button>
        )}
      </div>
      <footer className="mt-8 text-sm text-gray-200">
        © 2025 Match & Win. This game requires skill in memory and pattern recognition.
      </footer>
    </div>
  );
};

export default App;