Javascript game development: 'Three Kingdoms Cao Cao Biography' component development (4) using map blocks to create a large map

When we were kids, we played jigsaw puzzles and put them together with our own hands. Today we will study how to use javascript to create puzzles. It is also a puzzle, but it is much more troublesome to use js to puzzle than to do it by hand, so I will optimize it into an engine in the future.

1. Foreword

The above is an introduction. I won’t go too far. Players who are familiar with "The Legend of Cao Cao" know that the map of "Three Kingdoms Cao Cao" is made up of small map tiles. To achieve it, it is the same as what the introduction says. : Very troublesome. But even trouble is still a skill, so I share it with you here, I hope you like it.

2. Code explanation

Today I want to change the way of explanation. I won’t give you the code first. Let’s think about the principle first. Now, if you have a picture, cut it into several parts and scramble them. Now if you use js to organize them, how to do it? Let’s not talk about the order of the pictures. First of all, it is difficult to put them together. At this time, I will reduce the difficulty and give you a few options:
A. Use margin to adjust slowly B. Use an array to arrange them C. Give up

In this question, it is unwise to choose A. Choosing C means you are not sure either. It seems that choice B is the best. Since everyone is told to use arrays, let’s start with the code. So as not to dampen everyone's interest.
js code:

Copy 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', '陆地'] 
, 'S': ['./sea.png', '河流'] 
, 'T': ['./tree.png', '树木'] 
, 'B': ['./bridge.png', '桥'] 
, 'C': ['./beach.png', '沙滩'] 
}; 
//{{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 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 only uses 195 lines, and this is a map. It seems to be a bit troublesome. It's okay, explain slowly.
First of all, let’s put the material here:

The material is not from "The Legend of Cao Cao", because I didn't sort out the map materials of "The Legend of Cao Cao", so I just found some randomly. But it can still be used. I hope you don't mind.

Troublesome code is the easiest to make a mess, so make a good distinction between style settings and puzzle core at this time.
Where is the core of the puzzle? Here:

Copy the code The code is 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 S, T, B, C, L so that S represents the river, T represents the tree, B represents the bridge, and stands for beach and L stands for land. var mCurrent will be useful later, so I won’t explain it yet. Then there is var mTitle, which is specifically used to display the title, so I won’t explain it. The key is below:

Copy code The code is 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 defined core of S, T, B, C, and L connected together. Later, you only need to define the width and height of S, T, B, C, and L to connect them together. And the style can be changed just by adjusting their position in the array.
Next, in order to switch maps, we put the first map into the array:

Copy the code The code is as follows:

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

If a map is added later, Just add the array name to which the map belongs to the vHurdles array, and you can directly write the corresponding subscript when calling it.
The style settings are as follows:

Copy the code 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 above. 

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.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."); 
} 
} 
}

以上的代码很简单，自己可以看看，提示一下：当你在自己开发的过程中如果弹出一个Error: 0002, Error: 0003, Error: 0001什么之类的，就代表出了错，需要马上去检查。这是为了在麻烦的程序开发中有一点提醒而设计的。值得注意的是：这里的图片全是createElement弄出来的，所以请不要猜疑html代码里有什么蹊跷。
接着看：

复制代码代码如下:

function _showHurdle(nHurdle) 
{ 
if(vHurdles[nHurdle - 1]){ 
_loadHurdle(vHurdles[nHurdle - 1]); 
_showMap('ID_DIV_BATTLEFIELD'); 
}else{ 
alert("Error: 0001."); 
} 
}

这是在你要弄出地图的调用函数，当你在html代码里写上：几可以把拼的图一下子画出来。nHurdle就是地图在数组vHurdles里的对应下标，最低是1，而不是0，也就是说要用第一张地图,那nHurdle就该赋值为1，调用是写为：。

源代码下载
三、演示效果

演示图在下：

由于是静态的，所以就不给demo了。这种方法虽然很麻烦，而且地图块多了就很慢，但是毕竟是种技术，如果大家有什么好的方法也可以来告诉我。

希望大家多支持。谢谢。