昨天 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