炸彈人遊戲開發系列（7）：加入敵人，使用A*算法尋路

時間 2019-11-24

標籤炸彈遊戲開發系列加入敵人使用算法欄目遊戲简体版

原文原文鏈接

前言css

上文中咱們實現了炸彈人與牆的碰撞檢測，以及設置移動步長來解決發現的問題。本文會加入1個AI敵人，敵人使用A*算法追蹤炸彈人。html

本文目的

加入敵人，追蹤炸彈人算法

本文主要內容

回顧上文更新後的領域模型

查看大圖canvas

開發策略數組

首先實現「加入敵人」功能。經過參考「炸彈人遊戲開發系列（4）：炸彈人顯示與移動「中的實現，能夠初步分析出須要加入敵人圖片、敵人幀數據和精靈數據、敵人精靈類EnemySprite、敵人層EnemyLayer和敵人層管理類EnemyLayerManager。app

而後實現「追蹤炸彈人」功能。須要新建一個算法類FindPath，負責使用A*算法計算並返回路徑數據。ide

敵人精靈類與算法類的交互關係：函數

並行開發

能夠並行開發「加入敵人」和「追蹤炸彈人」。oop

先定義一個FindPath類的的接口，指定findPath方法輸入參數和返回參數的格式。post

實現「加入敵人」功能時，能夠按照接口指定的格式使用假的路徑數據來測試EnemySprite類；實現「追蹤炸彈人」功能時，按照接口指定格式使用假的座標數據來測試FindPath類。

在EnemySprit和FindPath都實現後，再集成在一塊兒測試。由於二者接口一致，所以集成時不會有什麼困難。

加入敵人

擴大地圖

如今地圖大小爲4*4，過小了。

加入一個敵人後：

可玩性過低
很快遊戲就結束了；玩家操做炸彈人躲避敵人的空間過小了。
不方便演示和測試遊戲
因爲遊戲很快就結束，所以不方便演示和測試遊戲。

所以，將地圖擴大爲20*20。

要實現這個功能，只須要修改MapData和TerrainData便可。

加入敵人圖片和數據

首先加入敵人的精靈圖片

而後加入敵人幀動畫數據類

(function () {
    var getEnemyFrames = (function () {
        //一個動做在圖片中的寬度
        var width = bomberConfig.enemy.WIDTH,
            //一個動做在圖片中的高度
            height = bomberConfig.enemy.HEIGHT,
            //一個動做的偏移量
            offset = {
                x: bomberConfig.enemy.offset.X,
                y: bomberConfig.enemy.offset.Y
            },
            //一個動做橫向截取的長度
            sw = bomberConfig.enemy.SW,
            //一個動做縱向截取的長度
            sh = bomberConfig.enemy.SH,
            //一個動做圖片在canvas中的寬度
            imgWidth = bomberConfig.enemy.IMGWIDTH,
            //一個動做圖片在canvas中的高度
            imgHeight = bomberConfig.enemy.IMGHEIGHT;

        //幀數據
        var frames = function () {
            return {
                //向右站立
                stand_right: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向左站立
                stand_left: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向上站立
                stand_up: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向下站立
                stand_down: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向上走
                walk_up: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 2 * width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 3 * width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向下走
                walk_down: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 2 * width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 3 * width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向右走
                walk_right: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 2 * width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 3 * width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                },
                //向左走
                walk_left: {
                    img: window.imgLoader.get("enemy"),
                    frames: [
                        { x: offset.x, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 2 * width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },
                        { x: offset.x + 3 * width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }
                    ]
                }
            }
        }

        return function (animName) {
            return frames()[animName];
        };
    }());

    window.getEnemyFrames = getEnemyFrames;
}());

View Code

而後加入敵人精靈類數據

