Learn while playing with HTML5 (10) - Tetris Control Interface (Source Code)

I originally wanted to write a few sentences, but I saw that the response to the previous article was not very satisfactory, so I have no motivation. I originally planned to write a "Snake" one, so let's take a look and go directly to the source. code.

This time, the following functions are added based on the previous program:

1. Keyboard control

2. Start and pause

3. The pause effect of empty lines when eliminating

4. As the number of lines eliminated increases, the speed increases

5. Sound effects

and so on.

The comments in the code are already very detailed. The code of the model in the previous article has basically not been changed. Only the control and graphics codes have been added. I feel that the writing is relatively organized.

Tips: The Tetris game in this article requires Chrome browser to get the best running effect, Firefox browser Also works, but has no sound effects.

There are two long sentences at the end, if you want to read it, just read it.

This part of the code mainly consists of two timers.

The first timer generates a TickMessage message every interval. The processing of this message is to make the block fall. Each time it disappears after falling, the triggering speed will be faster.

The second timer is the message Loop. It loops as fast as possible, so the time interval is set to 0.

Because the model part and control part of the entire game will generate many events, no one knows when the user presses the button, so a message queue## is maintained here. #.

Once a new situation occurs, a corresponding message is added to the message queue, and the message loop continuously takes out messages from it. As long as there is one, it takes out one and processes it.

In the graphics part, the key point is to draw the small squares of seven colors in advance and

cache them, so that they can be used directly when needed later. Otherwise, if you draw temporarily, as the number of blocks increases, the program will get stuck.

The above is the detailed content of Learn while playing with HTML5 (10) - Tetris Control Interface (Source Code). For more information, please follow other related articles on the PHP Chinese website!