The development of JavaScript game "kingdoms Cao Chuan" parts development (iv) using map blocks to make large maps _javascript skills

When we were kids, we played jigsaw puzzles with our own hands. Today we're going to study the puzzle with JavaScript. The same puzzle, but with the JS puzzle than the hand puzzle more trouble, so later I want to optimize it into the engine.

First, the preface

The above is a section of lead, words do not pull far, to "kingdoms Cao Chuan" Familiar players know, "Kingdoms Cao Chuan" map is made of small map pieces, that to achieve it and the lead said the same: very troublesome. But even if the trouble is a technology, so to share here, I hope you like.

Second, the code explanation

Today I want to change the way to explain, do not give the code, we first think about the principle. Now, if you have a picture, cut it into several parts and disturb it. Now if you want to use JS to organize them, how to do? Not to mention the order of the graph, first of all, it is difficult to get them together. At this point I reduce the difficulty, give you a few choices:
A. Use margin to slowly adjust B. Arrange them with an array C. Give up

In this question, choose a is very unwise, the choice of C on behalf of you also have no idea. b seems to be the best choice. Now that you're telling everyone to use an array, let's start with the code. Lest we should kill everyone's interest.
JS Code:

Copy Code code as follows:

/*
*prompt:
*if you want to add hurdle, find string: "{Add hurdle above." and "{{After Add hurdle, add the hurdle to the vector above . "Please.
*if you want to add or change type of grid, find string: "{Add new grid above.".
*if you want to the change position of the map, please find string: ' {{change map margin above. '.
*if the icon of the Crid is changed, you are have to change the size of icon. Find ' {{change icon size above. ' To change size.
*/

Map of hurdle or military or resource.
var vview = [];

