memory-game/index.html at main · 0daysleft/memory-game · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <title>Memory Game</title>
</head>
<body>

<!-- Trigger Button -->
<div class="btn">
     <button id="openRulesBtn">Show Game Rules</button>
     <button id="startGame">Start The Game</button>
</div>
<!-- Modal -->
<div id="rulesModal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h2>🧠 Memory Game – Beginner Level</h2>
    <div class="rules-content">
      <h3>How to Play</h3>
      <ul>
        <li><strong>🟦 Game Layout:</strong> 12 hidden boxes, each with a hidden image. 6 pairs in total.</li>
        <li><strong>👆 Your Goal:</strong> Click any two boxes to reveal the images. Try to find two that match.</li>
        <li><strong>✅ If the images match:</strong> You earn a point. The boxes turn <span class="green">green</span>.</li>
        <li><strong>❌ If the images don't match:</strong> You don’t get a point. The boxes turn <span class="red">red</span>, then reset.</li>
        <li><strong>🎯 Win Condition:</strong> Match all 6 pairs to complete the level. Use your memory to improve!</li>
        <li><strong>🧩 Difficulty:</strong> Beginner – great for practicing your memory skills!</li>
      </ul>
    </div>
  </div>
</div>


     <div class="game-box">
          <h3>Score: <span id="result"></span></h3>

          <div id="grid"></div>
     </div>
     <script src="script.js"></script>
</body>
</html>