Build a Tetris Game with HTML, CSS, and JavaScript

This guide will walk you through creating a simple Tetris game using HTML, CSS, and JavaScript. You'll learn how to set up the game board, style its elements, and implement the core game logic.

HTML Structure

First, we'll create the basic HTML structure for our game:

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris Game</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
  </head>
  <body>
    <div id='game-container'>
      <div id='game-board'></div>
    </div>
    <script src='script.js'></script>
  </body>
</html>

This code sets up a basic HTML page with a 'game-container' div to hold the game and a 'game-board' div to represent the playing area. We've also linked our CSS ('style.css') and JavaScript ('script.js') files.

CSS Styling

Now, let's add some CSS styling to give our game elements a visual appearance:

#game-container {
  width: 300px;
  height: 600px;
  background-color: #eee;
  margin: 0 auto;
}

#game-board {
  width: 200px;
  height: 400px;
  background-color: #fff;
  margin: 50px auto 0;
  border: 2px solid #000;
}

This CSS code styles the 'game-container' and 'game-board' divs with appropriate dimensions, background colors, and borders.

JavaScript Logic

Finally, let's add the JavaScript code to handle the game logic:

var board = [];
var rows = 20;
var cols = 10;

function initBoard() {
  for (var i = 0; i < rows; i++) {
    board[i] = [];
    for (var j = 0; j < cols; j++) {
      board[i][j] = 0;
    }
  }
}

function drawBoard() {
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      if (board[i][j] === 1) {
        // draw block here
      }
    }
  }
}

function updateBoard() {
  // update board here
}

function gameLoop() {
  updateBoard();
  drawBoard();
  setTimeout(gameLoop, 1000);
}

initBoard();
 gameLoop();

This JavaScript code initializes the game board, creates a game loop to update and draw the board every second, and provides placeholders for drawing blocks and updating the board state. You'll need to fill in the 'draw block here' and 'update board here' sections with the specific logic for rendering blocks and handling game events.

This is a basic foundation for your Tetris game. From here, you can expand on this code by adding features like:

Tetromino shapes: Create different Tetris shapes (I, O, T, J, L, S, Z).
Movement: Allow the player to move the falling tetromino left, right, and down.
Rotation: Implement the ability to rotate the tetromino.
Line clearing: Check for completed lines and remove them from the board.
Game over: Detect when the stack of blocks reaches the top of the board.
Scoring: Keep track of the player's score based on cleared lines.

By building upon this foundation and adding your own creativity, you can develop a fully functional Tetris game.

Build a Tetris Game with HTML, CSS, and JavaScript