-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (89 loc) · 5.8 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
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Tetris</title>
<link rel="icon" type="image/png" href="src/img/favicon.png">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<div class='translucent-mask' id='translucent-mask'>
<div class='content-wrapper' id='content-wrapper'>
<div class='info-container menu-font' id='info-container'>
<h3 class='points-heading menu-font' id='points-description'>Points</h3>
<h3 class='points menu-font' id='points'>0</h3>
<h3 class='level menu-font' id='level'>Level 1</h3>
</div>
<div class='canvas-wrapper' id='canvas-wrapper'>
</div>
</div>
<div class='start-menu menu-font menu' id='start-menu'>
<h1 class='menu-description' id='tetris-id'>TETRIS</h1>
<button class='menu-button menu-font' id='instructions-button'>CONTROLS</button>
<button class='menu-button menu-font' id='options-main-button'>OPTIONS</button>
<button class='menu-button menu-font' id='new-game-button'>NEW GAME</button>
</div>
<div class='pause-menu menu-font' id='pause-menu'>
<h1 class='menu-description' id='paused-id'>PAUSED</h1>
<button class='menu-button menu-font' id='restart-button'>RESTART</button>
<button class='menu-button menu-font' id='options-pause-button'>OPTIONS</button>
<button class='menu-button menu-font' id='continue-button'>CONTINUE</button>
</div>
<div class='confirmation-menu menu-font' id='confirmation-menu'>
<h1 class='menu-description' id='restart-id'>RESTART?</h1>
<button class='menu-button menu-font' id='yes-button'>YES</button>
<button class='menu-button menu-font' id='no-button'>NO</button>
</div>
<div class='options-menu menu-font' id='options-menu'>
<h1 class='menu-description' id='options-id'>OPTIONS</h1>
<button class='menu-button menu-font' id='vibrate-button'>VIBRATION IS ON</button>
<button class='menu-button menu-font' id='sound-button' style='display: none;'>SOUND IS ON</button>
<button class='menu-button menu-font' id='back-options-button'>BACK</button>
<button class='menu-button menu-font' id='back-pause-options-button' style='display: none;'>BACK</button>
</div>
<div class='pause' id='pause'>
<img id='pause-button' class='pause-button' src="/src/img/bx-pause-circle.svg">
</div>
<div class='controls-menu menu-font'id='controls-menu'>
<h1 class='menu-description' id='controls-id'>CONTROLS</h1>
<button class='menu-button menu-font' id='mobile-controls-button'>MOBILE</button>
<button class='menu-button menu-font' id='desktop-controls-button'>DESKTOP</button>
<button class='menu-button menu-font' id='back-controls-button'>BACK</button>
</div>
<div class='mobile-controls-menu'id='mobile-controls-menu'>
<h3 class='menu-description menu-font'>MOBILE</h3>
<div class='list-wrapper'>
<p>Swiping the screen left or right will move your piece to the left or right.</p>
<p>Tapping the screen rotates the piece.</p>
<p>You can make the piece fall faster by performing a Hard Drop or a Soft Drop</p>
<p>A Hard Drop is performed by quickly swiping the screen down. This will lock your piece into place and you'll be given a new piece.</p>
<p>To Soft Drop slowly drag down on the screen. You can still move your piece when it makes contact with another piece or the bottom of the well for a short amount of time.</p>
<p>You can store a piece for later by swiping up on the screen. If another piece has already been stored you will switch the new piece for the stored piece</p>
<p>Your piece can't be switched out the same turn it was stored</p>
</div>
<button class='menu-button menu-font' id='mobile-controls-back-button'>BACK</button>
</div>
<div class='desktop-controls-menu menu-font'id='desktop-controls-menu'>
<h3 class='menu-description menu-font'>DESKTOP</h3>
<div class='list-wrapper'>
<p>Pressing the left or right arrow keys will move your piece to the left or right.</p>
<p>Pressing the up arrow key rotates the piece.</p>
<p>You can make the piece fall faster by performing a Hard Drop or a Soft Drop</p>
<p>A Hard Drop is performed by pressing space bar. This will lock your piece into place and you'll be given a new piece.</p>
<p>To Soft Drop press the down arrow key. You can still move your piece when it makes contact with another piece or the bottom of the well for a short amount of time.</p>
<p>You can store a piece for later by pressing C on the key board. If another piece has already been stored you will switch the new piece for the stored piece</p>
<p>Your piece can't be switched out the same turn it was stored</p>
</div>
<button class='menu-button menu-font' id='desktop-controls-back-button'>BACK</button>
</div>
<div class='game-over-menu menu-font' id='game-over-menu'>
<h1 class='menu-description' id='game-over-id'>GAME OVER</h1>
<h3 class='menu-description' id='score-id'>SCORE: 10</h3>
<button class='menu-button menu-font' id='new-game-over-button'>NEW GAME</button>
</div>
</div>
</body>
<script type="module" src="main.js"></script>
</html>