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

<html>
<head>
  <title>Tetris</title>
  <style>
    #board {
      width: 250px;
      height: 500px;
      background-color: #ccc;
      position: relative;
    }
    .block {
      position: absolute;
      background-color: #000;
      width: 25px;
      height: 25px;
    }
  </style>
</head>
<body>
  <div id='board'></div>
  <script> 
    // Create blocks
    let blocks = [
      {x: 0, y: 0},
      {x: 25, y: 0},
      {x: 50, y: 0},
      {x: 75, y: 0}
    ];
<pre><code>// Create board 
let board = document.getElementById('board');
  
// Draw the blocks 
for (let i = 0; i &lt; blocks.length; i++) {
  let block = document.createElement('div');
  block.classList.add('block');
  block.style.top = blocks[i].y + 'px';
  block.style.left = blocks[i].x + 'px';
  board.appendChild(block);
}
</code></pre>
  </script>
</body>
</html>