wok annotate jstetris/stuff/index.html @ rev 14137

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