接下來我們要加入我們的炮塔，這邊用的方式比較簡單，使用棋盤式的排列方式，將地圖畫成一格一格的，並加入一個二維陣列，然後會將滑鼠點下去的位置轉換成一個數列，並且去判斷這個二維陣列的位置的值是多少，如果是 -1 (路線佔據的那幾格)或是 1 (已放炮塔的位置)，就不能放下炮塔，其餘的地方就都可以放炮塔，所以我們來看怎麽做吧

先畫出格線

function drawGrid(graphics) {
    graphics.lineStyle(1, 0x0000ff, 0.8);
    for(var i = 0; i < 8; i++) {
        graphics.moveTo(0, i * 64);
        graphics.lineTo(640, i * 64);
    }
    for(var j = 0; j < 10; j++) {
        graphics.moveTo(j * 64, 0);
        graphics.lineTo(j * 64, 512);
    }
    graphics.strokePath();
}

並加進地圖裡面

function create(){
    var graphics = this.add.graphics();    
    drawGrid(graphics);
}

建立我們的炮塔

var Turret = new Phaser.Class({
    Extends: Phaser.GameObjects.Image,
    initialize:
    function Turret (scene)
    {
        Phaser.GameObjects.Image.call(this, scene, 0, 0, 'sprites', 'turret');
    },
        // we will place the turret according to the grid
    place: function(i, j) {            
        this.y = i * 64 + 64/2;
        this.x = j * 64 + 64/2;
        map[i][j] = 1;            
    },
    update: function (time, delta)
    {
    }
});

加入炮塔到地圖與滑鼠監聽事件

function create(){
    //...
    turrets = this.add.group({ classType: Turret, runChildUpdate: true });
    this.input.on('pointerdown', placeTurret);
    }

並撰寫滑鼠監聽後要做的事情

function placeTurret(pointer) {
    var i = Math.floor(pointer.y/64);
    var j = Math.floor(pointer.x/64);
    if(canPlaceTurret(i, j)) {
        var turret = turrets.get();
        if (turret)
        {
            turret.setActive(true);
            turret.setVisible(true);
            turret.place(i, j);
        }   
    }
}

function canPlaceTurret(i, j) {
    return map[i][j] === 0;
}

並在最後將一開始說的二維陣列放到全域裡面

var map =  [[ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1,-1,-1,-1,-1,-1,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0]];

這邊其實有另一種方式是將路線與地圖的二維陣列合在一起，這樣如果之後要製作比較多的地圖或是想要讓玩家修改地圖相對比較方便，但我還在實作看能不能完成，所以就先分開啦~~ ，所以如果是自己畫的路線，要相對與路線的位置修改地圖的 -1 位置喔

學習的網站
我的github