炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式

前言

上文中我们实现了炸弹人显示和左右移动。本文开始监听键盘事件，使玩家能控制炸弹人移动。然后会在重构的过程中会引入状态模式。大家会看到我是如何在开发的过程中通过重构来提出设计模式，而不是在初步设计阶段提出设计模式的。

实现“使用键盘控制玩家移动”

完善炸弹人移动，增加上下方向的移动

本文主要内容

开发策略
性能优化
控制炸弹人移动
引入状态模式
重构PlayerSprite
增加炸弹人上下方向的移动
解决问题
本文最终领域模型
高层划分
演示
本文参考资料

回顾上文更新后的领域模型

炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式

开发策略

首先进行性能优化，使用双缓冲技术显示地图。接着考虑到“增加上下移动”的功能与上文实现的“左右移动”功能类似，实现起来没有难度，因此优先实现“使用键盘控制玩家移动”，再实现“增加上下移动”。

性能优化

双缓冲

什么是双缓冲

当数据量很大时，绘图可能需要几秒钟甚至更长的时间，而且有时还会出现闪烁现象，为了解决这些问题，可采用双缓冲技术来绘图。

双缓冲即在内存中创建一个与屏幕绘图区域一致的对象，先将图形绘制到内存中的这个对象上，再一次性将这个对象上的图形拷贝到屏幕上，这样能大大加快绘图的速度。双缓冲实现过程如下：

1、在内存中创建与画布一致的缓冲区

2、在缓冲区画图

3、将缓冲区位图拷贝到当前画布上

4、释放内存缓冲区

为什么要用双缓冲

因为显示地图是这样显示的：假设地图大小为40*40，每个单元格是一个bitmap，则有40*40个bitmap。使用canvas的drawImage绘制每个bitmap，则要绘制40*40次才能绘制完一张完整的地图，开销很大。

那么应该如何优化呢？

每次只绘制地图中变化的部分。
当变化的范围也很大时（涉及到多个bitmap），则可用双缓冲，减小页面抖动的现象。

因此，使用“分层渲染”可以实现第1个优化，而使用“双缓冲”则可实现第2个优化。

实现

在MapLayer中创建一个缓冲画布，在绘制地图时先在缓冲画布上绘制，绘制完成后再将缓冲画布拷贝到地图画布中。

MapLayer

(function () {
    var MapLayer = YYC.Class(Layer, {
        Init: function () {
            //*双缓冲

            //创建缓冲canvas
            this.___createCanvasBuffer();
            //获得缓冲context
            this.___getContextBuffer();
        },
        Private: {
            ___canvasBuffer: null,
            ___contextBuffer: null,

            ___createCanvasBuffer: function () {
                this.___canvasBuffer = $("<canvas/>", {
                    width: bomberConfig.canvas.WIDTH.toString(),
                    height: bomberConfig.canvas.HEIGHT.toString()
                })[0];
            },
            ___getContextBuffer: function () {
                this.___contextBuffer = this.___canvasBuffer.getContext("2d");
            },
            ___drawBuffer: function (img) {
                this.___contextBuffer.drawImage(img.img, img.x, img.y, img.width, img.height);
            }
        },
        Protected: {
            P__createCanvas: function () {
                var canvas = $("<canvas/>", {
                    width: bomberConfig.canvas.WIDTH.toString(),
                    height: bomberConfig.canvas.HEIGHT.toString(),
                    css: {
                        "position": "absolute",
                        "top": bomberConfig.canvas.TOP,
                        "left": bomberConfig.canvas.LEFT,
                        "border": "1px solid blue",
                        "z-index": 0
                    }
                });
                $("body").append(canvas);

                this.P__canvas = canvas[0];
            }
        },
        Public: {
            draw: function () {
                var i = 0,
                    len = 0,
                    imgs = null;

                imgs = this.getChilds();

                for (i = 0, len = imgs.length; i < len; i++) {
                    this.___drawBuffer(imgs[i]);
                }
                this.P__context.drawImage(this.___canvasBuffer, 0, 0);
            },
            clear: function () {
                this.___contextBuffer.clearRect(0, 0, bomberConfig.canvas.WIDTH, bomberConfig.canvas.HEIGHT);
                this.base();
            },
            render: function () {
                if (this.P__isChange()) {
                    this.clear();
                    this.draw();
                    this.P__setStateNormal();
                }
            }
        }
    });

    window.MapLayer = MapLayer;
}());

控制炸弹人移动

现在，让我们来实现“使用键盘控制炸弹人家移动” 。

分离出KeyEventManager类

因为玩家是通过键盘事件来控制炸弹人的，所以考虑提出一个专门处理事件的KeyEventManager类，它负责键盘事件的绑定与移除。

提出按键枚举值

因为控制炸弹人移动的方向键可以为W、S、A、D，也可以为上、下、左、右方向键。也就是说，具体的方向键可能根据个人喜好变化，可以提供几套方向键方案，让玩家自己选择。

为了实现上述需求，需要使用枚举值KeyCodeMap来代替具体的方向键。这样有以下好处：

