iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

以經典小遊戲為主題之ReactJS應用練習 系列

剛過React入門關卡的初學者很需要透過實作來熟悉在入門課時學到的觀念以及技術,這次30天系列將把讀者設定為已經有ReactJS入門基礎,以實現經典小遊戲為題目,來練習使用ReactJS,分享的內容會以流程思考為主,也會簡單介紹使用到哪些工具或是Package,因為主題是在應用練習,會練習一般在入門課時已經知道的技術及觀念,在這之上多做補充,所以不會針對每個名詞觀念做很詳細的說明,但是文章中會盡量附上參考連結。

鐵人鍊成 | 共 30 篇文章 | 55 人訂閱 訂閱系列文 RSS系列文 團隊開橋找井
DAY 11

Day11 - 貪吃蛇篇:前言及功能構想

前言 談到經典小遊戲,除了圈圈叉叉遊戲之外,還有一個家喻戶曉的遊戲,就是貪吃蛇,雖然現在智慧型手機和各種遊戲機的遊戲越做越華麗,越來越炫砲,但是經典的遊戲終究還...

2018-10-26 ‧ 由 Taiming 分享
DAY 12

Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃

事前聲明 在挑戰鐵人賽之前,其實我也完全沒有想過貪吃蛇要怎麼做,所以為了做這次的貪吃蛇遊戲,我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...

2018-10-27 ‧ 由 Taiming 分享
DAY 13

Day13 - 貪吃蛇篇:頁面佈局規劃

頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣,我們要來規劃一下遊戲的畫面,因為我希望我們貪吃蛇的遊戲在電腦上可以玩,在手機上也可以玩,所以我想要把遊...

2018-10-28 ‧ 由 Taiming 分享
DAY 14

Day14 - 貪吃蛇篇:畫出主畫面地圖

昨天 Day13 我們已經把畫面區塊規劃出來了,今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系,這邊我的做法是把地圖切成...

2018-10-29 ‧ 由 Taiming 分享
DAY 15

Day15 - 貪吃蛇篇:讓蛇的頭動起來

有了地圖之後,我們就可以開始讓蛇在上面爬了,今天我們的目標是畫出蛇的頭,並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...

2018-10-30 ‧ 由 Taiming 分享
DAY 16

Day16 - 貪吃蛇篇:加入蛇的身體

昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...

2018-10-31 ‧ 由 Taiming 分享
DAY 17

Day17 - 貪吃蛇篇:產生食物(上菜啦~~)

想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...

2018-11-01 ‧ 由 Taiming 分享
DAY 18

Day18 - 貪吃蛇篇:吃到自己會死

前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...

2018-11-02 ‧ 由 Taiming 分享
DAY 19

Day19 - 貪吃蛇篇:重新開始按鈕

昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。首先,我們需要先來製作一個按鈕,這個按鈕我想要直接蓋在遊戲地圖的正...

2018-11-03 ‧ 由 Taiming 分享
DAY 20

Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲

前情提要及動機 在 Day11 的功能構想中我們有提到,雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了,但是有一點美中不足的地方,就是透過手機開啟這個遊戲的...

2018-11-04 ‧ 由 Taiming 分享