Returned directory
1. Where do game map objects need to be used?
Game map objects are suitable for games such as tank wars and pushing boxes. The maps of these games are composed of small grids. Using Game map objects, you can easily generate such maps.
2. Example: generate a map
When using map objects, a map can be generated based on a two-dimensional array with only a small amount of code.
Code:
<Body>
<Canvas id = "gameCanvas"> use a canvas-supported browser. </canvas>
</Body>
<Script src = "http://files.cnblogs.com/Cson/cnGame_v1.0.js"> </script>
<Script>
/* Map drawing test */
CnGame. init ('gamecanvas ', {width: 200, height: 200 });
Var gameObj = {};
GameObj. initialize = function (){
Var mapMatrix = [
[1, 1, 1, 1],
[1, 0, 1, 0],
[1, 0, 0, 0, 1],
[, 1],
[1, 1, 1]
];
Var map = cnGame. Map (mapMatrix, {cellSize: [40, 40]});
Map. draw ({"1": {src: "brick.gif", x: 0, y: 0}, "0": {src: "floor.png", x: 0, y: 0 }});
}
CnGame. loader. start (["brick.gif", "floor.png"], gameObj );
</Script>
Generated map:
You only need to transfer the two-dimensional matrix of the map and tell the map object which value corresponds to which image to generate the map.
3. Implementation
Next we will explain how to use code to implement map objects. First, check the initialization function:
Map. prototype = {
/**
* Initialization
**/
Init: function (mapMatrix, options ){
/**
* Default object
**/
Var defaultObj = {
CellSize: [32, 32], // square width, height
Begstarted: 0, // map start x
BeginY: 0 // map start y
};
Options = options | {};
Options = cg. core. extend (defaultObj, options );
This. mapMatrix = mapMatrix;
This. cellSize = options. cellSize;
This. begtables = options. begtables;
This. beginY = options. beginY;
This. row = mapMatrix. length; // number of rows
},
To determine a map object, you must first determine the size of the map grid, the starting x coordinate of the map, and the starting y coordinate. You can then generate and draw Map Objects Based on these parameters, and then see how to draw a map based on the parameters:
/**
* Map based on the map Matrix
**/
Draw: function (options) {// options: {"1": {src: "xxx.png", x: 0, y: 0}, "2": {src: "xxx.png", x: 1, y: 1 }}
Var mapMatrix = this. mapMatrix;
Var beginX = this. beginX;
Var beginY = this. beginY;
Var cellSize = this. cellSize;
Var currentRow;
Var currentCol
Var currentObj;
Var row = this. row;
Var img;
For (var I = beginY, ylen = beginY + row * cellSize [1]; I <ylen; I + = cellSize [1]) {// draw each square based on the map Matrix
CurrentRow = (I-beginY)/cellSize [1];
For (var j = beginX, xlen = beginX + mapMatrix [currentRow]. length * cellSize [0]; j <xlen; j + = cellSize [0]) {
CurrentCol = (j-beginX)/cellSize [0];
CurrentObj = options [mapMatrix [currentRow] [currentCol];
Img = cg. loader. loadedImgs [currentObj. src];
Cg. context. drawImage (img, currentObj. x, currentObj. y, cellSize [0], cellSize [1], j, I, cellSize [0], cellSize [1]); // draw images with specific coordinates
}
}
},
In the draw method, map grids are drawn one by one based on the starting coordinate and grid size. Each element of a grid corresponds to a two-dimensional matrix. The image is selected based on the values of the two-dimensional matrix. In the preceding example, 1 is used to draw bricks and 2 is used to draw floors.
/**
* Obtain the square value of a specific object in the map.
**/
GetPosValue: function (elem ){
Return this. mapMatrix [Math. floor (elem. y/this. cellSize [1])] [Math. floor (elem. x/this. cellSize [0])];
}
In addition, you can use getPosValue to obtain the value of the graph position where the element is located. This method is useful in determining the location of a game object's map.
All source code of the map object:
/**
*
* Map
*
**/
CnGame. register ("cnGame", function (cg ){
Var map = function (mapMatrix, options ){
If (! (This instanceof arguments. callee )){
Return new arguments. callee (mapMatrix, options );
}
This. init (mapMatrix, options );
}
Map. prototype = {
/**
* Initialization
**/
Init: function (mapMatrix, options ){
/**
* Default object
**/
Var defaultObj = {
CellSize: [32, 32], // square width, height
Begstarted: 0, // map start x
BeginY: 0 // map start y
};
Options = options | {};
Options = cg. core. extend (defaultObj, options );
This. mapMatrix = mapMatrix;
This. cellSize = options. cellSize;
This. begtables = options. begtables;
This. beginY = options. beginY;
This. row = mapMatrix. length; // number of rows
},
/**
* Map based on the map Matrix
**/
Draw: function (options) {// options: {"1": {src: "xxx.png", x: 0, y: 0}, "2": {src: "xxx.png", x: 1, y: 1 }}
Var mapMatrix = this. mapMatrix;
Var beginX = this. beginX;
Var beginY = this. beginY;
Var cellSize = this. cellSize;
Var currentRow;
Var currentCol
Var currentObj;
Var row = this. row;
Var img;
For (var I = beginY, ylen = beginY + row * cellSize [1]; I <ylen; I + = cellSize [1]) {// draw each square based on the map Matrix
CurrentRow = (I-beginY)/cellSize [1];
For (var j = beginX, xlen = beginX + mapMatrix [currentRow]. length * cellSize [0]; j <xlen; j + = cellSize [0]) {
CurrentCol = (j-beginX)/cellSize [0];
CurrentObj = options [mapMatrix [currentRow] [currentCol];
Img = cg. loader. loadedImgs [currentObj. src];
Cg. context. drawImage (img, currentObj. x, currentObj. y, cellSize [0], cellSize [1], j, I, cellSize [0], cellSize [1]); // draw images with specific coordinates
}
}
},
/**
* Obtain the square value of a specific object in the map.
**/
GetPosValue: function (elem ){
Return this. mapMatrix [Math. floor (elem. y/this. cellSize [1])] [Math. floor (elem. x/this. cellSize [0])];
}
}
This. Map = map;
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
