Gain insights into game development with JavaScript. Delve into graphics, game loops, and collision detection by creating Tetris. Showcase your skills with a fully functioning game.

In this course, you will get hands-on game development experience with JavaScript. Using the classic game of Tetris, you are going to cover concepts like graphics, game loops, and collision detection. 

By the end of this course, we will have a fully functioning game with points and levels. Try it out with your friends and put it in your portfolio for employers to see.

Game Development with JavaScript: Creating Tetris

When the piece can’t move down anymore, we want to freeze the piece in its final position before we spawn a new tetromino.

# Drop or freeze

Let’s start by defining a `freeze()` method to merge the tetromino blocks to the board:

freeze() {  
  this.piece.shape.forEach((row, y) => {  
    row.forEach((value, x) => {  
      if (value > 0) {  
        this.grid[y + this.piece.y][x + this.piece.x] = value;  
      }  
    });  
  });  
}

When the piece has no more valid moves downwards, it lands on its final resting place and moves over to the matrix (grid).

Back in the `drop()` method, we add an else statement if there is no valid down move. There, we call `freeze()` before spawning a new tetromino to keep the game going:

In this lesson, we will explore how to handle the pieces on the board after they have landed.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Freezing

Drop or freeze