2. Perfect map
Our map has spaces, walls, steel, grass, water, headquarters and other obstacles. We can design all of these as objects.
2.1 Creating an Obstacle object group
Object groups hold objects on various maps, and we determine whether an object can be crossed or attacked by its properties.
Barrier.js:
Copy Code code as follows:
Obstacle base class object, inherit from Tankobject
Barrier = function () {
This. Defenval = 1; Defensive force
This. Canbeattacked = true; Whether it can be attacked
}
Barrier.prototype = new Tankobject ();
Wall
WALLB = function () {}
Wallb.prototype = new Barrier ();
Clearing
Emptyb = function () {
This. Canacross = true; can be worn through
}
Emptyb.prototype = new Barrier ();
River
Riverb = function () {
This. Defenval = 0;
This. canbeattacked = false; Overrides a member of an object that inherits from the parent class.
}
Riverb.prototype = new Barrier ();
Steel
Steelb = function () {
This. Defenval = 3;
}
Steelb.prototype = new Barrier ();
Grass objects
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 to the Common.js:
Copy Code code as follows:
Map Element Type Enumeration
/*
0: Open Space
1: The Wall
2: Steel
3: The Grove
4: The River
5: Headquarters
*/
var Enummapcelltype = {
Empty: "0"
, Wall: "1"
, Steel: "2"
, Tod: "3"
, River: "4"
, podium: "5"
};
The name of the style corresponding to each terrain
var arraycss = [' Empty ', ' wall ', ' steel ', ' Tod ', ' River ', ' podium '];
Checkpoint Map
/* Checkpoint/
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 Checkpoint Map 0,1,2,3 ... respectively for 1-n ... Off
var top_maplevel = [STR];
2.3 Drawing Maps
When the preparations are done, start with the dishes and draw a map. There is a table in front of our map for 13 * 13. So we add the row and column two properties to the game load object, and add the initialization map method.
Frame.js:
Copy Code code as follows:
Game Load Object The whole game's core object
Gameloader = function () {
This._mapcontainer = document.getElementById ("Divmap"); The div that holds the game map
This._selftank = null; Player Tank
This._gamelistener = null; Game main loop Timer ID
/*v2.0 the new attribute * *
This._level = 1;
This._rowcount = 13;
This._colcount = 13;
This._battlefield = []; Storing a two-dimensional array of map objects
}
Load Map method
Load:function () {
Initialize map based on rank
var map = Top_maplevel[this._level-1].split (",");
var mapborder = utilityclass.createe ("div", "" "," Mapborder ", This._mapcontainer);
Traverse every cell in the map table
for (var i = 0; i < This._rowcount; i++) {
Create Div, each line of map saved in this Div
var divrow = utilityclass.createe ("div", "" "," ", Mapborder);
To create an 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;
Inserts a SPAN element, a SPAN element that is a map unit
var spancol = utilityclass.createe ("span", "" "," "", Divrow);
Spancol.classname = Arraycss[v];
The map object is placed in a two-dimensional array to facilitate collision detection at the back.
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 out of bounds!") ");
Break
}
To. UI = Spancol;
Here's j is x, because the inner loop is transverse, and x is the horizontal axis.
To. XPosition = j;
To. YPosition = i;
The current map object is deposited in a two-dimensional array, obj is the object of obstruction, and occupier is the object of possession.
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 our map. Here the comments have been very detailed, if you still do not understand where you download the source code debugging is very good understanding.
This mainly loads the map data and inserts each map as a SPAN element into the HTML document. and store the objects of the map in a two-dimensional array. After we do collision detection can be directly through the object coordinates to the corresponding array object, very convenient.
Attached source code: http://xiazai.jb51.net/201411/yuanma/Jstankedazhan (jb51.net). rar
