<!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>
打字游戏(一)
最新推荐文章于 2022-07-27 16:41:26 发布