javascript遊戲開發之《三國志曹操傳》零件開發(四)用地圖塊拼成大地圖_javascript技巧

小時候我們玩過拼圖遊戲，是用自己的手去拼的。今天我們來研究研究用javascript來拼圖。同樣是拼圖，但用js拼圖要比用手拼圖麻煩多了，因此以後我要把它優化成引擎。

一、前言

以上是一段導語，話不扯遠，對《三國志曹操傳》熟悉的玩家知道，《三國志曹操傳》的地圖是由小地圖塊拼成的，那要實現它就和導語說得一樣：很麻煩。不過即使麻煩也是技術，因此在此分享給大家，希望大家喜歡。

二、程式碼講解

今天我要換換講解方式，先不給程式碼，我們先來想想原理。現在，假如你有一幅圖片，把它裁開成若干份，並打亂。現在如果讓你用js把他們組織起來，如何做呢？先不說圖的順序，首先來看把它們弄在一起就很難了。這時我減少難度，給你幾個選擇：
A.用margin慢慢調        B.用數組把它們排列好        C.放棄

在這題中，選A是很不明智的，選C就代表你也拿不定主意。看來選B是最好的。既然都告訴大家用數組，那就先上程式碼吧。免得消磨大家興致。
js程式碼：

複製程式碼 程式碼如下:

/*
*提示：
*如果要添加障礙，請找到字串：「{{在上面添加障礙。」和「{{添加障礙後，將障礙添加到上面的向量中。
*如果您想要新增或變更網格類型，請尋找字串：「{{在上面新增網格。」。
*如果您想更改地圖的位置，請找到字串：「{{更改上面的地圖邊距。」。
*如果crid的圖示改變了，你必須改變圖示的大小。找到“{{更改上面的圖示大小”。改變尺寸。
*/

//障礙或軍事或資源地圖。
var vView = [];

/*備註：
*L：陸地*S：海洋*R：河流*W：沼澤*A：草坪*B：橋樑*H：房屋*h：醫院*w：倉庫* b: 交​​易所*M: 軍事學院*m: 軍工廠
*r: 研究中心*P: 港口*D: 碼頭*s: 造船廠
*/
var mScene = {
'L ': ['./land.png', '陸地']
, 'S': ['./sea.png', '河流']
, 'T': ['./tree. png', '樹木']
, 'B': ['./bridge.png', '橋']
, 'C': ['. /beach.png', '沙灘']
};
//{{在上面增加新的網格。

var mCurrent = {
邊距：{
左：-1
，上方：-1
，右：-1
，底部：-1
}
，位置：{
X：-1
，Y：-1
}
，類型：'無'

};
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 '

//{{在上面加上障礙物。

var vHurdles = [sHurdleONE];
//{{添加障礙後，將障礙加到上面的向量中。

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
{
var mCoordMember = { Hep>Henm ：nWidthBasic nPicWidth
，底部：nHeightBasic nPicHeight
};
var mPositionMember = {
X: (mCoordMember.left - mimm.x) /Ciidm.x)/Com. mMargin.y) / nPicHeight
};
var mItem = {
座標：mCoordMember
，位置：mPositionMember
，類型：cType
}
}

