JS游戲開發(fā)（五）可移動地圖的實現

作者：Yorhom Wang 2012-10-08 09:37:14

這一講的內容很簡單，大家理解起來會更快。因此我只對重點加以分析，其他的就輪到大家思考哦！首先來說，我對游戲開發(fā)可以算是不怎么深入，因為現在的程序員愛用canvas，我卻就只會拿幾個div湊和。

一、前言

這一講的內容很簡單，大家理解起來會更快。因此我只對重點加以分析，其他的就輪到大家思考哦！首先來說，我對游戲開發(fā)可以算是不怎么深入，因為現在的程序員愛用canvas，我卻就只會拿幾個div湊和。不過沒關系，因為做出來的同樣是游戲。哈！廢話最近有點多，望大家原諒。接下來請看代碼解析。

二、代碼講解

今天調一下講解順序，先看代碼后看圖片：

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);  
        }  
    });  
});

當大家看到本文題目時肯定不大了解題目的含義，因為太抽象了。現在做一下解釋：可移動是代表可以向四面八方走動，地圖就是地圖，可以是世界地圖，中國地圖，游戲地圖。。。反正必須是一張圖。在此多說了兩句，不過沒關系，因為了解情況比不知廬山真面目要好得多。

接下來我把html代碼再公布出來，因為這次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>

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

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

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

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

[[94845]]

源代碼下載：http://files.cnblogs.com/ducle/moveMap.rar

三、演示效果

先看演示圖片：

[[94846]]

然后是：

[[94847]]

演示地址：http://www.cnblogs.com/yorhom/archive/2012/09/29/2708977.html

原文鏈接：http://www.cnblogs.com/ducle/archive/2012/09/29/2708969.html

【編輯推薦】