炸弹人游戏开发系列（4）：炸弹人显示与移动

前言

在上文中，我已经介绍了如何测试、如何重构测试，并且通过实验掌握了地图显示的技术。本文会将地图显示的技术用到炸弹人显示中，并且让我们的炸弹人动起来。

注：为了提升博文质量和把重点放在记录开发和迭代的思想实践，本文及后续博文将不再记录测试过程。

实现炸弹人的显示和移动

本文主要内容

• 开发策略
• 实验
• 实现动画
• 实现左右移动
• 绘制地图和炸弹人
• 本文最终领域模型
• 高层划分
• 演示
• 本文参考资料

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

对领域模型进行思考

ShowMap类是负责显示地图，包含了游戏逻辑。而Game类职责是负责游戏逻辑，因此ShowMap和Game在职责上是有重复的。况且显示地图这部分逻辑并不是很复杂，可以不需要专门的类来负责这部分逻辑，而是直接放到Game中。

现在来回头看看ShowMap类的显示地图实现：

drawMap: function () {
    var i = 0,
        j = 0,
        map = bomberConfig.map,
        bitmap = null,
        mapData = mapDataOperate.getMapData(),
        x = 0,
        y = 0,
        img = null;

    this._createLayer();

    for (i = 0; i < map.ROW; i++) {
        //注意！
        //y为纵向height，x为横向width
        y = i * map.HEIGHT;

        for (j = 0; j < map.COL; j++) {
            x = j * map.WIDTH;
            img = this._getMapImg(i, j, mapData);
            bitmap = bitmapFactory.createBitmap({ img: img, width: map.WIDTH, height: map.HEIGHT, x: x, y: y });
            this.layer.appendChild(bitmap);
        }
    }
    this.layer.draw();
}

ShowMap将显示地图的具体实现委托给了Layer，自己负责操作Layer，这个职责也可以移到Game中。且考虑到ShowMap类是用作实验（见上文的开发策略）的，现在“显示地图”的功能已经实现，ShowMap没有存在的必要了。

因此，我去掉ShowMap类，将其移到Game中。

重构后的领域模型

重构后Game类代码

(function () {
    var Game = YYC.Class({
        Init: function(){
        },
        Private: {
            _pattern: null,
            _ground: null,

            _createLayer: function () {
                this.layer = new Layer(this.createCanvas());
            },
            _getMapImg: function (i, j, mapData) {
                var img = null;

                switch (mapData[i][j]) {
                    case 1:
                        img = main.imgLoader.get("ground");
                        break;
                    case 2:
                        img = main.imgLoader.get("wall");
                        break;
                    default:
                        break
                }

                return img;
            }
        },
        Public: {
            layer: null,

            onload: function () {
                $("#progressBar").css("display", "none");
                this.drawMap();
            },
            createCanvas: function (id) {
                var canvas = document.createElement("canvas");

                canvas.width = 600;
                canvas.height = 400;
                canvas.id = id;

                document.body.appendChild(canvas);

                return canvas;
            },
            drawMap: function () {
                var i = 0,
                    j = 0,
                    map = bomberConfig.map,
                    bitmap = null,
                    mapData = mapDataOperate.getMapData(),
                    x = 0,
                    y = 0,
                    img = null;

                this._createLayer();

                for (i = 0; i < map.ROW; i++) {
                    //注意！
                    //y为纵向height，x为横向width
                    y = i * map.HEIGHT;

                    for (j = 0; j < map.COL; j++) {
                        x = j * map.WIDTH;
                        img = this._getMapImg(i, j, mapData);
                        bitmap = bitmapFactory.createBitmap({img: img, width: map.WIDTH, height: map.HEIGHT, x: x, y: y});

                        this.layer.appendChild(bitmap);
                    }
                }
                this.layer.draw();
            }
        }
    });

    window.Game = Game;
}());

View Code