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

Tetris would not be a particularly exciting game if all the blocks could pass through each other, or if the walls and floor did not stop them. So, instead of randomly moving the tetromino, we’ll check for potential collisions first, and we only move the tetromino if it’s safe. We have a few different collisions to consider.

We have a collision when the tetromino:

- Hits the floor
- Moves left or right into a wall
- Hits a block on the board
- Rotates and the new rotation hits a wall or block

There are no helper functions in `Canvas` for detecting collisions between elements, so we need to implement this feature ourselves.

# Boundaries

For the squares of the tetromino to be inside the board, all three of the following statements need to be true:

- The x position of the square is greater than the x position of the left wall.
- The x position of the square is less than the x position of the right wall.
- The y position of the square is greater than the y position of the floor.

We can translate this to code and add it to the method in the board class with which we check that we are inside the boundaries of the board:

In this lesson, you will learn how to check for collisions to keep the Tetris pieces inside the game’s boundaries.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Collision Detection