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

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

OK、地図はこれで完成です。 ここのコメントは非常に詳しく書かれているので、まだ理解できない場合は、ソースコードをダウンロードして自分でデバッグすると理解しやすくなります。

ここでは主に地図データを読み込み、各地図をspan要素としてHTMLドキュメントに挿入します。そして、マップ オブジェクトを 2 次元配列に格納します。将来、衝突検出を行うときに、オブジェクトの座標を通じて対応する配列オブジェクトを直接取得できるようになり、非常に便利になります。

ソースコードを添付します: http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar