자바스크립트 게임 개발 : '삼국지 조조전' 컴포넌트 개발(4) 지도 블록을 활용하여 대형 지도 제작

우리는 어렸을 때 직소 퍼즐을 풀고 그것을 우리 손으로 맞추었습니다. 오늘은 자바스크립트를 사용하여 퍼즐을 만드는 방법을 공부하겠습니다. 퍼즐이기도 하지만 손으로 하는 것보다 js를 사용해서 퍼즐을 맞추는 게 훨씬 번거로워서 앞으로는 엔진에 최적화해보겠습니다.

1. 서문

위 내용은 너무 멀리 설명하지는 않겠습니다. "조조"에 익숙한 플레이어라면 "삼국지 조조"의 지도가 작은 지도 타일로 구성되어 있다는 것을 알고 계실 것입니다. 그것은, 서론의 내용과 동일합니다. : 매우 번거롭습니다. 하지만 트러블도 실력이기 때문에 여기에서 여러분과 공유합니다. 마음에 드셨으면 좋겠습니다.

2. 코드 설명

오늘은 코드를 먼저 설명하지 않고 원리부터 생각하겠습니다. 이제 사진이 있으면 여러 부분으로 자르고 섞으세요. 이제 js를 사용하여 정리한다면 어떻게 할까요? 우선 사진의 순서에 대해서는 이야기하지 않겠습니다. 이때 난이도를 낮추고 몇 가지 옵션을 제시하겠습니다.
A. 여백을 사용하여 천천히 조정 B. 배열을 사용하여 정렬 C. 포기

이 질문에서 A를 선택하는 것은 현명하지 않습니다. C를 선택하는 것도 확실하지 않다는 의미입니다. B를 선택하는 것이 가장 좋은 것 같습니다. 모두가 배열을 사용하라는 지시를 받았으므로 코드부터 시작하겠습니다. 모든 사람의 관심을 약화시키지 않기 위해.
js 코드:

코드 복사 코드는 다음과 같습니다.

/* 
*프롬프트: 
*장애물을 추가하려면 다음 문자열을 찾으세요. "{{Add hurdle Above." 및 "{{장애물을 추가한 후 위의 벡터에 장애물을 추가합니다." 제발. 
*그리드 유형을 추가하거나 변경하려면 "{{위에 새 그리드를 추가하세요."라는 문자열을 찾으세요. 
*지도의 위치를 ​​변경하려면 "{{위의 지도 여백을 변경하세요."라는 문자열을 찾으세요. 
*크리드 아이콘이 변경되면 아이콘 크기도 변경해야 합니다. "{{위의 아이콘 크기 변경"을 찾으세요. 크기를 바꾸려고. 
*/ 

//장애물, 군사 또는 자원 지도. 
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; //Picturn 높이는 nHeightBasic입니다. 
//{{위의 아이콘 크기를 변경하세요. 

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



//'vView' 벡터로 지도를 표시합니다. 
함수 _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 = '절대'; 
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 = parsInt(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."); 
} 
} 
} 

//장애물 지도를 표시합니다. 
function _showHurdle(nHurdle) 
{ 
if(vHurdles[nHurdle - 1]){ 
_loadHurdle(vHurdles[nHurdle - 1]); 
_showMap('ID_DIV_BATTLEFIELD'); 
}else{ 
alert("오류: 0001."); 
} 
}

보세요, 이 프로그램은 195줄만 사용하는데, 이건 좀 귀찮은 것 같습니다. 괜찮아요, 천천히 설명해주세요.
우선 여기에 자료를 넣어보겠습니다.

'조조전설'의 지도 자료를 정리하지 않아서 '조조전설'의 자료가 아닙니다. Cao"라고 해서 무작위로 몇 개를 찾았습니다. 하지만 여전히 사용할 수 있습니다. 괜찮으시길 바랍니다.

문제가 있는 코드는 가장 엉망이 되기 쉬우므로 이때 스타일 설정과 퍼즐 코어를 잘 구분하세요.
퍼즐의 핵심은 어디에 있나요? 여기:

코드 복사 코드는 다음과 같습니다.

var mScene = { 
'L': ['./land.png', '육지'] 
, 'S': ['./sea.png', '강'] 
, 'T': ['. /tree.png', '나무'] 
, 'B': ['./bridge.png', 'bridge'] 
, 'C': ['./beach.png', 'beach '] 
}; 
//{{위에 새 그리드를 추가하세요. 

var mCurrent = { 
여백: { 
왼쪽: -1 
, 위쪽: -1 
 , 오른쪽: -1 
, 아래쪽: -1 
} 
, 위치: { 
X: -1 
, Y: -1 
} 
, 유형: 'NONE' 

}; 
var mTitle = {}; 

var sHurdleONE = 
'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; //Picturn 높이는 nHeightBasic입니다. 
//{{위의 아이콘 크기를 변경하세요. 

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



//'vView' 벡터로 지도를 표시합니다. 
함수 _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 = '절대'; 
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 = parsInt(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什么错, 需要马上去检查.得注의미있는 내용: 这里的图是是createElement弄以请不要猜疑html代码里有什么蹊跷。
接着看：

复主代码 내용:

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

这是在你要弄出地图的调用函数，当你在html代码里写上：。

源代码下载
三、演示效果

演示图지금 아래:

由于是静态的, 所以就不给demo了.种技术，如果大家가 가지고 있는 방법也可以来告诉我。

希望大家多支持。谢谢。