[V0_FILE]xml:file="public/images/poluzny.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/poluzny-SwMv8BR18DlJP3osPhnIht6VjSQovb.svg" isMerged="true" [V0_FILE]xml:file="public/images/1.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-2WowGMYm92xdmw53tcmKRAjk2J9BCv.svg" isMerged="true" [V0_FILE]xml:file="public/images/2.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-OthxAWKB7Fk1xrpxSNHWJB9kJY0aSF.svg" isMerged="true" [V0_FILE]xml:file="public/images/3.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-AL8L3gCYW7gONRgvLdxS5oX6kREOsi.svg" isMerged="true" [V0_FILE]xml:file="public/images/4.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-2ahJxdcfHOpbPKucBy8JvHdtHhIYg0.svg" isMerged="true" [V0_FILE]xml:file="public/images/5.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-TudFYol2xaRmgvdvM8khCfFbnOzOX5.svg" isMerged="true" [V0_FILE]xml:file="public/images/6.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-DlZw56hjQtueDKyD8A6blHh3qoOVg0.svg" isMerged="true" [V0_FILE]xml:file="public/images/7.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-XCd04prCEfFJ7AcW34d7cInGc6MnFy.svg" isMerged="true" [V0_FILE]xml:file="public/images/8.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8-ZI7jdGWRMF4CpLoRk1rHWUPnR8ErAI.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MemoryGame } from '@/components/memory-game' export default function Page() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/memory-game.tsx" isEdit="true" isQuickEdit="true" 'use client' import { useState, useEffect, useRef } from 'react' import Image from 'next/image' interface Card { id: number imageId: number rotation: number isFlipped: boolean isMatched: boolean } export function MemoryGame() { const [cards, setCards] = useState([]) const [flippedCards, setFlippedCards] = useState([]) const [attempts, setAttempts] = useState(0) const [gameComplete, setGameComplete] = useState(false) const [gridSize, setGridSize] = useState({ cols: 0, rows: 0 }) const containerRef = useRef(null) useEffect(() => { const calculateGrid = () => { if (!containerRef.current) return const containerWidth = containerRef.current.offsetWidth const containerHeight = 420 // Фиксированная высота const blockSize = 75 // Размер блока const gap = 10 // Промежуток между блоками // Рассчитываем количество колонок и строк const cols = Math.floor((containerWidth + gap) / (blockSize + gap)) const rows = Math.floor((containerHeight + gap) / (blockSize + gap)) setGridSize({ cols, rows }) } calculateGrid() window.addEventListener('resize', calculateGrid) return () => window.removeEventListener('resize', calculateGrid) }, []) useEffect(() => { if (gridSize.cols === 0 || gridSize.rows === 0) return const totalCards = gridSize.cols * gridSize.rows const imageIds = [1, 2, 3, 4, 5, 6, 7, 8] const cardPairs: Card[] = [] // Создаем пары карточек let cardId = 0 while (cardPairs.length < totalCards) { for (let imageId of imageIds) { if (cardPairs.length >= totalCards) break cardPairs.push({ id: cardId++, imageId, rotation: Math.floor(Math.random() * 181), isFlipped: false, isMatched: false, }) if (cardPairs.length >= totalCards) break cardPairs.push({ id: cardId++, imageId, rotation: Math.floor(Math.random() * 181), isFlipped: false, isMatched: false, }) } } // Перемешиваем карточки const shuffled = cardPairs.sort(() => Math.random() - 0.5) setCards(shuffled) }, [gridSize]) // Проверка завершения игры useEffect(() => { if (cards.length > 0 && cards.filter(card => !card.isMatched).length <= 1) { setGameComplete(true) } }, [cards]) // Обработка клика по карточке const handleCardClick = (id: number) => { // Не позволяем кликать более 2 карточек одновременно if (flippedCards.length >= 2) return // Не позволяем кликать по уже перевернутой или совпавшей карточке const card = cards.find(c => c.id === id) if (!card || card.isFlipped || card.isMatched) return // Переворачиваем карточку setCards(prevCards => prevCards.map(c => c.id === id ? { ...c, isFlipped: true } : c ) ) const newFlippedCards = [...flippedCards, id] setFlippedCards(newFlippedCards) // Увеличиваем счетчик попыток при переворачивании второй карточки if (newFlippedCards.length === 2) { setAttempts(prev => prev + 1) // Проверяем совпадение после небольшой задержки setTimeout(() => { checkMatch(newFlippedCards) }, 600) } } // Проверка совпадения const checkMatch = (flippedIds: number[]) => { const [firstId, secondId] = flippedIds const firstCard = cards.find(c => c.id === firstId) const secondCard = cards.find(c => c.id === secondId) if (firstCard && secondCard && firstCard.imageId === secondCard.imageId) { // Совпадение - помечаем карточки как совпавшие setCards(prevCards => prevCards.map(c => c.id === firstId || c.id === secondId ? { ...c, isMatched: true } : c ) ) } else { // Не совпадение - переворачиваем обратно setCards(prevCards => prevCards.map(c => c.id === firstId || c.id === secondId ? { ...c, isFlipped: false } : c ) ) } setFlippedCards([]) } return (

{/* Сетка карточек */}

{cards.map((card) => (

handleCardClick(card.id)} >

{/* Передняя сторона (лицевая) */}

{/* Обратная сторона (с изображением) */}

))}

{/* Сообщение о завершении игры */} {gameComplete && (

Поздравляем!

Использовано попыток: {attempts}

)}

) }

About

Tags

Share

About

Tags

Share

More from ownergallery-9581

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ownergallery-9581

More Templates Like This