猜歌遊戲輔助工具 | 專案發想紀錄

Alan Syue
2 min readAug 9, 2020

--

三月時的一時興起,某個禮拜六晚上開始實作 prototype。

還記得三月時,接觸到許多有趣的 side project,其中包含誰是臥底,以及跟資種學弟在開發中的一款遊戲。

那時腦袋總一直在想,還有什麼有趣的題目可以試試看?想著想著就想到,大學參加社團活動時,我很會玩猜歌遊戲,之前看到 YouTuber 舉辦猜歌遊戲我也都秒猜到。

於是又想到,大二準備遊戲時,要先準備題目,然後要先紀錄從哪段開始播,不然會影響到遊戲的節奏,是一道不算複雜,但也挺惱人的前置作業。

那如果有個應用程式,簡單的操作就能直接開始遊戲流程,那不是減輕關主的負擔了嗎?

想到這我就馬上從床上跳起,開始想要怎麼實作。

Prototype 的發想

一開始想快速做出 prototype 來讓大家嘗試,於是想了一下:活動關主最需要的就是一直有題目,然後可以馬上播放歌曲來讓大家猜。所以流程會是:

開始 -> 題目 -> 播放歌曲 -> 參賽者猜歌 -> (可能需要重聽一次) -> 下一題

所以就先以這樣簡單的流程下去做開發。

實作架構

這次的專案主要是以 React.js 來實作,題目用一個 json 檔儲存,裡面紀錄歌曲名稱、YouTube 網址的 unique id、開始播放的秒數。

題目頁內嵌 YouTube 的 iFrame ,就可以直接播放了,為了讓題目可以都不同,每次重新開始我都會隨機排序。

GitHub:https://github.com/AlanSyue/guessSongsGame

Demo:https://guess-songs-game.herokuapp.com/

小結

這篇是想先記錄一下這個專案的構想,但也因為在做別的專案,這個專案暫時 pending,也希望有天會再回來做,如果有人有興趣或想增加歌曲,可以直接發 PR,或是有什麼問題或建議,也歡迎指教。

--

--