-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame.html
108 lines (76 loc) · 2.76 KB
/
game.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ninja Warrior Game</title>
<link rel="stylesheet" href="./style.css">
<!-- imported this link for google (font awesome cdn link) by cdnjs.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
</head>
<body>
<!-- first phone div is used for making it mobile responsive -->
<div id="firstphone">
<div id="phone">
PLEASE ROTATE YOUR PHONE
</div>
</div>
<!-- main div starts here -->
<div id="main">
<div class="gameHeading">
<!-- Below span is use ti update lives later no -->
<p>Lives Remaining : <span id="liveremain">5</span></p>
</div>
<!-- Getting our Canvas tag-->
<canvas id="canvas">
</canvas>
<!-- First User InterFace where user will start the game -->
<div class="startGame" id="startGame">
<div class="home">
<!-- below span will be used to update username -->
<h1>BEST OF LUCK BUDDY<br>
<span id="username">Bhupender Jogi </span>
</h1>
<button id="startGameBtn">
START >
</button>
<!-- below span is user to update user high score form localStorage -->
<p>Your High Score:
<span id="homeHighScore"></span>
</p>
</div>
</div>
<!-- this is our first timer which will direct us to game -->
<div class="firstTimer" id="timerone">
<h1></h1>
</div>
<!-- This is our main container of the game which will come after our
above timer finishes , in this div our score ,time and game will work -->
<div id="mainContainer">
<div class="scoreDiv">
<!-- below span are used to update score and high score respectivily -->
<p class="work">Score: <span id="score"></span></p>
<p class="work">High Score: <span id="highScore"></span></p>
</div>
<!-- our timer which will work in seconds -->
<div class="gameCountTime">
<h1 id="second"></h1>
</div>
<div id="strikeCountDiv">
<h1 class="strikeCount">1x</h1>
</div>
</div>
<!-- this is our list div which will be displayed after game finishes -->
<div id="gameEndDiv">
<div class="gameEndContainer">
<!-- below span will show us our updated score -->
<p>Your Score: <span id="endGameScore"></span><br>
<span id="ramdomitem"></span>
</p>
<button id="endgame">End Game ></button>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>