打字游戏
Posted HAI6545
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打字游戏相关的知识，希望对你有一定的参考价值。
<!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>以上是关于打字游戏的主要内容，如果未能解决你的问题，请参考以下文章