/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const CARD_SYMBOLS = ['🍎', '🍌', '🍇', '🍉', '🍊', '🍋', '🍓', '🍒']; function MemoryGame() { const [cards, setCards] = useState<{ symbol: string; isFlipped: boolean; isMatched: boolean }[]>([]); const [selectedCards, setSelectedCards] = useState([]); const [moves, setMoves] = useState(0); useEffect(() => { initializeGame(); }, []); const initializeGame = () => { const shuffledCards = [...CARD_SYMBOLS, ...CARD_SYMBOLS] .sort(() => Math.random() - 0.5) .map(symbol => ({ symbol, isFlipped: false, isMatched: false })); setCards(shuffledCards); setMoves(0); }; const handleCardClick = (index: number) => { if (cards[index].isFlipped || cards[index].isMatched) return; const newCards = [...cards]; newCards[index].isFlipped = true; setCards(newCards); setSelectedCards([...selectedCards, index]); if (selectedCards.length === 1) { setMoves(moves + 1); const firstCardIndex = selectedCards[0]; if (cards[firstCardIndex].symbol === cards[index].symbol) { newCards[firstCardIndex].isMatched = true; newCards[index].isMatched = true; } else { setTimeout(() => { newCards[firstCardIndex].isFlipped = false; newCards[index].isFlipped = false; setCards(newCards); }, 1000); } setSelectedCards([]); } }; const isGameWon = cards.every(card => card.isMatched); return (

Fruit Memory Game

Moves: {moves}

{isGameWon &&

🎉 Congratulations! You won! 🎉

}

{cards.map((card, index) => (

handleCardClick(index)} >

❓

{card.symbol}

))}

{isGameWon && ( )}

View Source

); } function App() { return ; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Fruit Memory Game

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; margin: 0; min-height: 100vh; } .memory-game { text-align: center; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 400px; margin: 0 auto; } .card { aspect-ratio: 1; perspective: 1000px; cursor: pointer; } .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .card.flipped .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 3rem; } .card-front { background-color: #3498db; color: white; } .card-back { background-color: #2ecc71; transform: rotateY(180deg); } .game-stats { margin-bottom: 20px; } button { margin-top: 20px; padding: 10px 20px; font-size: 1rem; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; } .source-link { margin-top: 20px; font-size: 0.8rem; } `;

gameApp

Versions

v0