JavaScript Small play airplane game realization principle explanation _javascript Skill

Play instructions: up and down control movement, empty rounds. Each hit an enemy aircraft plus 100 points, each upgrade 5000 points, the player's aircraft a number of rounds to add one, up to four, was hit by an enemy plane or let the enemy aircraft fly to the bottom even if lost ....

Demo Code: http://demo.jb51.net/js/FlyBeat/index.html

The current function of the game is still relatively simple .... It seems to stick a source code is not very good, so this time or write ideas ...

The game is mainly divided into 4 js files, 4 JS files contain 4 classes.
1: Airplane Class---Flyer

Copy Code code as follows:

The corresponding DOM element of the airplane
This.dom = null;
Is Alive
This.islive = true;
Whether to move in
This.ismove = false;
The ID of the move
This.moveid = null;
Whether the bomb
This.issend = false;
How many bullets have been sent (there is a screen display)
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,
Plane bullet level
Bulletlevel:1,
Maximum number of rounds (present screen display)
Maxbullet:12,
Directional key values correspond
Keycodeanddirection: {
Panax Notoginseng: "Left",
: "Up",
All: "Right",
: "Down"
},

The above is the aircraft should have properties ....

In addition to the plane has a fixed number of properties, in fact, there should be blood volume of these, but this is a rough version, you can add yourself.

More should be moving, firing bullets, explosions and other methods.

Move: is actually capturing keyboard events, if it is simple to press the left of the keyboard, and then the plane will move a few pixels to the left, you will find that the aircraft moving is very stiff, or operating delay, especially if you want to hold down the keyboard left, it moved, the delay is very serious, operation is not smooth. So it's generally: when you press the keyboard, call a setinterval function to keep the aircraft moving, when the keyboard is released, the move stops, so the movement is very smooth.

Fired bullets: In fact, the user pressed a space, and then trigger a keyboard event, this event is to generate a bullet bullet class object, and then let it fly out. This class will be mentioned later.

Explosion: When a plane hits an enemy plane, it triggers an explosion and ends the game. Of course, the test plane crashed into enemy aircraft and was detected by enemy aircraft.

These are some of the basic events. There are also extended events. You can add it yourself

2: Bullet class--bullet

Copy Code code as follows:

Bullet DOM Elements
This.dom = null;
The speed of the bullet movement
Movepx:8,
How often the bullets move
Movesp:10,

The most basic two methods of bullets: MoveAndDetect if the enemy is hit.

Move: Bullets move a lot simpler, just keep running up, top has been reduced OK.

Detect whether to hit the enemy aircraft: the list of enemy aircraft into the method, traversing the enemy aircraft, detection of bullets and enemy aircraft have collided, there are aircraft explosions, no skip.
3: Enemy Class--enemy

Copy Code code as follows:

Enemy aircraft DOM elements
This.dom = null;
Whether
This.islive = true;
Lateral movement speed of enemy aircraft
Movepx:6,
Aircraft longitudinal movement speed
Movepy:4,
Moving frequency of enemy aircraft
Movesp:75,

The basic methods of the enemy aircraft are: moving, whether to hit the plane flyer players, explosions

Move: Is the enemy how to move, I was set into enemy aircraft from top to bottom fly, let the left and then fly, hit the right end, turn to fly.

Whether to hit the plane flyer player: In the continuous movement of enemy aircraft, constantly detect the plane flyer and the enemy whether there is intersection, there are both explosions, the game is over, otherwise skipped.

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

4: Game Control class--game

Contains an extension method that deletes the specified element from the array

Copy Code code as follows:

Extending an array method, deleting 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 the initial aircraft, aircraft and control the game process, there are some changes to the score, the end of the game and so on. There's nothing to talk about.

Roughly in this way, the game itself is relatively simple, the following source code have comments, this time to write a more detailed ... Interested friends, can continue to improve their own ... What's the problem, welcome to the brick ... A lot of advice.
Package Download Address http://www.jb51.net/jiaoben/32660.html