第十屆 優選

web
以經典小遊戲為主題之ReactJS應用練習
Taiming

系列文章

DAY 21

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

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

DAY 22

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

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

DAY 23

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

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

DAY 24

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

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

DAY 25

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

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

DAY 26

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

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

DAY 27

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

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

DAY 28

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

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

DAY 29

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

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

DAY 30

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

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