二次开发 BrowserQuest ，关于人物地图移动的原理分析

在前面我的博客中，有关于如何修改 BrowserQuest 【以下都简称：BQ】，现在我对BQ中，游戏人物地图切换进行了分析。

不多说了，上图说明：

人物在游戏中的截图：

[img]http://dl2.iteye.com/upload/attachment/0091/7231/a7587e83-8b0c-3f0d-95f2-bc6ae4b148e6.png[/img]


红色部位为切换地图的部位。

下面是tiled地图编辑工具打开的原始图:


[img]http://dl2.iteye.com/upload/attachment/0091/7233/cf9051bd-d420-3349-b496-d652c3486559.png[/img]

红色部位为上图中游戏中的截图区域，当游戏人物走到矩形中时，通过判断人物行走的方位，即可切换到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);
}
}


注：文章如有不正确的地方，欢迎斧正。