JS游戲開發(fā)（五）可移動(dòng)地圖的實(shí)現(xiàn)
一、前言
這一講的內(nèi)容很簡單，大家理解起來會(huì)更快。因此我只對(duì)重點(diǎn)加以分析，其他的就輪到大家思考哦！首先來說，我對(duì)游戲開發(fā)可以算是不怎么深入，因?yàn)楝F(xiàn)在的程序員愛用canvas，我卻就只會(huì)拿幾個(gè)div湊和。不過沒關(guān)系，因?yàn)樽龀鰜淼耐瑯邮怯螒?。哈！廢話最近有點(diǎn)多，望大家原諒。接下來請(qǐng)看代碼解析。
二、代碼講解
今天調(diào)一下講解順序，先看代碼后看圖片：
- 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)在做一下解釋：可移動(dòng)是代表可以向四面八方走動(dòng)，地圖就是地圖，可以是世界地圖，中國地圖，游戲地圖。。。反正必須是一張圖。在此多說了兩句，不過沒關(guān)系，因?yàn)榱私馇闆r比不知廬山真面目要好得多。
接下來我把html代碼再公布出來，因?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="./LightningScript.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)差，不過也是一個(gè)好辦法。
另一點(diǎn)值得注意得是：當(dāng)點(diǎn)擊邊框附近調(diào)用函數(shù)時(shí)，我用了一個(gè)很特別的方法讓地圖一直移動(dòng)，除非你松開鼠標(biāo)。這個(gè)方法就是用setInterval()等待幾秒后又移動(dòng)，setInterval()又是個(gè)不停循環(huán)的東東，于是就一直調(diào)用下去，當(dāng)松開鼠標(biāo)時(shí)，就用clearInterval();讓setInterval()停下，于是，這個(gè)環(huán)節(jié)搞定了！??！哈哈哈。
對(duì)了，不忘把圖片給大家，圖片有點(diǎn)大。。。
源代碼下載：http://files.cnblogs.com/ducle/moveMap.rar
三、演示效果
先看演示圖片：
然后是：
演示地址：http://www.cnblogs.com/yorhom/archive/2012/09/29/2708977.html
原文鏈接：http://www.cnblogs.com/ducle/archive/2012/09/29/2708969.html
【編輯推薦】
