Implementation Principles of JavaScript small-sized aircraft-hitting games

Instructions: Move Up, down, left, right, and left with spaces. Each time an attacker hits an enemy plane, an increase of 100 points means that the number of rounds of a player's plane increases by one to four points, if it is hit by an enemy plane or the enemy plane is thrown to the bottom, it will be lost ....

DEMO code: http://demo.jb51.net/js/FlyBeat/index.html

The current functions of the game are still relatively simple .... It seems that it is not good to post a source code, so this time I will write the idea...

The game is mainly divided into 4 js files, and 4 js files contain 4 categories.
1: aircraft --- Flyer
Copy codeThe Code is as follows: // The dom element corresponding to the airplane
This. dom = null;
// Whether it is alive
This. isLive = true;
// Whether it is moving
This. isMove = false;
// Mobile ID
This. moveId = null;
// Whether or not it is being played
This. isSend = false;
// How many rounds have been sent (displayed on the screen)
This. nowBullet = 0;
// Game background Dom
GamePanel: null,
// Game background width
GameWidth: 0,
// Game background height
GameHeight: 0,
// Aircraft movement speed
Movepx: 10,
// Aircraft movement frequency
Movesp: 30,
// Aircraft bullet level
BulletLevel: 1,
// Maximum number of rounds (displayed on the screen)
MaxBullet: 12,
// Corresponding direction key value
KeyCodeAndDirection :{
37: "left ",
38: "up ",
39: "right ",
40: "down"
},

The above are the attributes that an airplane should have ....

In addition to some fixed attributes, an airplane should have a certain amount of blood, but this is a simple version. You can add it yourself.

There should also be methods such as moving, launching bullets, and exploding.

Moving: it is actually capturing Keyboard Events. If you simply press the left of the keyboard and then the plane moves a few pixels to the left, you will find that the plane is very hard to move, or operation latency, especially when you want to press and hold the left of the keyboard, when it moves, the latency is very serious and the operation is not smooth. Generally, when you press the keyboard, call a setInterval function to keep the plane moving. When the keyboard is released, the Movement stops, so that the movement is smooth.

Trigger a Bullet: in fact, the user presses a space and then triggers a keyboard event. This event generates a Bullet class object and then let it fly out. This class will be mentioned later.

Explosion: When an airplane hits an enemy plane, it will trigger an explosion and end the game. Of course, whether the plane hits the enemy's plane is detected by the enemy's plane.

These are some basic events. There are also extended events .. You can add

2: Bullet class-Bullet

Copy codeThe Code is as follows: // The Bullet Dom Element
This. dom = null;
// Bullet movement speed
Movepx: 8,
// Bullet movement frequency
Movesp: 10,

The most basic two methods of bullets: Moving and checking whether a bullet hits an enemy

Movement: the movement of bullets is much simpler, so it keeps running up and top is always reduced and OK.

Check whether an attacker hits an enemy's machine: This method transmits the list of the enemy's machines to traverse the enemy's machine, and checks whether the bullet is in conflict with the enemy's machine. If the bullet is in conflict with the enemy's machine, the attacker skips the attack.
3: enemies-Enemy

Copy codeThe Code is as follows: // The dom element of the enemy plane
This. dom = null;
// Whether
This. isLive = true;
// Horizontal movement speed of enemy planes
Movepx: 6,
// Vertical movement speed of enemy planes
Movepy: 4,
// Enemy's mobile frequency
Movesp: 75,

The basic methods for enemy planes are: Move, whether to hit the plane Flyer players, or not

Move: It is how the enemy plane moves. I set it to fly from top to bottom, let it fly from left to back, hit the end of the right, and turn it to fly.

Whether to hit the plane Flyer: During the constant movement of the enemy plane, the system constantly checks whether there is an intersection between the plane Flyer and the enemy plane. If there is a conflict between the two, the game ends. Otherwise, the game is skipped.

Explosion: An event triggered when an enemy plane is hit by a bullet or hits a plane Flyer.

4: Game control-Game

It contains an extension method: to delete a specified element from an array.

Copy codeThe Code is as follows: // extend the array method to delete a specific value.
Array. prototype. remove = function (obj ){

For (var I = 0, l = this. length; I <l; I ++ ){
If (this [I] = obj ){
This. splice (I, 1 );
Return this;
}
}
Throw "The Array has no this Obj ";
}

The rest are those that initialize enemy planes, planes, and control the game process, as well as some methods such as modifying scores and ending the game. There is nothing to talk about.

In this case, the game itself is relatively simple, and the source code below is annotated. This time it is written in more detail... If you are interested, you can continue to improve yourself... If you have any questions, please click it... For more information, see.
Packaging http://www.jb51.net/jiaoben/32660.html