原生JS实现简易打字游戏
Posted 听雪拨弦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现简易打字游戏相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<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>打字小游戏2.0</title>
<style>
/* 基础样式 */
.score {
margin-top: 50px;
margin-left: 80px;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 28px;
font-weight: bold;
border: 1px solid black;
box-sizing: border-box;
}
button {
margin-top: 10px;
margin-left: 80px;
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<!-- 存放分数 -->
<div class="score">0</div>
<!-- 开始按钮 -->
<button>开始</button>
<!-- 存放字母的盒子 -->
<div class="box"></div>
<script>
class Word {
constructor() {
//设置下落距离,下落速度,字母生成速度的初始值
this.speed = 1;
this.timeout = 50;
this.timeout2 = 1000;
// 设置循环下落状态的初始值 false
this.flag = false;
// 调用生成字母的函数
this.btn = document.querySelector('button');
// 给按钮添加点击事件
this.btn.onclick = () => {
// 设置循环下落状态为true
this.flag = true;
this.create(this.speed);
// 设置按钮不可用
this.btn.disabled = true;
}
// 新建数组 用来存放字母标签
this.arr = [];
// 设置键盘按下事件
document.onkeydown = (eve) => {
let e = eve || window.event;
let keycode = e.keyCode || e.which;
//将按下的keyCode值转换成字母
let keyword = String.fromCharCode(keycode);
//遍历数组 判断keyword是否与数组内某个元素内容相等
for (var i = 0; i < this.arr.length; i++) {
if (this.arr[i].innerHTML == keyword) {
// 打掉一个 - 计分
// 获取原来的分
let score = document.querySelector('.score').innerText - 0; // -0 为了把字符串改成数字类型
// 让分数+1
score++;
// 加1以后的分数放进div中
document.querySelector('.score').innerText = score;
// 分数越高 速度越快
if (score % 10 == 0) {
if (this.timeout2 <= 400) {
this.timeout2 = 300;
if (this.timeout == 1) {
this.timeout = 1;
if (score % 10 == 0) {
this.speed += 1;
}
} else this.timeout -= 7;
} else this.timeout2 -= 200;
}
//从页面中删除这个元素
this.arr[i].remove();
//从数组内也删除这个元素
this.arr.splice(i, 1);
break; //终止循环
}
}
}
}
create(speed) {
//新建span标签
let span = document.createElement('span');
//将标签添加到数组内
this.arr.push(span);
//给新创建的span标签添加样式
this.setStyle(span, {
width: '50px',
height: '50px',
position: 'absolute',
top: '0',
left: this.getRandom(500, document.documentElement.clientWidth - 499) + 'px',
borderRadius: "50%",
lineHeight: '50px',
textAlign: 'center',
backgroundColor: this.getColor(),
color: "#fff",
fontWeight: "bold",
fontSize: "28px"
})
//获取box节点
let box = document.querySelector('.box');
//将标签节点追加到box里
box.appendChild(span);
//获取65~90的随机数 对应着A-Z的keyCode值
let randNum = this.getRandom(65, 91);
//将keyCode值转成字母
let word = String.fromCharCode(randNum);
//给新建的span标签添加字母
span.innerText = word;
//设置定时器 控制字母下落
let times = setInterval(() => {
//获取span距离顶部的距离
let t = span.offsetTop;
//加上每次运动的距离
t += speed;
//判断下落到底部时 游戏结束
if (t >= document.documentElement.clientHeight - 50) {
//清空定时器&延时器
clearInterval(times);
clearTimeout(this.t2);
//输出游戏结束
alert('GAME OVER');
//清空页面&数组
this.arr = [];
box.innerHTML = '';
//恢复按钮可用状态
this.btn.disabled = false;
//清空计分板
document.querySelector('.score').innerText = 0;
//恢复初始每次下落的距离
this.speed = 1;
//恢复初始下落速度
this.timeout = 50;
//恢复初始字母生成速度
this.timeout2 = 1000;
//设置循环下落状态为false
this.flag = false;
}
//把运动后的距离值设置给span
span.style.top = t + "px"
}, this.timeout);
//循环下落状态为true时 循环生成字母
if (this.flag) {
clearTimeout(this.t2); //清除延时器 防止叠加
this.t2 = setTimeout(() => {
this.create(this.speed);
}, this.timeout2);
}
}
//构造设置样式的函数
setStyle(tag, styleObj) {
for (var attr in styleObj) {
tag.style[attr] = styleObj[attr];
}
}
// 封装获取随机数的函数
getRandom(a, b = 0) {
var max = Math.max(a, b);
var min = Math.min(a, b);
return Math.floor(Math.random() * (max - min)) + min;
}
//封装获取随机颜色的函数
getColor(hex = true) {
if (hex) {
var color = '#';
for (var i = 0; i < 3; i++) {
var rgb = this.getRandom(256).toString(16);
rgb = rgb.length === 1 ? '0' + rgb : rgb;
color += rgb
}
return color;
}
return `rgb(${this.getRandom(256)},${this.getRandom(256)},${this.getRandom(256)})`
}
}
new Word;
</script>
</body>
</html>
以上是关于原生JS实现简易打字游戏的主要内容，如果未能解决你的问题，请参考以下文章