How is a gray machine made?

How is a gray machine made?

Game cycle:

Each game is composed of getting user input, updating game status, processing AI, playing music, and displaying pictures. The main loop of the game is used to process the behavior sequence.

So first, the most basic thing is to create a main loop of the game. For javascript, only the setTimeout and setInterval methods are available to implement this game loop.

So whether setTimeout is better or setInterval is better. In fact, there is no doubt that setTimeout is better. SetTimeout is used to execute the specified method once after the specified time, while setInterval is used to execute the specified method for a period of time. Many people may have doubts. Isn't setInterval better? We can implement loops directly, and setTimeout must implement loops recursively. Yes, the setInterval implementation loop is simpler, but not better.

Because:

Whether it is setTimeout or setInterval, if the current process is not empty during triggering, there is no difference in queuing for execution.

The difference is that setTimeout only needs to be lined up once, and setInterval needs to be sorted every time point according to the preset interval.

When setInterval goes to the queue, if it finds that it is still not executed in the queue, it will be dropped. That is to say, there is only one Interval in the queue.

Because of the queue mechanism, whether it is setTimeout or setInterval, the time of the first trigger will only be greater than the preset time, and cannot be less.

For setInterval, if the execution time is greater than the preset interval, it may lead to continuous execution, with no interval in the middle. This is very bad and may consume a lot of cpu.

Therefore, for an animation, if the execution time of a single frame is greater than the interval, setTimeout is more secure than setInterval.

So the setTimeout is used to achieve the game loop:

1	setTimeout(function(){

2	// Loop body

3	setTimeout(arguments.callee, 10);

4

},10);

But is it really that simple? You need to know that javascript is single-threaded. When many transactions are to be processed, the execution time of setTimeout is not guaranteed at all, so that different performance will occur in browsers. In this case, we can use the time difference to control the execution time of the loop body.

01	var _last = new Date().getTime();

02

03	setTimeout(function(){

04

05	var _now = new Date().getTime();

06

07	if(_now - _last > delay){

08

09	_last = _now;

10

11	// Loop body...

12

13

}

14

15	setTimeout(arguments.callee, 10);

16

17

},10);

In this way, the execution interval of the loop body is more accurate.

Game frame:

Now that the game loop is ready, we need to clarify what to do in each loop. Every loop here is what we call the frame. In our gray-machine game, the following is what we need to do for every frame:

Mobile enemy planes

Mobile bullet

Collision Detection

Game end Detection

Supplement enemy planes

You only need to add the current speed variable to the current position to move the enemy planes and bullets, which is relatively simple.

I will focus on collision detection.

Collision Detection:

The collision detection in the gray-player game is mainly to detect the collision between bullets and enemy planes, and between enemy planes and player gray-players. Here we only perform simple rectangular collision detection. The world of dom is full of square blocks. As for the shape of airplanes, I would like to say that do not care about these details. You know, we are playing games with javascript, and we have to be compatible with the damn IE6. performance is the most important thing. Ignore the shape of the gray machine, so that the collision detection is simple, as long as the two dom elements based on the position and length and width to determine whether there is overlap. But more simply, you can simply use the inRegion method in YUI, haha.

Since it is so simple, the code is beginning happily. Happily write a for loop to perform Collision Detection on each enemy plane and bullet, and then perform Collision Detection on each enemy plane and the player's gray plane. You can't wait to run the viewing effect, and then the friends are stunned! Chrome's gray machine gets stuck, while IE6 goes on strike! I still overestimate the performance of javascript. The top priority is to optimize the performance of collision detection.

Performance Optimization:

There are more than a dozen planes on each screen. The bullet and the player's gray plane respectively perform Collision Detection with the enemy plane, and hundreds of collisions are performed within each frame. If only collision detection is performed, the collision detection of each frame can be reduced to less than 10 times. But how can we know which gray machines may crash. If the enemy plane can appear at any location, it cannot be done. So we had to fix the enemy planes on different routes. As shown in,

The game area is divided into fixed routes based on the width of the enemy plane, and the enemy opportunities are randomly displayed on one of the routes. Therefore, the x coordinate of the bullet is divided by the width of the enemy plane to calculate the route of the bullet. The bullet only needs to perform Collision Detection with the enemy plane on its route.

If the entire game area is divided into 10 routes, the performance will be increased by 10 times !! Similarly, the same is true for the detection of enemy and player gray machines. In this way, the performance is improved by 20 times !!

Operation Optimization:

It is also relatively simple to implement the direction control of the player's gray machine. It detects the keyboard event's top, bottom, left, and right buttons, and increases or decreases the x and y coordinates of the player's gray machine.

However, in the game, we will find that the player's gray machine is not moving smoothly. If we increase the moving speed, we will feel a hop, if the movement speed becomes smaller, the player's gray machine moves slowly. This is because the keyboard Event Response frequency is too slow, so you only need to increase the frequency of mobile control to solve this problem. Similar to the game loop mentioned above, we can create a loop body that specifically controls the movement of the player's gray machine, and continuously detect the directive value in the loop body, control the movement direction of the player's gray Machine Based on direction. In the keyboard response event, different values are assigned to direction based on the key pressed by the player. The value of direction 0 indicates static, 1 indicates moving up, and 2 indicates moving down, 3 indicates moving to the left, 4 indicates moving to the right.

The implementation code is as follows:

Now the mobile control of the player's gray machine is much smoother.

A simple gray-player game is like this. Finally, let's play a gray-player game.