Dateigrösse: 5.44 kb
1 <style> 2 @import url('https://fonts.googleapis.com/css?family=Meddon'); 3 DIV.flexTitle { 4 display: flex; 5 height: 100px; 6 justify-content: center; 7 align-items: center; 8 border: 0px dotted crimson; 9 margin: 0 20vh 2vh 0; 10 } 11 DIV.flexCont { 12 display: flex; 13 height: 400px; 14 justify-content: center; 15 align-items: top; 16 border: 0px dashed navy; 17 margin: 0 20vh 0 0; 18 } 19 </style> 20 21 <link rel="stylesheet" type="text/css" href="css/Tetris.css" /> 22 23 <script type="text/javascript" src="js/prototype.js"></script> 24 <script type="text/javascript" src="js/Tetris.js"></script> 25 26 27 <div class="flexTitle"> 28 <h1 style="font-family:'Meddon',cursive; font-weight:bolder; font-size:20pt;">Enjoy playing Tetris</h1> 29 </div> 30 31 <!-- 32 <div id="list_champs"></div> 33 --> 34 35 <div class="flexCont"> 36 <table cellspacing="0" cellpadding="0" class="cont" style="height: max-content;"> 37 <tr> 38 <td valign="middle"> 39 40 <div id="tetris"> 41 <div class="left"> 42 <h1><a href="#">JsTetris</a></h1> 43 <div class="menu"> 44 <div><input type="button" value="Start" id="tetris-menu-start" /></div> 45 <div><input type="button" value="Reset" id="tetris-menu-reset" /></div> 46 <div><input type="button" value="Hilfe" id="tetris-menu-help" /></div> 47 <div><input type="button" value="Highscore" id="tetris-menu-highscores" /></div> 48 </div> 49 50 <div class="keyboard" id="tetris-keyboard"> 51 <div class="up"><input type="button" value="^" id="tetris-keyboard-up" /></div> 52 <div class="down"><input type="button" value="v" id="tetris-keyboard-down" /></div> 53 <div class="links"><input type="button" value="<" id="tetris-keyboard-left" /></div> 54 <div class="right"><input type="button" value=">" id="tetris-keyboard-right" /></div> 55 </div> 56 57 <!-- 58 <div class="tastatur" id="tetris-tastatur"> 59 <div class="up"><img src="img/key-up.gif" width="14" height="14" alt="" id="tetris-keyboard-up" /></div> 60 <div class="down"><img src="img/key-down.gif" width="14" height="14" alt="" id="tetris-keyboard-down" /></div> 61 <div class="left"><img src="img/key-left.gif" width="14" height="14" alt="" id="tetris-keyboard-left" /></div> 62 <div class="right"><img src="img/key-right.gif" width="14" height="14" alt="" id="tetris-keyboard-right" /></div> 63 <div class="space"><img src="img/key-space.gif" width="44" height="13" alt="" id="tetris-keyboard-space" class="leer" /></div> 64 </div> 65 --> 66 67 <div id="tetris-nextpuzzle"></div> 68 69 <div id="tetris-gameover">Game Over</div> 70 <div class="stats" style="font-size: 12px;"> 71 <div class="stat level">Level:</div><div class="statvalue" id="tetris-stats-level">1</div> 72 <div class="stat score">Score:</div><div class="statvalue" id="tetris-stats-score">0</div> 73 <div class="stat lines">Reihen:</div><div class="statvalue" id="tetris-stats-lines">0</div> 74 <div class="stat apm">APM:</div><div class="statvalue" id="tetris-stats-apm">0</div> 75 <div class="stat time">Zeit:</div><div class="statvalue" id="tetris-stats-time">0</div> 76 </div> 77 </div> 78 79 80 <div id="tetris-area"></div> 81 <div id="tetris-help" class="window"> 82 <div class="top"> 83 Hilfe <span id="tetris-help-close" class="close">x</span> 84 </div> 85 <div class="content"> 86 <div id="tetris-keys"> 87 <div class="h5" style="padding-top:5px;">Tastatur</div> 88 <table cellspacing="2" cellpadding="0" class="keys"> 89 <tr> 90 <td class="key">Drehen:</td> 91 <td></td> 92 <td><img src="img/key-up.gif" width="16" height="16" alt=""></td> 93 <td></td> 94 </tr> 95 <tr> 96 <td class="key">Bewegen:</td> 97 <td><img src="img/key-left.gif" width="16" height="16" alt=""></td> 98 <td><img src="img/key-down.gif" width="16" height="16" alt=""></td> 99 <td><img src="img/key-right.gif" width="16" height="16" alt=""></td> 100 </tr> 101 <tr> 102 <td class="key">Fallen:</td> 103 <td colspan="3"> 104 <img src="img/key-space.gif" width="56" height="13" alt=""> 105 </td> 106 </tr> 107 </table> 108 </div> 109 110 <p> </p> 111 112 <div class="h5">Ziel</div> 113 <p style="margin-bottom:3pt; line-height:144%;">1) Reihe vollständig und ohne Lücken auffüllen</p> 114 <p style="margin-bottom:3pt; line-height:144%;">2) Ist eine Reihe gefüllt, verschwindet sie</p> <!-- --> 115 <p style="margin-bottom:1pt; line-height:144%;">3) Je länger ein Spiel dauert, umso schneller fallen die Teile</p> 116 </div> 117 </div> 118 <div id="tetris-highscores" class="window"> 119 <div class="top"> 120 Highscore <span id="tetris-highscores-close" class="close">x</span> 121 </div> 122 <div class="content"> 123 <div id="tetris-highscores-content"></div> 124 <br /> 125 </div> 126 </div> 127 </div> 128 129 </td> 130 </tr> 131 </table> 132 </div> 133 134 <script type="text/javascript"> 135 var tetris = new Tetris(); 136 tetris.unit = 14; 137 tetris.areaX = 12; 138 tetris.areaY = 22; 139 </script> 140