Javascriptゲーム開発：『三國志曹操伝』コンポーネント開発(4) マップブロックを使って大きな地図を作成

私たちは子供の頃、ジグソーパズルで遊んで、自分の手で組み立てました。今日はJavaScriptを使ってパズルを作成する方法を勉強します。こちらもパズルですが、手作業でやるよりもjsでパズルする方が面倒なので、将来的にはエンジンに最適化する予定です。

1. はじめに

上記は、あまり詳しくは説明しません。「曹操の伝説」に精通しているプレイヤーは、「三国志曹操」のマップが小さなマップタイルで構成されていることを知っています。それは、冒頭に書いてあることと同じです。非常に面倒です。しかし、トラブルさえもスキルであることに変わりはないので、ここでそれを共有します。気に入っていただければ幸いです。

2. コードの説明

今日は説明の仕方を変えて、まず原理を考えてみましょう。さて、写真がある場合は、それをいくつかの部分に切り、スクランブルします。では、js を使用してそれらを整理する場合、どうすればよいでしょうか?写真の順番については話さないでください。まず、写真をまとめるのが難しいです。この時点で、難易度を下げていくつかのオプションを提供します:
A. マージンを使用してゆっくり調整します 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 
} 
、タイプ: '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' 
 
//{{上にハードルを追加します。 

var vHurdles = [sHurdleONE]; 
//{{ハードルを追加した後、上のベクトルにハードルを追加します。 

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin) 
{ 
var mCoordMember = { 
左: nWidthBasic 
、上: nHeightBasic 
、右: nWidthBasic nPicWidth 
、下: nHeightBasic nPicHeight 
}; 
var mPositionMember = { 
X: (mCoordMember.left - mMargin.x) / nPicWidth 
, Y: (mCoordMember.top - mMargin.y) / nPicHeight 
}; 
var mItem = { 
座標: mCoordMember 
、位置: mPositionMember 
、タイプ: cType 
}; 

mItem を返す; 
} 

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(nCol = 0; 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; 
} 
} 



// ベクトル '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 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 = 45; 
xImg.style.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]; 
if(!mCurrent){ 
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("エラー: 0003."); 
} 
}else{ 
alert("エラー: 0002."); 
} 
} 
} 

//ハードルのマップを表示します。 
関数 _showHurdle(nHurdle) 
{ 
if(vHurdles[nHurdle - 1]){ 
_loadHurdle(vHurdles[nHurdle - 1]); 
_showMap('ID_DIV_BATTLEFIELD'); 
}else{ 
alert("エラー: 0001."); 
} 
}

ほら、このプログラムは 195 行しか使っていないので、ちょっと面倒そうです。大丈夫、ゆっくり説明して。
まず、ここに素材を置きましょう:

『曹操伝』のマップ素材を整理していないため、素材は『曹操伝』のものではありません。曹操」ということで、適当に見つけてきました。しかし、まだ使用できます。気にしないでください。

面倒なコードは最も混乱しやすいので、この時点ではスタイル設定とパズルのコアをしっかり区別してください。
パズルの核心はどこですか?ここ:

コードをコピーしますコードは次のとおりです:

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 
} 
、タイプ: ' NONE' 

}; 

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]/ /{{ ハードルを追加した後、上のベクトルにハードルを追加します。


まず、S、T、B、C、L を定義します。S は川、T は木、B はそれぞれを表します。橋、ビーチ、L は陸地を表します。 var mCurrent は後で役立つので、まだ説明しません。次に、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' 



これコードは、一緒に接続された S、T、B、C、および L の定義されたコアです。後で、S、T、B、C、L の幅と高さを定義してそれらを接続するだけです。また、配列内の位置を調整するだけでスタイルを変更できます。 

次に、マップを切り替えるために、最初のマップを配列に入れます:

コードをコピーしますコードは次のとおりです。

var vHurdles = [sHurdleONE];

//{{ハードルを追加した後、上のベクトルにハードルを追加します。

マップの場合は後から追加されますが、マップが属する配列名を vHurdles 配列に追加するだけで、呼び出すときに対応する添字を直接記述することができます。

スタイル設定は次のとおりです:

コードをコピーしますコードは次のとおりです:

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin) 
{ 
var mCoordMember = { 
左: nWidthBasic 
、上: nHeightBasic 
、右: nWidthBasic nPicWidth 
、下: nHeightBasic nPicHeight 
}; 
var mPositionMember = { 
X: (mCoordMember.left - mMargin.x) / nPicWidth 
, Y: (mCoordMember.top - mMargin.y) / nPicHeight 
}; 
var mItem = { 
座標: mCoordMember 
、位置: mPositionMember 
、タイプ: cType 
}; 

mItem を返す; 
} 

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(nCol = 0; 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; 
} 
} 



// ベクトル '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 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 = 45; 
xImg.style.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]; 
if(!mCurrent){ 
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("エラー: 0003."); 
} 
}else{ 
alert("エラー: 0002."); 
} 
} 
}

以上の代コード很简单，自己可看看，提示自己：当你在开公開的过程中如果弹出一个エラー: 0002,エラー: 0003、エラー: 0001 のようなものは、問題を表しており、事前に検査する必要があります。これは、プログラムの公開時に一時的に起動するために設計されています。
次に参照:

代案代案は次のようになります。

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

これは在你要弄出地图的调用関数数，当你在html代网里書上：源代网下載
三、演示效果

演示图在下：

は静的であるためデモは行われません。この方法は非常に面倒で、多くの図が表示されるのは非常に遅いですが、大家が優れた方法を持っている場合は、これは技術です。

大家多支持希望。谢谢。