原來可以這麼寫(24): 開發個 HTML5 Game

PhaserJS 簡單教學

最近工作在學習開發簡單的動畫遊戲， 一開始我在研究使用的是createJS, 然而一開始有點不知道為什麼就是用起來蠻不順手的…。

後面因為同事建議說：你要不要換一個 lib 來試試看…於是，便踏入這個PhaserJS這個大門。我發現它能用物件的方式也能用一般func 的方式撰寫設定、調整，你只要知道三個部分：preload、create、update，幾乎就是能掌握住PhaserJS…

實在有夠簡單

附上一些教學資源：(ps. 發現 codecademy 變強變大很多，現在學code的資源實在好多)

• https://www.codecademy.com/learn/learn-phaser-js-fundamentals

另外也有很棒的筆記資源，可以提供大家參考：

• https://rexrainbow.github.io/phaser3-rex-notes/docs/site/

Wordpress 也想要 hot-reload

由於最近在開發前端相關的程式，但也希望開發WP時也能像開發gulp、golang一樣能夠 hot-reload。

問了google，它就推薦了browser-sync 這個套件，實在是好好用啊～

首先，讓我們先安裝他

1

npm install browser-sync --save-dev

之後你需要在目錄下寫一個config.js，以下是我的配置

1
2
3
4
5

module.exports = {
    proxy: 'http://127.0.0.1', // 將此處替換為你的本地 WordPress 網站 URL
    files: ['./**/*'], // 將此處替換為你的插件檔案目錄路徑
    reloadDelay: 1000, // 可選：重新載入延遲（以毫秒為單位）
};

在 npm install 之後你編輯一下package.json

1
2
3
4
5
6
7
8

{
  "scripts": {
    "serve": "npx browser-sync start -c config.js"
  },
  "devDependencies": {
    "browser-sync": "^2.29.3"
  }
}

之後執行npm run serve 就可以啦！ 💪