Javascript game development-component development of "Three Kingdoms Cao Zhuan" (4) using map blocks to build a map _ javascript skills

When we were a child, we used our own hands to play the puzzle game. Today, we will study and use javascript to make puzzles. If you are interested, I hope this article will help you. When you were a child, we used to play the puzzle game, and we used our own hands to work on it. Today we are going to study how to use javascript For puzzles. It is also a puzzle, but it is much more complicated to use js puzzles than to use hand puzzles, so I will optimize it into an engine in the future.

I. Preface

The above is a piece of introduction, which is easy to talk about. players familiar with the "Three Kingdoms Cao Zhuan Chuan" know that the map of the "Three Kingdoms Cao Zhuan Chuan" is made up of small map blocks, the implementation is the same as the introduction: very troublesome. However, even if it is troublesome, it is a technology. Therefore, I would like to share it with you.

Ii. Code explanation

Today I want to change the explanation method. I will not give the code first. Let's first think about the principle. Now, if you have an image, cut it into several copies and disrupt it. How can we organize them with js? Let's not talk about the sequence of graphs. First, it is very difficult to put them together. At this time, I will reduce the difficulty and give you several options:
A. Use margin to slowly adjust B. Arrange them with arrays C. Give up

In this question, it is unwise to select A. Selecting C means you have no idea. It seems that B is the best choice. Since they all tell everyone to use arrays, let's get the code first. So that you do not have to worry about it.
Js Code:

The Code is 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 change position of map, please find string: "{Change map margin above .".
* If the icon of crid is changed, you 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 academy * 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', 'login']
, 'B': ['./bridge.png', 'qiao']
, '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'
+ '; T, L, T, S, T'
+ '; T, L, L, T, S, L, T'
+ '; T, L, C, C, S, S, T, s'
+ '; T, L, C, C, B, B, L, T'
+ '; T, L, L, 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 abve.

Var nPicWidth = 45; // Picture width is nBasic.
Var nPicHeight = 45; // Picturn 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.tar get;
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 uses 195 rows, and this is still a map, it seems a little troublesome. It doesn't matter. Please explain it slowly.
First, put the material here:

Materials are not from the "Three Kingdoms Cao Zhuan", because the map materials of the "Three Kingdoms Cao Zhuan" have not been sorted out, so I can find some materials at will. But it can also be used. I hope you don't mind.

Troublesome code is the easiest way to mess up, so we need to better differentiate style settings and the core of the puzzle.
Where is the core of the puzzle? Here:

The Code is as follows:

Var mScene = {
'L': ['./land.png', 'land']
,'S ': ['./sea.png ', 'river']
, 'T': ['./tree.png', 'login']
, 'B': ['./bridge.png', 'qiao']
, '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'
+ '; T, L, T, S, T'
+ '; T, L, L, T, S, L, T'
+ '; T, L, C, C, S, S, T, s'
+ '; T, L, C, C, B, B, L, T'
+ '; T, L, L, 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 S, T, B, C, L so that S represents the river, T represents the trees, B Represents the bridge, C Represents the beach, and L represents the land. Var mCurrent is useful later. It is not explained at the moment. Then there is var mTitle, which is used to display the title, so it is not explained. The key is as follows:

The Code is as follows:

Var sHurdleONE =
'S, S, S'
+ '; T, L, T, S, T'
+ '; T, L, L, T, S, L, T'
+ '; T, L, C, C, S, S, T, s'
+ '; T, L, C, C, B, B, L, T'
+ '; T, L, L, C, S, S, L, T'
+ '; T, L, L, C, C, T, S, S, L, L, T'

This code is the core of linking defined S, T, B, C, and L together. The width and height of S, T, B, C, and L can be defined as one piece. And you only need to adjust their positions in the array to change the style.
Next, in order to switch the map, we put the first map into an array:

The Code is as follows:

Var vHurdles = [sHurdleONE];
// {After add hurdle, add the hurdle to the vector above.

If a map is added later, you only need to add the name of the array to which the map belongs to the vHurdles array. If you call the map, you can directly write the corresponding subscript.
The style settings are as follows:

The Code is 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 abve.

Var nPicWidth = 45; // Picture width is nBasic.
Var nPicHeight = 45; // Picturn 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.tar get;
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. Let's take a look at it and remind you: if an Error: 0002, Error: 0003, Error: 0001, Or something pops up during your development, it indicates that an error has occurred and needs to be checked immediately. This is designed with a little reminder in troublesome program development. It is worth noting that the images here are all created by createElement, so please do not suspect any flaws in the html code.
Next, let's see:

The Code is as follows:

Function _ showHurdle (nHurdle)
{
If (vHurdles [nHurdle-1]) {
_ LoadHurdle (vHurdles [nHurdle-1]);
_ ShowMap ('Id _ DIV_BATTLEFIELD ');
} Else {
Alert ("Error: 0001 .");
}
}

This is the call function for creating a map. When you write in the html code:Several can be used to draw a picture. NHurdle is the subscript corresponding to the map in the array vHurdles. The minimum value is 1 rather than 0. That is to say, to use the first map, nHurdle should be assigned 1, and the call is written:.

Source code download
Iii. demonstration results

The demo is shown below:

Because it is static, we will not give the demo. This method is troublesome, and it is very slow when there are too many map blocks, but it is a technology after all. If you have any good methods, please let me know.

I hope you will have more support. Thank you.