---
title: "【JavaScript】JS地下城-6F-60秒算數遊戲"
description: "6F-60秒算數遊戲"
canonical_url: "https://hannoeru.me/posts/javascript-dungeon-6f-60-seconds-math-game"
---

> Index of every page on this site: [llms.txt](https://hannoeru.me/llms.txt)

## 6F-60秒算數遊戲

![wp-image-289](https://hannoeru.me/images/2019/05/screenshot-2019-05-21-21.03.28.png)

### 連結

[Demo](https://gh.hannoeru.me/sec-game/)

[Code](https://github.com/hannoeru/sec-game)

### 使用語言

HTML、CSS、JavaScript（ES6）

### BOSS 弱點

1. 【特定技術】遊戲規則

  1. 0~~20 秒為 1位數計算 (5-3)，21~~40 秒為 2 位數計算 (30*19)，41~60 秒為 3 位數計算<br />
  
  
  (332+312)，加減乘除規則請用隨機產生，不可寫死題目，60 秒內可無限次數答題。
  2. 0~~40 秒答對加一分，41~~60 秒答對加五分，答錯扣一分，最多僅能扣到零分
2. 【特定技術】不可設計跳轉頁面，都得在同一頁內部切換頁面完成。

### 心得

最近感覺用 flex 用上癮了，所以這次排版用了很多，也越來越了解用法，CSS 很快就寫完了。

JS 的部分，原本想要用 Vue 做的，但是因為我才剛開始看教學…很多語法搞不清楚還要一直查，所以等我學得差不多再來用…

### 防止作弊

#### 將全域變數變成區域變數

我目前用了 ES6 的語法加上外面包了一層 function，變數就不會暴露在全域，沒辦法直接從 console 修改，不知道有沒有破解的方法？

> **補充（2026）：** 有，而且很容易。把變數藏在 function 裡只是避免直接存取，開發者工具仍可以用中斷點、事件監聽或攔截 DOM 操作來竄改行為。對純前端的小遊戲來說，客端無法真正防止作弊，只能提高門檻。

#### 混淆程式碼

透過混淆程式碼破壞可讀性，讓其他人看不懂你在寫什麼，不知道你的程式邏輯，自然就不知道該怎麼修改。

可是這個很容易被逆向，厲害的不用幾分鐘就可以還原出源碼，不是一個非常有效的方式。

#### 後端驗證

將題目、答案、分數、時間等加密後傳至後端做驗證，如果擅自修改比對後就會發現，使用 HTTPS 防止封包被攔截。

### 技巧

#### `setInterval()` & `clearInterval()`

`setInterval()`：根據設定的時間重複執行。

`clearInterval()`：停止已經設定的 `setInterval()`。

範例：

```js
// 指定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)
```

### 參考資料

[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)

[JavaScriptでsetIntervalを使う方法【初心者向け】](https://techacademy.jp/magazine/5537)

## Sitemap

See the full [sitemap](https://hannoeru.me/sitemap.md) for all pages.