iT邦幫忙

鐵人檔案

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

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

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

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

Day21 - 記憶方塊篇:前言及功能構想

前言 終於到了這次鐵人賽最後一個遊戲,經歷一番東挑西選及天人交戰之後,最後選定了這個遊戲,記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...

2018-11-05 ‧ 由 Taiming 分享
DAY 22

Day22 - 記憶方塊篇:資料結構規劃

昨天 Day21 我們已經說明了我們所需要的物件以及規則,為了要實現這些功能及規則,我們要來規劃我們需要哪些參數來幫助我們實現。 跟前面一樣,我們使用 crea...

2018-11-06 ‧ 由 Taiming 分享
DAY 23

Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

2018-11-07 ‧ 由 Taiming 分享
DAY 24

Day24 - 記憶方塊篇:畫出主畫面記憶方塊

前情提要 今天我們要來實作記憶方塊的主畫面區塊,在昨天的努力之下,我們已經把區塊都規劃好了,接下來就是要把我們的方塊畫上去。 由於前兩個遊戲 Tic-Tac-T...

2018-11-08 ‧ 由 Taiming 分享
DAY 25

Day25 - 記憶方塊篇:幫方塊做出炫炮又迷幻的動畫

設計動機 很多人相信眼見為憑,只相信看得到和摸得到的東西是存在的。但是這個世界上很多事物雖然看不到,但是卻確實存在。例如愛,愛不是以物質的形式來存在,看不到,摸...

2018-11-09 ‧ 由 Taiming 分享
DAY 26

Day26 - 記憶方塊篇:按下去有聲音之事件處理

人除了視覺的記憶以外,也有聽覺的記憶,Day25 我們已經讓方塊有了迷幻的動畫,並且點擊的時候可以發亮,今天我們希望除了發亮之外,點擊的時候也可以發出聲音。 抓...

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

Day27 - 記憶方塊篇:開始遊戲

禁止自動播放 開始遊戲的時候有一個開始按鈕,一方面可以提示玩家遊戲開始,讓玩家做好準備再開始遊戲。另一方面,由於我們遊戲的一開始就需要播放音樂,但是在2018年...

2018-11-11 ‧ 由 Taiming 分享
DAY 28

Day28 - 記憶方塊篇:音樂播放及對錯判斷

記憶方塊是結合視覺和聽覺的記憶遊戲,今天我們要來做音樂的播放以及對錯的判斷。 產生題目 首先,我們要來產生題目並且播放題目,記得在 Day22 的時候我們有說明...

2018-11-12 ‧ 由 Taiming 分享
DAY 29

Day29 - 記憶方塊篇:遊戲關卡控制

前情提要 昨天我們做了下列這些功能 可以產生題目 generateLevelData() 可以循序播放題目音訊 playLevelSound(levelDat...

2018-11-13 ‧ 由 Taiming 分享
DAY 30

Day30 - 記憶方塊篇:難度控制 & 完賽感言

難度控制 在 Day22 我們有提到,隨著過了越多關,關卡會越來越難。我們這邊要讓題目變難的方法有兩個方向,第一個是題目會越來越長,光是這樣還不夠,而且我還希望...

2018-11-14 ‧ 由 Taiming 分享