JavaScript small masturbation game implementation principle explanation_javascript skills

How to play: Control movement up, down, left, and right, and use the space to fire. Every time an enemy plane is hit, 100 points are added. For every 5,000 points, the number of rounds fired by the player's plane is increased by one, up to four. If the player is hit by an enemy plane or the enemy plane flies to the bottom, he loses. . . .

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

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

The game is mainly divided into 4 js files, and each of the 4 js files contains 4 classes.
1: Aircraft type---Flyer

Copy code The code is as follows:

//DOM element corresponding to the aircraft
this.dom = null;
//Whether it is alive
this.isLive = true;
//Whether it is moving
this. isMove = false;
//Move ID
this.moveId = null;
//Whether the bullet is being sent
this.isSend = false;
//How many bullets have been sent so far Bounce (exists on screen display)
this.nowBullet = 0;
//Game background Dom
gamePanel: null,
//Game background width
gameWidth: 0,
// Game background height
gameHeight: 0,
//Aircraft moving speed
movepx: 10,
//Aircraft moving frequency
movesp: 30,
//Aircraft bullet level
bulletLevel: 1,
//Maximum number of bullets (exists on screen display)
maxBullet: 12,
//Direction key value corresponding
keyCodeAndDirection: {
37: "left",
38 : "up",
39 : "right",
40 : "down"
},

The above are the attributes that the aircraft should have. . . .

Aircraft In addition to some fixed attributes, it should also have blood volume, but this is a simple version, you can add it yourself.

There should also be ways to move, fire bullets, explode, etc.

Movement: In fact, it is to capture keyboard events. If you simply press the left key of the keyboard, and then the aircraft moves a few pixels to the left, you will find that the aircraft moves very stiffly, or the operation is delayed. Especially when you want to hold down the left side of the keyboard, when it moves, there is a serious delay and the operation is not smooth. So generally: when you press the keyboard, call a setInterval function to keep the aircraft moving. When you release the keyboard, the movement stops, so that the movement is very smooth.

Firing a bullet: In fact, the user presses the space button, and then triggers a keyboard event. This event generates an object of the Bullet class and then lets it fly out. This category will be discussed later.

Explosion: When the plane hits an enemy plane, the plane will trigger an explosion event and end the game. Of course, the detection of whether the aircraft has hit an enemy aircraft is done at the enemy aircraft.

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

2: Bullet type--Bullet

Copy code The code is as follows:

//Bullet Dom element
this.dom = null;
//Bullet moving speed
movepx: 8,
//Bullet moving frequency
movesp: 10,

The two most basic methods of bullets: moving and detecting whether it hits the enemy aircraft

Movement: The movement of the bullet is much simpler, just keep running up, and the top will keep decreasing.

Detect whether the enemy aircraft is hit: Pass the list of enemy aircraft into the method, traverse the enemy aircraft, detect whether the bullet collides with the enemy aircraft, if there is a collision with the enemy aircraft, the enemy aircraft will explode, if not, it will be skipped.
3: Enemy aircraft type--Enemy

Copy code The code is as follows:

//Enemy aircraft dom element
this.dom = null;
//Whether
this.isLive = true;
//Enemy aircraft lateral movement speed
movepx: 6,
//Enemy aircraft longitudinal movement speed
movepy: 4,
//Enemy aircraft movement frequency
movesp: 75,

적 항공기의 기본 방법은 이동, 플라이어 플레이어 타격 여부, 폭발

이동 : 적기가 위에서 아래로 날아간 다음 왼쪽에서 오른쪽으로 날아가서 오른쪽 끝을 맞고 돌아서도록 설정했습니다.

플라이어 플레이어와 충돌 여부: 적 항공기가 계속 이동하는 동안 플라이어 항공기와 적 항공기가 교차하는지 지속적으로 감지하면 둘이 폭발하고 게임이 종료됩니다. 그렇지 않으면 건너뜁니다.

폭발: 적 항공기가 총알에 맞거나 플라이어 항공기와 충돌할 때 발생하는 이벤트입니다.

4: 게임 조작형--게임

확장 메소드가 포함되어 있습니다: 배열에서 지정된 요소를 삭제합니다

코드 복사 코드는 다음과 같습니다.

//확장 배열 방식, 특정 값 삭제 ​​
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";
}


나머지는 적 항공기 초기화, 게임 프로세스 제어 및 점수 수정을 위한 몇 가지 방법입니다. 그리고 게임 종료. 이야기 할 것이 없습니다.

그렇습니다. 게임 자체는 비교적 간단합니다. 아래 소스 코드에 이번에는 좀 더 자세히 작성했습니다. . . 관심이 있는 친구들은 계속 발전할 수 있습니다. . . 궁금한 점이 있으시면 언제든지 댓글을 남겨주세요. . . 조언 좀 부탁드립니다.
패키지 다운로드 주소
http://www.jb51.net/jiaoben/32660.html