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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
使用angular写一个hello world
Jan 23 Javascript
js选项卡的实现方法
Feb 09 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
axios基本入门用法教程
Mar 25 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 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
基于mysql的论坛(1)
2006/10/09 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python数值基础知识浅析
2019/11/19 Python
Python如何使用函数做字典的值
2019/11/30 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
运动会入场词200字
2014/02/15 职场文书
市场营销工作计划书
2014/09/15 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
证婚人致辞精选
2015/07/28 职场文书
公司新员工欢迎词
2015/09/30 职场文书
创业计划书之冷饮店
2019/09/27 职场文书