快捷導(dǎo)航

javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(五)可移動地圖的實(shí)現(xiàn)

更新時(shí)間：2013年01月23日 18:03:13 作者：

首先來說，我對游戲開發(fā)可以算是不怎么深入，因?yàn)楝F(xiàn)在的程序員愛用canvas，我卻就只會拿幾個(gè)div湊和。不過沒關(guān)系，因?yàn)樽龀鰜淼耐瑯邮怯螒?。哈！廢話最近有點(diǎn)多，感興趣的朋友可以了解下

一、前言

這一講的內(nèi)容很簡單，大家理解起來會更快。因此我只對重點(diǎn)加以分析，其他的就輪到大家思考哦！首先來說，我對游戲開發(fā)可以算是不怎么深入，因?yàn)楝F(xiàn)在的程序員愛用canvas，我卻就只會拿幾個(gè)div湊和。不過沒關(guān)系，因?yàn)樽龀鰜淼耐瑯邮怯螒?。哈！廢話最近有點(diǎn)多，望大家原諒。接下來請看代碼解析。

二、代碼講解

今天調(diào)一下講解順序，先看代碼后看圖片。

這是slg.js里的內(nèi)容：

復(fù)制代碼代碼如下:

var subtractedMargin = 0; 
var subtractedMarginL = 0; 
var mousedown = 0; 

var toright; 
var toleft; 
var todown; 
var toup; 

window.onmouseup = function(){ 
mousedown = 0; 

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

function mapMove(direction) 
{ 
switch(direction){ 
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); 
clearInterval(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); 
} 

}); 

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

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

當(dāng)大家看到本文題目時(shí)肯定不大了解題目的含義，因?yàn)樘橄罅恕，F(xiàn)在做一下解釋：可移動是代表可以向四面八方走動，地圖就是地圖，可以是世界地圖，中國地圖，游戲地圖。。。反正必須是一張圖。在此多說了兩句，不過沒關(guān)系，因?yàn)榱私馇闆r比不知廬山真面目要好得多。
接下來我把html代碼再公布出來，因?yàn)檫@次html代碼的重要性很大：

復(fù)制代碼代碼如下:

<html> 
<head> 
<title>SLG</title> 

<link rel="stylesheet" type="text/css" href="./main_looks.css" /> 
<script type="text/javascript" src="jquery-1.8.0.js"></script> 

<script type="text/javascript" src="./slg.js"></script> 
</head> 
<body> 
<div id="ID_DIV_SLGPAGE" style="width: 718px; height: 500px; border: 5px solid lightgray; overflow: hidden;"> 
<img src="./picture/map01.jpg" id="ID_IMG_MAP" style=" margin-top: 0px; margin-left: 0px;" /> 
</div> 
<!--<input type="button" value="Down" id="ID_BUTTON_DOWN" /> 
<input type="button" value="Up" id="ID_BUTTON_UP" /> 
<input type="button" value="Left" id="ID_BUTTON_LEFT" /> 
<input type="button" value="Right" id="ID_BUTTON_RIGHT" />--> 
<div id="ID_DIV_TORIGHT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 689px;"></div> 
<div id="ID_DIV_TOLEFT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 0px;"></div> 
<div id="ID_DIV_TODOWN" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -41px 0 0 0px;"></div> 
<div id="ID_DIV_TOUP" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -508px 0 0 0px;"></div> 
</body> 
</html>

現(xiàn)在大家可以對照兩段代碼看，值得注意得是有一點(diǎn)：在html代碼中，我把一張圖片放入了div，這時(shí)div原本是不會遮蓋住圖片的，但當(dāng)你加上overflow: hidden;時(shí)就可以遮蓋住圖片了。

在這個(gè)程序中為了點(diǎn)擊邊框附近就能使地圖移動，我用了四個(gè)div壓住圖片四邊，當(dāng)邊框附近被點(diǎn)擊時(shí)，就等于點(diǎn)了div，點(diǎn)了div就會調(diào)動相應(yīng)函數(shù)。這樣做雖然技術(shù)會有點(diǎn)差，不過也是一個(gè)好辦法。

另一點(diǎn)值得注意得是：當(dāng)點(diǎn)擊邊框附近調(diào)用函數(shù)時(shí)，我用了一個(gè)很特別的方法讓地圖一直移動，除非你松開鼠標(biāo)。這個(gè)方法就是用setInterval()等待幾秒后又移動，setInterval()又是個(gè)不停循環(huán)的東東，于是就一直調(diào)用下去，當(dāng)松開鼠標(biāo)時(shí)，就用clearInterval();讓setInterval()停下，于是，這個(gè)環(huán)節(jié)搞定了?。?！哈哈哈。

對了，不忘把圖片給大家，圖片有點(diǎn)大。。。