Tetris in Vanilla JavaScript

Display mode

Back to Articles


This page demonstrates an implementation of the classic game 'Tetris', in JavaScript. The major purpose is to demonstrate how addition to and manipulation of the DOM can be performed easily: the Tetris display consists of two hundred DIVs in a 10x20 grid, which are given different class names to represent the blocks in the well.

JavaScript also makes it easy to retrieve events from the keyboard; the 'window' object provides an 'event' subsystem, which in combination with the setting of event handlers for the keyboard allows the script to capture and process keys. This implementation of Tetris uses four keys:

You're free to take a look at the source, and explore the game for any bugs which may exist (I already know of a couple). Enjoy.