原生JS实现简易打字游戏
这是一篇纯代码的文章哦,希望你能看懂代码表示的是啥,嘿嘿!
<!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>打字小游戏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>0</div> <!-- 开始按钮 --> <button>开始</button> <!-- 存放字母的盒子 --> <div></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>
【打字游戏】这就结束了哦,不知道小伙伴看明白了没呢!