Simple HTML Tetris Game: Build & Play Now

Build Your Own Simple HTML Tetris Game: Step-by-Step Instructions

This guide will walk you through creating a basic Tetris game using HTML and JavaScript. You'll learn how to set up the game board, draw the falling blocks, and control them using your keyboard.

Step 1: Create an HTML File

Open a text editor and create a new HTML file (e.g., tetris.html).

Step 2: Add the HTML Structure

Copy and paste the following HTML code into your file:

<html>
  <head>
    <title>HTML Tetris</title>
    <style>
      canvas {
        border: 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <canvas id='tetris' width='200' height='400'></canvas>
    <script>
      // Code for the game goes here.
    </script>
  </body>
</html>

Step 3: Add the JavaScript Code

Inside the <script> tag, add the following JavaScript code to create the game:

// Setup canvas
let canvas = document.getElementById('tetris');
let ctx = canvas.getContext('2d');
ctx.scale(20, 20);

// Create Matrix
let matrix = [
  [0, 0, 0],
  [1, 1, 1],
  [0, 1, 0],
];

// Draw Matrix
function draw() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  drawMatrix(player.matrix, player.pos);
}

// Draw Matrix
function drawMatrix(matrix, offset) {
  matrix.forEach((row, y) => {
    row.forEach((value, x) => {
      if (value !== 0) {
        ctx.fillStyle = '#F00';
        ctx.fillRect(x + offset.x,
                     y + offset.y,
                     1, 1);
      }
    });
  });
}

// Create Player
let player = {
  pos: {x: 5, y: 5},
  matrix: matrix,
};

// Update game
let lastTime = 0;
function update(time = 0) {
  const deltaTime = time - lastTime;
  lastTime = time;

  draw();
  requestAnimationFrame(update);
}

update();

Step 4: Play the Game

Save the HTML file and open it in a browser. You can now control the falling blocks using the left, right, up, and down arrow keys.

Explanation of the Code:

HTML Setup: Sets up a canvas element with an ID of 'tetris' to display the game board.
Canvas Scaling: Scales the canvas to 20x20 pixels per unit, making the blocks easier to see.
Matrix: Defines the initial shape of the falling block.
Drawing Functions: draw() clears the canvas and calls drawMatrix() to draw the block. drawMatrix() iterates over the block's matrix and draws each filled cell.
Player Object: Stores the block's position and matrix.
Game Loop: update() handles the game logic and calls requestAnimationFrame to create a smooth animation loop.

Next Steps:

This is a very basic Tetris game. To enhance it further, you can add features like:

Game Over Detection: Check if the blocks reach the top of the board.
Line Clearing: Remove full horizontal lines.
Piece Rotation: Implement logic to rotate the blocks.
Different Piece Shapes: Create a variety of falling block shapes.
Scoring System: Track the player's score.

By following these steps and expanding upon them, you can create a more robust and engaging Tetris game using HTML and JavaScript.

Simple HTML Tetris Game: Build & Play Now