javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，感兴趣的朋友可以了解下

一、前言

这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，望大家原谅。接下来请看代码解析。

二、代码讲解

今天调一下讲解顺序，先看代码后看图片。

这是slg.js里的内容：

复制代码代码如下:

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代码的重要性很大：

复制代码代码如下:

SLG

现在大家可以对照两段代码看，值得注意得是有一点：在html代码中，我把一张图片放入了div，这时div原本是不会遮盖住图片的，但当你加上overflow: hidden;时就可以遮盖住图片了。

在这个程序中为了点击边框附近就能使地图移动，我用了四个div压住图片四边，当边框附近被点击时，就等于点了div，点了div就会调动相应函数。这样做虽然技术会有点差，不过也是一个好办法。

另一点值得注意得是：当点击边框附近调用函数时，我用了一个很特别的方法让地图一直移动，除非你松开鼠标。这个方法就是用setInterval()等待几秒后又移动，setInterval()又是个不停循环的东东，于是就一直调用下去，当松开鼠标时，就用clearInterval();让setInterval()停下，于是，这个环节搞定了！！！哈哈哈。

对了，不忘把图片给大家，图片有点大。。。