iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
2
Modern Web

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

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

前言

終於到了這次鐵人賽最後一個遊戲,經歷一番東挑西選及天人交戰之後,最後選定了這個遊戲,記憶方塊(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!


上一篇
Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲
下一篇
Day22 - 記憶方塊篇:資料結構規劃
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言