接下來幾天會製作一款塔防遊戲，會先將程式寫在一個檔案，之後再做拆分，並開始添加新功能

爲什麼會是這個順序呢？

因爲找到一篇塔防的教學，學完覺得有很多可以擴充的地方，但又覺得都寫在同一個檔案太長不好維護與再新增，就開始研究 import 與 export (就有了前幾天的 webpack + phaser )，並嘗試將檔案 module (會與大家說我模組化的依據)，並添加自己的想法下去；但是好的開發流程應該是先想好每個檔案的關聯性與架構，才開始撰寫，雖然有點反過來操作，但還是可以學習到東西的

正文開始

先附上我學習的網站，並附上我的 github ，可以去試玩，並可以在學習的網站或我的 github 找到靜態檔案的資源，那我們就開始創造塔防遊戲吧

• 先開始初始化我們的遊戲

設定遊戲畫面的 width 、 height 、 scene 、 type ，並載入我們的靜態資源檔

var config = {
    type: Phaser.AUTO,
    parent: 'content',
    width: 640,
    height: 512,   
    scene: {
        key: 'main',
        preload: preload,
        create: create,
        update: update
    }
};
var game = new Phaser.Game(config);
 
var graphics;
var path;
 
function preload() {
    // load the game assets – enemy and turret atlas
    this.load.atlas('sprites', 'assets/spritesheet.png', 'assets/spritesheet.json');    
    this.load.image('bullet', 'assets/bullet.png');
}
 
function create() {
    
}
 
function update() {
    
}

• 先畫出我們的路徑

//create()
function create() {
    var graphics = this.add.graphics();    
    
    path = this.add.path(96, -32);
    path.lineTo(96, 164);
    graphics.lineStyle(3, 0xffffff, 1);
    path.draw(graphics);

}

path的畫法爲：我們先預設第一個點在 (96,-32) 的位置，然後畫到(lineTo) (96,164)的位置

所以我們現在正在停留在 (96,164) 而下一個位置看要往哪邊畫以此類推

//create()
function create() {
    var graphics = this.add.graphics();    
    
    path = this.add.path(96, -32);
    path.lineTo(96, 164);
    path.lineTo(480, 164);
    path.lineTo(480, 544);

    graphics.lineStyle(3, 0xffffff, 1);
    path.draw(graphics);

}

這邊當然可以看你想畫多複雜的圖示，這邊就給你們自己發揮啦