小时候我们玩过拼图游戏，是用自己的手去拼的。今天我们来研究研究用javascript来拼图。同样是拼图，但用js拼图要比用手拼图麻烦多了，因此以后我要把它优化成引擎。
一、前言
以上是一段导语，话不扯远，对《三国志曹操传》熟悉的玩家知道，《三国志曹操传》的地图是由小地图块拼成的，那要实现它就和导语说得一样：很麻烦。不过即使麻烦也是一门技术，因此在此分享给大家，希望大家喜欢。
前几章的位置：
用Javascript开发《三国志曹操传》-零部件开发(三)-人物对话中，仿打字机输出文字
http://www.cnblogs.com/ducle/archive/2012/09/15/2686532.html
用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动
http://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html
用Javascript开发《三国志曹操传》-零部件开发(一)-让静态人物动起来
http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html
二、代码讲解
今天我要换换讲解方式，先不给代码，我们先来想想原理。现在，假如你有一幅图片，把它裁开成若干份，并打乱。现在如果让你用js把他们组织起来，如何做呢？先不说图的顺序，首先来看把它们弄在一起就很难了。这时我减少难度，给你几个选择：
A.用margin慢慢调 B.用数组把它们排列好 C.放弃
在这道题中，选A是很不明智的，选C就代表你也拿不定主意。看来选B是最好的。既然都告诉大家用数组，那就先上代码吧。免得消磨大家兴致。
js代码：
1 /*
2 *Prompt:
3 *If you want to add hurdle, find string: "{{Add hurdle above." and "{{After add hurdle, add the hurdle to the vector above." please.
4 *If you want to add or change type of grid, find string: "{{Add new grid above.".
5 *If you want to change position of map, please find string: "{{Change map margin above.".
6 *If the icon of crid is changed, you have to change the size of icon. Find "{{Change icon size above." to change size.
7 */
8
9 //Map of hurdle or military or resource.
10 var vView = [];
11
12 /*Remarks:
13 *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
14 *r: research Center *P: port *D: dock *s: Shipyard
15 */
16 var mScene = {
17 'L': ['./land.png', '陆地']
18 , 'S': ['./sea.png', '河流']
19 , 'T': ['./tree.png', '树木']
20 , 'B': ['./bridge.png', '桥']
21 , 'C': ['./beach.png', '沙滩']
22 };
23 //{{Add new grid above.
24
25 var mCurrent = {
26 Margin: {
27 left: -1
28 , top: -1
29 , right: -1
30 , bottom: -1
31 }
32 , Position: {
33 X: -1
34 , Y: -1
35 }
36 , Type: 'NONE'
37
38 };
39 var mTitle = {};
40
41 var sHurdleONE =
42 'S,S,S,S,S,S,S,S,S,S,S'
43 + ';T,L,T,T,T,T,S,S,S,S,T'
44 + ';T,L,L,T,S,S,S,S,S,L,T'
45 + ';T,L,L,L,C,C,C,S,S,T,S'
46 + ';T,L,L,L,C,C,C,B,B,L,T'
47 + ';T,L,L,C,C,C,C,S,S,L,T'
48 + ';T,L,L,C,C,T,S,S,L,L,T'
49 ;
50 //{{Add hurdle above.
51
52 var vHurdles = [sHurdleONE];
53 //{{After add hurdle, add the hurdle to the vector above.
54
55 function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
56 {
57 var mCoordMember = {
58 left: nWidthBasic
59 , top: nHeightBasic
60 , right: nWidthBasic + nPicWidth
61 , bottom: nHeightBasic + nPicHeight
62 };
63 var mPositionMember = {
64 X: (mCoordMember.left - mMargin.x) / nPicWidth
65 , Y: (mCoordMember.top - mMargin.y) / nPicHeight
66 };
67 var mItem = {
68 Coord: mCoordMember
69 , Position: mPositionMember
70 , Type: cType
71 };
72
73 return mItem;
74 }
75
76 function _loadHurdle(sHurdle)
77 {
78 var nBasic = 0;
79 var nWidthBasic = nBasic; //margin-left.
80 var nHeightBasic = 0; //margin-top.
81
82 //{{Change map margin above.
83
84 var nPicWidth = 45; //Picture width is nBasic.
85 var nPicHeight = 45; //Picturn height is nHeightBasic.
86 //{{Change icon size above.
87
88 var nSub;
89 var nRow;
90 var nCol;
91
92 var v = sHurdle.split(';');
93 var vRec = [];
94
95 for(nSub = 0; nSub < v.length; nSub++){
96 var vCrid = v[nSub].split(',');
97 vRec[vRec.length] = vCrid;
98 }
99
100 for(nRow = 0; nRow < vRec.length; nRow++){
101 var vCol = vRec[nRow];
102
103 for(nCol = 0; nCol < vCol.length; nCol++){
104 var cType = vCol[nCol];
105 var mMargin = {x: nBasic, y: nBasic};
106
107 vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);
108
109 nWidthBasic += nPicWidth;
110 }
111
112 nHeightBasic += nPicHeight;
113 nWidthBasic = nBasic;
114 }
115 }
116
117
118
119 //Show map with vector 'vView'.
120 function _showMap(sID)
121 {
122 var xDiv=document.getElementById(sID);
123
124 var xGrid;
125 var xImg;
126
127
128 var nTop = 0;
129
130 var nSub;
131 var sIdPrefix = 'ID_IMG_NUM_';
132 var sIdGrid = 'ID_A_NUM_';
133 for(nSub = 0; nSub < vView.length; nSub++){
134 var mGrid = vView[nSub];
135
136 if(mGrid){
137 var xMargin = mGrid.Coord;
138 var cType = mGrid.Type;
139 var xProper = mScene[cType];
140
141 if(xProper){
142 xGrid = document.createElement('a');
143 xImg = document.createElement('img');
144
145 xImg.style.position = 'absolute';
146 xImg.style.marginLeft = xMargin.left;
147 xImg.style.marginTop = xMargin.top;
148
149 xImg.src = xProper[0];
150
151 xImg.style.border = '0px solid #000000';
152 xImg.id = sIdPrefix + nSub;
153
154 xImg.style.width = 45;
155 xImg.style.height = 45;
156
157 xImg.style.display = 'block';
158
159 xGrid.onclick = function(e){
160 var xCurrentGrid = e.target;
161 var sId = xCurrentGrid.id;
162 var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));
163
164 mCurrent = vView[nIdAsSub];
165 if(!mCurrent){
166 alert("Error 0004.");
167 }
168 };
169 xGrid.title = xProper[1] + '(' + parseInt(mGrid.Position.X) + ', ' + parseInt(mGrid.Position.Y+2) + ')';
170 xGrid.id = sIdGrid + nSub;
171
172 xGrid.appendChild(xImg);
173
174 xDiv.appendChild(xGrid);
175 }else{
176 alert("Error: 0003.");
177 }
178 }else{
179 alert("Error: 0002.");
180 }
181 }
182 }
183
184 //Show map of hurdle.
185 function _showHurdle(nHurdle)
186 {
187 if(vHurdles[nHurdle - 1]){
188 _loadHurdle(vHurdles[nHurdle - 1]);
189 _showMap('ID_DIV_BATTLEFIELD');
190 }else{
191 alert("Error: 0001.");
192 }
193 }
194
195
看看，这点程序就用了195行，而且这还是一张地图，看来还很有点麻烦哦。没关系，慢慢解释。
首先还是把素材放在这里，当然也可以去我的相册下载下来。
| tree.png | land.png | sea.png | bridge.png | beach.png |
素材不是来自《三国志曹操传》，因为没整理好《三国志曹操传》的地图素材，所以就随便找了些。不过也照样可以用。希望大家不要介意。
麻烦的代码最容易弄得乱七八糟，因此在此时要良好的区分开样式设置和拼图核心。
拼图核心在哪里呢？？？在这里：
1 var mScene = {
2 'L': ['./land.png', '陆地']
3 , 'S': ['./sea.png', '河流']
4 , 'T': ['./tree.png', '树木']
5 , 'B': ['./bridge.png', '桥']
6 , 'C': ['./beach.png', '沙滩']
7 };
8 //{{Add new grid above.
9
10 var mCurrent = {
11 Margin: {
12 left: -1
13 , top: -1
14 , right: -1
15 , bottom: -1
16 }
17 , Position: {
18 X: -1
19 , Y: -1
20 }
21 , Type: 'NONE'
22
23 };
24 var mTitle = {};
25
26 var sHurdleONE =
27 'S,S,S,S,S,S,S,S,S,S,S'
28 + ';T,L,T,T,T,T,S,S,S,S,T'
29 + ';T,L,L,T,S,S,S,S,S,L,T'
30 + ';T,L,L,L,C,C,C,S,S,T,S'
31 + ';T,L,L,L,C,C,C,B,B,L,T'
32 + ';T,L,L,C,C,C,C,S,S,L,T'
33 + ';T,L,L,C,C,T,S,S,L,L,T'
34 ;
35 //{{Add hurdle above.
36
37 var vHurdles = [sHurdleONE];
38 //{{After add hurdle, add the hurdle to the vector above.
首先我把S,T,B,C,L定义好，使S代表河流，T代表树木，B代表桥，C代表沙滩，L代表陆地。var mCurrent后面有用，暂不解释。然后是var mTitle，这个专门是用来显示title的，所以也不解释了。关键是在下：
1 var sHurdleONE = 2 'S,S,S,S,S,S,S,S,S,S,S' 3 + ';T,L,T,T,T,T,S,S,S,S,T' 4 + ';T,L,L,T,S,S,S,S,S,L,T' 5 + ';T,L,L,L,C,C,C,S,S,T,S' 6 + ';T,L,L,L,C,C,C,B,B,L,T' 7 + ';T,L,L,C,C,C,C,S,S,L,T' 8 + ';T,L,L,C,C,T,S,S,L,L,T' 9 ;
这段代码就是把定义好的S,T,B,C,L连在一起的核心。后面只用定义S,T,B,C,L的宽度高度定义就能把它们连成一块。并且只要把它们在数组里的位置调一调就能改变样式。
接下来为了能切换地图，我们把第一张地图放进了数组：
1 var vHurdles = [sHurdleONE];
2 //{{After add hurdle, add the hurdle to the vector above.
如果以后加了地图，只用把地图所属的数组名加到vHurdles数组就可以了，调用是就可以直接写对应下标。
样式设置在下：
1 function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
2 {
3 var mCoordMember = {
4 left: nWidthBasic
5 , top: nHeightBasic
6 , right: nWidthBasic + nPicWidth
7 , bottom: nHeightBasic + nPicHeight
8 };
9 var mPositionMember = {
10 X: (mCoordMember.left - mMargin.x) / nPicWidth
11 , Y: (mCoordMember.top - mMargin.y) / nPicHeight
12 };
13 var mItem = {
14 Coord: mCoordMember
15 , Position: mPositionMember
16 , Type: cType
17 };
18
19 return mItem;
20 }
21
22 function _loadHurdle(sHurdle)
23 {
24 var nBasic = 0;
25 var nWidthBasic = nBasic; //margin-left.
26 var nHeightBasic = 0; //margin-top.
27
28 //{{Change map margin above.
29
30 var nPicWidth = 45; //Picture width is nBasic.
31 var nPicHeight = 45; //Picturn height is nHeightBasic.
32 //{{Change icon size above.
33
34 var nSub;
35 var nRow;
36 var nCol;
37
38 var v = sHurdle.split(';');
39 var vRec = [];
40
41 for(nSub = 0; nSub < v.length; nSub++){
42 var vCrid = v[nSub].split(',');
43 vRec[vRec.length] = vCrid;
44 }
45
46 for(nRow = 0; nRow < vRec.length; nRow++){
47 var vCol = vRec[nRow];
48
49 for(nCol = 0; nCol < vCol.length; nCol++){
50 var cType = vCol[nCol];
51 var mMargin = {x: nBasic, y: nBasic};
52
53 vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);
54
55 nWidthBasic += nPicWidth;
56 }
57
58 nHeightBasic += nPicHeight;
59 nWidthBasic = nBasic;
60 }
61 }
62
63
64
65 //Show map with vector 'vView'.
66 function _showMap(sID)
67 {
68 var xDiv=document.getElementById(sID);
69
70 var xGrid;
71 var xImg;
72
73
74 var nTop = 0;
75
76 var nSub;
77 var sIdPrefix = 'ID_IMG_NUM_';
78 var sIdGrid = 'ID_A_NUM_';
79 for(nSub = 0; nSub < vView.length; nSub++){
80 var mGrid = vView[nSub];
81
82 if(mGrid){
83 var xMargin = mGrid.Coord;
84 var cType = mGrid.Type;
85 var xProper = mScene[cType];
86
87 if(xProper){
88 xGrid = document.createElement('a');
89 xImg = document.createElement('img');
90
91 xImg.style.position = 'absolute';
92 xImg.style.marginLeft = xMargin.left;
93 xImg.style.marginTop = xMargin.top;
94
95 xImg.src = xProper[0];
96
97 xImg.style.border = '0px solid #000000';
98 xImg.id = sIdPrefix + nSub;
99
100 xImg.style.width = 45;
101 xImg.style.height = 45;
102
103 xImg.style.display = 'block';
104
105 xGrid.onclick = function(e){
106 var xCurrentGrid = e.target;
107 var sId = xCurrentGrid.id;
108 var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));
109
110 mCurrent = vView[nIdAsSub];
111 if(!mCurrent){
112 alert("Error 0004.");
113 }
114 };
115 xGrid.title = xProper[1] + '(' + parseInt(mGrid.Position.X) + ', ' + parseInt(mGrid.Position.Y+2) + ')';
116 xGrid.id = sIdGrid + nSub;
117
118 xGrid.appendChild(xImg);
119
120 xDiv.appendChild(xGrid);
121 }else{
122 alert("Error: 0003.");
123 }
124 }else{
125 alert("Error: 0002.");
126 }
127 }
128 }
以上的代码很简单，自己可以看看，提示一下：当你在自己开发的过程中如果弹出一个Error: 0002, Error: 0003, Error: 0001什么之类的，就代表出了错，需要马上去检查。这是为了在麻烦的程序开发中有一点提醒而设计的。值得注意的是：这里的图片全是createElement弄出来的，所以请不要猜疑html代码里有什么蹊跷。
接着看：
1 function _showHurdle(nHurdle)
2 {
3 if(vHurdles[nHurdle - 1]){
4 _loadHurdle(vHurdles[nHurdle - 1]);
5 _showMap('ID_DIV_BATTLEFIELD');
6 }else{
7 alert("Error: 0001.");
8 }
9 }
这是在你要弄出地图的调用函数，当你在html代码里写上：<body onl oad="_showHurdle(nHurdle)">几可以把拼的图一下子画出来。nHurdle就是地图在数组vHurdles里的对应下标，最低是1，而不是0，也就是说要用第一张地图,那nHurdle就该赋值为1，调用是写为：<body onl oad="_showHurdle(1)">。
源代码下载：http://files.cnblogs.com/ducle/map.rar
三、演示效果
演示图在下：
由于是静态的，所以就不给demo了。这种方法虽然很麻烦，而且地图块多了就很慢，但是毕竟是种技术，如果大家有什么好的方法也可以来告诉我。
希望大家多支持。谢谢。
转载于:https://www.cnblogs.com/ducle/archive/2012/09/23/2699066.html