用Javascript开发《三国志曹操传》-开源讲座(五)-可移动地图的实现

原创 2012年10月03日 11:49:39
前几章的位置:

用Javascript开发《三国志曹操传》-开源讲座(四)-用地图块拼成大地图

http://blog.csdn.net/yorhomwang/article/details/8033922

用Javascript开发《三国志曹操传》-开源讲座(三)-人物对话中,仿打字机输出文字
http://blog.csdn.net/yorhomwang/article/details/8008759
用Javascript开发《三国志曹操传》-开源讲座(二)-让目标人物移动
http://blog.csdn.net/yorhomwang/article/details/8007871
用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来
http://blog.csdn.net/yorhomwang/article/details/7984576


一、前言

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

<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="./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()又是个不停循环的东东,于是就一直调用下去,当松开鼠标时,就用clearInterval();让setInterval()停下,于是,这个环节搞定了!!!哈哈哈。
对了,不忘把图片给大家,图片有点大。。。

图片名称:map01.jpg 

源码下载地址:http://files.cnblogs.com/ducle/moveMap.rar


三、演示效果

先看演示图片:


然后是:


 

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

注意:进入demo后点击图片边缘便可以移动地图。

希望大家多支持!谢谢!



“用Javascript开发《三国志曹操传》”系列文章差不多到此就该结束了,下次我们来研究研究html5游戏开发。相信那更是智慧的挑战。敬请期待!---Yorhom Wang

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

欢迎继续关注我的博客

版权声明:

相关文章推荐

用Javascript开发《三国志曹操传》-开源讲座(四)-用地图块拼成大地图

小时候我们玩过拼图游戏,是用自己的手去拼的。今天我们来研究研究用javascript来拼图。同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎。   一、前言 以上是一段导...

发现一个优秀的Java版国人仿曹操传游戏

终于又看见有国人用Java写J2ME以外的游戏了,先让偶们一起为作者的开创精神而叫声好吧!该作者博客如下:http://www.cnblogs.com/egria,http://salin.javae...

用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中,仿打字机输出文字

前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话。其他讲的具体链接我写在下方。 用Javascript开发-《三国志曹操传》-开源讲座(二)-让目标人物移...

用Javascript开发《三国志曹操传》-开源讲座(二)-人物行走的实现

上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方: http://blog.csdn.net/yorhomwang/artic...

复刻版曹操传开源

引擎版本:Cocos2dx-lua 3.3 语言:纯lua实现,逻辑代码大约2W多行,剧情脚本+数据大约7W多行(采用脚本进行转换的) 资源:利用以前轩辕论坛以及曹操传贴吧提供的工具和完成, 目...

用Javascript开发《三国志曹操传》-开源讲座(二)-让目标人物移动

上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方: http://blog.csdn.net/yorhomwang/arti...

用Javascript开发《三国志曹操传》-开源讲座(三)-人物对话中,仿打字机输出文字

前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话。具体的链接我写在下方。 用Javascript开发-《三国志曹操传》-开源讲座(二)-让目标人物移动 ...

用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来

首先来说,让一个游戏赋有可玩性必须要动静结合。(哈哈,大家以为我要讲作文了。。。但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)