一、前言
这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用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 clearinterval(toright);
clearinterval(toleft);
}
if(subtractedmarginl > -20){
clearinterval(toright);
clearinterval(toleft);
}
if(subtractedmargin 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 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 mapmove(up);
toup = setinterval(function(){mapmove(up);}, 120);
}
});
});
当大家看到本文题目时肯定不大了解题目的含义，因为太抽象了。现在做一下解释：可移动是代表可以向四面八方走动，地图就是地图，可以是世界地图，中国地图，游戏地图。。。反正必须是一张图。在此多说了两句，不过没关系，因为了解情况比不知庐山真面目要好得多。
接下来我把html代码再公布出来，因为这次html代码的重要性很大：
复制代码 代码如下:
slg
现在大家可以对照两段代码看，值得注意得是有一点：在html代码中，我把一张图片放入了div，这时div原本是不会遮盖住图片的，但当你加上overflow: hidden;时就可以遮盖住图片了。
在这个程序中为了点击边框附近就能使地图移动，我用了四个div压住图片四边，当边框附近被点击时，就等于点了div，点了div就会调动相应函数。这样做虽然技术会有点差，不过也是一个好办法。
另一点值得注意得是：当点击边框附近调用函数时，我用了一个很特别的方法让地图一直移动，除非你松开鼠标。这个方法就是用setinterval()等待几秒后又移动，setinterval()又是个不停循环的东东，于是就一直调用下去，当松开鼠标时，就用clearinterval();让setinterval()停下，于是，这个环节搞定了！！！哈哈哈。
对了，不忘把图片给大家，图片有点大。。。
源码下载地址
三、演示效果
先看演示图片：
然后是：
演示地址：
注意：进入demo后点击图片边缘便可以移动地图。
希望大家多支持！谢谢！
“用javascript开发《三国志曹操传》”系列文章差不多到此就该结束了，下次我们来研究研究html5游戏开发。相信那更是智慧的挑战。敬请期待！---yorhom wang