2。マップを改善します
私たちのマップには、オープンスペース、壁、鋼鉄、草、水、本部などの障害物があります。これらすべてをオブジェクトとして設計できます。
2.1障害物オブジェクトのグループの作成
オブジェクトグループは、さまざまなマップにオブジェクトを保存します。オブジェクトのプロパティを使用して、オブジェクトを通過または攻撃できるかどうかを判断します。
Barrier.js：
コードコピーは次のとおりです。
// TankObjectから継承された障害物ベースクラスオブジェクト
Barrier = function（）{
this.defenval = 1; //防衛
this.canbeattacked = 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.canbeattacked = false; //オブジェクトのメンバーが推奨され、親クラスから継承されたメンバーが上書きされます。
}
riverb.prototype = new Barrier（）;
// 鋼鉄
Steelb = function（）{
this.defenval = 3;
}
Steelb.prototype = new Barrier（）;
//グラスオブジェクト
todb = function（）{
this.canbeattacked = 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 = ['empty'、 'wall'、 'Steel'、 'tod'、 'river'、 'Podium'];
//レベルマップ
/*レベル*/
var str = '0000000000000';
str += '、0011100111010';
str += '、1000010000200';
str += '、1200333310101';
str += '、0000444400001';
str += '、3313300001011';
str += '、3011331022011';
str += '、3311031011011';
str += '、0101011102010';
str += '、0101011010010';
str += '、010000000110';
str += '、0100012101101';
str += '、0010015100000';
//ストレージレベルマップ0、1、2、3 ...それぞれ1-Nです...
var top_maplevel = [str];
2.3マップを描きます
準備作業が終了したら、料理の提供と地図の描画を開始します。上記のマップは13 * 13テーブルです。そのため、ゲームロードオブジェクトに2つの属性を追加し、初期マップメソッドを追加します。
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次元配列を保存します
}
//マップを読み込む方法
load：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）;
// 1次元配列で別の配列を作成します
this._battlefield [i] = [];
for（var j = 0; j <this._colcount; j ++）{
//マップデータの読み取り、デフォルト値：0
var v =（map [i] && map [i] .charat（j））|| 0;
//スパン要素を挿入します。スパン要素はマップユニットです
var spancol = utilityclass.createe（ "span"、 ""、 ""、divrow）;
spancol.classname = arraycss [v];
//マップオブジェクトを2次元配列に入れて、衝突検出を容易にします。
var to = null;
switch（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（）;
壊す;
デフォルト：
新しいエラーをスローします（ "マップ番号が境界を越えます！"）;
壊す;
}
to.ui = spancol;
//ここのjはxです。なぜなら、内部ループは水平で、xは水平軸であるためです。
to.xposition = j;
to.yposition = i;
//現在のマップオブジェクトを障害物オブジェクトとして2次元配列OBJに保存し、占領オブジェクトとして占有する
this._battlefield [i] [j] = {obj：to、savers：null、lock：false};
} //終了します
} //終了します
//ウィンドウのグローバル変数に入れます
window.battlefield = this._battlefield;
}
わかりました、私たちのマップはここで行われます。ここのコメントはすでに非常に詳細です。まだわからない場合は、ソースコードをダウンロードして自分でデバッグしてください。理解しやすいでしょう。
ここでは、主にマップデータをロードし、各マップをHTMLドキュメントにスパン要素として挿入します。マップのオブジェクトを2次元配列に保存します。将来的には、衝突検出を行うと、オブジェクトの座標を介して対応する配列オブジェクトを直接取得できますが、これは非常に便利です。
添付のソースコード：http：//xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar