How to Create a Tetris Game in HTML with JavaScript

To create a Tetris game in HTML, you'll need to use JavaScript and the HTML Canvas element. Start by creating a basic HTML file and linking it to a JavaScript file where you'll write the game logic.

HTML Structure

In your HTML file, create a canvas element with a unique ID for easy reference in your JavaScript code. You can also add a few buttons to control the game.

<!DOCTYPE html>
<html>
   <head>
      <title>Tetris Game</title>
   </head>
   <body>
      <canvas id='canvas'></canvas>
      <button id='start-button'>Start</button>
      <button id='pause-button'>Pause</button>
      <button id='restart-button'>Restart</button>
      <script src='tetris.js'></script>
   </body>
</html>

JavaScript Game Logic

In your JavaScript file, you'll create the game logic. This includes defining the shapes of the Tetris blocks and their movements, detecting collisions, and updating the score.

// Define the Tetris blocks and their movements
const shapes = [
  { shape: [[1, 1], [1, 1]], color: 'red' },
  { shape: [[1, 1, 1, 1]], color: 'orange' },
  { shape: [[1, 1], [0, 1], [0, 1]], color: 'yellow' },
  { shape: [[1, 1], [1, 0], [1, 0]], color: 'green' },
  { shape: [[1, 1], [0, 1], [0, 1]], color: 'blue' },
  { shape: [[0, 1], [0, 1], [1, 1]], color: 'purple' },
  { shape: [[1, 0], [1, 1], [0, 1]], color: 'pink' },
];

// Detect collisions
function isColliding(shape, x, y) {
  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row].length; col++) {
      if (shape[row][col] && (x + col < 0 || x + col >= COLS || y + row >= ROWS || grid[y + row][x + col])) {
        return true;
      }
    }
  }
  return false;
}

// Update the score
function updateScore() {
  document.getElementById('score').innerHTML = score;
}

Canvas Drawing

To draw the game on the canvas, you'll create a draw function that will be called repeatedly. In this function, you'll draw the Tetris blocks and the game board.

// Draw the Tetris blocks and the game board
function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawBoard();
  drawShape(currentShape, currentX, currentY);
}

// Draw the game board
function drawBoard() {
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      if (grid[row][col]) {
        context.fillStyle = grid[row][col];
        context.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
}

// Draw the Tetris blocks
function drawShape(shape, x, y) {
  context.fillStyle = shape.color;
  for (let row = 0; row < shape.shape.length; row++) {
    for (let col = 0; col < shape.shape[row].length; col++) {
      if (shape.shape[row][col]) {
        context.fillRect((x + col) * CELL_SIZE, (y + row) * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
}

Game Controls

You'll also need to add event listeners to the buttons to control the game. The start button will start the game, the pause button will pause the game, and the restart button will restart the game.

// Add event listeners to the buttons
document.getElementById('start-button').addEventListener('click', startGame);
document.getElementById('pause-button').addEventListener('click', pauseGame);
document.getElementById('restart-button').addEventListener('click', restartGame);

// Start the game
function startGame() {
  // initialize the game
}

// Pause the game
function pauseGame() {
  // pause the game
}

// Restart the game
function restartGame() {
  // restart the game
}

Conclusion

With this basic structure and logic, you can create a simple Tetris game in HTML. You can customize it further by adding sound effects, levels, and high scores. Have fun coding!

How to Create a Tetris Game in HTML with JavaScript