Simple HTML Tetris Game: A Beginner's Guide

This tutorial will guide you through building a simple Tetris game using HTML, CSS, and JavaScript. You'll learn how to create the game board, control the falling pieces, and implement basic game logic.

HTML Structure

First, we'll create the basic HTML structure for our game. We'll use a container div to hold the game grid and the score display.

<div id='container'>
  <div id='grid'></div>
  <div id='score'>Score: 0</div>
</div>

CSS Styling

Next, we'll add some basic CSS styling to make the game visually appealing. We'll define the dimensions of the container, grid, and individual cells.

#container {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
}

#grid {
  width: 200px;
  height: 400px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

#grid div {
  border: 1px solid black;
}

JavaScript Logic

Now, let's add the core JavaScript logic to make the game functional. We'll define an array of Tetromino shapes, create a function to randomly select a piece, and implement functions to draw and move the pieces.

const tetrominoes = [
  [[1, 1, 1], [0, 1, 0]],
  [[0, 2, 2], [2, 2, 0]],
  [[3, 3, 0], [0, 3, 3]],
  [[4, 0, 0], [4, 4, 4]],
  [[0, 0, 5], [5, 5, 5]],
  [[6, 6], [6, 6]]
];

function randomTetromino() {
  return tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
}

function drawTetromino(tetromino) {
  tetromino.forEach((row, y) => {
    row.forEach((value, x) => {
      if (value !== 0) {
        document.getElementById(`cell-${x}-${y}`).classList.add(`tetromino-${value}`);
      }
    });
  });
}

function moveDown() {
  // TODO: implement
}

We'll also add event listeners to handle user input for moving and rotating the Tetrominoes.

document.addEventListener('keydown', event => {
  if (event.keyCode === 37) {
    // move left
  } else if (event.keyCode === 39) {
    // move right
  } else if (event.keyCode === 40) {
    // move down
  } else if (event.keyCode === 38) {
    // rotate
  }
});

Conclusion

This simple Tetris game provides a solid foundation. You can build upon this by adding features like collision detection, scoring, levels, and game over conditions. Have fun building your own Tetris game!