Tetris in 512b
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add some comments Oct 17, 2017
src add comment Oct 17, 2017
.gitignore add compile step Oct 5, 2017
README.md 509 increase score Oct 17, 2017
gulpfile.js 511 use real line break Oct 10, 2017
package-lock.json Update dependencies for compatibility Nov 7, 2018
package.json 617 use bom Oct 5, 2017

README.md

Mini Tetris

A JavaScript Tetris clone in 509b.

Play the game.

Features

  • 10x18 playing field (Game Boy version dimensions)
  • Move, turn, and speed up pieces with arrow keys
  • Score with bonus for multiple lines
  • Beautiful UI ;)

Caveats

  • Pieces turn differently than in original version.

Contributors

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 1023, ie. 1111111111 in binary).
  • 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.map body the mapping function M is called as a template literal tag function with the body as an argument which is then passed to eval().
  • Operators like |= store the original value of the assigned variable before evaluating the right side. This way the variable S can be used to keep the score and build the UI at the same time. After the UI has been created, the right side of S|=… evaluates to 0 resetting S to the score.
  • onkeyup is shorter than onkeydown though less responsive.
  • KeyboardEvent.which is shorter than KeyboardEvent.keyCode.
  • 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.
  • The <body> tag doubles as cheap way to execute the code (via onload) and element to insert the UI.
  • With Node.innerText line breaks can be done with \n instead of <br> when using Element.innerHTML.
  • A&&B is used in favor of if(A)B but A?B:0 is used when B is an assignment to avoid wrapping it in parentheses.

Other projects

If you want to join us or see other golfing projects we’ve made, see this list.