2. Improve the map
Our map has obstacles such as open space, walls, steel, grass, water, headquarters, etc. We can design all of these as objects.
2.1 Creating a group of obstacle objects
The object group saves objects on various maps. We use the object's properties to determine whether the object can be passed through or attacked.
Barrier.js:
The code copy is as follows:
// Obstacle base class object, inherited from TankObject
Barrier = function () {
this.DefenVal = 1; // Defence
this.CanBeAttacked = true; // Is it possible to be attacked
}
Barrier.prototype = new TankObject();
// Wall
WallB = function () { }
WallB.prototype = new Barrier();
// Empty land
EmptyB = function () {
this.CanAcross = true; // Can be crossed
}
EmptyB.prototype = new Barrier();
// River
RiverB = function () {
this.DefenVal = 0;
this.CanBeAttacked = false; // Members of the object are preferred, and those inherited from the parent class will be overwritten.
}
RiverB.prototype = new Barrier();
// Steel
SteelB = function () {
this.DefenVal = 3;
}
SteelB.prototype = new Barrier();
// Grass object
TodB = function () {
this.CanBeAttacked = false;
this.DefenVal = 0;
this.CanAcross = true;
}
TodB.prototype = new Barrier();
// Headquarters
PodiumB = function () {
this.DefenVal = 5;
}
PodiumB.prototype = new Barrier();
2.2 Write data to the map.
Add the following code in Common.js:
The code copy is as follows:
// Enumeration of map element types
/*
0: Empty land
1: Wall
2: Steel
3: Groves
4: River
5: Headquarters
*/
var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
// The corresponding style name of each terrain
var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
// Level Map
/*Level*/
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';
// Storage level maps 0, 1, 2, 3... are 1-n respectively...
var Top_MapLevel = [str];
2.3 Draw a map
After the preparation work is finished, we will start serving the dishes and drawing a map. Above mentioned our map is 13 * 13 table. So we add two attributes to the game loading object, and add the initial map method.
Frame.js:
The code copy is as follows:
// The game loads the object of the entire game's core object
GameLoader = function () {
this._mapContainer = document.getElementById("divMap"); // The div that stores the game map
this._selfTank = null; // Player Tank
this._gameListener = null; // The main loop timer id of the game
/*v2.0 newly added properties*/
this._level = 1;
this._rowCount = 13;
this._colCount = 13;
this._battleField = []; // Store two-dimensional array of map objects
}
// Method of loading map
Load: function () {
// Initialize the map according to the level
var map = Top_MapLevel[this._level - 1].split(",");
var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
//Travel through each cell in the map table
for (var i = 0; i < this._rowCount; i++) {
// Create a div, and the map of each row is saved in this div
var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
// Create another array in a one-dimensional array
this._battleField[i] = [];
for (var j = 0; j < this._colCount; j++) {
// Read map data, default value: 0
var v = (map[i] && map[i].charAt(j)) || 0;
// Insert the span element, a span element is a map unit
var spanCol = UtilityClass.CreateE("span", "", "", divRow);
spanCol.className = ArrayCss[v];
// Put map objects into a two-dimensional array for easier collision detection.
var to = null;
switch (v) {
case EnumMapCellType.Empty:
to = new EmptyB();
break;
case EnumMapCellType.Wall:
to = new WallB();
break;
case EnumMapCellType.Steel:
to = new SteelB();
break;
case EnumMapCellType.Tod:
to = new TodB();
break;
case EnumMapCellType.River:
to = new RiverB();
break;
case EnumMapCellType.Podium:
to = new PodiumB();
break;
default:
throw new Error("Map numbers cross the boundary!");
break;
}
to.UI = spanCol;
//The j here is X, because the internal loop is horizontal and x is the horizontal axis.
to.XPosition = j;
to.YPosition = i;
// Save the current map object into a two-dimensional array obj as an obstacle object, and occupier as an occupation object
this._battleField[i][j] = { obj: to, occurer: null, lock: false };
} //end for
} // end for
// Put in window global variables
window.BattleField = this._battleField;
}
OK, our map is done here. The comments here are already very detailed. If you still don’t understand, download the source code and debug it yourself. It will be easy to understand.
Here we mainly load map data and insert each map as a span element into the html document. And store the map's objects in a two-dimensional array. In the future, when we do collision detection, we can directly retrieve the corresponding array object through the object's coordinates, which is very convenient.
Attached source code: http://xiazai.VeVB.COM/201411/yuanma/jstankedazhan(VeVB.COM).rar