- 10x18 playing field (Game Boy version dimensions)
- Move, turn, and speed up pieces with arrow keys
- Score with bonus for multiple lines
- Beautiful UI ;)
- Pieces turn differently than in original version.
Some tricks used
Note that some tricks may have been replaced in the most recent version.
- The cells in a row of the playing field are encoded as bits simplifying operations like
removing rows (pop the row) or checking whether a row is filled (row equals
- The spread operator
...is used to cheaply copy the playing field. Thanks to the copy adding the piece to the field (for drawing, updating the field, and checking for overlaps) is one operation without having to remove the piece afterwards.
- The shapes of the tetrominos are stored in a single string with coordinates overlapping each other. E.g. three blocks of the I tetromino are also part of the L.
- The shape string has a length of 18 which is also the height of the playing field. Thus the string can be used to cheaply create the array for the field.
- Pieces are moved by mapping their coordinates.
Because that always looks the same apart from the
Array.mapbody the mapping function
Mis called as a template literal tag function with the body as an argument which is then passed to
- Operators like
|=store the original value of the assigned variable before evaluating the right side. This way the variable
Scan be used to keep the score and build the UI at the same time. After the UI has been created, the right side of
Sto the score.
onkeyupis shorter than
onkeydownthough less responsive.
KeyboardEvent.whichis shorter than
- The key code is stored in the global variable
kand can thus be used outside of the event handler.
setTimeout()returns a random identifier which can be used for
clearTimeout()or as random value to select tetrominos.
<body>tag doubles as cheap way to execute the code (via
onload) and element to insert the UI.
Node.innerTextline breaks can be done with
A&&Bis used in favor of
A?B:0is used when B is an assignment to avoid wrapping it in parentheses.
If you want to join us or see other golfing projects we’ve made, see this list.