158 lines
4.0 KiB
HTML
158 lines
4.0 KiB
HTML
<!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> |