# JavaScript題目06 - 60秒算術遊戲
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/XWOrMRJ)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E06-60-seconds-challenge-d641b9c9aaec)

> 6F - 60秒算術遊戲

### 使用語法
* HTML、CSS（SCSS）、JS（原生）( ͠° ͟ʖ ͡°)=ε/̵͇̿̿/‘̿̿ ̿ ̿ ̿ ̿

### 攻略要點
1. 【特定技術】遊戲規則
2. 0 ~ 20秒是一位數計算(1+3)，21 ~ 40秒為二位數計算(25+87)，41 ~ 60秒為3位數計算(100+331)。
3. 加減乘除請用隨機產生，不可寫死題目，60秒內可無限答題。
4. 0 ~ 40秒答對一題加一分，超過40秒答對一次加5分，答錯扣一分，扣到0分為止。
5. 如果答案為小數點，則會更換題目。
6. 紀錄最高歷史分數
7. 【特定技術】不可以設計轉跳頁面，都得在同一頁內部完成作答。

### 拆解步驟
* **HTML**
1. 這次因為要求不可以設計轉跳頁面，所以我是用3個`div`來包住我的頁面所呈現的畫面唷~
* **CSS**
1. CSS仍採取`SCSS`撰寫，基本上問題也不太大，其中有幾個是可以把他拉出來包成一個<font color=blue>`@mixin`</font>，像是`font`的各種css設定，這是可以再修改的部分拉
2. 裡面有出現一些<font color=cake>`&:`</font>是什麼意思呢？
簡單舉例來說

        .className{
            font-size: 22px;
            &:before{
                content:"123";
            }
        }

與下方這個其實是一樣意思的唷~

        .className{
            font-size: 22px;
        }
        .className:before{
            content:"123";
        }

有點像是指定是哪個`className`底下，只是再寫 `SCSS` or `SASS` 可以試試看會多節省一些空間（我是覺得蠻直覺的拉~）
* **JS**
>基本上不算太困難，只是哪個步驟要放在哪裡需要想一下、理解一下，所以這次就大概說明一下解題邏輯是怎麼樣，當然一定有其他更好的方式，歡迎大家一起討論看看~

| 程式名稱 | 含意 | 代入參數含意 |
| ---------------------------------- | -------------------------------------| --- |
| startGame() | 設定計時器60秒 & 登記最高歷史紀錄 | |
| outputTopic(time) | 判斷是否要出新題目 & 答案內有小數點要更換題目| `time` 計時器時間 |
| consoleTitle(time) | 偵測使用者輸入答案與keyDown Enter鍵 | `time` 計時器時間 |
| numberText(num) | 判斷什麼時間點要幾位數的題目 | `num` 計時器時間|
| operationAns(front,back,operation) | 計算答案 & 回傳 | `front` 公式第一個數字、`back` 公式第二個數字、`operation`運算符號 |
| judgeAns(userans,finalAnswer,time) | 判斷使用者輸入跟答案是否相符合 & 計算分數 |`userans` 使用者答案、`finalAnswer` 正確解答、`time`計時器時間 |
| judgeOperation() | 隨機產生運算符號 | |
| serialNum(type,num) | 設定數字格式 |`type` 數字格式、`num` 要代入的數字 |
| randomusefloor(min,max) | 亂碼產生 |`min` 最小數字、`max` 最大數字 |
| historyScore() | 偵測有沒有修改歷史紀錄 | |

### 結尾
* 終於回來補第六關了，剛開始覺得第六關比第七關的畫板難，但是邏輯通了就突然啪啪啪ㄉ寫出來了（~~難不成是我進步了嘛!!!~~）
* 這次仍然採用原生JS，還是一樣不太習慣但是有感覺越來越上手了(灑花~然後我覺得有寫過第三關就比較不會擔心這關處理計算邏輯的部分，[這篇第三關計算機](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E03-%E8%A8%88%E7%AE%97%E6%A9%9F-b5ff277df4d0)，所以大膽放心寫GOGOGO。
* 這次的題目我增加個新東西，當答案存在餘數，則會重新更新題目，因為實在是拿不定答案要取小數點到第幾位才算合理，又希望可以追求精準一點的心算，所以這邊有做個小小的更動唷~
* 最後的最後，寫了這幾關下來覺得在開始新專案或是開始新功能之前，可以先想一下、分解當下應處理的步驟，會比邊想邊做還要來的快速，也更能知道自己已經做到哪個部份了~大家可以參考看看 :+1:

### 參考大大
* [關於紀錄最高歷史成績](https://bjmqfg83.github.io/blog/mathgame/)
* [第三關計算機](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E03-%E8%A8%88%E7%AE%97%E6%A9%9F-b5ff277df4d0)

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~