[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import ColorGame from "@/components/color-game" export default function Home() { return (

颜色配对游戏 Color Matching Game

) } [V0_FILE]typescriptreact:file="public/sounds/click.mp3" isMerged="true" // This is a placeholder. You'll need to add actual sound files to your project. // For click.mp3, use a gentle click sound. [V0_FILE]typescriptreact:file="public/sounds/match.mp3" isMerged="true" // This is a placeholder. You'll need to add actual sound files to your project. // For match.mp3, use a cheerful success sound. [V0_FILE]typescriptreact:file="public/sounds/wrong.mp3" isMerged="true" // This is a placeholder. You'll need to add actual sound files to your project. // For wrong.mp3, use a gentle "try again" sound. [V0_FILE]typescriptreact:file="public/sounds/start.mp3" isMerged="true" // This is a placeholder. You'll need to add actual sound files to your project. // For start.mp3, use a welcoming game start sound. [V0_FILE]typescriptreact:file="public/sounds/victory.mp3" isMerged="true" // This is a placeholder. You'll need to add actual sound files to your project. // For victory.mp3, use a celebratory sound. [V0_FILE]typescriptreact:file="components/color-card.tsx" isEdit="true" isQuickEdit="true" "use client" import { motion } from "framer-motion" interface ColorCardProps { colorData: { color: string name: string pinyin: string } isSelected: boolean onClick: () => void } export default function ColorCard({ colorData, isSelected, onClick }: ColorCardProps) { return (

{colorData.name} {colorData.pinyin}

) } [V0_FILE]typescriptreact:file="components/color-game.tsx" isFixed="true" isEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { motion, AnimatePresence } from "framer-motion" import confetti from "canvas-confetti" import ColorCard from "./color-card" // Define color options with Chinese names const colorOptions = [ { color: "bg-red-500", name: "红色", pinyin: "Hóngsè" }, { color: "bg-blue-500", name: "蓝色", pinyin: "Lánsè" }, { color: "bg-green-500", name: "绿色", pinyin: "Lǜsè" }, { color: "bg-yellow-400", name: "黄色", pinyin: "Huángsè" }, { color: "bg-purple-500", name: "紫色", pinyin: "Zǐsè" }, { color: "bg-pink-500", name: "粉色", pinyin: "Fěnsè" }, { color: "bg-orange-500", name: "橙色", pinyin: "Chéngsè" }, { color: "bg-teal-500", name: "青色", pinyin: "Qīngsè" }, ] export default function ColorGame() { const [gameColors, setGameColors] = useState([]) const [selectedCards, setSelectedCards] = useState([]) const [matchedPairs, setMatchedPairs] = useState(0) const [isGameComplete, setIsGameComplete] = useState(false) const [isGameStarted, setIsGameStarted] = useState(false) // Sound effects const playSound = useCallback((sound: string) => { const audio = new Audio(`/sounds/${sound}.mp3`) audio.volume = 0.3 audio.play().catch((e) => console.log("Audio play error:", e)) }, []) // Generate random colors for the game const generateGameColors = useCallback(() => { // Shuffle and pick 3 random colors const shuffled = [...colorOptions].sort(() => 0.5 - Math.random()) const selectedColors = shuffled.slice(0, 3) // Create pairs of each color with random positions const pairs = selectedColors.flatMap((color) => [ { ...color, id: Math.random(), position: Math.random() }, { ...color, id: Math.random(), position: Math.random() }, ]) // Sort by the random position value return pairs.sort((a, b) => a.position - b.position) }, []) // Start a new game const startNewGame = useCallback(() => { setGameColors(generateGameColors()) setSelectedCards([]) setMatchedPairs(0) setIsGameComplete(false) setIsGameStarted(true) playSound("start") }, [generateGameColors, playSound]) // Handle card click const handleCardClick = (index: number) => { if (selectedCards.includes(index) || selectedCards.length >= 2) return playSound("click") const newSelected = [...selectedCards, index] setSelectedCards(newSelected) if (newSelected.length === 2) { const firstCard = gameColors[newSelected[0]] const secondCard = gameColors[newSelected[1]] if (firstCard.color === secondCard.color) { // Match found setTimeout(() => { playSound("match") // Remove matched cards setGameColors((prev) => prev.map((card, idx) => (newSelected.includes(idx) ? null : card))) setSelectedCards([]) setMatchedPairs((prev) => prev + 1) // Check if game is complete if (matchedPairs + 1 >= 3) { setIsGameComplete(true) playSound("victory") // Trigger confetti confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) } }, 500) } else { // No match setTimeout(() => { playSound("wrong") setSelectedCards([]) }, 1000) } } } // Start game on first load useEffect(() => { startNewGame() }, [startNewGame]) return (

{gameColors.map( (colorData, index) => colorData && ( handleCardClick(index)} /> ), )}

{isGameComplete && (

太棒了! (Tài bàng le!)

Amazing job!

)} {isGameStarted ? "再玩一次 (Play Again)" : "开始游戏 (Start Game)"}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This