├── game.html
├── memory game.html
├── styles.css
└── script.js
/game.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Memory Game
7 |
8 |
9 |
10 | Memory Game
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/memory game.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Memory Game
7 |
8 |
9 |
10 | Memory Game
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | text-align: center;
4 | background-color: #f9f9f9;
5 | }
6 |
7 | .game-board {
8 | display: grid;
9 | grid-template-columns: repeat(4, 100px);
10 | gap: 10px;
11 | margin: 20px auto;
12 | max-width: 450px;
13 | }
14 |
15 | .card {
16 | width: 100px;
17 | height: 100px;
18 | background-color: #4caf50;
19 | color: white;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: 24px;
24 | cursor: pointer;
25 | border-radius: 5px;
26 | transition: background-color 0.3s;
27 | }
28 |
29 | .card.flipped {
30 | background-color: #fff;
31 | color: #4caf50;
32 | }
33 |
34 | .card.matched {
35 | background-color: #8bc34a;
36 | cursor: default;
37 | }
38 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const cards = [
2 | 'A', 'A', 'B', 'B', 'C', 'C', 'D', 'D',
3 | 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'
4 | ];
5 |
6 | let firstCard = null;
7 | let secondCard = null;
8 | let lockBoard = false;
9 | let matches = 0;
10 |
11 | const gameBoard = document.getElementById('gameBoard');
12 | const restartButton = document.getElementById('restartButton');
13 |
14 | function shuffle(array) {
15 | array.sort(() => Math.random() - 0.5);
16 | }
17 |
18 | function createCard(cardValue) {
19 | const card = document.createElement('div');
20 | card.classList.add('card');
21 | card.dataset.value = cardValue;
22 | card.addEventListener('click', flipCard);
23 | return card;
24 | }
25 |
26 | function flipCard() {
27 | if (lockBoard) return;
28 |
29 | this.classList.add('flipped');
30 | this.textContent = this.dataset.value;
31 |
32 | if (!firstCard) {
33 | firstCard = this;
34 | } else {
35 | secondCard = this;
36 | lockBoard = true;
37 |
38 | checkForMatch();
39 | }
40 | }
41 |
42 | function checkForMatch() {
43 | if (firstCard.dataset.value === secondCard.dataset.value) {
44 | matches++;
45 | firstCard.removeEventListener('click', flipCard);
46 | secondCard.removeEventListener('click', flipCard);
47 | resetTurn();
48 | } else {
49 | setTimeout(() => {
50 | firstCard.classList.remove('flipped');
51 | secondCard.classList.remove('flipped');
52 | firstCard.textContent = '';
53 | secondCard.textContent = '';
54 | resetTurn();
55 | }, 1000);
56 | }
57 | }
58 |
59 | function resetTurn() {
60 | firstCard = null;
61 | secondCard = null;
62 | lockBoard = false;
63 |
64 | if (matches === cards.length / 2) {
65 | alert('You win!');
66 | }
67 | }
68 |
69 | function startGame() {
70 | matches = 0;
71 | firstCard = null;
72 | secondCard = null;
73 | lockBoard = false;
74 | gameBoard.innerHTML = '';
75 | shuffle(cards);
76 | cards.forEach(cardValue => {
77 | const card = createCard(cardValue);
78 | gameBoard.appendChild(card);
79 | });
80 | }
81 |
82 | restartButton.addEventListener('click', startGame);
83 | startGame();
84 |
--------------------------------------------------------------------------------