Simple HTML Tetris Game - Code & Tutorial - 常规

<html>
  <head>
    <title>Tetris</title>
    <style type="text/css">
      #game {
        width: 300px;
        height: 600px;
        border: 1px solid black;
        background-color: #EEE;
        margin: 50px auto;
      }
      .block {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        margin: 0;
        padding: 0;
        background-color: #333;
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>Tetris</h1>
    <div id="game"></div>
    <script type="text/javascript">
      var game = document.getElementById('game');
      var blockSize = 30;
      var cols = 10;
      var rows = 20;
      var blocks = [];
      for (var i = 0; i < cols; i++) {
        blocks[i] = [];
        for (var j = 0; j < rows; j++) {
          blocks[i][j] = 0;
        }
      }
      function draw() {
        game.innerHTML = '';
        for (var i = 0; i < cols; i++) {
          for (var j = 0; j < rows; j++) {
            var block = document.createElement('div');
            block.className = 'block';
            block.style.left = (i * blockSize) + 'px';
            block.style.top = (j * blockSize) + 'px';
            if (blocks[i][j] == 1) {
              block.style.backgroundColor = '#333';
            }
            game.appendChild(block);
          }
        }
      }
      draw();
    </script>
  </body>
</html>