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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
详解Vue组件实现tips的总结
Nov 01 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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多文件上传下载示例分享
2014/02/20 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python提示No module named images的解决方法
2014/09/29 Python
简单了解python的内存管理机制
2019/07/08 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python生成器常见问题及解决方案
2020/03/21 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
出纳岗位职责模板
2013/11/27 职场文书
导游词之天津盘山
2019/11/01 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python