Another Tetris on JS (~ 30 "conditional" lines)
Inspired by the latest posts on Habré on the subject of writing minimalistic games in 30 lines, I also decided to try "insert my 5 kopecks", more precisely, 30 lines of js-code. The most suitable candidate seemed to me to be Tetris, 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, he squeezes into the given frames (30 lines), but these lines are still longer than I personally would like. Those who want to try out in action and see the code can do it here .
')
Implementation features:
The game field is built on the basis of the table, and the blocks are drawn by changing the background color of a particular cell. DOM manipulations are performed at the expense of 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 items by their ID 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 of the data and their representations - and there, and there each specific cell can be accessed by its x and y . Initially, the playing field is empty - the arrays are filled with zeros, and the cells have no background.
Generation of html fields initially took more than a dozen lines, since it was implemented as a loop of the 2nd nesting and a pack of document.createElement calls, etc. Closer to the final implementation of the basic algorithm of the game, it became very noticeable. Of course, you could immediately insert the table in html, but it was somehow not sporty, and just lazy, because it was decided to abandon the functions provided by the DOM to create new elements, in favor of the good old innerHTML and gluing the table from lines. For concatenating and repeating strings, the Array.join method is used and the fact that initialization of an array constructor by an integer results in an array filled with the specified number of undefined -s. Similarly, a two-dimensional array is generated for the internal field representation.
Descriptions of all types of blocks, and 7 pieces in classical Tetris, are stored as arrays of points containing offsets relative to the “center” of the block itself - rotation occurs around this point, and the rotation algorithm itself was derived mostly empirically after an hour or two breaking the head on this. Perhaps some of the readers will justify and explain more scientifically the results obtained, but for now briefly the basic idea: there are 4 positions of the block, obtained by turning it 90 degrees at each step, and the coordinates of its constituent points are transformed as follows:
In fact, only 3 figures can be rotated in all 4 directions, the rest - only 2, and the cube cannot be rotated at all. Rather, the algorithm is able to crank them, but it just does not look very nice, 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 make the code more compact, bitwise ANDs were actively used, since they allow to implement parity / oddness checking in a very concise form (checking the state of the low-order 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 built in a collective way, rooted in my childhood, partially borrowing something from the very first variant for me on “PC-01 Lviv” of the early 90s, the Chinese Brick Game and Dendy of the mid-90s of the past, and possibly a few more recent sediments of J2ME and Windows Mobile, the beginning of this century. Other possible matches are completely random, and the author is not responsible for them.
So, by the end of a sleepless night, another regular Tetris clone appeared in the world. With a slight stretch, he squeezes into the given frames (30 lines), but these lines are still longer than I personally would like. Those who want to try out in action and see the code can do it here .
')
Implementation features:
- Control keyboard arrows
- Increase difficulty level every 5 lines
- Progressive scoring based on the number of rows filled at a time and the level of difficulty
- “Honest” clockwise rotation of blocks
- "Rebound" block when turning from obstacles
- Multicolored blocks
- Generation of a marking of a game field js-code
The game field is built on the basis of the table, and the blocks are drawn by changing the background color of a particular cell. DOM manipulations are performed at the expense of 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 items by their ID 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 of the data and their representations - and there, and there each specific cell can be accessed by its x and y . Initially, the playing field is empty - the arrays are filled with zeros, and the cells have no background.
Generation of html fields initially took more than a dozen lines, since it was implemented as a loop of the 2nd nesting and a pack of document.createElement calls, etc. Closer to the final implementation of the basic algorithm of the game, it became very noticeable. Of course, you could immediately insert the table in html, but it was somehow not sporty, and just lazy, because it was decided to abandon the functions provided by the DOM to create new elements, in favor of the good old innerHTML and gluing the table from lines. For concatenating and repeating strings, the Array.join method is used and the fact that initialization of an array constructor by an integer results in an array filled with the specified number of undefined -s. Similarly, a two-dimensional array is generated for the internal field representation.
Descriptions of all types of blocks, and 7 pieces in classical Tetris, are stored as arrays of points containing offsets relative to the “center” of the block itself - rotation occurs around this point, and the rotation algorithm itself was derived mostly empirically after an hour or two breaking the head on this. Perhaps some of the readers will justify and explain more scientifically the results obtained, but for now briefly the basic idea: there are 4 positions of the block, obtained by turning it 90 degrees at each step, and the coordinates of its constituent points are transformed as follows:
- (x, y)
- (-y, x)
- (-x, -y)
- (y, -x)
In fact, only 3 figures can be rotated in all 4 directions, the rest - only 2, and the cube cannot be rotated at all. Rather, the algorithm is able to crank them, but it just does not look very nice, 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 make the code more compact, bitwise ANDs were actively used, since they allow to implement parity / oddness checking in a very concise form (checking the state of the low-order 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 built in a collective way, rooted in my childhood, partially borrowing something from the very first variant for me on “PC-01 Lviv” of the early 90s, the Chinese Brick Game and Dendy of the mid-90s of the past, and possibly a few more recent sediments of J2ME and Windows Mobile, the beginning of this century. Other possible matches are completely random, and the author is not responsible for them.
Source: https://habr.com/ru/post/202860/
All Articles