-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.html
183 lines (169 loc) · 5.38 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./game.css">
<title>Mario Word</title>
</head>
<body>
<!-- defining the parent div -->
<div class="parent">
<!-- adding navbar -->
<div class="right-buttons">
<!-- displaying the username of the player -->
<img src="./assets/username.png" alt="" id="username-img">
<div id="username"></div>
<!-- adding a question button for the users doubts -->
<img src="./assets/question-icon.png" alt="" id="question-button-image">
</div>
<div class="questions-answers">
<div class="answers">
<span>What do you have to do?</span>
<br>
<br>
<span id="answer-points">• Select a letter from the keyboard layout given to you below.</span>
<br><br>
<span id="answer-points">• You have maximum of 3 tries, before mario jumps into the spikes.</span>
<br><br>
<span id="answer-points">• Hint is provided to you! The "/" means space between the word.</span>
</div>
</div>
<!-- adding the stars(tries) which represent how many tries are left -->
<div class="stars">
<img src="./assets/star-yellow.png" alt="" id="star-img">
<img src="./assets/star-yellow.png" alt="" id="star-img">
<img src="./assets/star-yellow.png" alt="" id="star-img">
</div>
<!-- adding hints for the user -->
<div class="hints">
<span><b>Hint!</b></span>
<span id="hint"></span>
</div>
<!-- creating the clouds -->
<div class="clouds">
<img src="./assets/cloud1.png" alt="cloud1" id="cloud1">
<img src="./assets/cloud2.png" alt="cloud2" id="cloud2">
<img src="./assets/cloud1.png" alt="cloud3" id="cloud3">
</div>
<!-- creating a parent div for certain elements -->
<div class="flex">
<!-- creating div for word which we have to guess -->
<div class="word">
</div>
<!-- creating div for the virtual keyboard -->
<div class="parent-keyboard">
<div class="parent-keyboard-row-1">
<div id='q' class="letter-keyboard keyboard-row-1">
<span>Q</span>
</div>
<div id='w' class="letter-keyboard keyboard-row-1">
<span>W</span>
</div>
<div id='e' class="letter-keyboard keyboard-row-1">
<span>E</span>
</div>
<div id='r' class="letter-keyboard keyboard-row-1">
<span>R</span>
</div>
<div id='t' class="letter-keyboard keyboard-row-1">
<span>T</span>
</div>
<div id='y' class="letter-keyboard keyboard-row-1">
<span>Y</span>
</div>
<div id='u' class="letter-keyboard keyboard-row-1">
<span>U</span>
</div>
<div id='i' class="letter-keyboard keyboard-row-1">
<span>I</span>
</div>
<div id='o' class="letter-keyboard keyboard-row-1">
<span>O</span>
</div>
<div id='p' class="letter-keyboard keyboard-row-1">
<span>P</span>
</div>
</div>
<br>
<div class="parent-keyboard-row-2">
<div id='a' class="letter-keyboard keyboard-row-2">
<span>A</span>
</div>
<div id='s' class="letter-keyboard keyboard-row-2">
<span>S</span>
</div>
<div id='d' class="letter-keyboard keyboard-row-2">
<span>D</span>
</div>
<div id='f' class="letter-keyboard keyboard-row-2">
<span>F</span>
</div>
<div id='g' class="letter-keyboard keyboard-row-2">
<span>G</span>
</div>
<div id='h' class="letter-keyboard keyboard-row-2">
<span>H</span>
</div>
<div id='j' class="letter-keyboard keyboard-row-2">
<span>J</span>
</div>
<div id='k' class="letter-keyboard keyboard-row-2">
<span>K</span>
</div>
<div id='l' class="letter-keyboard keyboard-row-2">
<span>L</span>
</div>
</div>
<br>
<div class="parent-keyboard-row-3">
<div id='z' class="letter-keyboard keyboard-row-3">
<span>Z</span>
</div>
<div id='x' class="letter-keyboard keyboard-row-3">
<span>X</span>
</div>
<div id='c' class="letter-keyboard keyboard-row-3">
<span>C</span>
</div>
<div id='v' class="letter-keyboard keyboard-row-3">
<span>V</span>
</div>
<div id='b' class="letter-keyboard keyboard-row-3">
<span>B</span>
</div>
<div id='n' class="letter-keyboard keyboard-row-3">
<span>N</span>
</div>
<div id='m' class="letter-keyboard keyboard-row-3">
<span>M</span>
</div>
</div>
</div>
</div>
<!-- placing the mario image -->
<div class="mario-image">
<img src="./assets/Mario Walk - Fall/MarioStandLarge.png" alt="" id="mario">
</div>
<!-- creating plank image on which mario will walk -->
<div class="plank">
<img src="./assets/plank.png" alt="">
</div>
<!-- creating buttons for playing again or ending the game -->
<div class="buttons">
<div class="play-again-button">
<span>New Word?</span>
</div>
<div class="end-button">
<span>End Game!</span>
</div>
</div>
<!-- creating the spikes on which mario will fall -->
<div class="spikes">
<img src="./assets/spikes.png" alt="">
</div>
</div>
<script src="game.js"></script>
</body>
</html>