(function () {
    var getSpriteData = (function () {
        var data = function(){
            return {
...
                //敵人精靈類
                enemy: {
                    //初始座標
                    x: bomberConfig.WIDTH * 10,
                    //x: 0,
                    y: bomberConfig.HEIGHT * 3,
                    //定義sprite走路速度的絕對值
                    walkSpeed: bomberConfig.enemy.speed.NORMAL,

                    //速度
                    speedX: 1,
                    speedY: 1,

                    //注意座標起始點爲圖片左上點！

                    minX: 0,
                    maxX: bomberConfig.canvas.WIDTH - bomberConfig.player.IMGWIDTH,
                    //maxX: 500,
                    minY: 0,
                    maxY: bomberConfig.canvas.HEIGHT - bomberConfig.player.IMGHEIGHT,



                    defaultAnimId: "stand_left",

                    anims: {
                        "stand_right": new Animation(getEnemyFrames("stand_right")),
                        "stand_left": new Animation(getEnemyFrames("stand_left")),
                        "stand_down": new Animation(getEnemyFrames("stand_down")),
                        "stand_up": new Animation(getEnemyFrames("stand_up")),
                        "walk_up": new Animation(getEnemyFrames("walk_up")),
                        "walk_down": new Animation(getEnemyFrames("walk_down")),
                        "walk_right": new Animation(getEnemyFrames("walk_right")),
                        "walk_left": new Animation(getEnemyFrames("walk_left"))
                    }
                }
            }
        };

        return function (spriteName) {
            return data()[spriteName];
        };
    }());

    window.getSpriteData = getSpriteData;
}());

加入EnemySprite類

增長敵人精靈類。

建立假的A*算法類FindPath類

建立返回假數據的FindPath類，用於測試EnemySprite類。

增長敵人精靈類工廠

SpriteFactory新增工廠方法createEnemy，用於建立EnemySprite實例。

SpriteFactory

        createEnemy: function () {
            return new EnemySprite(getSpriteData("enemy"));
        }

新增EnemyLayer

增長敵人畫布，該畫布於地圖畫布之上，與玩家畫布的zIndex相同。同時增長對應的敵人層類EnemyLayer，它的集合元素爲EnemySprite類的實例。

EnemyLayer

(function () {
    var EnemyLayer = YYC.Class(Layer, {
        Init: function (deltaTime) {
            this.___deltaTime = deltaTime;
        },
        Private: {
            ___deltaTime: 0,

            ___iterator: function (handler) {
                var args = Array.prototype.slice.call(arguments, 1),
                    nextElement = null;

                while (this.hasNext()) {
                    nextElement = this.next();
                    nextElement[handler].apply(nextElement, args);  //要指向nextElement
                }
                this.resetCursor();
            },
            ___update: function (deltaTime) {
                this.___iterator("update", deltaTime);
            },
            __setDir: function () {
                this.___iterator("setDir");
            },
            ___move: function (deltaTime) {
                this.___iterator("move", deltaTime);
            }
        },
        Public: {
            setCanvas: function () {
                this.P__canvas = document.getElementById("enemyLayerCanvas");

                $("#enemyLayerCanvas").css({
                    "position": "absolute",
                    "top": bomberConfig.canvas.TOP,
                    "left": bomberConfig.canvas.LEFT,
                    "border": "1px solid black",
                    "z-index": 1    //z-index與playerLayer相同
                });
            },
            draw: function (context) {
                this.___iterator("draw", context);
            },
            clear: function (context) {
                this.___iterator("clear", context);
            },
            render: function () {
                this.__setDir();
                this.___move(this.___deltaTime);

                //判斷__state是否爲change狀態，若是是則調用canvas繪製精靈。
                if (this.P__isChange()) {
                    this.clear(this.P__context);
                    this.___update(this.___deltaTime);
                    this.draw(this.P__context);
                    this.P__setStateNormal();
                }
            }
        }
    });

    window.EnemyLayer = EnemyLayer;
}());

增長敵人層類工廠

LayerFactory新增工廠方法createEnemy，用於建立EnemyLayer實例

LayerFactory

        createEnemy: function (deltaTime) {
            return new EnemyLayer(deltaTime);
        }

