Tetris/index.html at master · Quickz/Tetris · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tetris</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
	<div id="container">
		<div id="left-ui">
			<span id="score" hidden>Score: 0</span> <br>
			<span id="speed" hidden>Speed: 100%</span>
			<span id="time" hidden>Time: 00:00:00</span>
		</div>
		<div id="game">
			<div id="title">Tetris</div>
			<div id="title2" hidden>Controls</div>
			<div id="controls" hidden>
				<p>Up: rotate</p>
				<p>Right: move right</p>
				<p>Left: move left</p>
				<p>Down: move down</p>
				<p>Space: drop figure</p>
				<p>R: restart</p>
				<p>P: pause</p>
				<p>Esc - return/pause</p>
			</div>
			<div id="score-list" hidden>
				<ol>
					<li id="li0">null</li>
					<li id="li1">null</li>
					<li id="li2">null</li>
					<li id="li3">null</li>
					<li id="li4">null</li>
					<li id="li5">null</li>
					<li id="li6">null</li>
					<li id="li7">null</li>
					<li id="li8">null</li>
					<li id="li9">null</li>
				</ol>
			</div>
			<button id="start" autofocus>Start</button>
			<button id="scores-btn">Scores</button>
			<button id="info">Info</button>
			<button id="reset" hidden>Reset</button>
			<button id="back" hidden>Back</button>
			<div id="notification" hidden>Game Over!</div>
			<div id="notification2" hidden>Press [R] to<br>try again</div>
			<div id="warn-container">
				<div id="warning" hidden>Are you sure you want to restart?</div>
				<button id="yes-btn" hidden>Yes</button><button id="no-btn" hidden>No</button>
			</div>
			<canvas width="170" height="340" id="map"></canvas>
		</div>
		<div id="right-ui">
			<span id="next-txt">Up Next</span>
			<canvas id="next1" width="85" height="85"></canvas>
			<canvas id="next2" width="85" height="85"></canvas>
			<canvas id="next3" width="85" height="85"></canvas>
			<!--<span id="saved-txt">Saved</span>
			<canvas id="saved" width="85" height="85"></canvas> -->
		</div>
	</div>
	<script src="main.js"></script>
</body>
</html>