Simple HTML Tetris Game - Build Your Own! - 常规

<html>
<head>
  <title>Simple Tetris Game - Build Your Own!</title>
  <style>
    body {
      background-color: #fafafa;
      margin: 0;
    }
    #game-container {
      width: 600px;
      height: 400px;
      margin: 20px auto;
      padding: 10px;
      border: 1px solid #ccc;
    }
    #game-board {
      width: 300px;
      height: 600px;
      margin: 0 auto;
      position: relative;
    }
    .block {
      width: 30px;
      height: 30px;
      position: absolute;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id='game-container'>
    <h1>Simple Tetris Game</h1>
    <div id='game-board'></div>
  </div>
  <script>
    // create an array of blocks
    let blocks = [
      {x: 0, y: 0},
      {x: 30, y: 0},
      {x: 60, y: 0},
      {x: 90, y: 0}
    ];
<pre><code>// draw the blocks on the game board
let gameBoard = document.getElementById('game-board');
blocks.forEach(block =&gt; {
  let div = document.createElement('div');
  div.className = 'block';
  div.style.left = block.x + 'px';
  div.style.top = block.y + 'px';
  gameBoard.appendChild(div);
});

// move blocks with keyboard arrows
document.onkeydown = (e) =&gt; {
  if(e.keyCode == 37) { // left arrow
    blocks = blocks.map(block =&gt; {
      block.x -= 30;
      return block;
    });
  } else if(e.keyCode == 39) { // right arrow
    blocks = blocks.map(block =&gt; {
      block.x += 30;
      return block;
    });
  }
  // redraw blocks on game board
  gameBoard.innerHTML = '';
  blocks.forEach(block =&gt; {
    let div = document.createElement('div');
    div.className = 'block';
    div.style.left = block.x + 'px';
    div.style.top = block.y + 'px';
    gameBoard.appendChild(div);
  });
};
</code></pre>
  </script>
</body>
</html>