現在我們來做一個遊戲吧
如果有名詞上或是有問題的地方都可以討論
這一個範例是用官網範例(內文有一個 Download this zip file )來練習，可以下載下來一起練習

首先當然是將 phaser 下載下來並引入到我們的JS裡面，並先將檔案大結構給建立好

• game
  • assets 放置靜態檔案的位置
  • js 放 js 的地方
    • main.js 遊戲主程式
  • index.html 引入 js 的地方
  • phaser
    • phaser.js phaser框架的 js 檔，睡不著可以來爬 socure code 的地方
    • phaser.min.js 將空白、縮排拿掉，壓縮後的 js，也是要 phaser 的js檔

將下載的圖片放入靜態 assets 底下後，就可以開始我們的練習了
首先在 main.js 連面初始化我們的遊戲

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var game = new Phaser.Game(config);

function preload() {}

function create() {}

function update() {}

一次太多東西？！
我們來介紹一下phaser初始化的程式吧

type: Phaser.AUTO

phaser渲染在網頁上要使用的方式，有三個參數可以選擇： Phaser.WEBGL 、 Phaser.CANVAS 、 Phaser.AUTO ，建議使用 auto ，瀏覽器會先看是否能用 WebGL ，不行則會使用 canvas ，當然也可以自己選擇想要渲染的方式

關於WebGL與canvas的淺談
關於WebGL與canvas的淺談

相對來說 canvas 的支援程度比 WebGL 還要來的高一些

• canvas
  
• WebGL
  

width: 800
height: 600

canvas畫布的大小，這裡定義的是實際的大小，什麼意思呢？因爲有一個大小是遊戲世界裡面的大小，例如我的遊戲世界是一個 1920 x 1680 的範圍，而透過 800 x 600 的所見窗口在遊戲世界裡探險

scene: {
    preload: preload,
    create: create,
    update: update
}

將遊戲會使用到的 function 匯入

var game = new Phaser.Game(config);

並創立一個 phaser 物件

再來講講function

function preload() {}

預載：在遊戲開始前，預先載入相關靜態檔案，例如影像、音訊、視訊等

function create() {}

產生：在 preload 之後執行，進行遊戲的相關設定， 並產生各個物件

function update() {}

更新：在 create 之後執行，內容為遊戲的邏輯， 遊戲開始後需經常更新狀態，此階段每秒鐘重複執行約 60 次 (由電腦運算速度決定)，簡單來說每一次更新都是洗掉上一次的畫面，渲染新的畫面(在遊戲的世界裡面)

關於遊戲幀數的視頻

接下來當你開啓你的網頁就可以看到一塊黑色並且是 800x600 大小的畫布啦，並且在 console.log 會有一段Phaser v3.12.0 (WebGL | Web Audio) https://phaser.io 的訊息，代表你匯入成功並使用的是 phaser的哪一個版本

• phaser v3.12.0代表使用phaser框架，下面則是說要求以server的方式去預覽檔案
  

• 這邊要使用 localhost:8000 去看載入狀況，不然瀏覽器會報錯
  (簡易版：確定有 python 後，在 shell 下 python -m SimpleHTTPServer ，並找到放 index.html 的資料夾位置(也可以在那個資料夾下開啓)，這樣就可以啦)