-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
161 lines (147 loc) · 4.86 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
<!DOCTYPE html>
<html>
<head>
<title>Tetris Game</title>
<meta name="description" content="A free puzzle tetris game.">
<meta name="keywords" content="game, games, puzzle, falling blocks, high score, tetris">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen"charset="utf-8">
<!-- <script src="javascripts/base_min.js"></script>
<script src="javascripts/localStorage_min.js"></script>
<script src="javascripts/Piece_min.js"></script>
<script src="javascripts/Board_min.js"></script>
<script src="javascripts/main_min.js"></script> -->
<script src="javascripts/base.js"></script>
<script src="javascripts/localStorage.js"></script>
<script src="javascripts/Piece.js"></script>
<script src="javascripts/Board.js"></script>
<script src="javascripts/main.js"></script>
<!-- <script src="javascripts/browserDetect.js"></script> -->
</head>
<body>
<div id="main">
<img id="blockimg" src="images/blocks.png"/>
<img id="projection" src="images/projection.png" />
<canvas id="canvas" height="440", width="200"></canvas>
<canvas id="visible-canvas" height="400" width="200" style="float:left;" onkeydown="tetris.Keyborad.onKeyDown(event);"></canvas>
<aside>
<fieldset>
<legend>Top 10 best recording:</legend>
<ol id="listScores">
<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>
</fieldset>
<div class="smallSpace">
</div>
<fieldset id="contact">
<legend>Contact:</legend>
<div id="creator">
Programmed by <a href="http://daihuaprofile.appspot.com/">Daihua Ye</a><br/>
</div>
<div id="code">
Get the code from <a href="https://github.com/Rayomnd/tetrisgame">github</a>
</div>
</fieldset>
</aside>
<div id="detail">
<fieldset>
<legend>Your Scores:</legend>
<div id="score_container">
Score:
<span id="score">0</span>
</div>
<div id="level_container">
Level:
<span id="level">0</span>
</div>
<div id="speed_container">
Speed:
<span id="speed">800</span> milliseconds/move
</div>
</fieldset>
<div class="smallSpace">
</div>
<fieldset>
<legend>Next Piece:</legend>
<div id="nextpiece">
<canvas id="preview" height="80" width="80"></canvas>
<!-- <canvas id="previewTemp" height="80" width="80"></canvas> -->
</div>
</fieldset>
<div class="smallSpace">
</div>
<div id="instruction">
<fieldset>
<legend>Instruction:</legend>
Rotation: <b>Up</b> key<br/>
Left: <b>Left</b> key<br/>
Right: <b>Right</b> key<br/>
Down: <b>Down</b> key<br/>
Fall: <b>Space</b> key<br/>
Pause: <b>P</b> key<br/>
Restart: <b>R</b> key<br/>
</fieldset>
</div>
<div class="smallSpace">
</div>
<div id="pause">
<input type="button" onclick="tetris.pausegame()" value="Pause Game" id="pausebutton"/> |
<input type="button" onclick="tetris.restartgame()" value="Restart Game" id="restartgame"/>
</div>
</div>
</div>
<div id="gameover"></div>
<div id="pausescene"></div>
<script>
var buffer = document.getElementById("canvas");
var canvas = document.getElementById("visible-canvas");
var preview = document.getElementById("preview");
// var previewTemp = document.getElementById("previewTemp");
var gameScore = document.getElementById('score');
var restartMe = document.getElementById('restartgame');
var pauseMe = document.getElementById('pausebutton');
var gameLevel = document.getElementById('level');
var gameSpeed = document.getElementById('speed');
var listScores = document.getElementById('listScores');
var blockImg = document.getElementById('blockimg');
var projectionImg = document.getElementById('projection');
// Get the game over element
var gameOver = document.getElementById('gameover');
// pause scene
var pauseScene = document.getElementById('pausescene');
var buffer_ctx = buffer.getContext("2d");
var ctx = canvas.getContext("2d");
var preview_ctx = preview.getContext("2d");
// var previewTemp_ctx = previewTemp.getContext("2d");
var tetromino = new tetris.Tetromino();
var nextTetromino = new tetris.Tetromino();
var projection = new tetris.Tetromino();
// var blockImg = new Image();
// BrowserDetect.init();
// ctx.drawImage(blockImg, 0, 0);
// setTimeout("tetris.restartgame()", 1000);
// console.log(BrowserDetect.browser);
blockImg.onload = function() {
tetris.restartgame();
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22265295-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>