JavaScript で戦車戦の全記録を作成する (2)_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:30:04

オリジナル

1439 人が閲覧しました

2. マップを改善する

私たちのマップには、広場、壁、鉄、草、水、本部などの障害物があります。これらすべてをオブジェクトとしてデザインできます。

2.1 障害物オブジェクトグループの作成

オブジェクトグループには、さまざまなマップ上のオブジェクトが格納されており、オブジェクトのプロパティを使用して、オブジェクトが通過できるか、攻撃できるかを決定します。

Barrier.js:

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

// TankObject
 から継承された障害物基本クラス オブジェクト
バリア = 関数 () {

This.DefenVal = 1 // 防御力
;
This.CanBe Attacked = true // 攻撃可能かどうか

}

Barrier.prototype = new TankObject();

// 壁

WallB = function () { }

WallB.prototype = new Barrier();

// オープンスペース 

EmptyB = function () {

This.CanAcross = true // パススルー可能

}

EmptyB.prototype = new Barrier();

// 川

RiverB = function () {

This.DefenVal = 0;

This.CanBe Attacked = false; // オブジェクトのメンバーが最初に取得され、親クラスから継承されたメンバーが上書きされます。 

}

RiverB.prototype = new Barrier();

// スチール

SteelB = function () {

This.DefenVal = 3;

}

SteelB.prototype = new Barrier();

// 草オブジェクト

TodB = function () {

This.CanBe Attacked = false;

This.DefenVal = 0;

This.CanAcross = true;

}

TodB.prototype = new Barrier();

//本社

PodiumB = function () {

This.DefenVal = 5;

}

PodiumB.prototype = new Barrier();

2.2 マップに書き込まれるデータ。

Common.js に次のコードを追加します:

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

//マップ要素タイプの列挙

/*

0: オープンスペース 

1: 壁

2: 鋼

3: 茂み 

4：川

5: 本部

*/

var EnumMapCellType = {

空: "0"

、壁：「1」

、鋼：「2」

、トッド：「3」

、川：「4」

、表彰台：「5」

};

//各地形に対応するスタイル名

var ArrayCss = ['空', '壁', '鋼', 'tod', '川', '表彰台'];

// レベルマップ

/*レベル*/

var str = '0000000000000';

str = ',0011100111010';

str = ',1000010000200';

str = ',1200333310101';

str = ',0000444400001';

str = ',3313300001011';

str = ',3011331022011';

str = ',3311031011011';

str = ',0101011102010';

str = ',0101011010010';

str = ',0100000000110';

str = ',0100012101101';

str = ',0010015100000';

//ストレージ レベル マップ 0、1、2、3... はそれぞれ 1 ～ n です...Level

var Top_MapLevel = [str];

2.3 地図を描く

準備が整ったので、料理の提供と地図の作成を始めましょう。前述したように、マップは 13 * 13 のテーブルです。そこで、ゲーム読み込みオブジェクトに行属性と列属性を追加し、初期化マップメソッドを追加します。

Frame.js:

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

// ゲームロードオブジェクト ゲーム全体のコアオブジェクト 

GameLoader = function () {

This._mapContainer = document.getElementById("divMap") // ゲームマップを格納する div
;
This._selfTank = null // プレイヤーのタンク

This._gameListener = null // ゲームのメインループタイマー ID

/*v2.0 で追加された新しい属性*/

This._level = 1;

This._rowCount = 13;

This._colCount = 13;

This._battleField = [] // マップ オブジェクトの 2 次元配列を格納します
;
}

//マップメソッドをロード

ロード: function () {

// レベルに応じてマップを初期化します 

var map = Top_MapLevel[this._level - 1].split(",");

var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);

// マップ テーブル内の各セルを走査します

for (var i = 0; i < this._rowCount; i ) {

// div を作成すると、各行のマップがこの div に保存されます 

var divRow = UtilityClass.CreateE("div", "", "", mapBorder);

//一次元配列に別の配列を作成

This._battleField[i] = [];

for (var j = 0; j 
// マップ データを読み取ります、デフォルト値: 0

var v = (map[i] &&map[i].charAt(j)) || 0;

// spa 要素を挿入します。span 要素はマップ単位です 

var spanCol = UtilityClass.CreateE("span", "", "", divRow);

spanCol.className = ArrayCss[v];

// その後の衝突検出を容易にするために、マップ オブジェクトを 2 次元配列に配置します。 

var to = null;

スイッチ (v) {

case EnumMapCellType.Empty:

to = new EmptyB();

休憩;

case EnumMapCellType.Wall:

to = new WallB();

休憩;

case EnumMapCellType.Steel:

to = new SteelB();

休憩;

case EnumMapCellType.Tod:

to = new TodB();
休憩;

case EnumMapCellType.River:

to = new RiverB();

休憩;

case EnumMapCellType.Podium:

to = new PodiumB();

休憩;

デフォルト：

throw new Error("マップ番号が範囲外です!");

休憩;

}

to.UI = scanCol;

// j は X です。内側のループは水平なので、x は横軸です 

to.XPosition = j;

to.YPosition = i;

// 現在のマップ オブジェクトを 2 次元配列に格納します。obj は障害物オブジェクト、occupier は占有しているオブジェクトです 

This._battleField[i][j] = { obj: to、occupier: null、lock: false };

//
 の終了
// 
 は終了
// ウィンドウのグローバル変数に入れます 

window.BattleField = this._battleField;

}