A*算法CocosCreator實現Demo

1.簡介

A*星尋路算法是作爲啓發式搜索的算法，在遊戲開發中經常使用，性能比dps要好的多，實現也比較簡單好

簡化尋路問題

搜索區域被劃分爲方形網格，簡化搜索區域，是尋路的第一步。這一方法把搜索區域簡化成了一個二維數組。數組的每一個元素是網格的一個方塊，方塊被標記爲可通過和不可通過。路徑描述爲從A點到B點所經過的方塊的集合。

Open和Closed列表

在A star尋路算法中，我們通過從A開始，檢查相鄰方格的方式，向外擴展直至找到目標。首先需要兩個列表：
一個記錄所有被考慮來尋找最短路徑的網格集合（open list）
一個記錄下不會被考慮的網格集合（closed list）
首先在closed列表中添加當前位置A，然後計算A格四周的所有格子可通行網格添加到open列表中，通過A星算法爲每一個可行格子進行加權，被稱爲路徑增量。

路徑增量

我們將會給每個網格一個G+H的權重值：
G是從開始點A到當前方塊的移動量。所以從開始點A到相鄰小方塊的移動量爲1，該值會隨着離開始點越來越遠而增大。
H是從當前方塊到目標點B的移動量估算值。該值經常被稱爲啓發式的，因爲我們不確定移動量是多少 – 僅僅是一個估算值。

A星算法的查詢原理

使用CocosCreator實現A*算法的Demo

創建格子類

 

let GRID_TYPE=cc.Enum({
    //障礙物
    Type_0:0,
    //正常
    Type_1:1,
    //起點
    Type_2:2,
    //目的點
    Type_3:3,
})
let Grid = cc.Class({
    ctor(){
        this.x = 0;
        this.y = 0;
        this.f = 0;
        this.g = 0;
        this.h = 0;
        this.parent = null;
        this.type = GRID_TYPE.Type_1;
    } 
});

實現A*組件類

初始化網格以及註冊繪製路線事件

onLoad(){
    this._gridW = 50;   // 單元格子寬度
    this._gridH = 50;   // 單元格子高度
    this.mapH = 15;     // 縱向格子數量
    this.mapW = 25;     // 橫向格子數量
    this.is8dir = true; // 是否8方向尋路
    this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.initMap();
},
  initMap(){
    this.openList = [];
    this.closeList = [];
    this.path = [];
    // 初始化格子二維數組
    this.gridsList = new Array(this.mapW + 1);
    for (let col=0;col<this.gridsList.length; col++){
        this.gridsList[col] = new Array(this.mapH + 1);
    }
    this.map.clear();
    for (let col=0; col<= this.mapW; col++){
        for (let row=0; row<=this.mapH; row++){
            this.draw(col, row);
            this.addGrid(col, row, GRID_TYPE.Type_1);
        }
    }
    // 設置起點和終點
    let startX = 1;
    let startY = 2;
    let endX = 16;
    let endY = 3;
    this.gridsList[startX][startY].type = GRID_TYPE.Type_2;
    this.draw(startX, startY, cc.Color.MAGENTA);
    this.gridsList[endX][endY].type = GRID_TYPE.Type_3;
    this.draw(endX, endY, cc.Color.BLUE);
},
onTouchMove(event){
    let pos = event.getLocation();
    let x = Math.floor(pos.x / (this._gridW + 2));
    let y = Math.floor(pos.y / (this._gridH + 2));
    if (this.gridsList[x][y].type == GRID_TYPE.Type_1){
        this.gridsList[x][y].type = GRID_TYPE.Type_0;
        this.draw(x, y, cc.Color.CYAN);
    }
},
onTouchEnd(){
    // 開始尋路
    this.findPath(cc.v2(1, 2), cc.v2(16, 3));
},
draw(col, row, color){
    color = color != undefined ? color : cc.Color.GRAY;
    this.map.fillColor = color;
    let posX = 2 + col * (this._gridW + 2);
    let posY = 2 + row * (this._gridH + 2);
    this.map.fillRect(posX,posY,this._gridW,this._gridH);
}

