How to make a gray machine

Source: Internet
Author: User
Tags comments set time setinterval time interval

Game cycle:

Each game is made up of user input, update game status, handle AI, play music, and display these behaviors. Game main loop is used to deal with this sequence of behavior.

So first of all, our most basic is to create a game main loop. For JavaScript, the only way to implement this game loop is settimeout and setinterval.

Whether it is settimeout good or setinterval good. In fact, there is no doubt that settimeout is better. SetTimeout executes a specified method after a set time, while SetInterval executes the specified method at intervals. Perhaps a lot of people will have doubt, this is not setinterval better, directly can realize the cycle, settimeout also use recursion to implement the loop. Yes, SetInterval is simpler to implement, but not better.


Whether it is settimeout or setinterval, when triggered, there is no difference if the current process is not empty and waits to be queued for execution.

The difference is that settimeout just line up the team, SetInterval will need to follow the preset intervals, each to the point of time to line up.

When SetInterval goes in line, he is dropped if he finds that he is still not executing in the queue. In other words, the same interval, there will be only one in the queue.

Because the queue mechanism, whether settimeout or SetInterval, the first time when triggered, will be equal to more than the preset time, can not be less than.

For SetInterval, if the execution time is greater than the preset interval, it is likely to result in continuous execution with no interval between them, which is bad and likely to consume a lot of CPU.

So for animation, if the single frame of the execution time is greater than the interval time, with settimeout than with setinterval more insurance.

So the game loop is implemented using settimeout:

1 setTimeout(function(){ 
2 //循环体
3  setTimeout(arguments.callee, 10); 
4 },10);

But is it really that simple? To know that JavaScript is single-threaded, when there are more transactions to be processed, the execution time of the settimeout is not guaranteed at all, so there will be different performance in different browsers. Then we can use the time difference to control the execution times of the loop body.

01 var_last = newDate().getTime();
03 setTimeout(function(){
05 var_now = newDate().getTime();
07 if(_now - _last > delay){
09 _last = _now;
11 //循环体…
13 }
15 setTimeout(arguments.callee, 10);
17 },10);

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

Game frame:

The game loop has, and now we have to be clear about what to do in each cycle. Every loop here is what we call a frame. The only thing to do with each frame in our game is the following:

Mobile aircraft

Move the bullets.

Collision detection

Game End Detection

Additional enemy aircraft

Moving enemy planes and bullets as long as the current position of the current speed variable can be, relatively simple.

I'm talking about collision detection.

Collision Detection:

The collision detection in the game of playing Ash is mainly to detect the collision of bullets and enemy aircraft, enemy aircraft and the player's grey machine. Here we only do simple rectangular collision detection. In the DOM world is all square block of Dongdong, as for the shape of aircraft, I would like to say do not care about these details. You know, we are using JavaScript to do the game, but also compatible with the Damned IE6, performance is the most important. Ignoring the shape of the gray machine, the collision detection is simple, as long as the position and width of the two DOM elements to determine whether there is overlap. But more simply, the direct use of Yui inside the Inregion method can be, haha.

So simple, delightfully starting code out. Happy to write A for loop, each enemy aircraft and bullets to do collision detection, and then for each enemy aircraft and players to do collision detection machine. Finished, can't wait to run the watch effect, and then the small partners are stunned!chrome the ash machine card a meal, and IE6 Direct strike has wood! I still overestimate the performance of JavaScript, and it's imperative to optimize the performance of collision detection.

Performance optimization:

Each screen has more than 10 aircraft, bullets and player gray machine are respectively and enemy aircraft to do collision detection, each frame to do hundreds of collision detection. If only the possible collision detection, each frame collision detection can be reduced to less than 10 times. But how do you know which grey machines are likely to collide? If the enemy aircraft can appear in any position, it must be impossible to do. So we had to keep the enemy planes on different routes. As shown in the following figure,

The game area according to the width of the enemy aircraft divided into a fixed route, the enemy opportunity to appear randomly in one of the routes. As a result, the bullet's x-coordinate divided by the enemy's width to calculate the course of the bullet, as long as the bullet and its route on the aircraft on the collision detection can be.

If the entire game area is divided into 10 routes, performance will be increased by 10 times times!! Similarly, for enemy aircraft and players in the detection of gray machine is so handled. So, performance improvement 20 times times!!

Operation Optimization:

The implementation of the player's gray machine direction control is relatively simple, detection of keyboard events up and down key events, the player gray machine x,y coordinates to do the corresponding increase or decrease.

But in the game we will find that the player Gray machine movement is not fluent, if the moving speed increases, it will appear a jump of the feeling, if the moving speed of small players to move the gray machine is very slow. This is because the keyboard event response frequency is too slow, so as long as the frequency of mobile control to improve the problem can be solved. Similar to the above mentioned game cycle, we can create a special control player gray machine Mobile loop body, in the loop constantly detect the value of flag bit direction, according to direction control player Ash machine movement direction. In the keyboard response event, the player presses the key to give the direction a different value, where the value of direction 0 means still, 1 means move up, 2 moves down, 3 moves to the left, and 4 moves to the right.

The implementation code is as follows:

Now the player Gray Machine mobile control is much smoother.

A simple play Ash machine game on this, and finally we go to play a gray machine it.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.