[實作] 打字遊戲
學習到的知識點
CSS
display:none
display:flex
JS
Math.length()
Math.floor()
setInterval()
簡介
打字遊戲
HTML
結構
這邊的結構十分清楚,沒有特別困難的點。
1 |
|
CSS
-webkit-
私有前綴-webkit-appearance: none
,去除瀏覽器的預設樣式。
1 |
|
JS
宣告變數 Declare varialbe
原生 Js
這邊使用陣列儲存測驗單字。
1 |
|
Jquery
選擇器
1 |
|
隨機挑選陣列裡的單字,加到元素的div裡
getRandomWord()
addWordToDOM()
原生 Js
Math.random()
函式,會隨機產生出0~1之間的小數,出來的值永遠不會大於1。Math.floor()
函式會無條件捨去到比自身小的最大整數。ex 4.6213 回傳 4words.length
是20,乘上隨機0-1之間的數,再取整數。
1 |
|
Jquery
- 原生JS是用打好的陣列,再去取得測驗字。
- 這裡使用實作無限滾動頁面取的API的方法(搜尋random word api),得到測驗字串。
- 再直接將得到的字串放入
#word
裡。
使用$.ajax
方法。
1 |
|
更新成績,判斷輸入的字是否符合出現的字
updateScore()
addEventListener
的input
不需要按下Enter就會直接輸入。
判斷輸入是正確後,會直接清空輸入框。
原生 Js
1 |
|
Jquery
.innerHTML =
轉成.html
text.addEventListener("input"
轉成$("#text").on("input"
e.target.value
轉成$(this).val()
e.target.value = ""
轉成$(this).val("")
1 |
|
每秒更新倒數狀態,倒數到0時,出現gameOver Panel
原生 Js
updateTime()
gameOver()
setInterval()
固定延遲了某段時間之後,才去執行對應的程式碼,然後「不斷循環」。- 使用
setInterval()
才會開始倒數,少了這一行,time
變數就不會更動。 - 秒數歸0時,在css預先寫好的style,讓他出現(
display:flex
),預設為(display:none
)。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26// Start counting down
const timeInterval = setInterval(updateTime, 1000);
// Update time
function updateTime() {
time--;
timeEl.innerHTML = time + "s";
// 等於0時,呼叫gameOevr()
if (time === 0) {
clearInterval(time);
//end the game
gameOver();
}
}
// Game over,show end screen
// 顯示GameOver的Panel
function gameOver() {
endgameEl.innerHTML = `
<h1>Time ran out</h1>
<p>Your final score is ${score}</p>
<button onclick="location.reload()">Reload</button>
`;
endgameEl.style.display = "flex";
}
Jquery
.style.display =
轉成.css("display", "flex")
1 |
|
用Localstorge去設定與判斷使用者選的難度
原生Js
- 宣告
difficulty
變數,並且做判斷。如果困難度為空,就從localStorage取得值,如果沒有值,就預設medium
。
1 |
|
Jquery
.value =
轉成.val
1 |
|
設定與下拉選單的事件監聽
Js
1 |
|
Jquery
.classList.toggle()
轉成.toggleClass()
.target.value
轉成.val()
1
2
3
4
5
6
7
8
9$("#settings-btn").on("click", function () {
$("#settings").toggleClass("hide");
});
$("#settings-form").on("click", function () {
difficulty = $("#difficulty").val();
localStorage.setItem("difficulty", difficulty);
});
參考文章
許多內容都跟之前的實作有重複,都是參考之前的筆記XD。
[實作] 打字遊戲
https://phoebeho.com/Portfolio/20210128/301319586/