-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
247 lines (232 loc) · 10.4 KB
/
index.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="shortcut icon" href="img/favicon.png" />
<title>Tetris game</title>
</head>
<body>
<div class="container">
<header>
<h1 class="logo bgp">TETRIS</h1>
</header>
<main>
<div class="game-window bgp">
<canvas id="gameWindow" width="300" height="600"> </canvas>
</div>
<div class="game-info-container bgp">
<div class="game-info">
<canvas id="nxtBlock" width="80" height="80"></canvas>
<p>Level: <span class="csLevel">0</span></p>
<p>Lines: <span class="csLines">0</span></p>
<p>Score: <span class="csScore">0</span></p>
</div>
</div>
<div class="scoreboard-container bgp">
<div class="scoreboard">
<h2>scoreboard</h2>
<ol class="highscores">
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ol>
</div>
</div>
</main>
<section class="keyboard keyboard-utility">
<button id="plusBtn" class="utility-btn bgp" data-btn="plusBtn">
<div class="btn-content" data-btn="plusBtn">
<p class="btn-text bgp" data-btn="plusBtn">+</p>
</div>
</button>
<button id="minusBtn" class="utility-btn bgp" data-btn="minusBtn">
<div class="btn-content" data-btn="minusBtn">
<p class="btn-text bgp" data-btn="minusBtn">-</p>
</div>
</button>
<button id="playBtn" class="utility-btn bgp" data-btn="playBtn">
<div class="btn-content" data-btn="playBtn">
<p class="btn-text bgp" data-btn="playBtn">PLAY</p>
</div>
</button>
</section>
<section class="keyboard keyboard-game">
<button id="upArrow" class="game-btn bgp" data-btn="upArrow">
<div class="btn-content" data-btn="upArrow">
<p class="btn-text bgp" data-btn="upArrow">
<i class="fas fa-caret-up" data-btn="upArrow"></i>
</p>
</div>
</button>
<button id="leftArrow" class="game-btn bgp" data-btn="leftArrow">
<div class="btn-content" data-btn="leftArrow">
<p class="btn-text bgp" data-btn="leftArrow">
<i class="fas fa-caret-left" data-btn="leftArrow"></i>
</p>
</div>
</button>
<button id="downArrow" class="game-btn bgp" data-btn="downArrow">
<div class="btn-content" data-btn="downArrow">
<p class="btn-text bgp" data-btn="downArrow">
<i class="fas fa-caret-down" data-btn="downArrow"></i>
</p>
</div>
</button>
<button id="rightArrow" class="game-btn bgp" data-btn="rightArrow">
<div class="btn-content" data-btn="rightArrow">
<p class="btn-text bgp" data-btn="rightArrow">
<i class="fas fa-caret-right" data-btn="rightArrow"></i>
</p>
</div>
</button>
</section>
<button id="instructionBtn">INSTRUCTION</button>
<div class="instruction-page d-none">
<div class="instruction-container bgp">
<div class="instruction">
<h1>how to play?</h1>
<p>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<defs>
<linearGradient
id="grad1"
x1="100%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: hsl(234, 80%, 45%); stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: hsl(324, 80%, 45%); stop-opacity: 1"
/>
</linearGradient>
</defs>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35497e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM22 7L8 15L22 23V7Z"
fill="url(#grad1)"
/>
</svg>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35497e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM8 23L22 15L8 7L8 23Z"
fill="url(#grad1)"
/>
</svg>
to move side
</p>
<p>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35497e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM7 8L15 22L23 8H7Z"
fill="url(#grad1)"
/>
</svg>
to move down
</p>
<p>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35497e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM23 22L15 8L7 22H23Z"
fill="url(#grad1)"
/>
</svg>
to rotate block
</p>
<p>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35497e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM13.5 24V16.5H6V13.5H13.5V6H16.5V13.5H24V16.5H16.5V24H13.5Z"
fill="url(#grad1)"
/>
</svg>
<svg class="key-img" width="30" height="30" viewBox="0 0 30 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 0L4.99999 2.42988e-05C2.23857 2.76538e-05 0 2.23861 0 5.00003V25C0 27.7614 2.23858 30 5 30H25C27.7614 30 30 27.7614 30 25V5C30 2.23857 27.7614 -3.35496e-06 25 0ZM8 2.99999H22C24.7614 2.99999 27 5.23857 27 7.99999V22C27 24.7614 24.7614 27 22 27H8C5.23858 27 3 24.7614 3 22V7.99999C3 5.23857 5.23858 2.99999 8 2.99999ZM6 16.5H24V13.5H6V16.5Z"
fill="url(#grad1)"
/>
</svg>
to change level
</p>
<p>
<svg class="key-img" width="90" height="30" viewBox="0 0 90 30">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5 0C2.23858 0 0 2.23858 0 5V25C0 27.7614 2.23858 30 5 30H85C87.7614 30 90 27.7614 90 25V5C90 2.23858 87.7614 0 85 0H5ZM3 22C3 24.7614 5.23858 27 8 27H82C84.7614 27 87 24.7614 87 22V8C87 5.23858 84.7614 3 82 3H8C5.23858 3 3 5.23858 3 8V22ZM31.5 18V21.5H58.5V18H61.5V23V24.5H60H30H28.5V23V18H31.5Z"
fill="url(#grad1)"
/>
</svg>
to start a game!
</p>
<svg class="x-btn" width="15" height="15" viewBox="0 0 15 15">
<g clip-path="url(#clip0)">
<line
x1="15"
y1="0"
x2="0"
y2="15"
stroke="white"
stroke-width="5"
/>
<line
x1="0"
y1="0"
x2="15"
y2="15"
stroke="white"
stroke-width="5"
/>
</g>
</svg>
</div>
</div>
</div>
</div>
<img src="img/allFrames.png" id="clearEffectIMG" class="d-none" />
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="scripts/firestore.js"></script>
<script src="scripts/layout.js"></script>
<script src="scripts/constants.js"></script>
<script src="scripts/block.js"></script>
<script src="scripts/game.js"></script>
<script src="scripts/highscore.js"></script>
<script src="scripts/clearEffect.js"></script>
<script src="scripts/tetris.js"></script>
<script src="scripts/mobileSteering.js"></script>
</body>
</html>