function _loadHurdle(sHurdle)
{
var nBasic = 0;
var nWidthBasic = nBasic; //左邊。
var nHeightBasic = 0; //頂部邊距。

//{{更改上面的地圖邊距。

var nPicWidth = 45; //圖片寬度為nBasic。
var nPicHeight = 45; //圖片高度為nHeightBasic。
//{{更改上面的圖示大小。

var nSub;
var nRow;
var nCol;

var v = sHurdle.split(';');
var vRec = [];

for(nSub = 0; nSub var vCrid = v[nSub].split(',');
vRec[vRec.length] = vCrid;
}

for(nRow = 0; nRow var vCol = vRec[nRow];

for(n = 0; n var cType = vCol[nCol];
var mMargin = {x: nBasic, y: nBasic};

vView[vView.length] = _createGrid(nWidBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);

nWidthBasic = nPicWidth;
}

nHeightBasic;



//用向量'vView'顯示地圖。
function _showMap(sID)
{
var xDiv=document.getElementById(sID);

var xGrid;
var xImg;

var xGrid;
var xImg;


var nSub;
var sIdPrefix = 'ID_IMG_NUM_';
var sIdGrid = 'ID_A_NUM_';
for(nSub = 0; nSub for(nSub = 0; {
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 = '絕對';
xImg.style.marginLeft = xMargin.left;
xImg.style.marginTop = xMargin.top;

xImg.src = xProper[0];

xImg.style.border = '0px 實心#000000';
xImg.id = sIdPrefix nSub;

xImg.style.width = 455; height = 45;

xImg.style.display = '塊';

xGrid.onclick = function(e){
var xCurrentGrid = e.target;
var sId = xCurrentGrid.id;
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));

mCurrent = vView[nIdAsSub];

mCurrent = vView[nIdAsSub];
if( 🎜>alert("錯誤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🎜>alert 0003。圖。 ;
}else{
alert("錯誤：0001。");
}
}


看看，這點程式就用了195行，而且這還是一張地圖，看來還很有點麻煩哦。沒關係，慢慢解釋。
首先還是把素材放在這裡：

素材不是來自《三國志曹操傳》，因為沒整理好《三國志曹操傳》的地圖素材，所以就隨便找了些。不過也照樣可以用。希望大家不要介意。

麻煩的程式碼最容易弄得亂七八糟，因此在此時要良好的區分開式樣式設定和拼圖核心。
拼圖核心在哪裡呢？這裡：

複製程式碼 程式碼如下:

var mScene = {
': ['./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.

首先我把S,T,B,C,L定義好，使S代表河流，T代表樹木，B代表橋，C代表沙灘，L代表陸地。 var mCurrent後面有用，暫不解釋。然後是var mTitle，這個專門是用來顯示title的，所以也不解釋了。關鍵是在下：

複製程式碼 程式碼如下:

var sHurladle> ,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'

這段程式碼就是把定義好的S,T,B,C,L連在一起的核心。後面只用定義S,T,B,C,L的寬度高度定義就能把它們連成一塊。並且只要把它們在數組裡的位置調一調就能改變樣式。
接下來為了能切換地圖，我們把第一張地圖放進了陣列：

複製程式碼 程式碼如下:

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

如果以後加了地圖，地圖只用把地圖所屬的陣列名稱加到vHurdles陣列就可以了，呼叫是就可以直接寫對應下標。
樣式設定在下方：

複製程式碼 程式碼如下:

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
{
var mCoordMember = { Hep>Henm ：nWidthBasic nPicWidth
，底部：nHeightBasic nPicHeight
};
var mPositionMember = {
X: (mCoordMember.left - mimm.x) /Ciidm.x)/Com. mMargin.y) / nPicHeight
};
var mItem = {
座標：mCoordMember
，位置：mPositionMember
，類型：cType
}
}

function _loadHurdle(sHurdle)
{
var nBasic = 0;
var nWidthBasic = nBasic; //左邊。
var nHeightBasic = 0; //頂部邊距。

//{{更改上面的地圖邊距。

var nPicWidth = 45; //圖片寬度為nBasic。
var nPicHeight = 45; //圖片高度為nHeightBasic。
//{{更改上面的圖示大小。

var nSub;
var nRow;
var nCol;

var v = sHurdle.split(';');
var vRec = [];

for(nSub = 0; nSub var vCrid = v[nSub].split(',');
vRec[vRec.length] = vCrid;
}

for(nRow = 0; nRow var vCol = vRec[nRow];

for(n = 0; n var cType = vCol[nCol];
var mMargin = {x: nBasic, y: nBasic};

vView[vView.length] = _createGrid(nWidBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);

nWidthBasic = nPicWidth;
}

nHeightBasic;



//用向量'vView'顯示地圖。
function _showMap(sID)
{
var xDiv=document.getElementById(sID);

var xGrid;
var xImg;

var xGrid;
var xImg;


var nSub;
var sIdPrefix = 'ID_IMG_NUM_';
var sIdGrid = 'ID_A_NUM_';
for(nSub = 0; nSub for(nSub = 0; {
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 = '絕對';
xImg.style.marginLeft = xMargin.left;
xImg.style.marginTop = xMargin.top;

xImg.src = xProper[0];

xImg.style.border = '0px 實心#000000';
xImg.id = sIdPrefix nSub;

xImg.style.width = 455; height = 45;

xImg.style.display = '塊';

xGrid.onclick = function(e){
var xCurrentGrid = e.target;
var sId = xCurrentGrid.id;
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));

mCurrent = vView[nIdAsSub];

mCurrent = vView[nIdAsSub];
if( 🎜>alert("錯誤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🎜>alert 0003。的程式碼很簡單，自己看看，提示一下：當你在自己開發的過程中如果彈出一個Error: 0002, Error: 0003, Error: 0001 什麼之類的，就代表生長錯了，需要馬上去檢查。這是為了在麻煩的程式開發中有一點提醒而設計的。



複製程式碼


程式碼如下：


函數_showHurdle(nHurdle)
{
if( vHurdles[nHurdle - 1]){
_loadHurdle(vHurdles[nHurdle - 1]);

_showMap('ID_DIV_BATTLEFIELD');
}else{
alert(")0001。
}

}這是你要弄出地圖的呼叫函數，當你在html程式碼裡寫上： 。 來源程式碼下載

三、示範效果

示範圖
在下：


由於是靜態的，所以就不給demo了。這種方法雖然很麻煩，而且地圖塊多了就很慢，但畢竟是種技術，如果大家有什麼好的方法也可以來告訴我。


希望大家多多支持。謝謝。