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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JavaScript计算正方形面积
Nov 26 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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数据库连接mysql与mysqli对比分析
2016/01/04 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
PyQT实现多窗口切换
2018/04/20 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python怎么对数字进行过滤
2020/07/05 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
大学生两会精神学习心得体会
2014/03/10 职场文书
银行金融服务方案
2014/06/11 职场文书
奖学金感谢信
2015/01/21 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS