Tutorial: Tetris in JavaScript

Another name for this post could be “Tetris in JavaScript – My Way”. This post will go over one of the very many ways to code Tetris in your browser. My approach is very lightweight and only makes use of HTML, CSS, and JavaScript. The only thing you’ll need you’ll need is a browser, text editor, and jQuery, which you could download here.

Here is the link to the actual game itself: Tetris by Truski. Once you’ve gotten a feel for the game, I invite you to right click and view the Source of the page; for the rest of the post I will be going over how everything works together to make this classic come to life through your browser!

The Setup

The entire game consists of just 4 files: the HTML document, the CSS stylesheet, the JavaScript game, and the jQuery script. Although you could combine everything into one file, it’s more appropriate and standard to give each technology its own text file, so that it’s cleaner and easier to change things.

Here are the roles for each of the files:

  • Index.html holds the base framework for the document, links together the other files, and starts the game.
  • Styles.css contains the styling information that gives the page visual structure and colors.
  • Tetris.js provides the actual code that starts the game and gives it its heartbeat.
  • Jquery-2.2.1.min.js includes helper functions that will let us edit the document and provide user control more easily.

You may notice that the bare HTML is very scarce. That’s because the file links to the other files in the <head> tag. It is the startGame() function that generates all of the blocks for the game. If you press F12 while viewing the actual game, you will open the developer view and see the full JavaScript-generated document.

The Tetris Grid

The grid is simply made up of 170 (10 x 17) div blocks with the class box and an id corresponding to its coordinate. The functions appendBoxes() and appendSwap() in Tetris.js on lines 263 and 275 properly create our Tetris grid and swap space that shows what piece we have saved.

The Tetronimoes

A tetronimo, or Tetris piece, is a 4-block entity that you control. In my implementation, it is described in the class Piece. Every piece has a base and three relative blocks that have vertical and horizontal integer offsets to the base block. The relative positions are based on the type of the tetronimo, which is randomized by the constructor.

A Piece has a plethora of methods that allows it to function as a tetronimo. It can rotate clockwise and counterclockwise, move one block-width at a time, and can draw and erase itself on the board. I encourage you to check out some of these methods to see how they all work.

The current Piece in use is drawn, erased, and redrawn repeatedly using the div ids and some helper classes to update its background. Once a piece hits the bottom or another piece, it no longer is treated as a Piece and all the blocks that formed it lose their roundness, which is an indicator used by the code to check where Pieces were placed

The Game Loop

Time urgency in end-game Tetris could really get your adrenaline rushing. This is only achievable with a constantly shortening timer that pushes pieces down and generates new ones. We use the clearInterval and setInterval methods in JavaScript in order to keep the game on beat. Check the methods startgame() and resetTimer() on lines 354 and 327 to see the cogs spin.

Try it Yourself

I bestow upon you a downloadable ZIP file that contains all of the source code for this project. It is completely free, but please credit me when sharing.

If you’ve already read some of it, you’ve seen that comments in the code walk you through many of the methods.

See a flaw you could correct, an optimization you could make, or a feature you can add? I challenge you to implement these modifications, and link to your version of the game in the comments below.

I’d love to see what improvements you could make. Thanks for reading, and I hope to hear from you soon!