How to Build a Simple Tetris Game with HTML, CSS, and JavaScript

Tetris is a classic game that can be played on the web with the help of HTML, CSS and JavaScript. In this tutorial, we'll walk through the steps to create a simple Tetris game using HTML and JavaScript.

HTML Structure

First, we'll create the basic structure of our HTML file. We'll create a div element with an id of 'game-board' that will hold our Tetris game.

<body>
  <div id='game-board'></div>
</body>

CSS Styling

Next, we'll add some basic styling to our game board. We'll set the width and height of the board, as well as the background color.

#game-board {
  width: 300px;
  height: 600px;
  background-color: #f2f2f2;
}

JavaScript Functionality

Now, we'll add the JavaScript functionality to our game. We'll start by creating an array to hold the various Tetris shapes.

const shapes = [
  [1, 1, 1],
  [0, 1, 0],
  [0, 1, 0]
];

We'll also create a function to loop through our shapes array and create HTML elements for each shape.

function createShape(shape) {
  const rows = shape.length;
  const cols = shape[0].length;
  const shapeElement = document.createElement('div');

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const block = document.createElement('div');
      block.classList.add('block');
      if (shape[row][col]) {
        block.classList.add('shape');
      }
      shapeElement.appendChild(block);
    }
    shapeElement.appendChild(document.createElement('br'));
  }
  return shapeElement;
}

Finally, we'll call our createShape function to display the shapes on the game board.

const gameBoard = document.getElementById('game-board');
shapes.forEach(shape => {
  const shapeElement = createShape(shape);
  gameBoard.appendChild(shapeElement);
});

And that's it! With these simple steps, you can create a basic Tetris game using HTML, CSS, and JavaScript.

How to Build a Simple Tetris Game with HTML, CSS, and JavaScript