Full record on creating a tank battle using javascript (2) _ javascript skills

We have simply completed the prototype of the tank war above. In this article, we will continue to improve the tank war. Next we will learn how to create maps and collision detection. 2. Complete the map

Our map contains open space, walls, steel, grass, water, headquarters and other obstacles. We can design all these as objects.

2.1 create an obstacle object group

The object group stores objects on various maps. We use the object attributes to determine whether the object can be crossed or attacked.

Barrier. js:

The Code is as follows:

// Obstacle base class Object inherited from TankObject
Barrier = function (){
This. DefenVal = 1; // defensive strength
This. CanBeAttacked = true; // whether it can be attacked
}
Barrier. prototype = new TankObject ();
// Wall
WallB = function (){}
WallB. prototype = new Barrier ();
// Open Space
EmptyB = function (){
This. can1_ss = true; // can be passed through
}
EmptyB. prototype = new Barrier ();
// River
RiverB = function (){
This. DefenVal = 0;
This. CanBeAttacked = false; // takes precedence over the members of the object. The members 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. can1_ss = true;
}
TodB. prototype = new Barrier ();
// Headquarters
PodiumB = function (){
This. DefenVal = 5;
}
PodiumB. prototype = new Barrier ();

2.2 write data into the map.

Add the following code to Common. js:

The Code is as follows:

// Map element type Enumeration
/*
0: Open Space
1: Wall
2: Steel
3: Bush
4: River
5: Headquarters
*/
Var EnumMapCellType = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Todd: "3"
, River: "4"
, Podium: "5"
};
// The style name corresponding to each terrain
Var ArrayCss = ['empty', 'Wall', 'steel ', 'foot', 'River', 'podium '];
// Level Map
/* Level */
Var str = '20140901 ';
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 level maps 0, 1, 2, 3, and 1-N respectively.
Var Top_MapLevel = [str];

2.3 draw a map

After the preparation is complete, we will start to make a big dish and draw a map. We mentioned above that the map is a 13*13 table. Therefore, we add the row and column attributes in the game loading object and add the map initialization method.

Frame. js:

The Code is as follows:

// Game loading objects: core objects of the entire game
GameLoader = function (){
This. _ mapContainer = document. getElementById ("pMap"); // stores the p of the game map
This. _ selfTank = null; // player Tank
This. _ gameListener = null; // the id of the Main Loop timer of the game.
/* V2.0 attributes of the new addition */
This. _ level = 1;
This. _ rowCount = 13;
This. _ colCount = 13;
This. _ battleField = []; // stores two-dimensional arrays of map objects.
}
// Map Loading Method
Load: function (){
// Initialize the map based on the level
Var map = Top_MapLevel [this. _ level-1]. split (",");
Var mapBorder = UtilityClass. CreateE ("p", "", "mapBorder", this. _ mapContainer );
// Traverse every cell in the map table
For (var I = 0; I <this. _ rowCount; I ++ ){
// Create p. The map of each row is saved in this p.
Var pRow = UtilityClass. CreateE ("p", "", "", 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", "", "", pRow );
SpanCol. className = ArrayCss [v];
// Put the map object into a two-dimensional array to facilitate 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. TODD:
To = new TodB ();
Break;
Case EnumMapCellType. River:
To = new RiverB ();
Break;
Case EnumMapCellType. Podium:
To = new PodiumB ();
Break;
Default:
Throw new Error ("map number out of bounds! ");
Break;
}
To. UI = spanCol;
// Here j is X, because the internal cycle is horizontal, and x is the X coordinate.
To. XPosition = j;
To. YPosition = I;
// Save the current map object to a two-dimensional array. obj is the obstacle object, and occupier is the occupied object.
This. _ battleField [I] [j] = {obj: to, occupier: null, lock: false };
} // End
} // End
// Put the window global variable
Window. BattleField = this. _ battleField;
}

OK. Now we have finished the map. The comments here are very detailed. If you have any questions, you can download the source code and debug it yourself.

Here, we mainly load map data and insert each map as a span element into the html document. In addition, map objects are stored in two-dimensional arrays. In the future, when performing collision detection, we can directly obtain the corresponding array object through the object coordinates, which is very convenient.

Attached Source: http://xiazai.jb51.net/201411/yuanma/Jstankedazhan(jb51.netw..rar