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

A piece in Tetris is a shape consisting of four blocks moving as a unit. They are often called tetrominoes and come in seven different patterns and colors. `The names I, J, L, O, S, T, and Z resemble their shape`.

## Tetromino matrix

We represent the J tetromino as a matrix where the number two represents the colored cells. We add a row of zeros to get a center to rotate around:

```js
[2, 0, 0],  
[2, 2, 2],  
[0, 0, 0];
```

> The tetrominoes spawn horizontally, with J, L, and T spawning flat-side first.

We will be using tetrominoes frequently, so we can make it into a `class` called `Piece`.

## Piece class

The piece class has to know its **position** on the board, its **color**, and its **shape**. To be able to draw itself on the board, the piece class needs a reference to the **`canvas` context**.

For starters, we can hard-code the values of our piece in the piece class's `constructor`:

# Tetromino matrix

We represent the J tetromino as a matrix where the number two represents the colored cells. We add a row of zeros to get a center to rotate around:

```js
[2, 0, 0],  
[2, 2, 2],  
[0, 0, 0];
```

> The tetrominoes spawn horizontally, with J, L, and T spawning flat-side first.

We will be using tetrominoes frequently, so we can make it into a `class` called `Piece`.

# Piece class

The piece class has to know its **position** on the board, its **color**, and its **shape**. To be able to draw itself on the board, the piece class needs a reference to the **`canvas` context**.

For starters, we can hard-code the values of our piece in the piece class's `constructor`:

In this lesson, you will discover how Tetris pieces are represented by a class and how to draw them on a Canvas.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Tetrominoes

Tetromino matrix