JavaScript で戦車戦の全記録を作成する (1)_JavaScript スキル

追記: この戦車戦は、オンラインでソース コードをダウンロードした後、自分で書き直しました。それ自体はそれほど難しいものではありません。このケースは js オブジェクト指向をより適切に使用しており、js オブジェクト指向の入門チュートリアルとして使用できます。

1. 戦車の簡単な動きを実現するための基本オブジェクトを作成します

1.1 地図にキャンバスを描画するには?

ブラウザの互換性の問題を考慮して、ゲームオブジェクトの描画と更新を実現するために dom を操作する方法を使用します。地図をどのように保存すればよいでしょうか? マップを 2 次元配列で保存する必要があります。js には 2 次元配列はありませんが、配列を 1 次元配列に保存することで実現できます。

1.2 コードの実装

キャンバスを 13 * 13 の 2 次元配列として設計します。マップ内の各要素の対応する長さと幅は両方とも 40 ピクセルです。マップ全体は 40 ピクセル * 40 ピクセル x サイズで構成されるセルとみなすことができます。テーブルの場合、キャンバス全体のサイズは 520px * 520px になります。
コードをロードする前に、オブジェクト関係図を示します。

1.2.1 最上位オブジェクトの作成

HTML コード:

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

<頭>







<スクリプト>
window.onload = function () {
// ゲーム読み込みオブジェクトを呼び出します
varloader = new GameLoader();
Loader.Begin();
}

TankObject.js ファイル:

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

// 最上位オブジェクト
TankObject = function () {
This.XPosition = 0 // マップ内のオブジェクトの X 位置 (13*13)
This.YPosition = 0;
This.UI = null // dom 要素
}
//UIの静的メソッドを変更
TankObject.prototype.UpdateUI = function (battlFiled) { }
//位置を設定します。パラメータは次のとおりです: 1*40,6*40
TankObject.prototype.SetPosition = 関数 (leftPosition, topPosition) {
// マップ上の位置の Math.round
This.XPosition = Math.round(leftPosition / 40);
This.YPosition = Math.round(topPosition / 40);
//フォーム上の位置を設定します
If (this.UI != null && this.UI.style != null) {
This.UI.style.left = leftPosition "px";
This.UI.style.top = topPosition "px";
}
}



ここでは、X、Y 座標を使用して、マップ上のオブジェクトの位置を表します。後で、マップ内の各オブジェクトを 2 次元配列に配置します。この時点で、X 座標と Y 座標を通じて対応するオブジェクトを取得できます。
次に、CSS で left と top を使用して、フォーム内のオブジェクトの位置を制御します。 (可動オブジェクト:戦車、弾丸)

1.2.2 パブリックオブジェクトの作成

よく使用されるメソッドのいくつかを記述するためにパブリック オブジェクトを作成する必要もあります。

Common.js：

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

//タンクの4方向の移動
var EnumDirection = {
上: "0"、
右: "1"、
下: "2"、
左：「3」
};
//一般的なメソッドオブジェクト
var UtilityClass = {
//parentNode に dom 要素を作成します。id、className
を指定できます CreateE: 関数 (タイプ、ID、クラス名、親ノード) {
var J = document.createElement(type);
If (id) { J.id = id };
If (クラス名) { J.クラス名 = クラス名 };
returnparentNode.appendChild(J);
}, // 要素を削除
RemoveE: function (obj,parentNode) {
parentNode.removeChild(obj);
}、
GetFunctionName: 関数 (コンテキスト、引数呼び出し先) {
for (コンテキスト内の変数 i) {
If (context[i] == argumentCallee) { return i };
}
return "";
}, // イベントをバインドし、func メソッドを返します。これは受信 obj
です BindFunction: function (obj,func) {
return 関数 () {
func.apply(obj, argument);
};
}
};

1.2.3 移動オブジェクトの作成

Mover.js

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

