Creating a full record of tank battles with javascript (2)_javascript skills

2. Improve the map

Our map has obstacles such as open spaces, walls, steel, grass, water, and headquarters. We can design all of these as objects.

2.1 Create obstacle object group

The object group stores objects on various maps. We use the properties of the objects to determine whether the objects can be passed through or attacked.

Barrier.js:

Copy code The code is as follows:

// Obstacle base class object, inherited from TankObject
Barrier = function () {
This.DefenVal = 1; // Defense power
This.CanBeAttacked = true; // Whether it can be attacked
}
Barrier.prototype = new TankObject();
// Wall
WallB = function () { }
WallB.prototype = new Barrier();
// Open space
EmptyB = function () {
This.CanAcross = true; // Can be passed through
}
EmptyB.prototype = new Barrier();
// River
RiverB = function () {
This.DefenVal = 0;
This.CanBeAttacked = false; // The members of the object are taken first, 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 Data written to the map.

Add the following code in Common.js:

Copy code The code is as follows:

//Map element type enumeration
/*
0: Open space
1: Wall
2: Steel
3: Bushes
4：River
5: Headquarters
*/
var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
//The style name corresponding to 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 = ',0100000000110';
str = ',0100012101101';
str = ',0010015100000';
//Storage level map 0,1,2,3... are 1-n respectively...Level
var Top_MapLevel = [str];

2.3 Draw a map

Now that the preparations are done, let’s start serving the dishes and drawing the map. As mentioned earlier, our map is a 13 * 13 table. So we add row and column attributes to the game loading object, and add an initialization map method.

Frame.js:

Copy code The code is as follows:

// Game loading object The core object of the entire game
GameLoader = function () {
This._mapContainer = document.getElementById("divMap"); // The div
that stores the game map This._selfTank = null; // Player tank
This._gameListener = null; // Game main loop timer id
/*New attributes added in v2.0*/
This._level = 1;
This._rowCount = 13;
This._colCount = 13;
This._battleField = []; // Store the two-dimensional array of map objects
}
//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, and the map of each row is saved in this div
            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 span element, a span element is a map unit
              var spanCol = UtilityClass.CreateE("span", "", "", divRow);
                      spanCol.className = ArrayCss[v];
                               // Put the map object into a two-dimensional array to facilitate subsequent 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("The map number is out of bounds!");
                              break;
                 }
                     to.UI = spanCol;
                         // j here is X, because the inner loop is horizontal, x is the abscissa
                          to.XPosition = j;
                        to.YPosition = i;
                                           // Store the current map object into a two-dimensional array, obj is the obstacle object, and occupier is the occupying object
This._battleField[i][j] = { obj: to, occupier: null, lock: false };
                                             //end for
                                   // end for
                                            // Put into window global variable
            window.BattleField = this._battleField;
}

ok, our map is done here. The comments here are very detailed. If you still don't understand something, download the source code and debug it yourself. It will be easy to understand.

Here we mainly load map data and insert each map into the html document as a span element. And store the map object in a two-dimensional array. In the future, when we do collision detection, we can directly get the corresponding array object through the coordinates of the object, which is very convenient.

Attached is the source code: http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar