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


Posted in Javascript onJanuary 23, 2013

一、前言

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

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

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

三、演示效果

先看演示图片:

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

然后是:

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

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

希望大家多支持!谢谢!

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

Javascript 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 #Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
You might like
学习php笔记 字符串处理
2010/10/19 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
异步加载script的代码
2011/01/12 Javascript
javascript event 事件解析
2011/01/31 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中的单行、多行、中文注释方法
2018/07/19 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
电子信息工程专业自荐书
2014/06/24 职场文书
期中考试后的感想
2015/08/07 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
Docker部署Mysql8的实现步骤
2022/07/07 Servers