One more Tetris on JS (~ 30 "conditional" lines)

Inspired by the latest posts on Habré on the subject of writing minimalist games in 30 lines, I decided to try to “insert my 5 cents”, more precisely, 30 lines of js-code. Tetris seemed to me the most suitable candidate, moreover, it was always interesting to understand and implement its algorithm, but all hands did not reach.



So, by the end of a sleepless night, another regular Tetris clone appeared in the world. With a slight stretch, it is squeezed into the given framework (30 lines), but these lines are still longer than I personally would like. Those who want to try in action and see the code can do it here .

Implementation Features:
  • Keyboard arrow control
  • Increasing difficulty every 5 lines
  • Progressive scoring based on the number of completed lines at a time and difficulty level
  • "Honest" clockwise rotation of blocks
  • "Bounce" block when turning from obstacles
  • Multi-colored blocks
  • Generating the layout of the playing field with a js code


The game field is built on the basis of the table, and the drawing of blocks is carried out by changing the background color of a particular cell. Manipulations with the DOM are performed due to the Table object, which is included in DOM 0, and provides the ability to access rows and cells directly through the rows and cells collections, respectively. Thus, there is no need to search for elements by their identifiers or classes. In view of the fact that the internal representation of the playing field is stored as a two-dimensional array of numbers (values ​​determine the color of the cell), we have a direct correspondence between the data and their representation - both there and there, each specific cell can be accessed by its x and y . Initially, the playing field is empty - the arrays are packed with zeros, and the cells do not have a background.

The generation of the html field initially occupied more than a dozen lines, as it was implemented as a 2-nesting loop and a packet of calls to document.createElement, etc. Closer to the final implementation of the basic algorithm of the game, it became very striking. Of course, it would be possible to immediately insert the table in HTML, but it was somehow not sporty, and just laziness, therefore, it was decided to abandon the use of the functions provided by the DOM to create new elements, in favor of the good old innerHTML and gluing the table from lines. To concatenate and repeat the strings, the Array.join method is used and the fact that initializing the array constructor as an integer results in an array filled with the specified number of undefineds. In a similar way, a two-dimensional array is generated for the internal representation of the field.

Descriptions of all types of blocks, and there are 7 pieces of them in the classic tetris, are stored in the form of arrays of points containing displacements relative to the "center" of the block itself - rotation happens around this point, and the rotation algorithm itself was mostly derived empirically after an hour or two breaking their heads for that matter. Perhaps one of the readers will justify and explain the results obtained in a more scientific way, but for now briefly the main idea: there are 4 positions of the block obtained by rotating it 90 degrees at each step, and the coordinates of its constituent points are transformed in this way:

  1. (x, y)
  2. (-y, x)
  3. (-x, -y)
  4. (y, -x)


In reality, only 3 figures can be rotated in all 4 directions, the rest are only 2, and the cube is generally not rotated. Rather, the algorithm is able to crank them, but it just doesn’t look too beautiful, because part of the turns for specific figures is limited and their descriptions are ordered in the appropriate way (“cube”, “stick”, 2 zigzags ...).

In order to compact the code, bitwise ANDs were actively used, since they allow implementing the parity / oddness check in a very concise form (checking the state of the least significant bit), as well as checking the 2nd and 3rd bits in some expressions. For example, this is used in the keystroke handler and the block rotation algorithm.

This “reincarnation” of Tetris was based on a collective image, rooted in my childhood, partly borrowing something from the very first version for me on “PK-01 Lviv” of the early 90’s, Chinese Brick Game and Dendy of the mid 90’s, and perhaps a few later depositions of the times of J2ME and Windows Mobile, the beginning of this century. Other possible coincidences are absolutely random, and the author does not bear any responsibility for them.

Also popular now: