一.js部分代码
1.创建字母和下落字母的方法
2.产生随机颜色的方法
3.设置开始和暂停
二.css部分代码
三.运行展示
四.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字游戏</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 800px;
height: 100vh;
background-color: black;
margin: 0 auto;
position: relative;
}
.content .zm {
width: 30px;
height: 30px;
background-color: lightcoral;
color: white;
text-align: center;
line-height: 30px;
position: absolute;
}
.msg {
width: 400px;
height: 200px;
position: absolute;
font-size: 40px;
text-align: center;
line-height: 200px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(92, 182, 241, 0.486);
}
</style>
</head>
<body>
<div class="content">
<div class="msg">
按回车键开始/暂停
</div>
</div>
<script>
let content = document.querySelector('.content')
window.onkeyup = function (e) {
let { key, keyCode } = e
if (keyCode === 13) {
if (!timer1 && !timer2) {
createZm()
downZm()
document.querySelector('.msg').style.display = 'none'
} else {
clearInterval(timer1)
clearInterval(timer2)
timer1 = null
timer2 = null
document.querySelector('.msg').style.display = 'block'
}
}
if (timer1 && timer2) {
let zmList = document.querySelectorAll('.zm')
zmList.forEach(r => {
if (key.toUpperCase() == r.innerText) {
r.remove()
}
})
}
}
let zmtxts = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
let timer1 = null
function createZm() {
timer1 = setInterval(() => {
let zm = document.createElement('div')
zm.innerText = zmtxts[Math.floor(Math.random() * 26)]
zm.className = 'zm'
zm.style.backgroundColor = getColor()
zm.style.top = '-30px'
zm.style.left = Math.random() * 770 + 'px'
content.appendChild(zm)
}, 1000);
}
let timer2 = null
function downZm() {
timer2 = setInterval(() => {
let zmList = document.querySelectorAll('.zm')
zmList.forEach(r => {
let top = r.offsetTop + 1
r.style.top = top + 'px'
if (r.offsetTop > content.offsetHeight - r.offsetHeight) {
r.remove()
}
})
}, 20)
}
function getColor() {
let colortxts = '0123456789ABCDEF'
let color = '#'
for (let i = 0; i < 6; i++) {
color += colortxts[Math.floor(Math.random() * 16)]
}
return color
}
</script>
</body>
</html>
