Website logo depicts

I ❤ to create appealing stuff

2 minutes read


You can play it here: games/javascript-tetris-1.5kb/jstetris.html. Use cursor keys or I J K L M SPACE to control the game.

Around the time (2004) it was probably the fastest Tetris in JavaScript available.

About speed

Other versions used absolute positioned images or divs to make up the blocks. Using a <table> with CSS-styled cell borders as a grid seemed logical.

I experimented with different methods of accessing the table. I experimented with:

  • getElementsByTagName('td') (slow!)
  • nextSibling
  • table.rows[y].cells[x]

We're talking 30-40 milliseconds here BTW, not microseconds (remember, 2004) to iterate through the cells. Accessing it by table.rows[y].cells[x] was almost as fast as nextSibling but more convenient in terms of code-size and readability :-)

The same is true for using table methods addRow and deleteRow. Less code and more speed then moving the cells individually.

About size

Nowadays you can bring it down to 1 KB or even 512 bytes, but I did not want to give up on the scoring system, preview and VIM-bindings :-) Another time maybe!