添加網格單元

addGrid(x, y, type){
    let grid = new Grid();
    grid.x = x;
    grid.y = y;
    grid.type = type;
    this.gridsList[x][y] = grid;
}
sortFunc(x, y){
    return x.f - y.f;
},
generatePath(grid){
    this.path.push(grid);
    while (grid.parent){
        grid = grid.parent;
        this.path.push(grid);
    }
    cc.log("path.length: " + this.path.length);
    for (let i=0; i<this.path.length; i++){
        // 起點終點不覆蓋，方便看效果
        if (i!=0 && i!= this.path.length-1){
            let grid = this.path[i];
            this.draw(grid.x, grid.y, cc.Color.GREEN);
        }
    }
},

**查詢可行路徑 **

findPath(startPos, endPos){
    let startGrid = this.gridsList[startPos.x][startPos.y];
    let endGrid = this.gridsList[endPos.x][endPos.y];
    this.openList.push(startGrid);
    let curGrid = this.openList[0];
    while (this.openList.length > 0 && curGrid.type != GRID_TYPE.Type_3){
        // 每次都取出f值最小的節點進行查找
        curGrid = this.openList[0];
        if (curGrid.type == GRID_TYPE.Type_3){
            cc.log("find path success.");
            this.generatePath(curGrid);
            return;
        }
        for(let i=-1; i<=1; i++){
            for(let j=-1; j<=1; j++){
                if (i !=0 || j != 0){
                    let col = curGrid.x + i;
                    let row = curGrid.y + j;
                    if (col >= 0 && row >= 0 && col <= this.mapW && row <= this.mapH
                        && this.gridsList[col][row].type != GRID_TYPE.Type_0
                        && this.closeList.indexOf(this.gridsList[col][row]) < 0){
                            if (this.is8dir){
                                // 8方向 斜向走動時要考慮相鄰的是不是障礙物
                                if (this.gridsList[col-i][row].type == GRID_TYPE.Type_0 || this.gridsList[col][row-j].type == GRID_TYPE.Type_0){
                                    continue;
                                }
                            } else {
                                // 四方形行走
                                if (Math.abs(i) == Math.abs(j)){
                                    continue;
                                }
                            }
                            // 計算g值
                            let g = curGrid.g + parseInt(Math.sqrt(Math.pow(i*10,2) + Math.pow(j*10,2)));
                            if (this.gridsList[col][row].g == 0 || this.gridsList[col][row].g > g){
                                this.gridsList[col][row].g = g;
                                // 更新父節點
                                this.gridsList[col][row].parent = curGrid;
                            }
                            // 計算h值 manhattan估算法
                            this.gridsList[col][row].h = Math.abs(endPos.x - col) + Math.abs(endPos.y - row);
                            // 更新f值
                            this.gridsList[col][row].f = this.gridsList[col][row].g + this.gridsList[col][row].h;
                            // 如果不在開放列表裏則添加到開放列表裏
                            if (this.openList.indexOf(this.gridsList[col][row]) < 0){
                                this.openList.push(this.gridsList[col][row]);
                            }
                            // // 重新按照f值排序（升序排列)
                            // this.openList.sort(this._sortFunc);
                    }
                }
            }
        }
        // 遍歷完四周節點後把當前節點加入關閉列表
        this.closeList.push(curGrid);
        // 從開放列表把當前節點移除
        this.openList.splice(this.openList.indexOf(curGrid), 1);
        if (this.openList.length <= 0){
            cc.log("find path failed.");
        }
        // 重新按照f值排序（升序排列)
        this.openList.sort(this.sortFunc);
    }
},

最終效果

留在個人博客以供學習:taoqy666.com

源碼請到本站資源中尋找，謝謝！