├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Memory-Game
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Memory Game
7 |
8 |
9 |
10 | 🧠 Memory Game
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const symbols = ['🍎', '🍌', '🍇', '🍉', '🍓', '🍒', '🍍', '🥝'];
2 | let cards = [...symbols, ...symbols]; // Duplicate for pairs
3 | let flippedCards = [];
4 | let matchedCards = [];
5 | const board = document.getElementById('gameBoard');
6 | const message = document.getElementById('message');
7 |
8 | function shuffle(array) {
9 | return array.sort(() => Math.random() - 0.5);
10 | }
11 |
12 | function createBoard() {
13 | board.innerHTML = '';
14 | shuffle(cards).forEach((symbol, index) => {
15 | const card = document.createElement('div');
16 | card.classList.add('card');
17 | card.dataset.symbol = symbol;
18 | card.dataset.index = index;
19 | card.addEventListener('click', handleCardClick);
20 | board.appendChild(card);
21 | });
22 | message.textContent = '';
23 | }
24 |
25 | function handleCardClick(e) {
26 | const clicked = e.target;
27 | if (
28 | clicked.classList.contains('flipped') ||
29 | clicked.classList.contains('matched') ||
30 | flippedCards.length === 2
31 | ) return;
32 |
33 | clicked.textContent = clicked.dataset.symbol;
34 | clicked.classList.add('flipped');
35 | flippedCards.push(clicked);
36 |
37 | if (flippedCards.length === 2) {
38 | checkForMatch();
39 | }
40 | }
41 |
42 | function checkForMatch() {
43 | const [card1, card2] = flippedCards;
44 | if (card1.dataset.symbol === card2.dataset.symbol) {
45 | card1.classList.add('matched');
46 | card2.classList.add('matched');
47 | matchedCards.push(card1, card2);
48 | flippedCards = [];
49 | if (matchedCards.length === cards.length) {
50 | message.textContent = '🎉 You won!';
51 | }
52 | } else {
53 | setTimeout(() => {
54 | card1.textContent = '';
55 | card2.textContent = '';
56 | card1.classList.remove('flipped');
57 | card2.classList.remove('flipped');
58 | flippedCards = [];
59 | }, 1000);
60 | }
61 | }
62 |
63 | function restartGame() {
64 | flippedCards = [];
65 | matchedCards = [];
66 | createBoard();
67 | }
68 |
69 | createBoard();
70 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Segoe UI', sans-serif;
3 | background-color: #f4f4f4;
4 | text-align: center;
5 | padding: 20px;
6 | }
7 |
8 | h1 {
9 | margin-bottom: 20px;
10 | }
11 |
12 | .game-board {
13 | display: grid;
14 | grid-template-columns: repeat(4, 100px);
15 | gap: 10px;
16 | justify-content: center;
17 | margin: 20px auto;
18 | }
19 |
20 | .card {
21 | width: 100px;
22 | height: 100px;
23 | background-color: #3498db;
24 | color: white;
25 | font-size: 2em;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | cursor: pointer;
30 | border-radius: 8px;
31 | transition: transform 0.4s;
32 | user-select: none;
33 | }
34 |
35 | .card.flipped {
36 | background-color: #2ecc71;
37 | cursor: default;
38 | }
39 |
40 | .card.matched {
41 | background-color: #95a5a6;
42 | pointer-events: none;
43 | }
44 |
45 | button {
46 | padding: 10px 20px;
47 | font-size: 16px;
48 | margin-top: 10px;
49 | cursor: pointer;
50 | }
51 |
52 | #message {
53 | margin-top: 15px;
54 | font-weight: bold;
55 | font-size: 18px;
56 | }
57 |
--------------------------------------------------------------------------------