新增EnemyLayerManager

增長EnemyLayer的管理類EnemyLayerManager

var EnemyLayerManager = YYC.Class(LayerManager, {
    Init: function (layer) {
        this.base(layer);
    },
    Public: {
        createElement: function () {
            var element = [],
                 enemy = spriteFactory.createEnemy();

            enemy.init();
            element.push(enemy);

            return element;
        },
        change: function () {
            this.layer.change();
        }
    }
});

領域模型

實現尋路算法

遊戲中的敵人採用A*算法尋路。參考資料：A星算法

敵人尋路模式

遊戲開始時，敵人以它的當前位置爲起始點，炸彈人的位置爲終點尋路。若是敵人到達終點後，沒有碰撞到炸彈人，則再一次以它的當前位置爲起始點，炸彈人的位置爲終點尋路。

敵人尋路流程

實現FindPath類

領域模型

重構狀態模式Context類

重構前：

(function () {
    var Context = YYC.Class({
        Init: function (sprite) {
            this.sprite = sprite;
        },
...
        Static: {
            walkLeftState: new WalkLeftState(),
            walkRightState: new WalkRightState(),
            walkUpState: new WalkUpState(),
            walkDownState: new WalkDownState(),
            standLeftState: new StandLeftState(),
            standRightState: new StandRightState(),
            standUpState: new StandUpState(),
            standDownState: new StandDownState()
        }
    });

    window.Context = Context;
}());

刪除Context的靜態實例，改成在構造函數中建立具體狀態類實例

緣由：

由於EnemySprite和PlayerSprite都要使用Context的實例。若是爲靜態實例的話，EnemySprite中的Context類實例與PlayerSprite中的Context類實例會共享靜態實例（具體狀態類實例）！會形成互相干擾！

重構後：

(function () {
    var Context = YYC.Class({
        Init: function (sprite) {
            this.sprite = sprite;

            this.walkLeftState = new WalkLeftState();
            this.walkRightState = new WalkRightState();
            this.walkUpState = new WalkUpState();
            this.walkDownState = new WalkDownState();
            this.standLeftState = new StandLeftState();
            this.standRightState = new StandRightState();
            this.standUpState = new StandUpState();
            this.standDownState = new StandDownState();
        },
...
        Static: {
        }
    });

    window.Context = Context;
}());

提出基類Sprite

爲何要提出

EnemySprite與PlayerSpite有不少相同的代碼
從概念上來講，玩家精靈類與敵人精靈類都屬於精靈類的概念

所以，提出EnemySprite、PlayerSprite基類Sprite。

修改碰撞檢測

Sprite 增長getCollideRect得到碰撞面積。EnemySprite增長collideWidthOther。

領域模型

增長CharacterLayer類

PlayerLayer、EnemyLayer有類似的模式
從語義上來看，PlayerLayer、EnemyLayer都是屬於」人物「的語義

所以，提出CharacterLayer父類

領域模型

提出父類MoveSprite

PlayerSprite、EnemySprite有類似的模式
從語義上來看，PlayerSprite、EnemySprite都是可以移動的精靈類

所以，提出父類MoveSprite

爲何不把PlayerSprite、EnemySprite的類似的模式直接提到Sprite中？

抽象層次不一樣

由於我提取的語義是「移動的精靈類」，而Sprite的語義是「精靈類」，屬於更抽象的概念

爲何不叫CharacterSprite？

由於關注的語義不一樣。

在提取CharacterLayer類時，關注的是PlayerLayer、EnemyLayer中「人物」語義；而在提取MoveSprite類時，關注的是PlayerSprite、EnemySprite中」移動「語義。所以，凡是屬於」人物「這個語義的Layer類，均可以考慮繼承於CharacterLayer；而凡有」移動「這個特色的Sprite類，均可以考慮繼承於MoveSprite。

領域模型

將Bitmap注入到Sprite中

