Javascript to make full tank battle records (2)
- 2020-03-30 04:25:45
- OfStack
2. Improve the map
Our map has obstacles such as open Spaces, walls, steel, grass, water, headquarters, etc. We can design all of these as objects.
2.1 Create an obstacle object group
The object group holds various objects on the map. We use the properties of the objects to determine whether the objects can be passed through or attacked.
The Barrier. Js:
//Obstacle base class object, inherited from the TankObject
Barrier = function () {
this.DefenVal = 1; //Defense
this.CanBeAttacked = true; //Can be attacked
}
Barrier.prototype = new TankObject();
//Wall < br / >
WallB = function () { }
WallB.prototype = new Barrier();
//Clearing < br / >
EmptyB = function () {
this.CanAcross = true; //Can be passed through
}
EmptyB.prototype = new Barrier();
//River < br / >
RiverB = function () {
this.DefenVal = 0;
this.CanBeAttacked = false; //Take the member of the object first, inherit from the parent class will be overwritten. < br / >
}
RiverB.prototype = new Barrier();
//Steel < br / >
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 < br / >
PodiumB = function () {
this.DefenVal = 5;
}
PodiumB.prototype = new Barrier();
2.2 Data written to the map.
Add the following code to common.js:
//Map element type enumeration
/*
0 Empty lots:
1 Wall:
2 Steel:
3 : the trees
4 River:
5 Headquarters:
*/
var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
//The style name for each terrain is
var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
//Level map
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';
//Store a map of levels & NBSP; 0,1,2,3... 1-n... < br / >
var Top_MapLevel = [str];
2.3 map
Now that we're done, let's start serving the main dish and making a map. We mentioned earlier that our map is 13 by 13. So we added row and column properties to the game load object, and we added the initialization map method.
Frame. Js:
//Game load object the core object of the entire game
GameLoader = function () {
this._mapContainer = document.getElementById("divMap"); //Div
that holds the game map
this._selfTank = null; //Player tank
this._gameListener = null; //Game main loop timer id
this._level = 1;
this._rowCount = 13;
this._colCount = 13;
this._battleField = []; //Store map objects in a two-dimensional array
}
//Load map method
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);
//Traverse each cell in the map table
for (var i = 0; i < this._rowCount; i++) {
//Create a div in which the map for each row is saved
var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
//Create another array in the 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 a span element, a span element is a map unit
var spanCol = UtilityClass.CreateE("span", "", "", divRow);
spanCol.className = ArrayCss[v];
//The map object is put into a two-dimensional array to facilitate collision detection. < br / >
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 line! ");
break;
}
to.UI = spanCol;
//The j here is just X, because the inner loop is horizontal, and X is the x-coordinate
to.XPosition = j;
to.YPosition = i;
//Store the current map object in a two-dimensional array. Obj is the obstacle object, occupier is the possessive object
this._battleField[i][j] = { obj: to, occupier: null, lock: false };
} //end for
} // end for
//Put the window global variable
window.BattleField = this._battleField;
}
Ok, here's where our map is done. The comments here have been very detailed, if you do not understand the place to download their own source code debugging is very easy to understand.
Here, the map data is loaded, and each map is inserted into the HTML document as a span element. And store the map's objects in a two-dimensional array. In the future, when we do collision detection, we can fetch the corresponding array object directly from the coordinate of the object, which is very convenient.
Attach the source code: (link: http://xiazai.jb51.net/201411/yuanma/jstankedazhan (jb51.net). Rar)