6F-60秒算數遊戲
連結
使用語言
HTML、CSS、JavaScript(ES6)
BOSS 弱點
- 【特定技術】遊戲規則
- 0
20 秒為 1位數計算 (5-3),2140 秒為 2 位數計算 (30*19),41~60 秒為 3 位數計算
(332+312),加減乘除規則請用隨機產生,不可寫死題目,60 秒內可無限次數答題。 - 0
40 秒答對加一分,4160 秒答對加五分,答錯扣一分,最多僅能扣到零分
- 0
- 【特定技術】不可設計跳轉頁面,都得在同一頁內部切換頁面完成。
心得
最近感覺用 flex 用上癮了,所以這次排版用了很多,也越來越了解用法,CSS 很快就寫完了。
JS 的部分,原本想要用 Vue 做的,但是因為我才剛開始看教學…很多語法搞不清楚還要一直查,所以等我學得差不多再來用…
防止作弊
將全域變數變成區域變數
我目前用了 ES6 的語法加上外面包了一層 function,就無法透過 console 修改變數內容或執行函數了,不知道有沒有破解的方法?
混淆程式碼
透過混淆程式碼破壞可讀性,讓其他人看不懂你在寫什麼,不知道你的程式邏輯,自然就不知道該怎麼修改。
可是這個很容易被逆向,厲害的不用幾分鐘就可以還原出源碼,不是一個非常有效的方式。
後端驗證
將題目、答案、分數、時間等加密後傳至後端做驗證,如果擅自修改比對後就會發現,使用 HTTPS 防止封包被攔截。
技巧
setInterval()
& clearInterval()
setInterval()
:根據設定的時間重複執行。
clearInterval()
:停止已經設定的 setInterval()
。
範例:
// 指定interval變數到setInterval()
const interval = setInterval(() => {
countTime -= 1
if (countTime < 10) { timeDOM.textContent = `00 : 0${countTime}` } else { timeDOM.textContent = `00 : ${countTime}` }
if (countTime === 0) {
mainDOM.classList.add('hidden')
restartDOM.classList.remove('hidden')
gaming = false
// 用clearInterval()停止interval
clearInterval(interval)
finalScore.textContent = score
}
}, 1000)
參考資料
Tags