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

To have more colors than only a blue tetromino in our game, we need to add more pieces to our code.

Following the [Super Rotation System](https://tetris.fandom.com/wiki/SRS), we can take the first position of the pieces and add them to the constants and their colors:

const COLORS = [    
  'cyan',  
  'blue',  
  'orange',  
  'yellow',  
  'green',  
  'purple',  
  'red'  
];

const SHAPES = [    
  [  
    [0, 0, 0, 0],   
    [1, 1, 1, 1],  
    [0, 0, 0, 0],   
    [0, 0, 0, 0]  
  ],   
  [  
    [2, 0, 0],  
    [2, 2, 2],  
    [0, 0, 0]  
  ],  
  // And so on  
];

# Basic randomizer

To randomly pick one of the tetrominoes, we can use **Math**, a built-in object in JavaScript that includes a couple of static methods to help us with our calculations:

- [Math.random()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) returns a floating-point number in the range 0 to less than 1
- [Math.floor()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) returns the largest integer less than or equal to a given number.

To get a random piece, we use these methods to create an algorithm that gives us an integer between 0 and the maximum number we send in:

```js
randomizeTetrominoType(noOfTypes) {  
  return Math.floor(Math.random() * noOfTypes);  
}
```

With this method, we can get a random tetromino type when we spawn, and then set the color and shape from it. Now, instead of hardcoding the blue tetromino, we can add this to the `constructor`:

In this lesson, you’ll discover the history behind randomizers and choose one for the game.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Randomizers

Basic randomizer