topical media & game development

talk show tell print

game-javascript-casual-tetris-game.htm / htm



  <head>
  <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  
  <table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td valign="middle">
  <div id="tetris">
    <div class="left">
      <h1>JsTetris 1.1.0</h1>
      <div class="menu">
        <div><input type="button" value="New Game" id="tetris-menu-start" /></div>
        <div><input type="button" value="Reset" id="tetris-menu-reset" /></div>
        <div><input type="button" value="Help" id="tetris-menu-help" /></div>
        <div><input type="button" value="Highscores" id="tetris-menu-highscores" /></div>
      </div>
      <div class="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="left"><input type="button" value="<" id="tetris-keyboard-left" /></div>
        <div class="right"><input type="button" value=">" id="tetris-keyboard-right" /></div>
      </div>
      <div id="tetris-nextpuzzle"></div>
      <div id="tetris-gameover">Game Over</div>
      <div class="stats">
        <table cellspacing="0" cellpadding="0">
        <tr>
          <td class="level">Level:</td>
          <td><span id="tetris-stats-level">1</span></td>
        </tr>
        <tr>
          <td class="score">Score:</td>
          <td><span id="tetris-stats-score">0</span></td>
        </tr>
        <tr>
          <td class="lines">Lines:</td>
          <td><span id="tetris-stats-lines">0</span></td>
        </tr>
        <tr>
          <td class="apm">APM:</td>
          <td><span id="tetris-stats-apm">0</span></td>
        </tr>
        <tr>
          <td class="time">Time:</td>
          <td><span id="tetris-stats-time">0</span></td>
        </tr>
        </table>
      </div>
    </div>
    <div id="tetris-area"></div>
    <div id="tetris-help" class="window">
      <div class="top">
        Help <span id="tetris-help-close" class="close">x</span>
      </div>
      <div class="content">
        <b>Controllers:</b> <br />
        up - rotate <br />
        down - move down <br />
        left - move left <br />
        right - move right <br />
        space - fall to the bottom <br />
        n - new game <br />
        r - reset <br />
        <br />
        <b>Rules:</b> <br />
        1) Puzzle speed = 80+700/level miliseconds, the smaller value the faster puzzle falls <br />
        2) If puzzles created in current level >= 10+level*2 then increase level <br />
        3) After puzzle falling score is increased by 1000*level*linesRemoved <br />
        4) Each "down" action increases score by 5+level (pressing space counts as multiple down actions)
      </div>
    </div>
    <div id="tetris-highscores" class="window">
        <div class="top">
          Highscores <span id="tetris-highscores-close" class="close">x</span>
        </div>
        <div class="content">
          <div id="tetris-highscores-content"></div>
          <br />
          Note: these scores are kept in cookies, they are only visible to your computer, other players that visit this page see their own scores.
        </div>
    </div>
  </div>
  
  </td></tr></table>
  
  <script type="text/javascript">
    var tetris = new Tetris();
    tetris.unit = 14;
    tetris.areaX = 12;
    tetris.areaY = 22;
  </script>
  
  </body>
  
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.