Simple HTML Tetris Game - Play Now! - 常规

<html>
  <head>
    <title>Simple HTML Tetris Game</title>
  </head>
  <body>
    <div style='background-color: #F0F8FF; width: 400px; height: 400px;'>
    <div style='margin: 0 auto; width: 250px;'>
      <div id='tetris' style='overflow: hidden; position: relative;'>
        <div id='tetris_board' style='background-color: #999999; width: 200px; height: 400px; position: absolute; left: 0; bottom: 0;'>
        </div>
        <div id='tetris_score' style='position: absolute; top: 0; right: 0; font-family: Verdana; font-size: 10px; font-weight: bold; color: #666666; padding: 5px;'>
        Score: 0
        </div>
      </div>
    </div>
    </div>
    <script>
      // Tetris Board Variables
      let board = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      ];
      // Tetromino Variables
      let tetrominoes = [
        [1, 1, 1, 1],
        [2, 2, 2, 0, 0, 2],
        [0, 3, 3, 0, 3, 3],
        [4, 0, 0, 4, 4, 4],
        [0, 0, 5, 5, 5, 5],
        [6, 6, 6, 6, 0, 0],
        [0, 7, 7, 7, 7]
      ];
      // Position and Score Variables
      let x = 0;
      let y = 0;
      let score = 0;
<pre><code>  // Draw the board
  function drawBoard() {
    let boardDiv = document.getElementById('tetris_board');
    let output = '';
    for (let i = 0; i &lt; board.length; i++) {
      output += '&lt;div class='row'&gt;';
      for (let j = 0; j &lt; board[i].length; j++) {
        if (board[i][j] === 0) {
          output += '&lt;div class='empty'&gt;&lt;/div&gt;';
        } else {
          output += '&lt;div class='filled'&gt;&lt;/div&gt;';
        }
      }
      output += '&lt;/div&gt;';
    }
    boardDiv.innerHTML = output;
  }
  
  // Move the Tetromino
  function moveTetromino(keyCode) {
    switch (keyCode) {
      case 37:
        if (x &gt; 0) {
          x--;
        }
        break;
      case 38:
        if (y &gt; 0) {
          y--;
        }
        break;
      case 39:
        if (x &lt; 9) {
          x++;
        }
        break;
      case 40:
        if (y &lt; 19) {
          y++;
        }
        break;
    }
    drawBoard();
  }
  
  // Rotate the Tetromino
  function rotateTetromino(keyCode) {
    if (keyCode === 32) {
      let tetromino = tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
      for (let i = 0; i &lt; tetromino.length; i++) {
        board[y + i][x] = tetromino[i];
      }
    }
    drawBoard();
  }
  
  // Update the Score
  function updateScore() {
    let scoreDiv = document.getElementById('tetris_score');
    scoreDiv.innerHTML = 'Score: ' + score;
  }
  
  // Delete Filled Rows
  function deleteFilledRows() {
    for (let i = 0; i &lt; board.length; i++) {
      let isRowFilled = true;
      for (let j = 0; j &lt; board[i].length; j++) {
        if (board[i][j] === 0) {
          isRowFilled = false;
          break;
        }
      }
      if (isRowFilled) {
        for (let k = i; k &gt; 1; k--) {
          board[k] = board[k - 1];
        }
        board[0] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        score++;
      }
    }
    updateScore();
    drawBoard();
  }
  
  // Game Loop
  function gameLoop() {
    if (y &lt; 19) {
      y++;
    } else {
      deleteFilledRows();
    }
    drawBoard();
  }
  
  // Key Down Event
  document.addEventListener('keydown', function(event) {
    moveTetromino(event.keyCode);
    rotateTetromino(event.keyCode);
  });
  
  // Start the Game
  setInterval(gameLoop, 1000);
&lt;/script&gt;
</code></pre>
  </body>
</html>