Build your own Tetris clone today.

Learn key JavaScript principles while at the same time building your very own Tetris clone.

Play the demo!


This book contains 25 pages of fully-colored and detailed explanations on how to build your very own Tetris clone using plain-old JavaScript, HTML and CSS.

  • 25 fully colored pages
  • Commented source code throughout
  • Function by function breakdown
  • Important key JavaScript concepts
  • Basic game development principles that every programmer should know

What's Inside

This book is carefully broken down into the following 8 sections.

1. Variables

I begin by discussing all of the many variables that we are going to be declaring and using throughout this project and breaking each down one by one.

2. Creating the game board

In this step, I cover the process of creating a game board dynamically in JavaScript as well as go into the game mechanics of Tetris.

3. Creating the shapes

Next up, I break down each shape and how it will be represented on the game board. I use a very dynamic process which will allow you to create your own custom shapes.

4. Loading a shape

This step looks at creating a shape on the actual board at the right x and y coordinate location.

5. Drawing the shape

Everything else before this was mainly non-visual. In this step we get to actually begin to draw the shapes on the board as the timer ticks down. This is a heavy chapter and also goes into the logic behind collision detection.

6. Keyboard Events

This step goes into JavaScript keyboard event handlers in detail so that we can move our shapes around the board.

7. Collisions

I briefly touched on collisions during the shape drawing lesson, but this unit goes a bit further into that explanation.

8. Rotations

And lastly I cover the topic of rotations when it comes to a Tetris block. I get into the mathematical aspects of matrix rotations which come in handy during the process of game development.