Get hands-on JavaScript game development by building Tetris, covering graphics, game loops, and collision detection, resulting in a fully functional game.

Zero to Hero in JavaScript

This module will provide us hands-on game development experience with JavaScript. We’ll cover concepts like graphics, game loops, and collision detection by using the class game of Tetris. By the end of this module, we’ll have a fully functioning game with points and levels to add to our portfolio.

Creating Tetris with JavaScript

# Project structure

It’s good practice to split code into different files even if the project is not that big:

- `constants.js` is where we put the configurations and rules of the game.
- `board.js` is for board logic.
- `piece.js` is for piece logic.
- `main.js` has code to initialize the game and the overall game logic.
- The order of the scripts that we add at the end is essential in `index.html`.
- `styles.css` contains all the beautifying styles.
- The `README.md` is the markdown info. file that is the first page in the repository.

# Modern styling

Just like modern JavaScript, the world around styling the web has also progressed in the past years. First came Flexbox, which aims to provide a more efficient way to layout, align, and distribute space among items in a container. It is largely a one-dimensional system.

Then, came CSS Grid, a two-dimensional system that handles both columns and rows. They work well together; a grid item can be a flexbox container. Since this is a JavaScript course, we will not delve into it, but notice  the use of **CSS Grid** and **Flexbox** for the layout:

In this lesson, you will learn about the Tetris game board and style it with an 80's feel.

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Conclusion

Project structure

Modern styling