Добавить memory-game.html

2026-05-28 18:46:35 +03:00
parent bd2d57e514
commit 7fdbfac9e3
1 changed files with 158 additions and 0 deletions
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Memory Game</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+background: #1a1a2e;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+min-height: 100vh;
+font-family: 'Segoe UI', sans-serif;
+color: #eee;
+}
+h1 { color: #e94560; margin-bottom: 10px; }
+#stats { font-size: 1.1em; margin-bottom: 15px; display: flex; gap: 20px; }
+.board {
+display: grid;
+grid-template-columns: repeat(4, 80px);
+grid-template-rows: repeat(4, 80px);
+gap: 8px;
+}
+.card {
+width: 80px;
+height: 80px;
+perspective: 600px;
+cursor: pointer;
+}
+.card-inner {
+width: 100%;
+height: 100%;
+position: relative;
+transition: transform 0.5s;
+transform-style: preserve-3d;
+}
+.card.flipped .card-inner { transform: rotateY(180deg); }
+.card-front, .card-back {
+position: absolute;
+width: 100%;
+height: 100%;
+backface-visibility: hidden;
+border-radius: 10px;
+display: flex;
+align-items: center;
+justify-content: center;
+font-size: 2em;
+}
+.card-front {
+background: linear-gradient(135deg, #e94560, #c23152);
+color: #fff;
+font-size: 1.5em;
+}
+.card-back {
+background: linear-gradient(135deg, #16213e, #0f3460);
+transform: rotateY(180deg);
+}
+.card.matched .card-back {
+background: linear-gradient(135deg, #1a5c1a, #2d8f2d);
+box-shadow: 0 0 15px rgba(0,255,0,0.4);
+}
+#restart {
+margin-top: 20px;
+padding: 10px 30px;
+font-size: 1em;
+background: #e94560;
+color: #fff;
+border: none;
+border-radius: 8px;
+cursor: pointer;
+}
+#restart:hover { background: #c23152; }
+</style>
+</head>
+<body>
+<h1>🧠 Memory Game</h1>
+<div id="stats">
+<span>Ходы: <b id="moves">0</b></span>
+<span>Пары: <b id="pairs">0</b>/8</span>
+</div>
+<div class="board" id="board"></div>
+<button id="restart">🔄 Заново</button>
+
+<script>
+const emojis = ['🍎','🍊','🍋','🍇','🍓','🍒','🥝','🍑'];
+let cards = [], flippedCards = [], moves = 0, pairs = 0, canFlip = true;
+
+function shuffle(arr) {
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+}
+
+function init() {
+    const board = document.getElementById('board');
+    board.innerHTML = '';
+    cards = shuffle([...emojis, ...emojis]);
+    flippedCards = [];
+    moves = 0;
+    pairs = 0;
+    canFlip = true;
+    document.getElementById('moves').textContent = 0;
+    document.getElementById('pairs').textContent = '0';
+
+    cards.forEach((emoji, i) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.innerHTML = `
+            <div class="card-inner">
+                <div class="card-front">?</div>
+                <div class="card-back">${emoji}</div>
+            </div>`;
+        card.onclick = () => flipCard(card, i);
+        board.appendChild(card);
+    });
+}
+
+function flipCard(card, index) {
+    if (!canFlip || card.classList.contains('flipped') || card.classList.contains('matched')) return;
+    card.classList.add('flipped');
+    flippedCards.push({ card, index });
+
+    if (flippedCards.length === 2) {
+        moves++;
+        document.getElementById('moves').textContent = moves;
+        canFlip = false;
+        const [a, b] = flippedCards;
+        if (cards[a.index] === cards[b.index]) {
+            a.card.classList.add('matched');
+            b.card.classList.add('matched');
+            pairs++;
+            document.getElementById('pairs').textContent = pairs;
+            flippedCards = [];
+            canFlip = true;
+            if (pairs === 8) {
+                setTimeout(() => alert('🎉 Поздравляем! Вы нашли все пары за ' + moves + ' ходов!'), 400);
+            }
+        } else {
+            setTimeout(() => {
+                a.card.classList.remove('flipped');
+                b.card.classList.remove('flipped');
+                flippedCards = [];
+                canFlip = true;
+            }, 800);
+        }
+    }
+}
+
+document.getElementById('restart').onclick = init;
+init();
+</script>
+</body>
+</html>