原生JS面向对象如何实现打字小游戏，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
通过键盘点击下落小球所显示的数字，小球刷新再任意位置重新掉落。并且，每五个球后掉落速度加快
小球刷新位置 大小，颜色随机。用面向对象class方法实现
该demo源码可直接使用。赋值到html文件 然后打开就可以使用，可用作学校课设使用
<!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>Document</title>
</head>
<style>
.title{
width: 1200px;
height: 80px;
margin:400px auto;
color: darkblue;
text-shadow: 3px 3px 3px black;
font-size: 80px;
font-weight: bolder;
text-align: center;
font-family: "楷体";
}
.name{
width: 1000px;
height: 40px;
margin:0 auto;
color: skyblue;
text-shadow: 3px 3px 3px black;
font-size: 40px;
font-weight: bolder;
text-align: center;
font-family: "楷体";
}
</style>
<body>
<div >当前分数<div class="score" >0</div></div>
<div class="title">原生js小Demo：打字练习游戏</div>
<div class="name">作者：lz</div>
</body>
<script>
class TypingGame {
constructor() {
this.oSpan
this.speed = 2;
this.timer = "";
this.word;
this.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson","green"]//颜色集合
this.createWord(this.speed);
document.onkeydown = e => {
var e = e || window.event;
var keycode = e.keyCode || e.which;
// TypingGame.oSpan=this.$$("span");
var keyword = String.fromCharCode(keycode).
toLowerCase()
if (this.word === keyword) {
// 打掉一个 - 计分
// 获取原来的分
var score = this.$('.score', false).innerText - 0
// 让分数+1
score++
// 加1以后的分数放进div中
document.querySelector('.score').innerText = score
if (score === 5) {
this.speed += 2//每过五个字母，下落速度加快
}
this.oSpan.parentElement.removeChild(this.oSpan)
this.createWord(this.speed)
}
}
}
createWord(speed) {
let wh=this.getRandom(30,80);//随机大小
this.oSpan = this.creEle('span');
// console.log(this.oSpan)
this.setStyle(this.oSpan, {
width: wh+"px",
height: wh+"px",
position: 'absolute',
top: 0,
left: this.getRandom(document.documentElement.clientWidth - 30) + "px",
borderRadius: "50%",
lineHeight: '30px',
textAlign: 'center',
backgroundColor: this.colors[this.getRandom(18)],
color: "white",
fontWeight: "bold",
textAlign:"center",
lineHeight:wh+"px"
})
document.body.appendChild(this.oSpan)
// 随机字符：97~122
var randomNum = this.getRandom(97, 123)
this.word = String.fromCharCode(randomNum);
this.oSpan.innerText = this.word
// 这个标签要慢慢向下运动
this.elementsMove(this.speed);
}
elementsMove() {
// console.log(this.oSpan)
// 定时器
clearInterval(this.timer)
this.timer = setInterval(() => {
// 获取高度
var t = this.oSpan.offsetTop;
// 加大高度
t += this.speed;
console.log(this.speed)
// 如果这个标签到了浏览器的最低端，GAME OVER
if (t >= document.documentElement.clientHeight - 30) {
clearInterval(this.timer)
if (confirm("GAME OVER, 是否重玩?")) {
location.reload();//刷新重玩
}
}
// 加大后设置给标签的top
this.oSpan.style.top = t + "px"
}, 50)
}
setStyle(ele, styleObj) {
for (var attr in styleObj) {
ele.style[attr] = styleObj[attr]
}
}
$(tag, all = false) {
return all ? document.querySelectorAll(tag) : document.querySelector(tag);
}
creEle(tag) {
return document.createElement(tag)
}
getRandom(a, b = 0) {
var max = Math.max(a, b);
var min = Math.min(a, b)
return Math.floor(Math.random() * (max - min)) + min
}
}
new TypingGame;
</script>
</html>Demo截图
还可以改进的地方
可以自行改写
可以增加打错提示，且可以随机刷新的高度。可以进行一些速度优化。把动画改成requestAnimationFrame()效果更真实。
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
