Who is This Course for?

Introduction

This course is intended for people who already have some prior knowledge of programming and want to learn game development and JavaScript. The course acts as a step-by-step guide to build a fully functional HTML canvas game inspired by Tetris.

In this course, you will learn the basics of HTML canvas and game mechanics, including collision detection, user interaction, and game loops. The first part of the course explains modern JavaScript features, and the second part focuses on actual game development, where we will make a fully functioning game.

To get the most out of this course, basic to intermediate knowledge of programming is required. However, you can still benefit from this course if you have no prior programming experience. You just need to pay extra attention to the introductory JavaScript lessons.

By the end of this course, you will be able to build your own simple web games.

Why Tetris?

Tetris was created in 1984 by Alexey Pajitnov. The game requires players to rotate and move falling Tetris pieces. Players clear lines by completing horizontal rows of blocks without empty cells. If the pieces reach the top, the game is over.

Tetris is a great game to begin game development journey. It contains the essential elements of games and is relatively easy to program. The tetrominoes are a collection of four blocks, which makes the graphics easy and lets us make our effort in the logical parts of the game.

Remember that Tetris is licensed; this means that if you intend to use this series of articles to build your own game, make sure to abide by the law if you intend to release it.

What do you mean by modern?

You might have heard the term “Modern JavaScript” thrown around. Even this course is called “Tetris in Modern JavaScript.” But what does that mean?

For a long time, there were no updates to the JavaScript language, but in 2015 there came an update called ES6 and later ECMAScript 2015. After that, ECMAScript has had yearly updates which is referred to as “Modern JavaScript”.

A fun fact is that JavaScript was created in 1996 and was then submitted to ECMA International in 1997 for standardization, which resulted in ECMAScript. Ever since JavaScript has been based on ECMAScript.

This course teaches the updates that came with ECMAScript 2015 and later and how the language evolved with the updates. So, in other words, the Tetris game we are coding uses the latest best practices of JavaScript.

What will you learn?

In general, to create a JavaScript game, you’ll need two things: the HTML5 canvas and JavaScript.

Although we will focus on the basics of game programming, this is also a great opportunity to be introduced to modern JavaScript concepts such as:

• let and const
• Arrow functions
• Classes
• Destructuring
• Proxy
• Async/await

So, not only will you learn how to make a game, but you will also add new to your arsenal of JavaScript tricks!

Course structure

Before we start building our game, we will go through some important JavaScript concepts. If you are more advanced in JavaScript and want to get started with the game, you can jump over these lessons and read them later.

We will build the game step-by-step. Every step has live, editable, samples available to play with so you can see what the game should look like at the end of the lesson.

You will get the most out of this course if you code along while reading the lessons. I encourage you to adapt the game as we go along. In the end, you can add some features and make the game how you want!