Math-clash/index.html at main · skv93-coder/Math-clash · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#026742" />
    <meta
      name="description"
      content="Math Clash: tap the tiles that add up to the target before the stack hits the bottom."
    />
    <link rel="stylesheet" href="index.css" />
    <title>Math clash</title>
  </head>
  <body>
    <main class="game-box">
      <div class="game-header">
        <h1 class="game-title">Math Clash</h1>
        <div class="toolbar">
          <button
            type="button"
            class="pill-btn"
            id="sound-btn"
            onclick="toggleSound()"
          >
            Sound: On
          </button>
          <button type="button" class="pill-btn" onclick="openHelp()">
            How to play
          </button>
        </div>
      </div>

      <div class="screen-board">
        <div class="stat stat-target">
          <span class="stat-label">Target</span>
          <span class="stat-value" id="target">--</span>
        </div>
        <div class="stat" id="curr-box">
          <span class="stat-label">Current</span>
          <span class="stat-value" id="curr">--</span>
        </div>
        <div class="stat" id="score-box">
          <span class="stat-label">Score</span>
          <span class="stat-value" id="score">--</span>
        </div>
        <div class="stat">
          <span class="stat-label">Best</span>
          <span class="stat-value" id="best">--</span>
        </div>
      </div>

      <div class="timer" aria-hidden="true">
        <div class="timer-fill" id="timer-fill"></div>
      </div>

      <div class="grid-box" id="tile-box"></div>
    </main>

    <div
      class="modal"
      id="intro-modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="intro-title"
    >
      <div class="modal-body">
        <h2 class="modal-title" id="intro-title">How to play</h2>
        <ol class="rules">
          <li>Tap tiles so their numbers add up to the <b>Target</b>.</li>
          <li>
            Hit it exactly to score <b>10 points</b> and clear those tiles.
          </li>
          <li>Overshot? Tap a selected tile again to unselect it.</li>
          <li>
            A new row drops every <b>10 seconds</b>. If the stack reaches the
            bottom, it's game over.
          </li>
        </ol>
        <div class="modal-btn-box">
          <button
            type="button"
            class="btn"
            id="intro-btn"
            onclick="closeIntro()"
          >
            Start
          </button>
        </div>
      </div>
    </div>

    <div
      class="modal hidden"
      id="modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="game-over-title"
    >
      <div class="modal-body">
        <h2 class="modal-title" id="game-over-title">Game Over</h2>
        <p class="modal-text">
          The stack hit the bottom. Final score:
          <strong id="game-over-score"></strong>
        </p>
        <p class="modal-text">Best: <strong id="game-over-best"></strong></p>
        <p class="modal-text new-best hidden" id="new-best">New best score!</p>
        <div class="modal-btn-box">
          <button type="button" onclick="start()" class="btn">Restart</button>
        </div>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>