javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(五)可移動(dòng)地圖的實(shí)現(xiàn)
一、前言
這一講的內(nèi)容很簡(jiǎn)單,大家理解起來(lái)會(huì)更快。因此我只對(duì)重點(diǎn)加以分析,其他的就輪到大家思考哦!首先來(lái)說(shuō),我對(duì)游戲開(kāi)發(fā)可以算是不怎么深入,因?yàn)楝F(xiàn)在的程序員愛(ài)用canvas,我卻就只會(huì)拿幾個(gè)div湊和。不過(guò)沒(méi)關(guān)系,因?yàn)樽龀鰜?lái)的同樣是游戲。哈!廢話(huà)最近有點(diǎn)多,望大家原諒。接下來(lái)請(qǐng)看代碼解析。二、代碼講解
今天調(diào)一下講解順序,先看代碼后看圖片。這是slg.js里的內(nèi)容:
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)在做一下解釋?zhuān)嚎梢苿?dòng)是代表可以向四面八方走動(dòng),地圖就是地圖,可以是世界地圖,中國(guó)地圖,游戲地圖。。。反正必須是一張圖。在此多說(shuō)了兩句,不過(guò)沒(méi)關(guān)系,因?yàn)榱私馇闆r比不知廬山真面目要好得多。
接下來(lái)我把html代碼再公布出來(lái),因?yàn)檫@次html代碼的重要性很大:
<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)在大家可以對(duì)照兩段代碼看,值得注意得是有一點(diǎn):在html代碼中,我把一張圖片放入了div,這時(shí)div原本是不會(huì)遮蓋住圖片的,但當(dāng)你加上overflow: hidden;時(shí)就可以遮蓋住圖片了。
在這個(gè)程序中為了點(diǎn)擊邊框附近就能使地圖移動(dòng),我用了四個(gè)div壓住圖片四邊,當(dāng)邊框附近被點(diǎn)擊時(shí),就等于點(diǎn)了div,點(diǎn)了div就會(huì)調(diào)動(dòng)相應(yīng)函數(shù)。這樣做雖然技術(shù)會(huì)有點(diǎn)差,不過(guò)也是一個(gè)好辦法。
另一點(diǎn)值得注意得是:當(dāng)點(diǎn)擊邊框附近調(diào)用函數(shù)時(shí),我用了一個(gè)很特別的方法讓地圖一直移動(dòng),除非你松開(kāi)鼠標(biāo)。這個(gè)方法就是用setInterval()等待幾秒后又移動(dòng),setInterval()又是個(gè)不停循環(huán)的東東,于是就一直調(diào)用下去,當(dāng)松開(kāi)鼠標(biāo)時(shí),就用clearInterval();讓setInterval()停下,于是,這個(gè)環(huán)節(jié)搞定了?。?!哈哈哈。
對(duì)了,不忘把圖片給大家,圖片有點(diǎn)大。。。
三、演示效果
先看演示圖片:然后是:
演示地址:
注意:進(jìn)入demo后點(diǎn)擊圖片邊緣便可以移動(dòng)地圖。
希望大家多支持!謝謝!
“用Javascript開(kāi)發(fā)《三國(guó)志曹操傳》”系列文章差不多到此就該結(jié)束了,下次我們來(lái)研究研究html5游戲開(kāi)發(fā)。相信那更是智慧的挑戰(zhàn)。敬請(qǐng)期待!---Yorhom Wang
- javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(一)讓靜態(tài)人物動(dòng)起來(lái)
- javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(二)人物行走的實(shí)現(xiàn)
- javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(三)情景對(duì)話(huà)中仿打字機(jī)輸出文字
- javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(四)用地圖塊拼成大地圖
- javascript制作游戲開(kāi)發(fā)碰撞檢測(cè)的封裝代碼
相關(guān)文章
javascript委托(Delegate)blur和focus用法實(shí)例分析
這篇文章主要介紹了javascript委托(Delegate)blur和focus用法,實(shí)例分析了javascript委托的用法及針對(duì)常見(jiàn)瀏覽器的使用技巧,需要的朋友可以參考下2015-05-05Javascript的無(wú)new構(gòu)建實(shí)例詳解
這篇文章主要介紹了Javascript的無(wú)new構(gòu)建實(shí)例詳解的相關(guān)資料,小編感覺(jué)介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題
這篇文章主要介紹了JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02javascript 數(shù)據(jù)存儲(chǔ)的常用函數(shù)總結(jié)
這篇文章主要介紹了javascript 數(shù)據(jù)存儲(chǔ)的常用函數(shù)總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-06-06JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript中異步與回調(diào)的基本概念及回調(diào)地獄現(xiàn)象
這篇文章主要介紹了JavaScript中異步與回調(diào)的基本概念,以及回調(diào)地獄現(xiàn)象,本文主要介紹了異步和回調(diào)的基本概念,二者是JavaScript的核心內(nèi)容,需要所有熱愛(ài)JS的小伙伴深入了解,需要的朋友可以參考下2022-07-07原生JavaScrpit中異步請(qǐng)求Ajax實(shí)現(xiàn)方法
這篇文章主要介紹了原生JavaScrpit中異步請(qǐng)求Ajax實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11