JavaScript小規模オナニーゲーム実装原理解説_JavaScriptスキル

遊び方: 上下左右の動きをコントロールし、空間を利用して射撃します。 敵機が攻撃を受けるたびに、5,000 ポイントごとに 100 ポイントが追加され、プレイヤーが敵機に攻撃されるか敵機が飛行する場合、自機の発射数が 1 つずつ増加します。一番下まで、彼は負けます。 。 。 。

デモ コード:http://demo.jb51.net/js/FlyBeat/index.html

ゲームの現在の機能は比較的単純です。 。 。 。ただソースコードを載せるだけではダメなようなので、今回は自分の考えを書いてみます。 。 。

ゲームは主に 4 つの js ファイルに分割されており、4 つの js ファイルにはそれぞれ 4 つのクラスが含まれています。
1: 航空機の種類---フライヤー

コードをコピー コードは次のとおりです:

//航空機に対応する DOM 要素
this.dom = null;
//生存しているかどうか
this.isLive = true;移動中です
this.isMove = false;
//移動 ID
this.moveId = null;
//弾丸が送信されているかどうか
this.isSend = false; //これまでに送信された弾丸数 バウンス (画面表示上に存在)
this.nowBullet = 0
//ゲームの背景 Dom
gamePanel: null,
//ゲームの背景幅
gameWidth: 0,
// ゲームの背景の高さ
gameHeight: 0,
// 航空機の移動速度
movepx: 10,
// 航空機の移動頻度
movesp: 30 ,
//航空機の弾丸レベル
bulletLevel: 1,
//弾丸の最大数（画面表示上に存在します）
maxBullet: 12,
//対応する方向キーの値
keyCodeAndDirection: {
37: "左",
38 : "上",
39 : "右",
40 : "下"
},


上記は航空機が持つべき属性です。 。 。 。

航空機

いくつかの固定属性に加えて、血液量も必要ですが、これは簡易バージョンであり、自分で追加できます。 移動、弾丸の発射、爆発などの

方法もあるはずです。

動き: 実際、キーボードの左キーを押すだけで、機体が左に数ピクセル移動すると、機体が非常に硬く動くことがわかります。 、または動作が遅くなる、特にキーボードの左側を押したままにしたいとき、移動するときに重大な遅延が発生し、操作がスムーズではありません。一般的には、キーボードを押すと setInterval 関数を呼び出して航空機を動かし続けます。キーボードを放すと動きが停止するため、動きが非常にスムーズになります。

弾丸の発射: 実際、ユーザーはスペース ボタンを押し、キーボード イベントをトリガーして、Bullet クラスのオブジェクトを生成します。このカテゴリについては後で説明します。

爆発: 飛行機が敵の飛行機に衝突すると、飛行機は爆発イベントをトリガーし、ゲームを終了します。もちろん、航空機が敵機に衝突したかどうかの検出は敵機で行われます。

これらはいくつかの基本的なイベントです。延長イベントもございます。 。自分で追加できます

2: Bullet type-Bullet

コードをコピー コードは次のとおりです:

//Bullet Dom 要素

this.dom = null;
//弾丸の移動速度
movepx: 8,
//弾丸の移動頻度
movesp: 10 、


弾丸の最も基本的な 2 つの方法:

移動
と敵機に命中したかどうかを検出 動き: 弾丸の動きは非常に単純で、ただ走り続けるだけで、上部は減少し続けます。

敵航空機が命中したかどうかを検出: 敵航空機のリストをメソッドに渡し、敵航空機を横断し、弾丸が敵航空機と衝突したかどうかを検出します。敵航空機と衝突した場合は、敵の航空機は爆発しますが、そうでない場合はスキップされます。

3: 敵航空機の種類 -- 敵

コードをコピー コードは次のとおりです:

//敵機 dom 要素

this.dom = null;
//かどうか
this.isLive = true
//敵機の横移動速度
movepx: 6、
//敵機縦移動速度
movepy: 4、
//敵機移動頻度
movesp: 75、


The basic methods of enemy aircraft are: moving, whether it hits the Flyer player, and explosion

Movement: This is how the enemy plane moves. I set it up so that the enemy plane flies from top to bottom, then flies from left to right, hits the end on the right, and turns around.

Whether it collides with the Flyer player: During the continuous movement of the enemy aircraft, constantly detect whether the Flyer aircraft and the enemy aircraft have an intersection. If so, the two will explode and the game will end. Otherwise, skip.

Explosion: This is an event triggered when an enemy aircraft is hit by a bullet or collides with a Flyer aircraft.

4: Game control type--Game

It contains an extension method: delete the specified element from the array

Copy the code The code is as follows:

//Extended array method, delete specific values ​​
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 methods for initializing enemy aircraft, aircraft and controlling the game process, as well as some methods for modifying scores and ending the game. There's nothing to talk about.

That’s about it. The game itself is relatively simple. The source code below has comments. This time it is written in more detail. . . Friends who are interested can continue to improve themselves. . . If you have any questions, please feel free to comment. . . Please give me some advice.
Package download address http://www.jb51.net/jiaoben/32660.html