反思Sprite類，發如今getCollideRect方法中，使用了圖片的寬度和高度：

          getCollideRect: function () {
                if (this.currentAnim) {
                    var f = this.currentAnim.getCurrentFrame();
                    return {
                        x1: this.x,
                        y1: this.y,
                        x2: this.x + f.imgWidth,
                        y2: this.y + f.imgHeight
                    }
                }
            },

此處圖片的寬度和高度是從FrameData中讀取的：

    var getFrames = (function () {
...
            imgWidth = bomberConfig.player.IMGWIDTH,
            imgHeight = bomberConfig.player.IMGHEIGHT;
...

圖片的寬度和高度屬於圖片信息，應該都放到Bitmap類中！

在建立精靈實例時，將圖片的寬度和高度包裝到Bitmap中，並注入到精靈類中:

SpriteFactory

(function () {
    var spriteFactory = {
        createPlayer: function () {
            return new PlayerSprite(getSpriteData("player"), bitmapFactory.createBitmap({ img: window.imgLoader.get("player"), width: bomberConfig.player.IMGWIDTH, height: bomberConfig.player.IMGHEIGHT }));
        },
        createEnemy: function () {
            return new EnemySprite(getSpriteData("enemy"), bitmapFactory.createBitmap({ img: window.imgLoader.get("enemy"), width: bomberConfig.player.IMGWIDTH, height: bomberConfig.player.IMGHEIGHT }));
        }
    }

    window.spriteFactory = spriteFactory;
}());

而後在getCollideRect方法中改成讀取Bitmap實例引用的寬度和高度：

Sprite

Init: function (data, bitmap) {
    this.bitmap = bitmap;
...
},
...
bitmap: null,
...
getCollideRect: function () {
    return {
        x1: this.x,
        y1: this.y,
        x2: this.x + this.bitmap.width,
        y2: this.y + this.bitmap.height
    }
},

領域模型

刪除data -> frames.js中的imgWidth、imgHeight

如今FrameData中的imgWidth、imgHeight是多餘的了，應該將其刪除。

增長MapElementSprite

增長地圖元素精靈類，它擁有圖片Bitmap的實例。其中，地圖的一個單元格就是一個地圖元素精靈類。

爲何增長？

一、能夠在建立MapLayer元素時，元素由bitmap改成精靈類，這樣x、y屬性就能夠從bitmap移到精靈類中了.
二、精靈類包含動畫，方便後期增長動態地圖。

它的父類爲Sprite仍是MoveSprite？

由於MapElementSprite不屬於「移動」語義，且它與MoveSprite沒有相同的模式，因此它應該繼承於Sprite。

領域模型

重構Bitmap

刪除Bitmap的x、y屬性。

如今Bitmap的x、y屬性用於保存地圖圖片的座標。如今座標保存在地圖精靈類中了，故Bitmap中多餘的x、y屬性。

重構LayerManager

LayerManager原本的職責爲「負責層的邏輯」，可是我認爲LayerManager的職責應該爲「負責層的統一操做」，它應該爲一個鍵-值集合類，它的元素應該爲Layer的實例。

所以對LayerManager進行重構：

將change的判斷移到具體的Layer中

由Layer類應該負責本身狀態的維護。

將createElement放到Game中

建立層內元素createElement這個職責應該放到調用LayerManager的客戶端，即Game類中。在Game中還要負責建立LayerManager、建立Layer。

增長Hash

增長一個Hash類，它實現鍵-值集合的通用操做，而後讓LayerManager繼承於Hash，使之成爲集合類。

爲何使用Hash類，而不是使用Collection類（數組集合類）

功能上分析：

由於LayerManager集合的元素爲Layer實例，而每個層的實例都是惟一的，即如PlayerLayer實例只有一個，不會有二個PlayerLayer實例。所以，使用Hash結構，能夠經過key得到LayerManager集合中的每一個元素。

Hash的優點：

Hash結構不須要知道LayerManager集合裝入Layer實例的順序，經過key值就能夠惟一得到元素；而Collection結構（數組結構）須要知道裝入順序。

領域模型

新增包

算法包
FindPath
精靈抽象包
Sprite
哈希集合包
Hash

刪除包

層管理實現包
通過本文重構後，去掉了PlayerLayerManager等子類，只保留了LayerManager類。所以去掉層管理實現包。

層、包

重構

將集合包重命名爲數組集合包

「層」這個層級的集合包的命名太普遍了，應該具體化爲數組集合包，這樣纔不至於與哈希集合包混淆。

將哈希集合包和數組集合包合併爲集合包

哈希集合包與數組集合包都屬於集合，所以應該合併爲集合包，而後將集合包放到輔助邏輯層。

提出抽象包

　　分析

封閉性：

層抽象包、精靈抽象包位於同一個層面（抽象層面），會對同一種性質的變化共同封閉。

如精靈抽象類（精靈抽象包）發生變化，可能會引發層抽象類的變化。

重用性：

二者相互關聯。

二者爲抽象類，具備通用性。

能夠一塊兒被重用。

　　結論

所以，將層抽象包、精靈抽象包合併成抽象包，並放到輔助邏輯層。

將集合包也合併到抽象包中

抽象包與集合包有依賴關係，但實際上只是抽象包中的層抽象類與集合包有依賴，精靈抽象類與集合包沒有管理，所以違反了共用重用原則CRP。

考慮到集合包也具備的通用性，將其也合併到抽象包中：

提出人物包、地圖包

層和精靈都包含人物（精靈中爲移動）、地圖的概念，人物層與移動精靈、地圖層與地圖元素精靈聯繫緊密。

　　分析

封閉性：

層實現包與精靈實現包違反了共同封閉原則CCP。如地圖發生變化時，只會引發地圖層和地圖元素精靈的變化，而不會引發人物層和移動精靈的變化。

重用性：

層實現包與精靈實現包中，人物層與地圖層、移動精靈與地圖元素精靈沒有關聯，所以違反了共同重用原則CRP。

所以，分離出人物包、地圖包，並將層、精靈這兩個層合併爲實現層：

　　狀態類放到哪

狀態類與屬於人物包的玩家精靈類和敵人精靈類緊密關聯，所以應該放到人物包中。

　　MoveSprite、CharacterLayer應不該該放到抽象包中

MoveSprite、CharacterLayer是抽象類，可是它們與具體的人物實現密切相關（由於它們是從人物實現類PlayerSprite和EnemySprite、PlayerLayer和EnemyLayer提取共同模式而造成的父類）。所以，它們應該放到人物實現包中。

本文最終層、包

對應領域模型

輔助操做層
- 控件包
  PreLoadImg
- 配置包
  Config
用戶交互層
- 入口包
  Main
業務邏輯層
- 輔助邏輯
  - 工廠包
    BitmapFactory、LayerFactory、SpriteFactory
  - 事件管理包
    KeyState、KeyEventManager
  - 抽象包
    Layer、Sprite、Hash、Collection
- 遊戲主邏輯
  - 主邏輯包
    Game
- 層管理
  - 層管理包
    LayerManager
- 實現
  - 人物實現包
    PlayerLayer、MoveSprite、PlayerSprite、EnemySprite、CharacterLayer、PlayerLayer、EnemyLayer、Context、PlayerState、WalkState、StandState、WalkState_X、WalkState_Y、StandLeftState、StandRightState、StandUpState、StandDownState、WalkLeftState、WalkRightState、WalkUpState、WalkDownState
  - 地圖實現包
    MapLayer、MapElementSprite
  - 算法包
    FindPath
  - 動畫包
    Animation、GetSpriteData、SpriteData、GetFrames、FrameData
數據操做層
- 地圖數據操做包
  MapDataOperate
- 路徑數據操做包
  GetPath
- 圖片數據操做包
  Bitmap
數據層
- 地圖包
  MapData、TerrainData
- 圖片路徑包
  ImgPathData