趁連假給自己定了一個目標，就是學一套網頁框架，google了一下大概就三個比較多人用，分別為angular、react、vue，沒想太多直接選react，依照之前學程式語言的經驗，習慣以實作一款遊戲來當作入門練習，二話不說選我最熟悉的"太空**者"，以下大致列一下每天的進度：
- 第一天：
- 搜尋react文章並了解其運作，並找一套繪圖套件(評估後決定用konvajs)配合製作遊戲
- 搜尋網路圖片、音效資源
- 第二天：
- 擴充konvajs的Sprite(加入碰撞功能)
- 處理所有"太空**者"圖片
- 將處理好的圖片透過react秀在網頁上
- 第三天：
- 處理所有"太空**者"遊戲運作
- 敵機移動、敵機子彈碰撞主角飛機處理
- 主角飛機鍵盤移動、主角子彈碰撞敵機處理
- 分數處理
- 處理所有"太空**者"遊戲運作
- 第四天：
- 處理所有"太空**者"遊戲運作
- 背景捲動
- 最高分數處理
- 螢幕自動適應處理
- 處理所有"太空**者"遊戲運作
-
STEP 1:建立專案.
- create-react-app react_space_invaders
-
STEP 2:進入目錄
- cd react_space_invaders
-
STEP 3:安裝套件.
- npm install react-konva konva --save
- npm install --save react-howler
-
STEP 4:將本下載檔案解壓覆蓋掉原本的目錄
-
STEP 5:執行
- npm start
- Enter、空白鍵：開始遊戲
- 左右鍵：左右移動角色
- M鍵：音樂、音效開關