| 本文实例为大家分享了JS面向对象实现打字小游戏的具体代码，供大家参考，具体内容如下 Demo介绍通过键盘点击下落小球所显示的数字，小球刷新再任意位置重新掉落。并且，每五个球后掉落速度加快
小球刷新位置 大小，颜色随机。用面向对象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 style="font-size: 40px;">当前分数<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()效果更真实。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
用js实现猜数字小游戏
22个Vue优化技巧(项目实用) |
