wok diff jstetris/stuff/index.html @ rev 22920
gtk+3 with cups disabled
| author | Hans-G?nter Theisgen |
|---|---|
| date | Mon Feb 24 16:38:08 2020 +0100 (2020-02-24) |
| parents | |
| children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/jstetris/stuff/index.html Mon Feb 24 16:38:08 2020 +0100 1.3 @@ -0,0 +1,362 @@ 1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1.5 +<html xmlns="http://www.w3.org/1999/xhtml"> 1.6 +<head> 1.7 +<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 1.8 +<title>JsTetris - javascript tetris game</title> 1.9 +<style type="text/css"> 1.10 +html, body { height: 100%; margin: 0; padding: 0; } 1.11 +body { 1.12 + background: #E1D4C0; 1.13 +} 1.14 +body, table { 1.15 + font: 11px tahoma; 1.16 + color: #826C55; 1.17 +} 1.18 + 1.19 +/*** tetris 168,308 ***/ 1.20 + 1.21 +#tetris { 1.22 + position: relative; 1.23 + width: 300px; 1.24 + height: 310px; 1.25 + border: 1px solid #BAA68E; 1.26 + background: #ffffff; 1.27 + margin: 0 auto; 1.28 +} 1.29 + 1.30 +/*** left ***/ 1.31 + 1.32 +#tetris .left { 1.33 + background: #F5EDE3; 1.34 + position: absolute; 1.35 + width: 130px; 1.36 + height: 100%; 1.37 + left: 0px; 1.38 + top: 0px; 1.39 +} 1.40 +#tetris .left h1 { 1.41 + font-size: 11px; 1.42 + text-align: center; 1.43 + margin-top: 10px; 1.44 + margin-bottom: 10px; 1.45 +} 1.46 +#tetris .left h1 a { 1.47 + color: #3366CC; 1.48 + text-decoration: none; 1.49 +} 1.50 +#tetris .left h1 a:hover { 1.51 + color: #FF6600; 1.52 + text-decoration: none; 1.53 +} 1.54 + 1.55 +/* menu */ 1.56 + 1.57 +#tetris .left .menu { 1.58 + text-align: center; 1.59 +} 1.60 +#tetris .left input { 1.61 + font: 10px tahoma; 1.62 + color: #333333; 1.63 + text-transform: uppercase; 1.64 + background: #EAE0D1; 1.65 +} 1.66 +#tetris .left .menu input { 1.67 + width: 90px; 1.68 +} 1.69 + 1.70 +/* keyboard */ 1.71 + 1.72 +#tetris .left .keyboard { 1.73 + position: absolute; 1.74 + top: 163px; 1.75 + left: 32px; 1.76 + width: 85px; 1.77 + height: 55px; 1.78 + overflow: visible; 1.79 + display: none; 1.80 +} 1.81 +#tetris .left .keyboard input { 1.82 + font: 11px tahoma; 1.83 + width: 25px; 1.84 + height: 25px; 1.85 + padding-bottom: 2px; 1.86 + text-transform: none; 1.87 +} 1.88 +* html #tetris .left .keyboard input { 1.89 + padding-left: 1px; 1.90 +} 1.91 +#tetris .left .keyboard .up { 1.92 + position: absolute; 1.93 + left: 30px; 1.94 + top: 0px; 1.95 + width: 30px; 1.96 + height: 30px; 1.97 +} 1.98 +#tetris .left .keyboard .up input { 1.99 + font: 15px tahoma; 1.100 + padding-top: 3px; 1.101 +} 1.102 +#tetris .left .keyboard .down { 1.103 + position: absolute; 1.104 + left: 30px; 1.105 + top: 30px; 1.106 + width: 30px; 1.107 + height: 30px; 1.108 +} 1.109 +#tetris .left .keyboard .down input { 1.110 + font: 14px tahoma; 1.111 +} 1.112 +#tetris .left .keyboard .left { 1.113 + position: absolute; 1.114 + left: 0px; 1.115 + top: 30px; 1.116 + width: 30px; 1.117 + height: 30px; 1.118 +} 1.119 +#tetris .left .keyboard .right { 1.120 + position: absolute; 1.121 + left: 60px; 1.122 + top: 30px; 1.123 + width: 30px; 1.124 + height: 30px; 1.125 +} 1.126 + 1.127 +/* game over */ 1.128 + 1.129 +#tetris-gameover { 1.130 + position: absolute; 1.131 + width: 100%; 1.132 + top: 50%; 1.133 + text-align: center; 1.134 + font-weight: bold; 1.135 + display: none; 1.136 +} 1.137 + 1.138 +/* next puzzle */ 1.139 +#tetris-nextpuzzle { 1.140 + position: absolute; 1.141 + top: 49%; 1.142 + left: 35%; 1.143 + background: #ffffff; 1.144 + overflow: visible; 1.145 + display: none; 1.146 +} 1.147 + 1.148 +/* stats */ 1.149 + 1.150 +#tetris .left .stats { 1.151 + position: absolute; 1.152 + left: 35px; 1.153 + bottom: 10px; 1.154 +} 1.155 +#tetris .stats td { padding-bottom: 1px; } 1.156 + 1.157 +#tetris .stats .level { text-align: right; padding-right: 10px; } 1.158 +#tetris-stats-level { font-weight: bold; } 1.159 + 1.160 +#tetris .stats .time { text-align: right; padding-right: 10px; } 1.161 +#tetris-stats-time { font-weight: bold; } 1.162 + 1.163 +#tetris .stats .apm { text-align: right; padding-right: 10px; } 1.164 +#tetris-stats-apm { font-weight: bold; } 1.165 + 1.166 +#tetris .stats .lines { text-align: right; padding-right: 10px; } 1.167 +#tetris-stats-lines { font-weight: bold; } 1.168 + 1.169 +#tetris .stats .score { text-align: right; padding-right: 10px; } 1.170 +#tetris-stats-score { font-weight: bold; } 1.171 + 1.172 +/*** area ***/ 1.173 + 1.174 +#tetris-area { 1.175 + background: #FFFFFF; 1.176 + position: absolute; 1.177 + width: 168px; 1.178 + height: 308px; 1.179 + left: 131px; 1.180 + top: 1px; 1.181 + overflow: hidden; 1.182 +} 1.183 +#tetris .block0, 1.184 +#tetris .block1, 1.185 +#tetris .block2, 1.186 +#tetris .block3, 1.187 +#tetris .block4, 1.188 +#tetris .block5, 1.189 +#tetris .block6 { 1.190 + position: absolute; 1.191 + width: 13px; 1.192 + height: 13px; 1.193 + border: 0.5px solid #ffffff; 1.194 + /* with margin 0.5px there were problems with offsetLeft and offsetTop */ 1.195 +} 1.196 +#tetris .block0, 1.197 +#tetris .block1 { 1.198 + background: #6699FF; 1.199 +} 1.200 +#tetris .block2, 1.201 +#tetris .block3 { 1.202 + background: #FF6600; 1.203 +} 1.204 +#tetris .block4 { 1.205 + background: #FFAC1C; 1.206 +} 1.207 +#tetris .block5 { 1.208 + background: #BAA68E; 1.209 +} 1.210 +#tetris .block6 { 1.211 + background: #FF0000; 1.212 +} 1.213 + 1.214 +/*** window ***/ 1.215 + 1.216 +#tetris .window { 1.217 + background: #EFE8DE; 1.218 + position: absolute; 1.219 + width: 168px; 1.220 + height: 308px; 1.221 + left: 131px; 1.222 + top: 1px; 1.223 + z-index: 5; 1.224 + display: none; 1.225 +} 1.226 +#tetris .window .top { 1.227 + position: relative; 1.228 + background: #EAE0D1; 1.229 + color: #666666; 1.230 + font: 10px tahoma; 1.231 + letter-spacing: +1px; 1.232 + height: 20px; 1.233 + line-height: 20px; 1.234 + vertical-align: middle; 1.235 + border-bottom: 1px solid #ffffff; 1.236 + text-indent: 10px; 1.237 +} 1.238 +#tetris .window .top .close { 1.239 + position: absolute; 1.240 + background: #EAE0D1; 1.241 + font: 11px verdana; 1.242 + font-weight: bold; 1.243 + right: 0px; 1.244 + top: 0px; 1.245 + height: 20px; 1.246 + line-height: 19px; 1.247 + text-indent: 7px; 1.248 + width: 21px; 1.249 + border-left: 1px solid #ffffff; 1.250 + cursor: pointer; 1.251 +} 1.252 +#tetris .window .top .close:hover { 1.253 + background: #EFE8DE; 1.254 +} 1.255 +#tetris .window .content { 1.256 + font: 10px tahoma; 1.257 + margin: 10px; 1.258 +} 1.259 +#tetris .window .content table { 1.260 + font: 10px tahoma; 1.261 +} 1.262 + 1.263 +</style> 1.264 +<script type="text/javascript" src="JsTetris.js"></script> 1.265 +</head> 1.266 +<body> 1.267 + 1.268 +<table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td valign="middle"> 1.269 +<div id="tetris"> 1.270 + <div class="left"> 1.271 + <h1>JsTetris 1.1.0</h1> 1.272 + <div class="menu"> 1.273 + <div><input type="button" value="New Game" id="tetris-menu-start" /></div> 1.274 + <div><input type="button" value="Reset" id="tetris-menu-reset" /></div> 1.275 + <div><input type="button" value="Help" id="tetris-menu-help" /></div> 1.276 + <div><input type="button" value="Highscores" id="tetris-menu-highscores" /></div> 1.277 + </div> 1.278 + <div class="keyboard"> 1.279 + <div class="up"><input type="button" value="^" id="tetris-keyboard-up" /></div> 1.280 + <div class="down"><input type="button" value="v" id="tetris-keyboard-down" /></div> 1.281 + <div class="left"><input type="button" value="<" id="tetris-keyboard-left" /></div> 1.282 + <div class="right"><input type="button" value=">" id="tetris-keyboard-right" /></div> 1.283 + </div> 1.284 + <div id="tetris-nextpuzzle"></div> 1.285 + <div id="tetris-gameover">Game Over</div> 1.286 + <div class="stats"> 1.287 + <table cellspacing="0" cellpadding="0"> 1.288 + <tr> 1.289 + <td class="level">Level:</td> 1.290 + <td><span id="tetris-stats-level">1</span></td> 1.291 + </tr> 1.292 + <tr> 1.293 + <td class="score">Score:</td> 1.294 + <td><span id="tetris-stats-score">0</span></td> 1.295 + </tr> 1.296 + <tr> 1.297 + <td class="lines">Lines:</td> 1.298 + <td><span id="tetris-stats-lines">0</span></td> 1.299 + </tr> 1.300 + <tr> 1.301 + <td class="apm">APM:</td> 1.302 + <td><span id="tetris-stats-apm">0</span></td> 1.303 + </tr> 1.304 + <tr> 1.305 + <td class="time">Time:</td> 1.306 + <td><span id="tetris-stats-time">0</span></td> 1.307 + </tr> 1.308 + </table> 1.309 + </div> 1.310 + </div> 1.311 + <div id="tetris-area"></div> 1.312 + <div id="tetris-help" class="window"> 1.313 + <div class="top"> 1.314 + Help <span id="tetris-help-close" class="close">x</span> 1.315 + </div> 1.316 + <div class="content"> 1.317 + <b>Controllers:</b> <br /> 1.318 + up - rotate <br /> 1.319 + down - move down <br /> 1.320 + left - move left <br /> 1.321 + right - move right <br /> 1.322 + space - fall to the bottom <br /> 1.323 + n - new game <br /> 1.324 + r - reset <br /> 1.325 + <br /> 1.326 + <b>Rules:</b> <br /> 1.327 + 1) Puzzle speed = 80+700/level miliseconds, the smaller value the faster puzzle falls <br /> 1.328 + 2) If puzzles created in current level >= 10+level*2 then increase level <br /> 1.329 + 3) After puzzle falling score is increased by 1000*level*linesRemoved <br /> 1.330 + 4) Each "down" action increases score by 5+level (pressing space counts as multiple down actions) 1.331 + </div> 1.332 + </div> 1.333 + <div id="tetris-highscores" class="window"> 1.334 + <div class="top"> 1.335 + Highscores <span id="tetris-highscores-close" class="close">x</span> 1.336 + </div> 1.337 + <div class="content"> 1.338 + <div id="tetris-highscores-content"></div> 1.339 + <br /> 1.340 + Note: these scores are kept in cookies, they are only visible to your computer, other players that visit this page see their own scores. 1.341 + </div> 1.342 + </div> 1.343 +</div> 1.344 + 1.345 +</td></tr></table> 1.346 + 1.347 +<script type="text/javascript"> 1.348 + var tetris = new Tetris(); 1.349 + tetris.unit = 14; 1.350 + tetris.areaX = 12; 1.351 + tetris.areaY = 22; 1.352 +</script> 1.353 + 1.354 +<!-- Default Insight Tag --> 1.355 +<script type="text/javascript"> 1.356 + var _bizo_data_partner_id = "131"; 1.357 +</script> 1.358 +<script type="text/javascript"> 1.359 + var _bizo_p = (("https:" == document.location.protocol) ? "https://sjs." : "http://js."); 1.360 + 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")); 1.361 +</script> 1.362 + 1.363 + 1.364 +</body> 1.365 +</html> 1.366 \ No newline at end of file