A Gameboy Tetris Clone in Javascript

Like many children of the 90s, I had a Gameboy, and like just about everyone else that had a Gameboy, I had a copy of the insanely addictive puzzle game Tetris. The Gameboy version of Tetris was not the original version, but due to its insane popularity and catchy theme tune, a version of which  hit the UK Charts  in 1992*, it remains the one with which most people are familiar.

One of the small projects I worked on last year was to figure out how Tetris worked and write my own version in Javascript. There are already billions of Tetris clones (including this version, which fits into 1k of Javascript), but I didn't care, because like most of the people writing these clones, the purpose was simply for programming practice and fun. Because I remembered the Gameboy version of the game being so damned addictive, and also because it is one of the simplest, with no smooth movement or aftertouch on placed blocks or other recent "enhancements" to the original game, I thought I would try to clone it as closely as possible. This went as far as looking up details on scoring, game speed and other small details on the Tetris wiki, and of course, the dubious practice of ripping as much sound and graphics as possible from screenshots and videos of the game available on the internet.

The Github repository is here. You can play it for yourself by clicking this link (note that it might not load especially quickly).

Although a very simple project to handle, there were a few elements to the project that I found interesting to code, such as the randomiser, which must avoid giving the player the same shape too many times, or not enough of another shape, which are potential problems with selecting a Tetrimono completely at random each time a new one is required.

To solve this problem, I used a simple randomiser that stores all the valid shapes in an array, and an index into the array. Each time a new shape is required, the randomiser just returns the current shape in the array and increments the index. When the index reaches the end of the array, the randomiser randomly reorders the shapes and the index resets to zero. This way, the maximum number of times any shape can appear in a row is  twice - in the case it happens to be the last item in the array, and then the first after the array is reordered. This means that you always know that eventually the straight piece will arrive, but also that you are guaranteed to have an S and a Z for every one of them!

The entire randomiser code is here. Feel free to use it, or any of the other code in your own projects. Note that it's kind of badly written, so you'll probably need to rewrite it to support different sizes and get rid of some of the weird stuff like the way I pass this.bag as an argument to some of the functions instead of just doing var bag = this.bag at the beginning of the function. Have fun!

*Written by Andrew Lloyd Webber under the Pseudonym "Doctor Spin"