Quelltext der Datei: http://www.michaelster.ch/lernen/__new__tetris.htm

Dateigrösse: 5.44 kb

[Anzeige mit Zeilennummern]

<style>
@import url('https://fonts.googleapis.com/css?family=Meddon');
DIV.flexTitle {
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
  border: 0px dotted crimson;
  margin: 0 20vh 2vh 0;
}
DIV.flexCont {
  display: flex;
  height: 400px;
  justify-content: center;
  align-items: top;
  border: 0px dashed navy;
  margin: 0 20vh 0 0;
}
</style>

<link rel="stylesheet" type="text/css" href="css/Tetris.css" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/Tetris.js"></script>


<div class="flexTitle">
  <h1 style="font-family:'Meddon',cursive; font-weight:bolder; font-size:20pt;">Enjoy playing Tetris</h1>
</div>

<!--
<div id="list_champs"></div>
-->

<div class="flexCont">
 <table cellspacing="0" cellpadding="0" class="cont" style="height: max-content;">
  <tr>
    <td valign="middle">

      <div id="tetris">
        <div class="left">
            <h1><a href="#">JsTetris</a></h1>
            <div class="menu">
                <div><input type="button" value="Start" id="tetris-menu-start" /></div>
                <div><input type="button" value="Reset" id="tetris-menu-reset" /></div>
                <div><input type="button" value="Hilfe" id="tetris-menu-help" /></div>
                <div><input type="button" value="Highscore" id="tetris-menu-highscores" /></div>
            </div>
            
            <div class="keyboard" id="tetris-keyboard">
                <div class="up"><input type="button" value="^" id="tetris-keyboard-up" /></div>
                <div class="down"><input type="button" value="v" id="tetris-keyboard-down" /></div>
                <div class="links"><input type="button" value="&lt;" id="tetris-keyboard-left" /></div>
                <div class="right"><input type="button" value="&gt;" id="tetris-keyboard-right" /></div>
            </div>
            
            <!--
            <div class="tastatur" id="tetris-tastatur">
                <div class="up"><img src="img/key-up.gif" width="14" height="14" alt="" id="tetris-keyboard-up" /></div>
                <div class="down"><img src="img/key-down.gif" width="14" height="14" alt="" id="tetris-keyboard-down" /></div>
                <div class="left"><img src="img/key-left.gif" width="14" height="14" alt="" id="tetris-keyboard-left" /></div>
                <div class="right"><img src="img/key-right.gif" width="14" height="14" alt="" id="tetris-keyboard-right" /></div>
                <div class="space"><img src="img/key-space.gif" width="44" height="13" alt="" id="tetris-keyboard-space" class="leer" /></div>
            </div>
            -->
            
            <div id="tetris-nextpuzzle"></div>
            
            <div id="tetris-gameover">Game Over</div>
            <div class="stats" style="font-size: 12px;">
               <div class="stat level">Level:</div><div class="statvalue" id="tetris-stats-level">1</div>
               <div class="stat score">Score:</div><div class="statvalue" id="tetris-stats-score">0</div>
               <div class="stat lines">Reihen:</div><div class="statvalue" id="tetris-stats-lines">0</div>
               <div class="stat apm">APM:</div><div class="statvalue" id="tetris-stats-apm">0</div>
               <div class="stat time">Zeit:</div><div class="statvalue" id="tetris-stats-time">0</div>
            </div>
        </div>
        
        
        <div id="tetris-area"></div>
        <div id="tetris-help" class="window">
            <div class="top">
                Hilfe <span id="tetris-help-close" class="close">x</span>
            </div>
            <div class="content">
              <div id="tetris-keys">
                <div class="h5" style="padding-top:5px;">Tastatur</div>
                <table cellspacing="2" cellpadding="0" class="keys">
                <tr>
                    <td class="key">Drehen:</td>
                    <td></td>
                    <td><img src="img/key-up.gif" width="16" height="16" alt=""></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="key">Bewegen:</td>
                    <td><img src="img/key-left.gif" width="16" height="16" alt=""></td>
                    <td><img src="img/key-down.gif" width="16" height="16" alt=""></td>
                    <td><img src="img/key-right.gif" width="16" height="16" alt=""></td>
                </tr>
                <tr>
                    <td class="key">Fallen:</td>
                    <td colspan="3">
                        <img src="img/key-space.gif" width="56" height="13" alt="">
                    </td>
                </tr>
                </table>
              </div>
              
              <p>&nbsp;</p>
              
              <div class="h5">Ziel</div> 
                <p style="margin-bottom:3pt; line-height:144%;">1) Reihe vollst&auml;ndig und ohne L&uuml;cken auff&uuml;llen</p>
                <p style="margin-bottom:3pt; line-height:144%;">2) Ist eine Reihe gef&uuml;llt, verschwindet sie</p> <!--  -->
                <p style="margin-bottom:1pt; line-height:144%;">3) Je l&auml;nger ein Spiel dauert, umso schneller fallen die Teile</p>
            </div>
        </div>
        <div id="tetris-highscores" class="window">
            <div class="top">
                Highscore <span id="tetris-highscores-close" class="close">x</span>
            </div>
            <div class="content">
                <div id="tetris-highscores-content"></div>
                <br />
            </div>
        </div>
      </div>
    
    </td>
  </tr>
 </table>
</div>

<script type="text/javascript">
var tetris   = new Tetris();
tetris.unit  = 14;
tetris.areaX = 12;
tetris.areaY = 22;
</script>