首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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
SWL(1) 调幅(1) 调频(4) 中波(3) FM(4) 立体声(1) KDKA(1) ad hoc(1) Harman Kardon(1) GWEN(1)
You might like
php&amp;java（三）
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
如何基于Python批量下载音乐
2019/11/11 Python
Django设置Postgresql的操作
2020/05/14 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
招商经理岗位职责
2013/11/16 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
少儿节目主持串词
2014/04/02 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
五一劳动节活动总结
2015/02/09 职场文书
干部考核工作总结2015
2015/07/24 职场文书
教师病假条范文
2015/08/17 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
干货：如何写好观后感 ！
2019/05/21 职场文书