iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
2

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

跟前面一樣,我們使用 create-react-app 來開啟一個新的專案,並且使用 React + Redux 的架構。

src/containers/MemoryBlocks/reducer.js

const createBlocks = sideLength => Array.from(Array(sideLength * sideLength), (value, index) => ({
    id: index,
    audio: () => getAudioObject(PIANO_SOUNDS[index]),
}));

const initialState = fromJS({
    blocks: createBlocks(DEFAULT_SIDE_LENGTH),
    sideLength: DEFAULT_SIDE_LENGTH,
    level: DEFAULT_LEVEL,
    levelData: generateLevelData(DEFAULT_LEVEL, DEFAULT_SIDE_LENGTH),
    answer: [],
    isGameStart: false,
    isCorrect: true,
    isComplete: false,
    isPlaying: false,
    chance: DEFAULT_CHANCE,
});

參數說明

跟前面兩個遊戲一樣,我們首先來說明每個參數所代表的意義及用途

  1. blocks
    . 因為是記憶方塊,所以首先一定要有方塊,每一個方塊我們需要有他的 id ,另外因為方塊按下去會有聲音,所以也會存一個聲音物件。因此他是一個由物件組成的陣列。
  2. sideLength
    . 這個參數用一個整數來記錄目前是 2x2 的方塊,還是 3x3 ,還是 4x4 ,如果是 2x2 的話,這個參數就是 2 ,依此類推。由於前面提到說,隨著關卡的增加,為了提高難度,方塊會越來越多,因此這個部分由這個參數來控制。
  3. level
    . 關卡,這個參數紀錄目前到第幾關,也是一個整數。由於題目的難度和長度跟關卡數有相依性,所以關卡數也會拿來決定題目的難度。
  4. leveData
    . 這邊用一個由數字組成的陣列來表示本關的題目,假設題目是 [1, 2, 2] ,裡面的數字代表相對應的方塊的 id ,所以回答也需要按照順序按下 [1, 2, 2] 才算答對。
  5. answer
    . 這個參數跟 levelData 是一對的,levelData 是題目,answer 是玩家的回答,所以基本上格式是一樣的。
  6. isGameStart
    . 這個餐數幫助我們判斷現在是否已經開始遊戲,true 代表開始,false 代表還沒開始,或是結束。
  7. isCorrect
    . 每次一個一個按下 block 按鈕,會比較 levelData 和 answer 兩個參數,若發現回答正確,此時 isCorrect 會設為 true ,反之會設為 false。因此透過這個參數我們會來做答對或是答錯之後的後續處理,例如說播放答對音效或是答錯音效。
  8. isComplete
    . 當比較 levelData 和 answer 兩個參數,若發現全部回答正確,就會把 isComplete 設為 true,表示這一題已經答對了,要進到下一題。
  9. isPlaying
    . 由於我們未來在播放遊戲題目音樂的時候,是非同步處理,在音樂播放的時候,雖然玩家還是可以繼續操作,但是我不希望這時候的操作會影響遊戲的進行,所以我希望題目音樂或是特效音樂在播放的時候,有一個參數來幫助我們判斷現在是否正在播放,若正在播放,我希望此時使用者無法答題,或是答題無效,以免影響遊戲的進行及對錯的判斷。
  10. chance
    . 這個參數就是我們昨天在功能構想的時候提到的”命”的機制,目前還有幾”命”,由這個參數來記錄,錯一題扣一命,答對一題增加一命,重播一次也需要扣一命,命扣完之後需要重新開始遊戲。

有了這些參數,相信我們就能夠把昨天希望做到的功能完整的實現出來。接下來,按照這些參數,我們就可以逐步的來建構記憶方塊這個遊戲了!

參考程式碼 & 遊戲展示

Memory Blocks - Github


上一篇
Day21 - 記憶方塊篇:前言及功能構想
下一篇
Day23 - 記憶方塊篇:頁面佈局規劃
系列文
以經典小遊戲為主題之ReactJS應用練習30

尚未有邦友留言

立即登入留言