Principle of easy RIS in the Javascript version of Tetris

Recently, with a bit of fun, I wrote the first JavaScript version of Tetris easy RIS.

First go to the easy RIS Tetris game:

Some people have a cheat plot and add a projection function: ^ _ ^.

Because the function key shielding of non-ie browsers cannot be achieved perfectly, the "refreshing page" on the game page is used to hide other page modules in the non-game area to clear the page scroll bar, then, you can expand the hidden page through "Expand page.

After some tests, it is found that when easy RIS is run in some non-ie browsers in some systems, the left and right movements are stuck. If you are interested, you can discuss the optimization together.

Easy RIS implementation Core

Next Square

The prototype adds the square display method to a 4*4 table. It can be implemented by inheriting two classes (Table class and square class) and adding its own next method.

Game Region

The prototype is a 12*20 table. Due to algorithm optimization, the table is directly set to (4 + 12 + 4) * (4 + 20 + 4, the table also has a two-dimensional array with the same number of cells as the table, used as the Boundary Detection of squares.

Game coloring Area

The prototype is a 12*20 table. Due to algorithm optimization, the table is directly set to (4 + 12 + 4) * (4 + 20 + 4), and the square stops falling behind, fill in the same color as the falling square in the corresponding row and column.

When the row is detected to be filled in the two-dimensional array of "game region", the corresponding row in the filled area is deleted, and a number of new rows are inserted before the first row.

Game squares

The prototype adds the square display method to a 4*4 table. It can be implemented by inheriting two classes (Table class and square class) and adding some of its own methods, this component is an important component in tetris. In the implementation of easy RIS, this component plays a majority of game tasks, such as moving, deformation, and border detection, most of the methods in the game are implemented on this component.

Block shape and Deformation

The square and shape can be implemented through a 4*4 two-dimensional array. For example, the square Z can be written:

[
[1, 1, 0, 0]
[0, 1, 0]
[0, 0, 0]
[0, 0, 0]
]

1 indicates that the position is a square. 0 indicates that there is nothing. Is it very simple? Because this write method will increase the data size, we can compress this data form into a hexadecimal format, or take z as an example.

1100011000000000-> convert to hexadecimal-> 0xc600, so the preceding array can be abbreviated:

[0xc600]

The amount of data is greatly reduced, and a reverse process is required in the program to convert the hexadecimal data to the binary data. Note that, you may find that some hexadecimal data is not enough after being converted to binary, such as 16 elements in the preceding array, you need to fill in the corresponding number 0 before the converted binary data.

The deformation part is relatively simple. For example, the deformation of Z is:

[
[0, 0, 1, 0]
[0, 1, 0]
[0, 1, 0]
[0, 0, 0]
]

You only need to save the shape to the square array at the same time. Because all the squares are deformed for a maximum of four times, all the squares are represented by a group of four, each dimension represents the shape after each deformation. In the deformation method, you only need to increment the index value to obtain the next deformation and then re-render it.

Projection part

An array corresponding to the square part is required to record the projection area of each square. Take Z as an example. It can be expressed:

[,]

The first four bits, indicate that in a four-column grid, the first three grids of Z are to be projected.

The last 4 digits, 1st, indicate that, when the projection follows the falling Square, the Y coordinate is at the position under the falling square (the number of 1-1)

In addition to a corresponding data, the projection part also needs a DOM element to represent. It is very simple, it is a table of 1*4, it must be processed when the falling block is moved or deformed.

Border Detection

Border Detection should be the most important algorithm part in Tetris. In easy RIS, the bitwise AND judgment method is used for processing, that is, compare the 4*4 areas of the falling square with the 4*4 areas of the game area to be located. If 0 is returned, it indicates that it can be moved, otherwise, it cannot be moved.

Each falling Square must undergo a boundary detection before calling the "move" method;

Each time the dropped square calls a "deformation" method, it also needs to perform a boundary check;

Therefore, if you can optimize the algorithms of movement, deformation, and boundary detection, your Tetris will give players a very high control sensitivity, thus greatly improving playability!

Well, the general principle of writing Tetris in JavaScript on the Web is like this. Next, let's play this well-written Tetris game Easy RIS:

Http://www.v-ec.com/games/tetris/