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

//タンクの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);
};
}
};

//最上位オブジェクトから継承されたオブジェクトを移動
ムーバー = 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);
}

//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);
}

// ゲームロードオブジェクト ゲーム全体のコアオブジェクト
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();
}
}
};