人生首 Side Project－國旗猜猜樂 Flag Quiz Game

3 min readApr 3, 2022

遊戲這裡玩👾 / GITHUB這裡看📚

【遊戲規則】
- 主標題顯示此關卡「國家名稱」，副標題則是所在「哪一洲」
- 依據答題「左中右」或「上中下」欄位的色塊，點選下方 7 色色盤可填色
- 亦可點擊任一欄位修改填色，深紫色外框顯示的為「目前答題欄位」
- 填完三色，點選 SUBMIT 交卷，會跳出答題 CORRECT / WRONG 訊息
- 點擊右上角 LEVEL 可快速通關到任一關卡（共 24 關）
- 歡迎分享闖關成功 FINISH 畫面給親朋好友🤣

登愣！在 2022 的四月春假期間，迎來人生首個 Side Project 拉！💡

專案緣起

3 月下旬時，看到 ALPHACamp 公告將舉辦一日 Side Project 黑客松，想著，不趁這次機會開始的話，待到何時？因此，開始構思 Side Project idea，參考著前輩們的作品集，不如來做個小遊戲好了！

會構思出「國旗猜猜樂 Flag Quiz Game」這個 idea，主要是看到學長姐「草泥馬」的主題，認為簡單可愛的介面、搭配練習使用 Vue.js 框架去變化畫面內容，應該是不錯的 Side Project 練習！但我沒有可愛的素材… 也沒有厲害的 UI 設計… 想著想著，不知道為什麼蹦出三色國旗(tricolour) 的想法！

經過一番規劃後，已先用 Slide 做好陽春版的介面規劃、搜集好 24 個國旗資料、大致腦中 run 過遊戲流程，準備迎戰首場 Side Project 黑客松拉！

事前 Slide 規劃抵加 🤖

技術應用

主要是採用 Vue.js 前端框架（含 vue-router, vue/cli）、搭配 Sass/SCSS 樣式表 撰寫，亦載入 font awesome icon 及 Google Fonts 的 Syncopate 字體。

重點功能

開始做 Side Project 才發現，原來是個大～坑～啊～

事情永遠不想傻人(?) 想的這樣，本以為可以參照 Slide 構思，簡簡單單地完成「輕巧」小專案，殊不知每做一個功能都像踩個坑，這 24 小時就在不斷地完成 HTML 規劃 → CSS 樣式排版 → JS 動態設定 → 人工測試互動功能有無 bug、畫面 RWD 後有無扭曲變形的循環之中度過…

但必須說，在做 Side Project 過程中，真的會學習到很多，當你親自去構思功能 idea 後，因為想達到目標，會去網路搜尋合適/可行的寫法，無形之中便會內化、成長！✨

首頁 Landing Page 動畫

刻好 Landing Page 介面後「天啊！這也太單調吧！」，不行，需要幫它加點動畫，畫龍點睛一番！意外發現 CodePen 有好多創意又精緻的動畫設計，像是非常炫的 Spotlight 開場、迷幻的文字跑馬燈等，最後我參考 Brush Stroke 樣式，既然是幫國旗塗色，首頁開場來個 Brush Stroke 感覺頗搭的！

24 關卡設計

可以發現三色旗其實有分直式 or 橫式，每個關卡的資料亦不同，這裡我運用 Vue template 逐一將「國家名稱」、「所在洲」、「7色色盤顏色」等資料帶入，並運用 v-bind :class=”data.showComponent” 判別這關是要呈現「直式」還是「橫式」的國旗欄位。

細節調整

除上述的資料差異外，其實可以發現，每個國家國旗顏色（色碼）不盡相同，以及有些三色旗其實不是等分均分，如果依照 backround-color: red, orange, yellow,… 及 flex: 1 去劃分欄位的話，便有幾分失真！

因此便在「顏色色碼」及「欄位比例」做了細節調整，成果如下。

統整資料

經過上述的長篇大論(?) 不難發現，每個關卡的資料也是不少，原先是將資料放在 vue template 的 data() 裡，但 24 關的資料實在太長拉… 因此，額外創個 json 檔存放資料！（當然，若將資料存到資料庫裡，透過 api 去讀取資料會更好！🥺）

透過 vue router this.$route.params.id 取得現正進行中的關卡，在 created() Vue 畫面時 fetchData(id)，如果發現讀不到資料，即表示 id 超過關卡範圍，會重新導向回首頁。

選擇答題欄位

關卡基本設定會是「欄位1 → 欄位2 → 欄位3」一路填色下去，現正答題中的欄位會顯示「深紫色外框」。

試玩時發現，如果不小心按錯顏色，便沒辦法修改欄位顏色，只能送出錯誤答案才能重來！

因此，額外新增「變換欄位」的功能，當滑鼠滑過(hover) 欄位時，欄位會顯示「深粉色外框」辨別，當點選欄位後，便會把現正答題中的欄位修改為user 選擇的欄位（且清空該欄位本來的填色），如此一來，在送出答案前都可以修改答案。

選擇特定關卡

給朋友試玩的時候，回饋是「可能都答不對，一直卡在第一關捏…」(笑)！所以善良如我，就做個快速通關的介面，點選右上角的「LEVEL」標籤，就能隨意選擇關卡！

還偷偷地在 LEVEL 頁面，放上每個國旗的 emoji，算是另類的提示板板吧！（目前確認 MacBook 筆電、iPhone & Android 手機皆可正常顯示 emoji）

在 Vue.js 引入 font awesome

先前都只有在一般專案引入 font awesome 的經驗，首次嘗試在 Vue.js 引入 font awesome！其實讀完 官方文件 便可以成功引入，只是在跟官方文件步驟時，小小地耍笨一下… 各位記得在 import specific icons 時，要把黃色框框內的文字改成自己需要的 icon name 喔！

RWD

RWD 響應式網頁設計 肯定是有滴！將專案 deploy 到 Github 後，發現圓圈圈色盤在手機呈現太小、按起來不好選色，所以便將手機版的色盤修改為方塊狀、佔比較大；另外電腦版的介面若無限延伸也不好看，故給定 max-width: 570px; 讓畫面不會無限膨脹。

後續開發

這份 Side Project 是 4/2 - 4/3 兩天時間製作而生，身為網路開發世界練習生的我，想當然還有很多可以優化的地方、及可擴充的功能。

以下先列出幾點，目標後續可持續優化的方向：

【填色動畫】目前欄位上色只有單純讓顏色滿版，後續想增加 brush stroke 動畫，讓 user 感受真的 painting 著色體驗
【挑戰版】就是沒有 LEVEL 標籤選項，要按部就班慢慢闖關的版本！挑戰版可增加「計時器」紀錄 user 成功闖關花費的時間，以及「排行榜」讓 user 有遊戲競賽之感
【後端資料串接】承如文內所說，國旗資料其實也不少，後續可以考慮架個資料庫、寫個後端 api 串接
【國旗樣式擴充】國旗百百款，初試先從簡單的三色旗開始，未來可持續擴充各樣式的國旗