//最上位オブジェクトから継承されたオブジェクトを移動
ムーバー = function () {
This.Direction = EnumDirection.Up;
This.Speed = 1;
}
Mover.prototype = new TankObject();
Mover.prototype.Move = function () {
If (this.lock) {
return;/* 非アクティブ化されているか、まだ進行中のため、操作は無効です */
}
//指示に従って戦車の背景画像を設定します
This.UI.style.backgroundPosition = "0 -" this.Direction * 40 "px";
// 方向が上と下の場合、vp は上、方向が上と左の場合、val は -1
var vp = ["上", "左"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) 0 : 1];
var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) -1 : 1;
This.lock = true;/* ロック */
// 現在のオブジェクトを This
に保存します var This = this;
//オブジェクトの移動の開始位置を記録します
var startmoveP = parseInt(This.UI.style[vp]);
var xp = This.XPosition、yp = This.YPosition;
var subMove = setInterval(function () {
// 毎回 5 ピクセルずつ移動を開始します
This.UI.style[vp] = parseInt(This.UI.style[vp]) 5 * val "px";
// 一度に 1 セルずつ 40px
移動します If (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {
clearInterval(subMove);
This.lock = false;/* ロックを解除し、再度ステップを許可します */
// 移動後のオブジェクトの位置をテーブルに記録します
This.XPosition = Math.round(This.UI.offsetLeft / 40);
This.YPosition = Math.round(This.UI.offsetTop / 40);
}
}, 80 - this.Speed * 10);
}

ここでの move オブジェクトは最上位オブジェクトから継承しており、ここでは Move メソッドを呼び出すオブジェクトを表しています。
Move object の機能は、オブジェクトの方向と速度に応じて 5px 移動するごとに、合計 40px 1 つのセルを移動します。このオブジェクトは今後拡張され、衝突検知などの機能が追加される予定です。

1.2.4 戦車オブジェクトの作成

Tank.js ファイル:

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

//Mover
から継承されたタンク オブジェクト タンク=関数(){}
Tank.prototype = new Mover();

//戦車オブジェクトから継承してプレイヤー戦車を作成します
SelfTank = function () {
This.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
This.MovingState = false;
This.Speed = 4;
}
SelfTank.prototype = new Tank();
//タンクの位置を設定します
SelfTank.prototype.UpdateUI = function () {
This.UI.className = "itank";
// 最上位のオブジェクト メソッド、タンクの位置を設定します
This.SetPosition(this.XPosition * 40, this.YPosition * 40);
}

これでプレイヤーの戦車のみが作成されました。後で敵の戦車を追加します。

1.2.5 ゲームロードオブジェクト(コア)の作成

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

// ゲームロードオブジェクト ゲーム全体のコアオブジェクト
GameLoader = function () {
This.mapContainer = document.getElementById("divMap") // ゲームマップを格納する div
; This._selfTank = null // プレイヤーのタンク
This._gameListener = null // ゲームのメインループタイマー ID
}
GameLoader.prototype = {
開始: function () {
// プレイヤーのタンクを初期化します
var selfT = new SelfTank();
selfT.XPosition = 4;
selfT.YPosition = 12;
selfT.UpdateUI();
This._selfTank = selfT;
// キーイベントを追加
var Wrapper = UtilityClass.BindFunction(this, this.OnKeyDown);
window.onkeydown = document.body.onkeydown = warpper;
warpper = UtilityClass.BindFunction(this, this.OnKeyUp);
window.onkeyup = document.body.onkeyup = warpper;
// ゲームのメインループ
warpper = UtilityClass.BindFunction(this, this.Run);
/*長時間監視制御キー*/
This._gameListener = setInterval(warpper, 20);
}
// キーボードを押すと、プレイヤーの戦車が動き始めます
、OnKeyDown: 関数 (e) {
switch ((window.even || e).keyCode) {
ケース 37:
This._selfTank.Direction = EnumDirection.Left;
This._selfTank.MovingState = true;
壊す; ケース 38:
This._selfTank.Direction = EnumDirection.Up;
This._selfTank.MovingState = true;
壊す; ケース 39:
This._selfTank.Direction = EnumDirection.Right;
This._selfTank.MovingState = true;
壊す; ケース 40:
This._selfTank.Direction = EnumDirection.Down;
This._selfTank.MovingState = true;
壊す; }
}
// 動きを止めるボタンがポップアップします
、OnKeyUp: 関数 (e) {
switch ((window.even || e).keyCode) {
ケース 37:
ケース 38:
ケース 39:
ケース 40:
This._selfTank.MovingState = false;
休憩;
}
}
/*ゲームのメインループ実行機能、ゲームの中心でありハブ*/
、実行: function () {
If (this._selfTank.MovingState) {
This._selfTank.Move();
}
}
};

ゲームをロードするオブジェクト コードはたくさんあるように見えますが、実際には次の 2 つのことを行います:
1. プレイヤーの戦車オブジェクトを作成します。
2. キーリスニングイベントを追加します。プレイヤーが移動キーを押すと、戦車の Move メソッドが呼び出され、戦車が移動します。

概要: この時点で、私たちの戦車はボタンを押すことで自由に移動できるようになりました。次に、マップと衝突検出を改善する必要があります。