在前面我的博客中,有关于如何修改 BrowserQuest 【以下都简称:BQ】,现在我对BQ中,游戏人物地图切换进行了分析。
不多说了,上图说明:
人物在游戏中的截图:
红色部位为切换地图的部位。
下面是tiled地图编辑工具打开的原始图:
红色部位为上图中游戏中的截图区域,当游戏人物走到矩形中时,通过判断人物行走的方位,即可切换到tiled地图中zones地图的下一区域,这样就达到了人物移动地图切换的目的。
游戏中主要代码:client/js/updater.js
/**
* 更新地图,即更新精灵显示区域。
*/
updateZoning: function() {
var g = this.game,
c = g.camera,
z = g.currentZoning, /** 当前站立的区域 **/
s = 3,
ts = 16,
speed = 500;
if(z && z.inProgress === false) {
// 获得当前游戏人物要走的方向
var orientation = this.game.zoningOrientation,
startValue = endValue = offset = 0,
updateFunc = null,
endFunc = null;
if(orientation === Types.Orientations.LEFT || orientation === Types.Orientations.RIGHT) { /** 精灵向左向右 **/
offset = (c.gridW - 2) * ts;
startValue = (orientation === Types.Orientations.LEFT) ? c.x - ts : c.x + ts;
endValue = (orientation === Types.Orientations.LEFT) ? c.x - offset : c.x + offset;
updateFunc = function(x) {
c.setPosition(x, c.y);
g.initAnimatedTiles();
g.renderer.renderStaticCanvases();
}
endFunc = function() {
c.setPosition(z.endValue, c.y);
g.endZoning();
}
} else if(orientation === Types.Orientations.UP || orientation === Types.Orientations.DOWN) { /** 精灵向上向下 **/
offset = (c.gridH - 2) * ts;
startValue = (orientation === Types.Orientations.UP) ? c.y - ts : c.y + ts;
endValue = (orientation === Types.Orientations.UP) ? c.y - offset : c.y + offset;
updateFunc = function(y) {
c.setPosition(c.x, y);
g.initAnimatedTiles();
g.renderer.renderStaticCanvases();
}
endFunc = function() {
c.setPosition(c.x, z.endValue);
g.endZoning();
}
}
z.start(this.game.currentTime, updateFunc, endFunc, startValue, endValue, speed);
}
}
注:文章如有不正确的地方,欢迎斧正。
- 大小: 118.4 KB
- 大小: 441 KB
分享到:
相关推荐
H5游戏Browserquest端nodejs后台,非常有用的学习案例,
HTML+PHP开发的多人在线网页游戏
BrowserQuest改_客户+服务器V00.2.rar jbpm5的一个东西
dockerfile部署php项目,单纯Php环境下的cnetos,未使用其他容器,搭建BrowserQuest游戏私服
Mozilla的BrowserQuest的HTML5源代碼
BrowserQuest是一款HTML+PHP开发的多人在线网页游戏,代码仅供参考,提供开发人员,学习与研究,请勿用于商业用途。。。。。。
BrowserQuest源代码
顶级服务器 browserquest 服务器模拟器
H5 游戏 带Server端,全备
微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习参考)微信小游戏源码 BrowserQuest源代码(仅用于学习...
Web workers:允许初始化大的世界地图,而不会减慢页面 UI。localStorage:随时保存玩家角色的进度。CSS3 Media Queries:使游戏可以自动根据不同的设备进行调整。HTML5 audio:你可以听到游戏中的各种声音。由于该...
OS Ubuntu Linux 14.04 LTS Trusty Tahr - LAMP Install (64 bit)CPU 1コア, メモリ 1G, ディスク 25GB如何在服务器上安装安装所需的软件包后,从 Web 服务器上公共文档目录中的 git 克隆 BrowserQuest。...
小游戏源码-BrowserQuest源代码.rar
BrowserQuest是HTML5 / JavaScript多人游戏实验。 文献资料 文档位于客户端和服务器目录中。 执照 代码在MPL 2.0下获得许可。 内容根据CC-BY-SA 3.0许可。 有关详细信息,请参见LICENSE文件。 学分 由创建: 弗兰克...
H5微信小游戏源码-BrowserQuest源代码.zip
游戏源码 欢迎下载
html5游戏源文件源码下载,游戏源文件源码html5,html5游戏源文件源码,游戏源文件html5源码下载,BrowserQuest 这款游戏基于HTML5的,所以可以在几乎所有的浏览器 - 包括iOS...目前Mozilla已经发布了BrowserQuest源代码。
凯特拉姆 Kaetram是一个开放源代码的游戏引擎,旨在帮助有兴趣进入游戏开发领域的人们。 该代码库简单,简洁,直观。 该项目旨在用作学习工具。 最初的想法是基于Little Workshop的演示游戏BrowserQuest(BQ)。 此...
BrowserQuest write by Lua 运行步骤 修改 config.lua 中的 websocketsMaxPayloadLen 项的值为 64 * 1024 修改 config.lua 中的 appRootPath 项的值为 BrowserQuestLua 中 server 文件夹所在的真实路径 修改 client/...