wok-current view jstetris/stuff/index.html @ rev 13925
cssed: fix build
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Sat Jan 26 03:04:33 2013 +0000 (2013-01-26) |
| parents | |
| children |
line source
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5 <title>JsTetris - javascript tetris game</title>
6 <style type="text/css">
7 html, body { height: 100%; margin: 0; padding: 0; }
8 body {
9 background: #E1D4C0;
10 }
11 body, table {
12 font: 11px tahoma;
13 color: #826C55;
14 }
16 /*** tetris 168,308 ***/
18 #tetris {
19 position: relative;
20 width: 300px;
21 height: 310px;
22 border: 1px solid #BAA68E;
23 background: #ffffff;
24 margin: 0 auto;
25 }
27 /*** left ***/
29 #tetris .left {
30 background: #F5EDE3;
31 position: absolute;
32 width: 130px;
33 height: 100%;
34 left: 0px;
35 top: 0px;
36 }
37 #tetris .left h1 {
38 font-size: 11px;
39 text-align: center;
40 margin-top: 10px;
41 margin-bottom: 10px;
42 }
43 #tetris .left h1 a {
44 color: #3366CC;
45 text-decoration: none;
46 }
47 #tetris .left h1 a:hover {
48 color: #FF6600;
49 text-decoration: none;
50 }
52 /* menu */
54 #tetris .left .menu {
55 text-align: center;
56 }
57 #tetris .left input {
58 font: 10px tahoma;
59 color: #333333;
60 text-transform: uppercase;
61 background: #EAE0D1;
62 }
63 #tetris .left .menu input {
64 width: 90px;
65 }
67 /* keyboard */
69 #tetris .left .keyboard {
70 position: absolute;
71 top: 163px;
72 left: 32px;
73 width: 85px;
74 height: 55px;
75 overflow: visible;
76 display: none;
77 }
78 #tetris .left .keyboard input {
79 font: 11px tahoma;
80 width: 25px;
81 height: 25px;
82 padding-bottom: 2px;
83 text-transform: none;
84 }
85 * html #tetris .left .keyboard input {
86 padding-left: 1px;
87 }
88 #tetris .left .keyboard .up {
89 position: absolute;
90 left: 30px;
91 top: 0px;
92 width: 30px;
93 height: 30px;
94 }
95 #tetris .left .keyboard .up input {
96 font: 15px tahoma;
97 padding-top: 3px;
98 }
99 #tetris .left .keyboard .down {
100 position: absolute;
101 left: 30px;
102 top: 30px;
103 width: 30px;
104 height: 30px;
105 }
106 #tetris .left .keyboard .down input {
107 font: 14px tahoma;
108 }
109 #tetris .left .keyboard .left {
110 position: absolute;
111 left: 0px;
112 top: 30px;
113 width: 30px;
114 height: 30px;
115 }
116 #tetris .left .keyboard .right {
117 position: absolute;
118 left: 60px;
119 top: 30px;
120 width: 30px;
121 height: 30px;
122 }
124 /* game over */
126 #tetris-gameover {
127 position: absolute;
128 width: 100%;
129 top: 50%;
130 text-align: center;
131 font-weight: bold;
132 display: none;
133 }
135 /* next puzzle */
136 #tetris-nextpuzzle {
137 position: absolute;
138 top: 49%;
139 left: 35%;
140 background: #ffffff;
141 overflow: visible;
142 display: none;
143 }
145 /* stats */
147 #tetris .left .stats {
148 position: absolute;
149 left: 35px;
150 bottom: 10px;
151 }
152 #tetris .stats td { padding-bottom: 1px; }
154 #tetris .stats .level { text-align: right; padding-right: 10px; }
155 #tetris-stats-level { font-weight: bold; }
157 #tetris .stats .time { text-align: right; padding-right: 10px; }
158 #tetris-stats-time { font-weight: bold; }
160 #tetris .stats .apm { text-align: right; padding-right: 10px; }
161 #tetris-stats-apm { font-weight: bold; }
163 #tetris .stats .lines { text-align: right; padding-right: 10px; }
164 #tetris-stats-lines { font-weight: bold; }
166 #tetris .stats .score { text-align: right; padding-right: 10px; }
167 #tetris-stats-score { font-weight: bold; }
169 /*** area ***/
171 #tetris-area {
172 background: #FFFFFF;
173 position: absolute;
174 width: 168px;
175 height: 308px;
176 left: 131px;
177 top: 1px;
178 overflow: hidden;
179 }
180 #tetris .block0,
181 #tetris .block1,
182 #tetris .block2,
183 #tetris .block3,
184 #tetris .block4,
185 #tetris .block5,
186 #tetris .block6 {
187 position: absolute;
188 width: 13px;
189 height: 13px;
190 border: 0.5px solid #ffffff;
191 /* with margin 0.5px there were problems with offsetLeft and offsetTop */
192 }
193 #tetris .block0,
194 #tetris .block1 {
195 background: #6699FF;
196 }
197 #tetris .block2,
198 #tetris .block3 {
199 background: #FF6600;
200 }
201 #tetris .block4 {
202 background: #FFAC1C;
203 }
204 #tetris .block5 {
205 background: #BAA68E;
206 }
207 #tetris .block6 {
208 background: #FF0000;
209 }
211 /*** window ***/
213 #tetris .window {
214 background: #EFE8DE;
215 position: absolute;
216 width: 168px;
217 height: 308px;
218 left: 131px;
219 top: 1px;
220 z-index: 5;
221 display: none;
222 }
223 #tetris .window .top {
224 position: relative;
225 background: #EAE0D1;
226 color: #666666;
227 font: 10px tahoma;
228 letter-spacing: +1px;
229 height: 20px;
230 line-height: 20px;
231 vertical-align: middle;
232 border-bottom: 1px solid #ffffff;
233 text-indent: 10px;
234 }
235 #tetris .window .top .close {
236 position: absolute;
237 background: #EAE0D1;
238 font: 11px verdana;
239 font-weight: bold;
240 right: 0px;
241 top: 0px;
242 height: 20px;
243 line-height: 19px;
244 text-indent: 7px;
245 width: 21px;
246 border-left: 1px solid #ffffff;
247 cursor: pointer;
248 }
249 #tetris .window .top .close:hover {
250 background: #EFE8DE;
251 }
252 #tetris .window .content {
253 font: 10px tahoma;
254 margin: 10px;
255 }
256 #tetris .window .content table {
257 font: 10px tahoma;
258 }
260 </style>
261 <script type="text/javascript" src="JsTetris.js"></script>
262 </head>
263 <body>
265 <table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td valign="middle">
266 <div id="tetris">
267 <div class="left">
268 <h1>JsTetris 1.1.0</h1>
269 <div class="menu">
270 <div><input type="button" value="New Game" id="tetris-menu-start" /></div>
271 <div><input type="button" value="Reset" id="tetris-menu-reset" /></div>
272 <div><input type="button" value="Help" id="tetris-menu-help" /></div>
273 <div><input type="button" value="Highscores" id="tetris-menu-highscores" /></div>
274 </div>
275 <div class="keyboard">
276 <div class="up"><input type="button" value="^" id="tetris-keyboard-up" /></div>
277 <div class="down"><input type="button" value="v" id="tetris-keyboard-down" /></div>
278 <div class="left"><input type="button" value="<" id="tetris-keyboard-left" /></div>
279 <div class="right"><input type="button" value=">" id="tetris-keyboard-right" /></div>
280 </div>
281 <div id="tetris-nextpuzzle"></div>
282 <div id="tetris-gameover">Game Over</div>
283 <div class="stats">
284 <table cellspacing="0" cellpadding="0">
285 <tr>
286 <td class="level">Level:</td>
287 <td><span id="tetris-stats-level">1</span></td>
288 </tr>
289 <tr>
290 <td class="score">Score:</td>
291 <td><span id="tetris-stats-score">0</span></td>
292 </tr>
293 <tr>
294 <td class="lines">Lines:</td>
295 <td><span id="tetris-stats-lines">0</span></td>
296 </tr>
297 <tr>
298 <td class="apm">APM:</td>
299 <td><span id="tetris-stats-apm">0</span></td>
300 </tr>
301 <tr>
302 <td class="time">Time:</td>
303 <td><span id="tetris-stats-time">0</span></td>
304 </tr>
305 </table>
306 </div>
307 </div>
308 <div id="tetris-area"></div>
309 <div id="tetris-help" class="window">
310 <div class="top">
311 Help <span id="tetris-help-close" class="close">x</span>
312 </div>
313 <div class="content">
314 <b>Controllers:</b> <br />
315 up - rotate <br />
316 down - move down <br />
317 left - move left <br />
318 right - move right <br />
319 space - fall to the bottom <br />
320 n - new game <br />
321 r - reset <br />
322 <br />
323 <b>Rules:</b> <br />
324 1) Puzzle speed = 80+700/level miliseconds, the smaller value the faster puzzle falls <br />
325 2) If puzzles created in current level >= 10+level*2 then increase level <br />
326 3) After puzzle falling score is increased by 1000*level*linesRemoved <br />
327 4) Each "down" action increases score by 5+level (pressing space counts as multiple down actions)
328 </div>
329 </div>
330 <div id="tetris-highscores" class="window">
331 <div class="top">
332 Highscores <span id="tetris-highscores-close" class="close">x</span>
333 </div>
334 <div class="content">
335 <div id="tetris-highscores-content"></div>
336 <br />
337 Note: these scores are kept in cookies, they are only visible to your computer, other players that visit this page see their own scores.
338 </div>
339 </div>
340 </div>
342 </td></tr></table>
344 <script type="text/javascript">
345 var tetris = new Tetris();
346 tetris.unit = 14;
347 tetris.areaX = 12;
348 tetris.areaY = 22;
349 </script>
351 <!-- Default Insight Tag -->
352 <script type="text/javascript">
353 var _bizo_data_partner_id = "131";
354 </script>
355 <script type="text/javascript">
356 var _bizo_p = (("https:" == document.location.protocol) ? "https://sjs." : "http://js.");
357 document.write(unescape("%3Cscript src='" + _bizo_p + "bizographics.com/convert_data.js?partner_id=" + _bizo_data_partner_id + "' type='text/javascript'%3E%3C/script%3E"));
358 </script>
361 </body>
362 </html>