欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2013年01月23日 18:03:13   作者:  
首先來說,我對游戲開發(fā)可以算是不怎么深入,因為現(xiàn)在的程序員愛用canvas,我卻就只會拿幾個div湊和。不過沒關(guān)系,因為做出來的同樣是游戲。哈!廢話最近有點多,感興趣的朋友可以了解下

一、前言

這一講的內(nèi)容很簡單,大家理解起來會更快。因此我只對重點加以分析,其他的就輪到大家思考哦!首先來說,我對游戲開發(fā)可以算是不怎么深入,因為現(xiàn)在的程序員愛用canvas,我卻就只會拿幾個div湊和。不過沒關(guā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)大家看到本文題目時肯定不大了解題目的含義,因為太抽象了?,F(xiàn)在做一下解釋:可移動是代表可以向四面八方走動,地圖就是地圖,可以是世界地圖,中國地圖,游戲地圖。。。反正必須是一張圖。在此多說了兩句,不過沒關(guān)系,因為了解情況比不知廬山真面目要好得多。
接下來我把html代碼再公布出來,因為這次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)在大家可以對照兩段代碼看,值得注意得是有一點:在html代碼中,我把一張圖片放入了div,這時div原本是不會遮蓋住圖片的,但當(dāng)你加上overflow: hidden;時就可以遮蓋住圖片了。

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

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

對了,不忘把圖片給大家,圖片有點大。。。

 

源碼下載地址

三、演示效果

先看演示圖片:


然后是:


 

演示地址
注意:進(jìn)入demo后點擊圖片邊緣便可以移動地圖。

希望大家多支持!謝謝!

“用Javascript開發(fā)《三國志曹操傳》”系列文章差不多到此就該結(jié)束了,下次我們來研究研究html5游戲開發(fā)。相信那更是智慧的挑戰(zhàn)。敬請期待!---Yorhom Wang

相關(guān)文章

最新評論