/*remarks:
*l:land *s:sea *r:river *w:swamp *a:lawn *b:bridge *h:house *h:hospital *w:warehouse *b:bourse *m:military Acad Emy *m:military Factories
*r:research Center *p:port *d:dock *s:shipyard
*/
var mscene = {
' L ': ['./land.png ', ' land ']
, ' S ': ['./sea.png ', ' River ']
, ' T ': ['./tree.png ', ' trees ']
, ' B ': ['./bridge.png ', ' Bridge ']
, ' C ': ['./beach.png ', ' Beach ']
};
{ADD new grid above.

var mcurrent = {
Margin: {
Left:-1
, Top:-1
, right:-1
, Bottom:-1
}
, Position: {
X:-1
, Y:-1
}
, Type: ' NONE '

};
var mtitle = {};

var shurdleone =
' S,s,s,s,s,s,s,s,s,s,s '
+ '; T,l,t,t,t,t,s,s,s,s,t '
+ '; T,l,l,t,s,s,s,s,s,l,t '
+ '; T,l,l,l,c,c,c,s,s,t,s '
+ '; T,l,l,l,c,c,c,b,b,l,t '
+ '; T,l,l,c,c,c,c,s,s,l,t '
+ '; T,l,l,c,c,t,s,s,l,l,t '

{ADD hurdle above.

var vhurdles = [Shurdleone];
{{After Add hurdle, add the hurdle to the vector above.

function _creategrid (Nwidthbasic, Nheightbasic, Npicwidth, Npicheight, CType, Mmargin)
{
var mcoordmember = {
Left:nwidthbasic
, Top:nheightbasic
, Right:nwidthbasic + npicwidth
, Bottom:nheightbasic + npicheight
};
var mpositionmember = {
X: (mcoordmember.left-mmargin.x)/Npicwidth
, Y: (MCOORDMEMBER.TOP-MMARGIN.Y)/Npicheight
};
var Mitem = {
Coord:mcoordmember
, Position:mpositionmember
, Type:ctype
};

return mitem;
}

function _loadhurdle (shurdle)
{
var nbasic = 0;
var nwidthbasic = Nbasic; Margin-left.
var nheightbasic = 0; Margin-top.

{{change map margin above.}

var npicwidth = 45; Picture width is nbasic.
var npicheight = 45; Picturn the height is nheightbasic.
{{Change icon size above.}

var nsub;
var nrow;
var Ncol;

var v = shurdle.split (';');
var vrec = [];

for (nsub = 0; nsub < v.length; nsub++) {
var Vcrid = V[nsub].split (', ');
Vrec[vrec.length] = Vcrid;
}

for (nrow = 0; nrow < vrec.length; nrow++) {
var vcol = Vrec[nrow];

for (ncol = 0; Ncol < vcol.length; ncol++) {
var cType = Vcol[ncol];
var mmargin = {x:nbasic, y:nbasic};

Vview[vview.length] = _creategrid (Nwidthbasic, Nheightbasic, Npicwidth, Npicheight, CType, Mmargin);

Nwidthbasic + = Npicwidth;
}

Nheightbasic + = Npicheight;
Nwidthbasic = Nbasic;
}
}



Show map with Vector ' Vview '.
function _showmap (SID)
{
var Xdiv=document.getelementbyid (SID);

var XGrid;
var ximg;


var nTop = 0;

var nsub;
var sidprefix = ' id_img_num_ ';
var sidgrid = ' id_a_num_ ';
for (nsub = 0; nsub < vview.length; nsub++) {
var mgrid = vview[nsub];

if (Mgrid) {
var xmargin = Mgrid.coord;
var cType = Mgrid.type;
var xproper = Mscene[ctype];

if (xproper) {
XGrid = document.createelement (' a ');
ximg = document.createelement (' img ');

xImg.style.position = ' absolute ';
XImg.style.marginLeft = Xmargin.left;
XImg.style.marginTop = Xmargin.top;

XIMG.SRC = xproper[0];

XImg.style.border = ' 0px solid #000000 ';
Ximg.id = Sidprefix + nsub;

XImg.style.width = 45;
XImg.style.height = 45;

XImg.style.display = ' block ';

Xgrid.onclick = function (e) {
var xcurrentgrid = E.target;
var sId = xcurrentgrid.id;
var nidassub = parseint (sid.substring (Sidprefix.length, sid.length));

Mcurrent = Vview[nidassub];
if (!mcurrent) {
Alert ("Error 0004.");
}
};
Xgrid.title = xproper[1] + ' (' + parseint (mgrid.position.x) + ', ' + parseint (mgrid.position.y+2) + ') ';
Xgrid.id = Sidgrid + nsub;

Xgrid.appendchild (XIMG);

Xdiv.appendchild (XGrid);
}else{
Alert ("error:0003.");
}
}else{
Alert ("error:0002.");
}
}
}

Show map of Hurdle.
function _showhurdle (nhurdle)
{
if (Vhurdles[nhurdle-1]) {
_loadhurdle (vhurdles[nhurdle-1]);
_showmap (' Id_div_battlefield ');
}else{
Alert ("error:0001.");
}
}

Look, this program took 195 lines, and this is still a map, it seems to be a little trouble oh. Never mind, explain slowly.
First of all, put the material here:

The material is not from "kingdoms", because did not tidy up the "kingdoms Cao Chuan" map material, so casually find some. But it can be used as well. I hope you don't mind.

Troublesome code is the easiest to mess with, so be good at this point to separate style settings and puzzle cores.
Where is the puzzle core? Over here:

Copy Code code as follows:

var mscene = {
' L ': ['./land.png ', ' land ']
, ' S ': ['./sea.png ', ' River ']
, ' T ': ['./tree.png ', ' trees ']
, ' B ': ['./bridge.png ', ' Bridge ']
, ' C ': ['./beach.png ', ' Beach ']
};
{ADD new grid above.

var mcurrent = {
Margin: {
Left:-1
, Top:-1
, right:-1
, Bottom:-1
}
, Position: {
X:-1
, Y:-1
}
, Type: ' NONE '

};
var mtitle = {};

var shurdleone =
' S,s,s,s,s,s,s,s,s,s,s '
+ '; T,l,t,t,t,t,s,s,s,s,t '
+ '; T,l,l,t,s,s,s,s,s,l,t '
+ '; T,l,l,l,c,c,c,s,s,t,s '
+ '; T,l,l,l,c,c,c,b,b,l,t '
+ '; T,l,l,c,c,c,c,s,s,l,t '
+ '; T,l,l,c,c,t,s,s,l,l,t '

{ADD hurdle above.

var vhurdles = [Shurdleone];
{{After Add hurdle, add the hurdle to the vector above.

First I define the s,t,b,c,l so that s represents the river, T stands for the trees, B stands for the bridge, C represents the beach, L represents the land. var mcurrent is useful later, not explained. Then there is the Var mtitle, which is specifically used to show title, so it's not explained. The key is the following:

Copy Code code as follows:

var shurdleone =
' S,s,s,s,s,s,s,s,s,s,s '
+ '; T,l,t,t,t,t,s,s,s,s,t '
+ '; T,l,l,t,s,s,s,s,s,l,t '
+ '; T,l,l,l,c,c,c,s,s,t,s '
+ '; T,l,l,l,c,c,c,b,b,l,t '
+ '; T,l,l,c,c,c,c,s,s,l,t '
+ '; T,l,l,c,c,t,s,s,l,l,t '

This code is the core that defines the s,t,b,c,l together. You can connect them only by defining the width height definition of the s,t,b,c,l. And you can change the style by just adjusting the position in the array.
Next, in order to switch the map, we put the first map in the array:

Copy Code code as follows:

var vhurdles = [Shurdleone];
{{After Add hurdle, add the hurdle to the vector above.

If you later add a map, only use the map to the array name added to the vhurdles array can be, call can directly write the corresponding subscript.
Style settings are below:

Copy Code code as follows:

function _creategrid (Nwidthbasic, Nheightbasic, Npicwidth, Npicheight, CType, Mmargin)
{
var mcoordmember = {
Left:nwidthbasic
, Top:nheightbasic
, Right:nwidthbasic + npicwidth
, Bottom:nheightbasic + npicheight
};
var mpositionmember = {
X: (mcoordmember.left-mmargin.x)/Npicwidth
, Y: (MCOORDMEMBER.TOP-MMARGIN.Y)/Npicheight
};
var Mitem = {
Coord:mcoordmember
, Position:mpositionmember
, Type:ctype
};

return mitem;
}

function _loadhurdle (shurdle)
{
var nbasic = 0;
var nwidthbasic = Nbasic; Margin-left.
var nheightbasic = 0; Margin-top.

{{change map margin above.}

var npicwidth = 45; Picture width is nbasic.
var npicheight = 45; Picturn the height is nheightbasic.
{{Change icon size above.}

var nsub;
var nrow;
var Ncol;

var v = shurdle.split (';');
var vrec = [];

for (nsub = 0; nsub < v.length; nsub++) {
var Vcrid = V[nsub].split (', ');
Vrec[vrec.length] = Vcrid;
}

for (nrow = 0; nrow < vrec.length; nrow++) {
var vcol = Vrec[nrow];

for (ncol = 0; Ncol < vcol.length; ncol++) {
var cType = Vcol[ncol];
var mmargin = {x:nbasic, y:nbasic};

Vview[vview.length] = _creategrid (Nwidthbasic, Nheightbasic, Npicwidth, Npicheight, CType, Mmargin);

Nwidthbasic + = Npicwidth;
}

Nheightbasic + = Npicheight;
Nwidthbasic = Nbasic;
}
}



Show map with Vector ' Vview '.
function _showmap (SID)
{
var Xdiv=document.getelementbyid (SID);

var XGrid;
var ximg;


var nTop = 0;

var nsub;
var sidprefix = ' id_img_num_ ';
var sidgrid = ' id_a_num_ ';
for (nsub = 0; nsub < vview.length; nsub++) {
var mgrid = vview[nsub];

if (Mgrid) {
var xmargin = Mgrid.coord;
var cType = Mgrid.type;
var xproper = Mscene[ctype];

if (xproper) {
XGrid = document.createelement (' a ');
ximg = document.createelement (' img ');

xImg.style.position = ' absolute ';
XImg.style.marginLeft = Xmargin.left;
XImg.style.marginTop = Xmargin.top;

XIMG.SRC = xproper[0];

XImg.style.border = ' 0px solid #000000 ';
Ximg.id = Sidprefix + nsub;

XImg.style.width = 45;
XImg.style.height = 45;

XImg.style.display = ' block ';

Xgrid.onclick = function (e) {
var xcurrentgrid = E.target;
var sId = xcurrentgrid.id;
var nidassub = parseint (sid.substring (Sidprefix.length, sid.length));

Mcurrent = Vview[nidassub];
if (!mcurrent) {
Alert ("Error 0004.");
}
};
Xgrid.title = xproper[1] + ' (' + parseint (mgrid.position.x) + ', ' + parseint (mgrid.position.y+2) + ') ';
Xgrid.id = Sidgrid + nsub;

Xgrid.appendchild (XIMG);

Xdiv.appendchild (XGrid);
}else{
Alert ("error:0003.");
}
}else{
Alert ("error:0002.");
}
}
}

The above code is very simple, you can see, hint: When you are in the process of developing a error:0002, error:0003, error:0001 What kind of, on behalf of the wrong, need to immediately check. This is designed to be a bit of a reminder in the development of troublesome programs. It's worth noting that the images here are all createelement out, so please don't be suspicious of what's in the HTML code.
Next look:

Copy Code code as follows:

function _showhurdle (nhurdle)
{
if (Vhurdles[nhurdle-1]) {
_loadhurdle (vhurdles[nhurdle-1]);
_showmap (' Id_div_battlefield ');
}else{
Alert ("error:0001.");
}
}

This is where you're going to make the call function for the map, when you write in the HTML code: <body onload= "_showhurdle (nhurdle)" > A few of the pictures can be spelled out. Nhurdle is the map in the array vhurdles in the corresponding subscript, the lowest is 1, rather than 0, that is, to use the first map, that nhurdle the assignment is 1, the call is written as: <body onload= "_showhurdle (1)" >.

Source code Download
Third, the demonstration effect

Demo Diagram below:

Because is static, therefore does not give the demo. Although this method is very troublesome, and more map block is very slow, but after all, is a technology, if you have any good method can also come to tell me.

I hope you will support us more. Thank you.