線上課程 / 網站開發

動手玩 React！

一起用React做個小遊戲吧！

如果你/妳常常聽到 React，但又一直沒機會體驗看看，歡迎跟我們一起透過實作小遊戲來認識 React。 React 是個用來實作使用者介面的 JavaScript 函式庫，在使用上只要專注於資料邏輯，React 就會透過 Virtual DOM，將變動後的資料有效率的顯示在畫面上。並且可以透過將邏輯寫成元件，方便在多個地方使用。如此方便的技術，你一定要試試看。

2.0 小時
3 章節
35 單元
講師：
使用者大頭貼
諶冠霖 aka Lin
最後更新：2025 年 12 月

你將學到什麼

這系列影片不會有很艱深的邏輯，使用的範例都是大家一定都玩過的遊戲，我們會透過範例，使用一些簡單的 React 語法，希望能帶你體驗到寫React的樂趣與便利性。

課程大綱

3 章節 · 35 單元 · 2.0 小時
成果展示及檔案下載
簡介
1 分鐘
卡牌準備及洗牌
6 分鐘
建立卡牌
3 分鐘
卡牌元件化
2 分鐘
翻牌效果
1 分鐘
翻牌邏輯 part 1
6 分鐘
翻牌邏輯 part 2
4 分鐘
翻牌邏輯 part 3
3 分鐘
小結
0 分鐘
成果展示及檔案下載
簡介
1 分鐘
繪製場景及角色
5 分鐘
讓蛇動起來！
5 分鐘
撞到牆壁的話...
3 分鐘
上下左右移動
4 分鐘
吃蘋果
2 分鐘
碰撞偵測
2 分鐘
重新開始遊戲
2 分鐘
程式碼整理
2 分鐘
小結
0 分鐘
成果展示及檔案下載
簡介
2 分鐘
範例檔案說明
1 分鐘
棋盤繪製
7 分鐘
準備地雷
4 分鐘
試踩地雷
3 分鐘
元件化
2 分鐘
踩到的是地雷嗎？
3 分鐘
設定旗子
5 分鐘
遊戲結束
5 分鐘
旁邊有幾顆地雷？
8 分鐘
自動翻開沒有地雷的格子
5 分鐘
輸了還是贏了？
5 分鐘
小結
0 分鐘

講師介紹

使用者大頭貼

諶冠霖 aka Lin

五倍學院 前端工程師

諶冠霖 的其他課程

前端開發環境新手村 HTML/CSS 入門

推薦課程

你可能也會喜歡的學習內容

瀏覽全部
免費
開始上課！