NoZ

記憶遊戲進階版

2020/10 ~ 2020/12

藉由 JavaScript 完成的記憶遊戲,再加上 CSS 加入血條 與會變色的腳色,將一般的記憶遊戲又更添樂趣。以及 利用 localStorage 將分數紀錄,讓玩家可以再次挑戰自 己的分數!

記憶遊戲進階版 image

使用技術

HTMLCSSJavaScriptjQuery

專案介紹

這是一個記憶性質的遊戲,整體開發分為四個階段,從前置作業的原型設計開始,到角色動畫、血條樣式、遊戲介面與 loading page 的加入,再到 JavaScript 功能的完善如血量增減與顏色變化,最後加入分數與頁面切換機制,並使用 localStorage 儲存分數。

本遊戲以「正面與負面情緒對抗」為核心概念,透過角色顏色與血條機制來傳遞情緒對抗的意象,並加入題目播放與點擊順序驗證的流程,藉由點擊方塊正確順序進行對抗。

專案連結

主要功能

  • 支援答題輸入與答錯重試機制
  • 以角色顏色與血條象徵正負面情緒的對抗
  • 有完整的遊戲進入頁面、Loading 頁面、結束頁面
  • 使用者可透過點擊方塊與題目進行互動,答對會加分並削減對手血量
  • 使用 localStorage 儲存分數於結束畫面顯示

其他補充

投影片簡報
Demo影片
書面報告