game_tank/index.html at master · CodeArenaT/game_tank · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tank Battle Arena</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="src/css/style.css" />
</head>
<body>
  <main class="app-shell">
    <header class="top-hud glass">
      <section class="stat-block left">
        <div class="line"><span>HP</span><strong id="hp">100/100</strong></div>
        <div class="bar hp"><div id="hpBar"></div></div>
        <div class="line"><span>SPD</span><strong id="speed">2.60</strong></div>
        <div class="line"><span>DMG</span><strong id="damage">1.0</strong></div>
      </section>

      <section class="stat-block center">
        <div class="line spread">
          <span>Score <strong id="score">0</strong></span>
          <span>High <strong id="highScore">0</strong></span>
          <span>Kills <strong id="kills">0</strong></span>
        </div>
        <div class="line spread">
          <span>Time <strong id="liveTime">00:00</strong></span>
          <span>Tank <strong id="tankLevel">Lv1</strong></span>
          <span>Wave <strong id="wave">1</strong></span>
          <label>Level
            <select id="level">
              <option value="1">1 - De</option>
              <option value="2" selected>2 - Vua</option>
              <option value="3">3 - Kho</option>
            </select>
          </label>
        </div>
        <div class="bar threat"><div id="threatBar"></div></div>
      </section>

      <section class="stat-block right">
        <button id="pauseBtn" class="ui-btn">Pause</button>
        <div class="keyline">Phase: <strong id="waveState">Prepare</strong></div>
        <div class="keyline">Missile: <strong id="missileKeyView">F</strong></div>
        <div class="keyline">Shield: <strong id="shieldKeyView">G</strong></div>
      </section>
    </header>

    <section class="arena glass">
      <div id="game"></div>
      <div class="feed" id="state"></div>
    </section>

    <footer class="bottom-hud">
      <button id="openSettingsBtn" class="icon-btn settings">
        <img src="public/assets/kenney_board-game-icons/PNG/Double (128px)/arrow_rotate.png" alt="Settings" />
      </button>
      <button id="fireMissileBtn" class="icon-btn missile">
        <img src="public/assets/custom-icons/missile.svg" alt="Missile" />
        <span id="missileCount" class="badge">0</span>
      </button>
      <button id="shieldBtn" class="icon-btn shield">
        <img src="public/assets/kenney_board-game-icons/PNG/Double (128px)/shield.png" alt="Shield" />
        <span id="shieldCd" class="badge">G</span>
      </button>
    </footer>

    <p id="hint" class="hint">Move: WASD/Arrows | Shoot: Space / Mouse Left | Missile: F | Shield: G | Pause: P | Restart: R | Upgrade: 1/2/3</p>
  </main>

  <div id="settingsModal" class="modal" aria-hidden="true">
    <div class="card">
      <h2>Settings</h2>
      <p>Chon o va bam phim ban muon</p>
      <label>Missile key<input id="missileKeyInput" type="text" readonly value="F" /></label>
      <button id="missileMouseBtn" class="ui-btn" type="button">Use Mouse Left</button>
      <label>Shield key<input id="shieldKeyInput" type="text" readonly value="G" /></label>
      <div class="actions">
        <button id="saveSettingsBtn" class="ui-btn">Save</button>
        <button id="closeSettingsBtn" class="ui-btn">Close</button>
      </div>
    </div>
  </div>

  <div id="restartModal" class="modal" aria-hidden="true">
    <div class="card">
      <h2>Restart Game?</h2>
      <p>Ban co chac chan muon restart khong?</p>
      <div class="actions">
        <button id="confirmRestartBtn" class="ui-btn">Yes, Restart</button>
        <button id="cancelRestartBtn" class="ui-btn">No</button>
      </div>
    </div>
  </div>

  <div id="gameOverModal" class="modal" aria-hidden="true">
    <div class="card gameover-card">
      <h2>BATTLE REPORT</h2>
      <div class="report-grid">
        <div class="report-row"><span>Score</span><strong id="gameOverScore">0</strong></div>
        <div class="report-row"><span>Time</span><strong id="gameOverTime">00:00</strong></div>
        <div class="report-row"><span>Tank</span><strong id="gameOverTankLevel">Lv1</strong></div>
        <div class="report-row"><span>High Score</span><strong id="gameOverHighScore">0</strong></div>
      </div>
      <div class="actions">
        <button id="restartFromGameOverBtn" class="ui-btn">Play Again</button>
        <button id="closeGameOverBtn" class="ui-btn">Close</button>
      </div>
    </div>
  </div>

  <div id="upgradeModal" class="modal" aria-hidden="true">
    <div class="card upgrade-card">
      <h2>Choose Upgrade</h2>
      <p>Wave cleared. Pick one boost for the next wave.</p>
      <div id="upgradeChoices" class="upgrade-grid"></div>
    </div>
  </div>

  <script src="src/js/config.js"></script>
  <script src="src/js/ui.js"></script>
  <script src="src/js/entities.js"></script>
  <script src="src/js/render.js"></script>
  <script src="src/js/input.js"></script>
  <script src="src/js/game.js"></script>
</body>
</html>