用Javascript开发《三国志曹操传》-零部件开发(五)-可移动地图的实现
作者：互联网
前几章的位置：
用Javascript开发《三国志曹操传》-零部件开发(四)-用地图块拼成大地图
http://www.cnblogs.com/ducle/archive/2012/09/23/2699066.html
用Javascript开发《三国志曹操传》-零部件开发(三)-人物对话中，仿打字机输出文字
http://www.cnblogs.com/ducle/archive/2012/09/15/2686532.html
用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动
http://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html
用Javascript开发《三国志曹操传》-零部件开发(一)-让静态人物动起来
http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html
一、前言
这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，望大家原谅。接下来请看代码解析。
二、代码讲解
今天调一下讲解顺序，先看代码后看图片：
1 var subtractedMargin = 0;
2 var subtractedMarginL = 0;
3 var mousedown = 0;
4
5 var toright;
6 var toleft;
7 var todown;
8 var toup;
9
10 window.onmouseup = function(){
11 mousedown = 0;
12
13 clearInterval(toright);
14 clearInterval(toleft);
15 clearInterval(todown);
16 clearInterval(toup);
17 }
18
19 function mapMove(direction)
20 {
21 switch(direction){
22 case "down":
23 subtractedMargin -= 15;
24
25 $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120);
26
27 break;
28
29 case "up":
30 subtractedMargin += 15;
31
32 $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120);
33
34 break;
35
36 case "right":
37 subtractedMarginL -= 15;
38
39 $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120);
40
41 break;
42
43 case "left":
44 subtractedMarginL += 15;
45
46 $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120);
47
48 break;
49 }
50
51 if(subtractedMarginL < -415){
52 clearInterval(toright);
53 clearInterval(toleft);
54 }
55 if(subtractedMarginL > -20){
56 clearInterval(toright);
57 clearInterval(toleft);
58 }
59
60 if(subtractedMargin < -640){
61 clearInterval(todown);
62 clearInterval(toup);
63 }
64 if(subtractedMargin > -20){
65 clearInterval(todown);
66 clearInterval(toup);
67 }
68 }
69
70 $("body").ready(function(){
71 $("#ID_DIV_TORIGHT").mousedown(function(){
72 mousedown = 1;
73
74 if(subtractedMarginL > -415 && mousedown == 1){
75 mapMove("right");
76 toright = setInterval(function(){mapMove("right");}, 120);
77 }
78
79 });
80
81 $("#ID_DIV_TOLEFT").mousedown(function(){
82 mousedown = 1;
83
84 if(subtractedMarginL < -20 && mousedown == 1){
85 mapMove("left");
86 toleft = setInterval(function(){mapMove("left");}, 120);
87 }
88 });
89
90 $("#ID_DIV_TODOWN").mousedown(function(){
91 mousedown = 1;
92
93 if(subtractedMargin > -640 && mousedown == 1){
94 mapMove("down");
95 todown = setInterval(function(){mapMove("down");}, 120);
96 }
97 });
98
99 $("#ID_DIV_TOUP").mousedown(function(){
100 mousedown = 1;
101
102 if(subtractedMargin < -20 && mousedown == 1){
103 mapMove("up");
104 toup = setInterval(function(){mapMove("up");}, 120);
105 }
106 });
107 });
当大家看到本文题目时肯定不大了解题目的含义，因为太抽象了。现在做一下解释：可移动是代表可以向四面八方走动，地图就是地图，可以是世界地图，中国地图，游戏地图。。。反正必须是一张图。在此多说了两句，不过没关系，因为了解情况比不知庐山真面目要好得多。
接下来我把html代码再公布出来，因为这次html代码的重要性很大：
1 <html> 2 <head> 3 <title>SLG</title> 4 5 <link rel="stylesheet" type="text/css" href="./main_looks.css" /> 6 <script type="text/javascript" src="jquery-1.8.0.js"></script> 7 <script type="text/javascript" src="./LightningScript.js"></script> 8 9 <script type="text/javascript" src="./slg.js"></script> 10 </head> 11 <body> 12 <div id="ID_DIV_SLGPAGE" style="width: 718px; height: 500px; border: 5px solid lightgray; overflow: hidden;"> 13 <img src="./picture/map01.jpg" id="ID_IMG_MAP" style=" margin-top: 0px; margin-left: 0px;" /> 14 </div> 15 <!--<input type="button" value="Down" id="ID_BUTTON_DOWN" /> 16 <input type="button" value="Up" id="ID_BUTTON_UP" /> 17 <input type="button" value="Left" id="ID_BUTTON_LEFT" /> 18 <input type="button" value="Right" id="ID_BUTTON_RIGHT" />--> 19 <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> 20 <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> 21 <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> 22 <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> 23 </body> 24 </html>
现在大家可以对照两段代码看，值得注意得是有一点：在html代码中，我把一张图片放入了div，这时div原本是不会遮盖住图片的，但当你加上overflow: hidden;时就可以遮盖住图片了。
在这个程序中为了点击边框附近就能使地图移动，我用了四个div压住图片四边，当边框附近被点击时，就等于点了div，点了div就会调动相应函数。这样做虽然技术会有点差，不过也是一个好办法。
另一点值得注意得是：当点击边框附近调用函数时，我用了一个很特别的方法让地图一直移动，除非你松开鼠标。这个方法就是用setInterval()等待几秒后又移动，setInterval()又是个不停循环的东东，于是就一直调用下去，当松开鼠标时，就用clearInterval();让setInterval()停下，于是，这个环节搞定了！！！哈哈哈。
对了，不忘把图片给大家，图片有点大。。。
| 图片名称：map01.jpg |
 |
源代码下载：http://files.cnblogs.com/ducle/moveMap.rar
三、演示效果
先看演示图片：
然后是：
演示地址：http://www.cnblogs.com/yorhom/archive/2012/09/29/2708977.html
希望大家多支持！谢谢！
转载于:https://www.cnblogs.com/ducle/archive/2012/09/29/2708969.html
标签：function,subtractedMargin,Javascript,clearInterval,subtractedMarginL,曹操传,开发,mous 来源： https://blog.csdn.net/weixin_33692284/article/details/93746107