javascript遊戲開發之《三國志曹操傳》零件開發(五)可移動地圖的實作_javascript技巧

一、前言

這一講的內容很簡單，大家理解起來會更快。因此我只對重點加以分析，其他的輪到大家思考哦！首先來說，我對遊戲開發可以算是不太深入，因為現在的程式設計師愛用canvas，但我只會拿幾個div湊和。不過沒關係，因為做出來的也是遊戲。哈！廢話最近有點多，望大家原諒。接下來請看程式碼解析。

二、程式碼講解

今天調一下講解順序，先看程式碼後看圖片。

這是slg.js裡的內容：

複製程式碼 程式碼如下:

程式碼如下:

var subtractedMarginL = 0;
var mousedown = 0;

var toright;
var toleft;
var todown;
toap; >
window.onmouseup = function(){
mousedown = 0;

clearInterval(toright);
clearInterval(toleft);
clearInterval(todown); (toup);
}

function mapMove(direction)
{
switch(direction){
case "down":
subtractedMargin= 15;

$("#ID_IMG_MAP").animate({marginTop: subtractedMargin "px"}, 120);

break;

case "up":
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;
subtractedMarginL = 15;

$("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL "px"}, 120);

if(subtractedMarginL clearInterval(toright);
clearInterval(toleft);
}
if(subtractedMarginL > -20);
}
if(subtractedMarginL > -20){ toright);
clearInterval(toleft);
}

if(subtractedMargin clearInterval(todown);
clearInterval(toup);
}
if(subtractedMargin > -20){
clearInterval(todown);
clearInterval(toup);
}
}

$("body").ready(function.ready(function (){
$("#ID_DIV_TORIGHT").mousedown(function(){
mousedown = 1;

if(subtractedMarginL > -415 && mousedown == 1){
Move ("right");
toright = setInterval(function(){mapMove("right");}, 120);
}

});

$( "#ID_DIV_TOLEFT").mousedown(function(){
mousedown = 1;

if(subtractedMarginL mapMove("left") toleft = setInterval(function(){mapMove("left");}, 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 mapMove("up");
toup = setInterval(function(){mapMove("up");}, 120);
}
});
});

當大家看到本文題目時肯定不大了解題目的意義，因為太抽象了。現在做解釋：可移動是代表可以向四方走動，地圖就是地圖，可以是世界地圖，中國地圖，遊戲地圖。 。 。反正一定是一張圖。在此多說了兩句，不過沒關係，因為了解情況比不知廬山真面目要好得多。
接下來我把html程式碼再公佈出來，因為這次html程式碼的重要性很大：

複製程式碼程式碼如下:

SLG標題>





頭>

>