# JS練習_打字小遊戲

製作一個打字遊戲，透過設定困難度，測試使用者在一定的時間內的打字速度及正確性。
- 成品畫面


[成品網址]()

- 純html畫面


### HTML
- 使用`form`、`selector`做出選取困難程度的表單
- 下方使用`input`標籤，讓使用者得以輸入文字測試結果

### CSS
雖然html只有用空的容器表示，但還是在css先設定屬性，待在JS呼叫時可以直接顯示。

- `background-color`設定`inherit`繼承父元素的background-color。
- `disflex`先設定：none，等JS在增改屬性為`flex`。
- `z-index`設定為一，讓他顯示在最上面。

.end-game-container{
    background-color: inherit;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

}

## JS
1. 隨機產生單字
2. 打完單字，比較是否輸入正確
3. 輸入正確跳下一個單字
4. 輸入正確清除打字欄準備輸入下一個字
5.

### RandomWord()
- 目的：隨機產生單字
- wayＩ
先定義數字陣列，設定函式return word[]索引值。
利用Math.random產生 0~1 的數字，再利用Math.floor進行rounddown，產生整數索引值。

const words= [
    'sigh',
    'tense',
    'airplane',
    'ball',
    'pies',
    'juice',
    'warlike',
    'bad',
    'north',
    'dependent',
    'steer',
    'silver',
    'hoghfalutin',
    'superficial',
    'quince',
    'eight',
    'feeble',
    'admit',
    'drag',
    'loving'
];


function getRandomWord(){
    return words[Math.floor(Math.random()* words.length)]
}

- wayII
使用ajax，利用API得到隨機產生的單字，並放入`<h1>`
- [隨機產生單字API](https://github.com/RazorSh4rk/random-word-apihttps://github.com/RazorSh4rk/random-word-api)

    $.ajax({
        method: "get",
        url: 'https://random-word-api.herokuapp.com/word?number=1',
        dataType: "json",
        success: function (data) {
            $('h1').text(data);
          }  
    });

### input event
當使用者在`input`輸入值，觸發事件。
條件一：確認輸入值是否等於randomWord()產生的單字
條件二：當條件一成立：
- 執行更新分數
- 清除input 欄位的值

//input event listener
$('#text').on('input',function(e){
    const insertText = $(e.target).val();
    // console.log(insertText)
    let randomWord = $('h1').text();
    if(insertText == randomWord ){
        // console.log("yes!")
        RandomWord();

        //update the score
        updateScore()
        function updateScore(){
        score++;
        $('#score').text(score);
        }

        //每打完一個字，clear input
        $(e.target).val('');
    }
})

### focus()
選取`$('#text')`，當畫面reload時，滑鼠游標自動帶到input裡。

$('#text').focus();

### updateTime()
使設定的變數`time`遞減，並將值寫入`$('#time')`裡。
要是時間到0，執行clearInterval()
#### setInterval()
- 延遲了某段時間 (單位為毫秒)後，才執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID。
- 會在間隔固定的時間不斷重複，直到呼叫`clearInterval()`。
- [setInterval 小科普](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
#### setTimeout()
- 是固定延遲了某段時間之後，才去執行對應的程式碼，然後 ==不斷循環==。 當然也會回傳一個獨立的 timer ID。
- 只會執行一次就結束。
- [setTimeout 小科普](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout)
#### clearInterval()
- 可以取消由 setInterval() 設定的 timeout。
- [clearInterval 小科普](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)

function updateTime(){
    time--;
    $('#time').text(time + 's');

    if(time === 0){
        clearInterval(timeInterval);
        gameOver();
    }
}

#### gameOver()
當遊戲結束，將原先html設置的`<div id="end-game-contianer">`寫上遊戲結束的內容，並將其容器的css屬性改為`display:flex`

- location.reload():
是一個放讓瀏覽器重新整理的方法。
- [location.reload()小科普](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload)

function gameOver(){
    $('#end-game-container').html(`
    <h1>Time ran out</h1>
    <p>Your final score is ${score}</p>
    <button onclick= "location.reload()">Reload</button>
    `).css('display','flex');
}

#### setting difficulty
- 設定遊戲的困難度是由存放在localstorage的困難度還是是直接設定`medium`。
- 當畫面reload時，困難度不會改變，會按照之前所選的困難度。

//設定困難度是由設定在localstorage的困難度還是'medium'
// let difficulty = 'medium';
let difficulty = localStorage.getItem('difficulty') !==null? localStorage.getItem('difficulty') : 'medium';

//set difficulty select value
$('#difficulty').val(localStorage.getItem('difficulty') !==null? localStorage.getItem('difficulty') : 'medium');

###### tags: `javascript`