<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class="startBtn">開始</button>
<div class="score">得分：<b>0</b></div>
</body>
<script src="./js/utils.js"></script>
<script>
var b = document.querySelector('.score b');
// 打字游戲
/*
1.隨機創建一個span
2.設定樣式
3.設定定時器向下移動
4.系結鍵盤事件 - 打掉他 - 重新再創建一個
5.判斷是否到底 - GAME OVER
6.得分
7.開始按鈕
*/
// var span
var arr = []
// var timerId
// 通過定時器呼叫createSpan - 每隔一會就創建一個span
var time
document.querySelector('.startBtn').onclick = function(){
createSpan()
time = setInterval(createSpan, 1500)
}
// 出問題：多個span一起出現，但是他們的變數名都叫span，多個定時器疊加操作同一歌后面的span，前面的span不能移動了，后面的span越走越快
// 解決：
/*
1.將多個span放在一個集合中 - 定義span變數要換成一個集合()
*/
function createSpan(){
// 創建span
var span = document.createElement('span')
// 設定隨機字符
var code = getRandom(65, 91)
// 將阿斯克碼轉成字符，放在span中
span.innerText = String.fromCharCode(code)
// 將span放在body中
document.body.appendChild(span)
// 獲取隨機的left值
var left = getRandom(0, document.documentElement.clientWidth - 30)
// 設定樣式
setStyle(span, {
width: '30px',
height: '30px',
borderRadius: '50%',
backgroundColor: '#f00',
textAlign: 'center',
lineHeight: '30px',
position: 'absolute',
top: 0,
left: left + 'px',
fontWeight: 'bold',
color: '#fff'
})
// 設定定時器讓span向下移動
var timerId = setInterval(function(){
// 獲取top
var t = span.offsetTop
// 加大
t++
// 判斷t的最大值
if(t >= document.documentElement.clientHeight - 30){
t = document.documentElement.clientHeight - 30
// 提示游戲結束
alert('GAME OVER')
// 停止定時器
clearInterval(timerId)
// 清空所有定時器
for(var i=0;i<arr.length;i++){
clearInterval(arr[i].timer)
}
clearInterval(time)
}
// 將t設定給top樣式
span.style.top = t + 'px'
}, 20)
// 將span和timerId放在一個物件中
arr.push({
ele: span,
timer: timerId
})
}
// 給瀏覽器系結鍵盤事件
document.onkeyup = function(){
// 獲取鍵盤碼
var keycode = window.event.keyCode
// 將鍵盤碼轉為字符
var word = String.fromCharCode(keycode).toUpperCase()
// 判斷是否輸入的span中的字符
// if(word === span.innerText){
// // 洗掉span
// span.parentElement.removeChild(span)
// // 清除定時器
// clearInterval(timerId)
// // 再次創建
// createSpan()
// }
// 從arr中遍歷判斷word是哪個span的innerText
for(var i=0;i<arr.length;i++){
if(arr[i].ele.innerText === word){
// 洗掉span
arr[i].ele.parentElement.removeChild(arr[i].ele)
// 清除對應的定時器
clearInterval(arr[i].timer)
// 將arr[i]物件中陣列中洗掉
arr.splice(i, 1)
// 將分數+1
b.innerText = +b.innerText + 1
break
}
}
}
/*
*/
</script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/397483.html
標籤：其他
下一篇：打字小游戲（二）