CHAPTER 01 準備開發工具及環境
1.1 準備開發工具
1.1.1 VSCode
1.1.2 npm
1.1.3 Node.js
1.1.4 nvm
1.1.5 Google Chrome 瀏覽器
1.2 準備開發環境
1.2.1 使用 create-react-app 創建一個專案
1.2.2 ESLint
1.2.3 styled-components

CHAPTER 02 開發流程準備
2.1 專案介紹
2.2 規格書
2.3 設計圖說明
2.4 任務拆解
2.4.1 任務拆解的好處
2.4.2 任務拆解的心法
2.5 任務實作
2.6 篇章總結

CHAPTER 03 技能大補帖
3.1 CSS Flex
3.1.1 情境
3.1.2 介紹
3.1.3 Flex 的使用
3.2 CSS Grid
3.2.1 情境
3.2.2 介紹
3.2.3 Grid 的使用
3.3 React Hook
3.3.1 useState 簡介
3.3.2 useEffect 簡介
3.4 setTimeout 與 setInterval
3.4.1 setTimeout()
3.4.2 setInterval()
3.4.3 取消 setTimeout() 與 setInterval()
3.4.4 依序印出： 0 1 2 3 4

CHAPTER 04 圈圈叉叉篇
4.1 專案介紹
4.1.1 遊戲簡介
4.1.2 學習重點
4.2 規格書
4.2.1 關於畫面與功能
4.2.2 關於遊戲邏輯
4.3 設計圖說明
4.3.1 桌面版展示
4.3.2 手機版展示
4.4 任務拆解
4.4.1 任務拆解描述
4.4.2 任務拆解總結
4.5 任務卡01：準備開發環境
4.5.1 使用create-react-app 創建一個專案
4.5.2 安裝ESLint
4.5.3 安裝styled-components
4.6 任務卡02：準備全局主題及樣式
4.6.1 簡介ThemeProvider
4.6.2 配置ThemeProvider
4.6.3 配色小幫手
4.7 任務卡03：畫面佈局切版
4.7.1 畫面佈局草稿
4.7.2 畫面佈局樹狀圖
4.8 任務卡04：設計資料結構
4.8.1 資訊看板
4.8.2 九宮格棋盤
4.8.3 重新開始按鈕
4.8.4 切換模式
4.8.5 資料結構總結
4.9 任務卡05：棋盤刻畫及點擊事件
4.9.1 規劃出棋盤的範圍
4.9.2 畫出棋盤上的格子
4.9.3 點擊棋盤事件
4.9.4 畫面美化
4.10 任務卡06：勝負判斷
4.10.1 比較並選用不同的勝負判斷方法
4.10.2 實現勝負判斷的函式
4.10.3 贏家棋子的歡呼動畫
4.11 任務卡07：資訊看板
4.11.1 參數說明
4.11.2 顯示邏輯流程圖
4.11.3 資訊看板程式碼
4.11.4 使用CSS Flex 調整顯示內容佈局
4.12 任務卡08：重新開始按鈕
4.12.1 重設狀態的函式
4.12.2 綁定函式到元件上
4.12.3 畫面美化
4.13 任務卡09：切換電腦對弈模式
4.13.1 拿掉輔助線並調整樣式
4.13.2 Switch 元件刻畫
4.13.3 電腦對弈函式設計
4.14 圈圈叉叉篇總結
4.14.1 回顧
4.14.2 天馬行空
4.15 圈圈叉叉篇完整程式碼

CHAPTER 05 貪吃蛇篇
5.1 專案介紹
5.1.1 遊戲簡介
5.1.2 學習重點
5.2 規格書
5.2.1 關於畫面與功能
5.3 設計圖說明
5.3.1 桌面版展示
5.3.2 手機版展示
5.4 任務拆解
5.4.1 任務拆解描述
5.4.2 任務拆解總結
5.5 任務卡01：準備開發環境
5.5.1 使用create-react-app 創建一個專案
5.5.2 安裝ESLint
5.5.3 安裝styled-components
5.6 任務卡02：畫面佈局切版
5.6.1 畫面佈局草稿
5.6.2 畫面佈局樹狀圖
5.7 任務卡03：設計資料結構
5.7.1 貪吃蛇的構造
5.7.2 貪吃蛇的移動方法
5.8 任務卡04：地圖
5.8.1 規劃出地圖的範圍
5.8.2 刻畫30x30 的貪吃蛇地圖
5.9 任務卡05：讓貪吃蛇的頭可以地圖上移動
5.9.1 地圖上畫出貪吃蛇的頭部
5.9.2 讓貪吃蛇的頭部在地圖上移動
5.10 任務卡06：加入貪吃蛇的身體
5.10.1 地圖中畫出蛇的身體
5.10.2 貪吃蛇身體的移動
5.11 任務卡07：產生貪吃蛇的食物
5.12 任務卡08：貪吃蛇吃到食物會變長
5.12.1 蛇吃到食物
5.12.2 吃到食物身體要變長
5.12.3 吃到食物後，蛇的移動速度要加快
5.12.4 產生新的食物
5.14.5 顯示目前分數
5.13 任務卡09：貪吃蛇吃到自己會死
5.13.1 遊戲結束判斷條件
5.13.2 遊戲結束時停止貪吃蛇的移動
5.14 任務卡10：重新開始按鈕
5.14.1 重新開始按鈕樣式
5.14.2 重新開始按鈕事件處理
5.15 任務卡11：虛擬方向鍵及操作
5.15.1 虛擬方向鍵畫面樣式
5.15.2 虛擬方向鍵事件處理
5.16 任務卡12：暫停遊戲
5.16.1 暫停按鈕畫面樣式
5.16.2 暫停按鈕事件處理
5.17 貪吃蛇篇總結
5.17.1 回顧
5.17.2 天馬行空
5.18 貪吃蛇篇完整程式碼

CHAPTER 06 記憶方塊篇
6.1 專案介紹
6.1.1 遊戲簡介
6.1.2 學習重點
6.2 規格書
6.2.1 關於畫面與功能
6.2.2 遊戲流程
6.3 設計圖說明
6.3.1 桌面版展示
6.3.2 手機版展示
6.4 任務拆解
6.4.1 任務拆解描述
6.4.2 任務拆解總結
6.5 任務卡01：準備開發環境
6.5.1 使用create-react-app 創建一個專案
6.5.2 安裝ESLint
6.5.3 安裝 styled-components
6.6 任務卡02：畫面佈局切版
6.6.1 畫面佈局草稿
6.6.2 畫面佈局樹狀圖
6.7 任務卡03：設計資料結構
6.7.1 目前關卡
6.7.2 產生題目
6.7.3 玩家答案
6.7.4 是否開始遊戲
6.7.5 機會/ 命
6.7.6 載入中狀態
6.8 任務卡04：記憶方塊
6.8.1 畫出方塊
6.8.2 點擊事件
6.9 任務卡05：是否過關的判斷
6.10 任務卡06：關卡資訊及關卡進度條
6.10.1 遊戲標題
6.10.2 關卡資訊
6.10.3 關卡進度條
6.11 任務卡07：題目播放
6.11.1 開始遊戲按鈕
6.11.2 開始遊戲之後播放題目
6.11.3 每次過關之後，要播放新的題目
6.11.4 當玩家答錯的時候，重新播放題目
6.12 任務卡08：製作過關和不過關的效果
6.12.1 過關效果
6.12.2 不過關效果
6.13 任務卡09：顯示目前還有幾命
6.14 記憶方塊篇總結
6.14.1 回顧
6.14.2 天馬行空
6.15 記憶方塊篇完整程式碼