Skip to content

Commit 3fee3e9

Browse files
feat: game-over screen
1 parent d743fc0 commit 3fee3e9

File tree

7 files changed

+526
-358
lines changed

7 files changed

+526
-358
lines changed
-21.4 KB
Loading
Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="preconnect" href="https://fonts.googleapis.com" />
6-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7-
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet" />
8-
<link rel="stylesheet" href="/src/style.css" />
9-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10-
<title>Running Ball (Babylon.js)</title>
11-
</head>
123

13-
<body>
14-
<main class="app">
15-
<canvas id="game-canvas" class="game-canvas"></canvas>
16-
<div class="user-ui user-ui__top">
17-
<div class="score">
18-
<span class="game-score" id="game-score">0</span>
19-
<img src="/assets/images/coin.png" class="coin-img" />
20-
</div>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet" />
9+
<link rel="stylesheet" href="/src/style.css" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<title>Running Ball (Babylon.js + TypeScript)</title>
12+
<link rel="shortcut icon" href="/assets/images/football.png" type="image/x-icon">
13+
</head>
14+
15+
<body>
16+
<main class="app">
17+
<canvas id="game-canvas" class="game-canvas"></canvas>
18+
19+
<div class="user-ui user-ui__top">
20+
<div class="score">
21+
<span class="game-score" id="game-score">0</span>
22+
<img src="/assets/images/coin.png" class="coin-img" />
2123
</div>
24+
</div>
25+
26+
<div class="user-ui user-ui__bottom">
27+
<button id="restart-btn" class="ui-btn">
28+
<img src="/assets/images/restart.png" width="30px" />
29+
</button>
30+
</div>
2231

23-
<div class="user-ui user-ui__bottom">
24-
<button id="restart-btn" class="ui-btn">
25-
<img src="/assets/images/restart.png" width="30px" />
26-
</button>
32+
<div class="game-over-screen" id="game-over-screen">
33+
<div class="game-over-modal">
34+
<span class="game-over-info">GAME OVER</span>
35+
<span class="game-over-info" id="game-over-score-current">CURRENT SCORE</span>
36+
<span class="game-over-info" id="game-over-score-best">BEST SCORE</span>
2737
</div>
28-
</main>
29-
<script type="module" src="/src/main.ts"></script>
30-
</body>
31-
</html>
38+
39+
<span class="tap-to-restart">Tap to restart</span>
40+
</div>
41+
</main>
42+
<script type="module" src="/src/main.ts"></script>
43+
</body>
44+
45+
</html>

0 commit comments

Comments
 (0)