炸弹人游戏开发系列（6）：实现碰撞检测，设置移动步长

前言

上文中我们实现了“玩家控制炸弹人”的功能，本文将实现碰撞检测，让炸弹人不能穿过墙。在实现的过程中会发现炸弹人移动的问题，然后会通过设置移动步长来解决。

名词解释

• 具体状态类
  指应用于炸弹人移动状态的状态模式的ConcreState角色的类。这里具体包括WalkLeftState、WalkRightState、WalkUpState、WalkDownState、StandLeftState等类。

本文目的

实现碰撞检测

本文主要内容

• 开发策略
• 初步实现碰撞检测
• 设置移动步长
• 继续完成碰撞检测
• 重构
• 本文最终领域模型
• 高层划分
• 演示
• 本文参考资料

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

查看大图

对领域模型进行思考

重构PlayerSprite

重构前代码

(function () {
    var PlayerSprite = YYC.Class({
        //供子类构造函数中调用
        Init: function (data) {
            this.x = data.x;
            this.y = data.y;

            this.minX = data.minX;
            this.maxX = data.maxX;
            this.minY = data.minY;
            this.maxY = data.maxY;

            this.defaultAnimId = data.defaultAnimId;
            this.anims = data.anims;

            this.walkSpeed = data.walkSpeed;

            this._context = new Context(this);
        },
        Private: {
            _context: null,

            _setCoordinate: function (deltaTime) {
                this.x = this.x + this.speedX * deltaTime;
                this.y = this.y + this.speedY * deltaTime;

                this._limitMove();
            },
            _limitMove: function () {
                this.x = Math.max(this.minX, Math.min(this.x, this.maxX));
                this.y = Math.max(this.minY, Math.min(this.y, this.maxY));
            },
            _getCurrentState: function () {
                var currentState = null;

                switch (this.defaultAnimId) {
                    case "stand_right":
                        currentState = Context.standRightState;
                        break;
                    case "stand_left":
                        currentState = Context.standLeftState;
                        break;
                    case "stand_down":
                        currentState = Context.standDownState;
                        break;
                    case "stand_up":
                        currentState = Context.standUpState;
                        break;
                    case "walk_down":
                        currentState = Context.walkDownState;
                        break;
                    case "walk_up":
                        currentState = Context.walkUpState;
                        break;
                    case "walk_right":
                        currentState = Context.walkRightState;
                        break;
                    case "walk_left":
                        currentState = Context.walkLeftState;
                        break;
                    default:
                        throw new Error("未知的状态");
                        break;
                };

                return currentState;
            }
        },
        Public: {
            //精灵的坐标
            x: 0,
            y: 0,
            //精灵的速度
            walkSpeed: 0,

            speedX: 0,
            speedY: 0,

            //精灵的坐标区间
            minX: 0,
            maxX: 9999,
            minY: 0,
            maxY: 9999,

            anims: null,
            //默认的Animation的Id , string类型
            defaultAnimId: null,
            //当前的Animation.
            currentAnim: null,

            init: function () {
                this._context.setPlayerState(this._getCurrentState());

                //设置当前Animation
                this.setAnim(this.defaultAnimId);
            },
            //重置当前帧
            resetCurrentFrame: function (index) {
                this.currentAnim && this.currentAnim.setCurrentFrame(index);
            },
            //设置当前Animation, 参数为Animation的id, String类型
            setAnim: function (animId) {
                this.currentAnim = this.anims[animId];
            },
            // 更新精灵当前状态.
            update: function (deltaTime) {
                //每次循环,改变一下绘制的坐标
                this._setCoordinate(deltaTime);

                if (this.currentAnim) {
                    this.currentAnim.update(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, bomberConfig.canvas.WIDTH, bomberConfig.canvas.HEIGHT);
                }
            },
            handleNext: function () {
                this._context.walkLeft();
                this._context.walkRight();
                this._context.walkUp();
                this._context.walkDown();
                this._context.stand();
            }
        }
    });

    window.PlayerSprite = PlayerSprite;
}());

View Code