html
html
1
2
<div class="game-board" id="board"></div>
<button onclick="resetGame()">Reset Game</button>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: auto;
}
.card {
background: pink;
height: 80px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card.flipped {
transform: rotateY(180deg);
background: white;
}
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const emojis = ['🐶', '🐱', '🐻', '🐼', '🐧', '🦊', '🐯', '🐹'];
const cards = [...emojis, ...emojis]; // Duplicate for pairs
let flippedCards = [];
let matched = 0;
function createBoard() {
const board = document.getElementById('board');
cards.sort(() => Math.random() - 0.5); // Shuffle
cards.forEach((emoji, index) => {
const card = document.createElement('div');
card.className = 'card';
card.setAttribute('data-emoji', emoji);
card.setAttribute('data-id', index);
card.innerHTML = '❔'; // Default "back" of the card
card.onclick = flipCard;
board.appendChild(card);
});
}
function flipCard() {
if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
this.classList.add('flipped');
this.innerHTML = this.getAttribute('data-emoji');
flippedCards.push(this);
if (flippedCards.length === 2) checkMatch();
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom