前言

終於到了這次鐵人賽最後一個遊戲，經歷一番東挑西選及天人交戰之後，最後選定了這個遊戲，記憶方塊(Memory Blocks)。

這個遊戲也是很經典的童年回憶，想信大家在童年的時候都有玩過類似的遊戲(至少我抽樣問過身邊幾位朋友小時候有玩過，哈哈)。跟記憶相關的益智遊戲而且也是方塊狀的，在網路上可以找到各式各樣的版本，翻牌配對類型的記憶遊戲也蠻多的。

翻牌遊戲

記憶類型的遊戲仔細想想其實還蠻不錯的，老少咸宜，而且因為遊戲簡單，內容也不太會有打打殺殺，操作上也不用很複雜，所以很可以拿來討好小朋友，以及幫助他們身心及智力的成長。另一方面，過年回家的時候，也可以和父母爺奶長輩們一起交流，看看他們記憶力如何，增加親子關係也有個關心彼此健康的話題。如果爺爺奶奶記憶力驚人的好，也可以誇獎他們，他們一定會很高興，就不用每次過年見面就是要談一些逼婚逼生小孩逼找工作的話題，如果有這個遊戲的話，說不定有機會成功轉移話題，把話題放在彼此的健康上面，感覺也是很不錯的(...吧？)。

聲明

繼前篇貪吃蛇遊戲之後，再次托 吳哲宇老師 的福，可以完成這個記憶方塊小遊戲。本篇也是參考墨雨設計吳哲宇老師在 hahow 上面開的動畫互動網頁特效入門（JS/CANVAS）這堂課，得到作者的同意之後，以 ReactJS 改寫並添油加醋之後完成，因此在這邊附上我的參考資料，也就是課程連結。

這次參加鐵人賽其中一個動機，也是因為想要好好的來看完並實做這堂課的內容，雖然沒有辦法在30天內看完並吸收所有的內容，但是畢竟萬事起頭難，有了鐵人賽的挑戰，也幫助我有了一個好的開始。

動畫互動網頁特效入門（JS/CANVAS）
記憶方塊codepen範例 - 吳哲宇

遊戲說明

先來簡單說明一下 記憶方塊(Memory Blocks) 這個遊戲的玩法。遊戲開始時，畫面有有四個方塊，電腦會播放一組題目，聽完題目之後，玩家要根據所播放的題目回答。假設題目播放的方格顏色是紅紅黃，那玩家也要回答紅紅黃，才是過關，否則就是答錯。題目播放的方式可以透過不同顏色方格的閃爍，以及閃爍時播放的聲音來呈現。所以玩家可以透過顏色，聲音，以及畫面上的位置來記憶播放的順序並答題，關卡越後面，所要記憶的題目長度越長，難度也越高。

功能構想

雖然原作的遊戲功能很單純，但是為了增加遊戲的趣味性，我想要多加一些功能以及巧思，讓他完整一點，所以下面是我對這個遊戲的構想及期待：

遊戲物件說明

首先我先來說明一下我期待會有哪些物件

1. 方塊
   . 方塊是這個遊戲的本體，是一定要的
   . 方塊會隨著遊戲的進行而增加
   . 方塊要很炫
   . 方塊按下去要發出聲音和發光
2. 開始遊戲按鈕
   . 我希望遊戲透過這個按鈕有開始的感覺，如果玩到後面遊戲結束要重新開始的時候，也是給使用者一個重新開始的提示訊息。
3. 重新開始按鈕
   . 按下去之後遊戲重頭開始
4. 關卡資訊
   . 需要標示我目前過到第幾關
5. 每一題完成度
   . 需要告訴我這一題有幾個音，然後我目前答對幾個，因為玩到後面題目很長的時候真的會亂掉
6. 重播按鈕
   . 有時候會忘記題目，或是錯過題目，需要重播
7. 機會/命
   . 關卡犯錯會有次數限制，也就是有幾條”命”，錯一題扣一命，答對一題增加一命，重播一次也需要扣一命，命扣完之後需要重新開始遊戲。
   . 有這個機制之後，由於限量是殘酷的，整個遊戲會變得很有趣很刺激，會讓玩家產生我想贏，我不想要輸的感覺。朋友彼此也可以比賽，過很多關的人也可以炫耀。

規則說明

接下來補充說明遊戲進行的流程以及規則

1. 全部答對才過關，增加一命。答錯一題就是錯，要扣一命。
2. 會隨著過關的關卡越多，難度會提高，有幾個方向可以讓難度變高
   . 播放的題目變長
   . 方格變多
   . 播放題目的速度變快，或是忽快忽慢，有節奏性(這個方向很不錯，但是由於會增加太多的複雜度，所以在這次遊戲當中不會加入這部分，不過往後要增加遊戲趣味性，我覺得是很不錯的改良方向)
   . 答題有時間限制(這部分在這次遊戲也不會做，但是這個的確能增加遊戲難度，所以列出來給大家參考看看)
3. 如上所述，答錯及重播次數是有限制的，當剩下最後一次機會的時候，無法重播音樂。
4. 重播音樂需要扣一命
5. 沒有命之後，需要重新開始遊戲
6. 答對及答錯會有提示，告訴你答對了或是答錯了
7. 因為我們相信人的潛力是無限的，所以關卡只會越來越難，不會有破關的設計。但是方格的數量這邊設計是有限的，最多到 5x5 。

接下來我們會按照今天所訂下的功能及規則，逐步的來實現我們的記憶方塊。Check it out!