JS游戏开发（五）可移动地图的实现

一、前言

这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用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代码的重要性很大：