Javascript 게임 개발 : '삼국지 조조전' 컴포넌트 개발 (5) 이동형 지도 구현_javascript 기술
- WBOY원래의
- 2016-05-16 17:42:521602검색
1. 소개
이 강의의 내용은 매우 간단하여 누구나 더 빠르게 이해할 수 있습니다. 그러므로 핵심만 분석하고 나머지는 여러분이 생각해 볼 차례입니다! 우선, 요즘 프로그래머들은 캔버스 사용을 좋아하기 때문에 게임 개발 경험이 많지 않지만 몇 개의 div만 구성할 수 있습니다. 하지만 결과는 여전히 게임이기 때문에 중요하지 않습니다. 하아! 제가 요즘 말을 많이 했는데, 양해해 주시길 바랍니다. 다음으로 코드 분석을 살펴보시기 바랍니다.2. 코드 설명
오늘은 코드를 먼저 보고 그림을 보고 순서를 조정하겠습니다.slg.js의 내용은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
var subtractedMargin = 0;
var mousedown = 0;
var toleft; ){
mousedown = 0;
clearInterval(toleft);
clearInterval(toup); >
함수 mapMove(방향)
{
스위치(방향){
case "down":
subtractedMargin -= 15
$("#ID_IMG_MAP") .animate({marginTop: subtractedMargin "px"}, 120);
break;
case "up":
subtractedMargin = 15 ; #ID_IMG_MAP").animate({marginTop: subtractedMargin "px"}, 120);
break;
case "right":
subtractedMarginL -= 15;
$("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL "px"}, 120);
break;
case " left":
subtractedMarginL = 15;
$("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL "px"}, 120)
break
}
if(subtractedMarginL < ; -415){
clearInterval(toright);
clearInterval(toleft)
}
if(subtractedMarginL > -20){
clearInterval(toright); toleft);
if(subtractedMargin < -640){
clearInterval(todown)
clearInterval(toup)
}
if(subtractedMargin > -20){
clearInterval(todown);
clearInterval(toup)
}
}
$("body") .ready(function(){
$("#ID_DIV_TORIGHT").mousedown(function(){
mousedown = 1;
if(subtractedMarginL > -415 && mousedown == 1) {
mapMove("right") ;
toright = setInterval(function(){mapMove("right");}, 120)
}
}); .mousedown(function(){
mousedown = 1;
if(subtractedMarginL < -20 && mousedown == 1){
mapMove(" left");
toleft = setInterval (function(){mapMove("왼쪽");}, 120)
}
})
$("#ID_DIV_TODOWN") .mousedown(function(){
mousedown = 1;
if(subtractedMargin > -640 && mousedown == 1){
mapMove("down")
todown = setInterval (function(){mapMove("down" );}, 120);
}
});
$("#ID_DIV_TOUP").mousedown(function(){
mousedown = 1;
if(subtractedMargin < -20 && mousedown == 1){
mapMove("up")
toup = setInterval(function(){mapMove("up" );},
}
});
});
이 글의 제목을 보시면 너무 추상적이어서 제목의 의미를 절대 이해하지 못하실 겁니다. 이제 설명하겠습니다. 이동 가능이란 모든 방향으로 이동할 수 있다는 의미입니다. 지도는 세계 지도일 수도 있고, 중국 지도일 수도 있고, 게임 지도일 수도 있습니다. . . 어쨌든 사진이어야합니다. 여기서 몇 마디 더 해야 하지만 상관없습니다. 루산의 정체를 모르는 것보다 상황을 이해하는 것이 훨씬 낫기 때문입니다.
다음에는 html 코드를 다시 게시하겠습니다. 이번에는 html 코드가 매우 중요하기 때문입니다.
코드 복사
코드 다음과 같습니다.
<머리>
<본문>
< ;/div>
< ;/div>
< ;/div>
< ;/div>