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

二次开发 BrowserQuest ，关于人物地图移动的原理分析
在前面我的博客中，有关于如何修改 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);
            }
        }


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