使用抽象隔离具体变化。当具体的方向键变化时，只要改变枚举值对应的value即可，而枚举值不会变化
增加可读性。枚举值如Up一看就知道表示向上走，而87（W键的keycode）则看不出来是什么意思。

增加keystate

如果在KeyEventManager绑定的键盘事件中直接操作PlayerSprite：

耦合太重。PlayerSprite变化时也会影响到KeyEventManager
不够灵活。如果以后增加多个玩家的需求，那么就需要修改KeyEventManager，使其直接操作多个玩家精灵类，这样耦合会更中，第一点的情况也会更严重。

因此，我增加按键状态keyState。这是一个空类，用于存储当前的按键状态。

当触发键盘事件时，KeyEventManager类改变keyState。然后在需要处理炸弹人移动的地方（如PlayerSprite），判断keyState，就可以知道当前按下的是哪个键，进而控制炸弹人进行相应方向的移动。

领域模型

炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式

发现“炸弹人移动”中，存在不同状态，且状态可以转换的现象

在上一篇博文中，我实现了显示和移动炸弹人，炸弹人可以在画布上左右走动。

我发现在游戏中，炸弹人是处于不同的状态的：站立、走动。又可以将状态具体为：左站、右站、左走、右走。

炸弹人处于不同状态时，它的行为是不一样的（如处于左走状态时，炸弹人移动方向为向左；处于右走状态时，炸弹人移动方向为向右），且不同状态之间可以转换。

状态图

炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式

根据上面的分析，让我萌生了可以使用状态模式的想法。状态模式介绍详见Javascript设计模式之我见：状态模式。

为什么在此处用状态模式

其实此处炸弹人的状态数并不多，且每个状态的逻辑也不复杂，完全可以直接在PlayerState中使用if else来实现状态的逻辑和状态切换。

那为什么我要用状态模式了？

1、做这个游戏是为了学习，状态模式我之前没有实际应用过，因此可以在此处练手

2、此处也符合状态模式的应用场景：一个对象的行为取决于它的状态, 并且它必须在运行时刻根据状态改变它的行为

3、扩展方便。目前实现了炸弹人左右移动，后面还会实现炸弹人上下移动。如果用状态模式的话，只需要增加四个状态：上走、上站、下走、下站，再对应修改Context和客户端即可。

应用状态模式的领域模型

炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式

状态模式具体实现

因为有右走、右站、左走、左站四个状态类，因此就要创建4个具体状态类，分别对应这四个状态类。

PlayerSprite

(function () {
    var PlayerSprite = YYC.Class(Sprite, {
        Init: function (data) {
            this.x = data.x;
            this.speedX = data.speedX;
            this.walkSpeed = data.walkSpeed;
            this.minX = data.minX;
            this.maxX = data.maxX;
            this.defaultAnimId = data.defaultAnimId;
            this.anims = data.anims;

            this.setAnim(this.defaultAnimId);

            this.__context = new Context(this);

            this.__context.setPlayerState(this.__getCurrentState());
        },
        Private: {
            __context: null,

            _getCurrentState: function () {
                var currentState = null;

                switch (this.defaultAnimId) {
                    case "stand_right":
                        currentState = Context.standRightState;
                        break;
                    case "stand_left":
                        currentState = Context.standLeftState;
                        break;
                    case "walk_right":
                        currentState = Context.walkRightState;
                        break;
                    case "walk_left":
                        currentState = Context.walkLeftState;
                        break;
                    default:
                        throw new Error("未知的状态");
                        break;
                }
            }
        },
        Public: {
            //精灵的速度
            speedX: 0,
            speedY: 0,
            //定义sprite走路速度的绝对值
            walkSpeed: 0,

            // 更新精灵当前状态
            update: function (deltaTime) {
                //每次循环,改变一下绘制的坐标
                this.__setCoordinate(deltaTime);

                this.base(deltaTime);
            },
            draw: function (context) {
                var frame = null;

                if (this.currentAnim) {
                    frame = this.currentAnim.getCurrentFrame();

                    context.drawImage(this.currentAnim.getImg(), frame.x, frame.y, frame.width, frame.height, this.x, this.y, frame.imgWidth, frame.imgHeight);
                }
            },
            clear: function (context) {
                var frame = null;

                if (this.currentAnim) {
                    frame = this.currentAnim.getCurrentFrame();

                    //要加上图片的宽度/高度
                    context.clearRect(0, 0, this.maxX + frame.imgWidth, this.maxY + frame.imgHeight);
                }
            },
            handleNext: function () {
                this.__context.walkLeft();
                this.__context.walkRight();
                this.__context.stand();
            }
        }
    });

    window.PlayerSprite = PlayerSprite;
}());

View Code

本文主要内容

回顾上文更新后的领域模型

双缓冲

什么是双缓冲

为什么要用双缓冲

实现

分离出KeyEventManager类

提出按键枚举值

增加keystate

领域模型

相关代码

发现“炸弹人移动”中，存在不同状态，且状态可以转换的现象

状态图

为什么在此处用状态模式

应用状态模式的领域模型

状态模式具体实现