/* 浏览器和标签都有默认的样式 清除默认样式 */
*{margin: 0;padding: 0
}
/* 清除加粗标签的默认样式 */
b,strong{font-weight: normal
}
/* 清除倾斜标签的默认样式 */
i,em{font-style: normal
}
/* 清除默认下划线 */
a,u{text-decoration: none
}
/* 清除列表的默认符号样式 */
ul,ol,li{list-style: none
}
/* 万能清除法 解决高度塌陷 */
.clear-fix::after{content: '';display: block;width: 100%;height: 0;clear: both;overflow: hidden;visibility: hidden;
}
/* 兼容写法 */
.clear-fix{zoom: 1 /* 兼容IE */
}
<!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"><link rel="stylesheet" href="./02-reset.css"><title>Document</title>
</head>
<style>body,html {height: 100%;}body {display: flex;justify-content: center;align-items: center;background-color: #000;}.div {width: 1000px;height: 350px;display: flex;flex-wrap: wrap;align-content: space-around;justify-content: center;}.row {width: 100%;height: 100px;display: flex;justify-content: space-around;align-items: center;}.row:nth-child(2) {width: 90%;}.row:nth-child(3) {width: 80%;}.row li {width: 80px;height: 80px;background-color: #fff;font-size: 22px;font-weight: 600;text-align: center;line-height: 80px;border-radius: 15px;}.row li.li1 {background-color: #c91a35;}.row li.li2 {background-color: #e36947;}.row li.li3 {background-color: #e67a36;}.row li.li4 {background-color: #f7d847;}.row li.li5 {background-color: #ede886;}.row li[name="xz"] {transform-style: preserve-3d;/* transform: scale(1.1); */background: none;color: #c91a35;border: 1px solid #e36947;animation: xz .3s infinite;}@keyframes xz {0% {transform: translate(0);}20% {transform: translate(-2px, 2px);}40% {transform: translate(-2px, -2px);}60% {transform: translate(2px, -2px);}80% {transform: translate(-2px, -2px);}100% {transform: translate(0);}}h2 {width: 100px;height: 30px;background-color: pink;position: absolute;top: 50px;left: calc(50% - 50px);text-align: center;line-height: 30px;}p {width: 300px;height: 50px;background-color: pink;position: absolute;top: 100px;left: calc(50% - 150px);text-align: center;line-height: 50px;font-size: 20px;}h3 {width: 200px;height: 30px;background-color: pink;position: absolute;top: 150px;left: calc(50% - 100px);text-align: center;line-height: 30px;}
</style><body><h2></h2><p>分数每累计 5 分，速度会提升</p><h3></h3><div class="div"><ul class="row"><li class="li1">Q</li><li class="li2">W</li><li class="li3">E</li><li class="li4">R</li><li class="li5">T</li><li class="li5">Y</li><li class="li4">U</li><li class="li3">I</li><li class="li2">O</li><li class="li1">P</li></ul><ul class="row"><li class="li1">A</li><li class="li2">S</li><li class="li3">D</li><li class="li4">F</li><li class="li5">G</li><li class="li4">H</li><li class="li3">J</li><li class="li2">K</li><li class="li1">L</li></ul><ul class="row"><li class="li1">Z</li><li class="li2">X</li><li class="li3">C</li><li class="li4">V</li><li class="li3">B</li><li class="li2">N</li><li class="li1">M</li></ul></div>
</body>
<script src="./utils.js"></script>
<script>// 获取所有 li 标签var lis = document.querySelectorAll("li");// 定义一个26个字母var str = "ABCDEFGHIJKLNMOPQISTUVWXYZ"randomkey()// 创建函数 - 随机获得按键function randomkey() {//调用随机数var randomletter = getRandom(0, 26);// 遍历所有 li 标签for (var i = 0; i < lis.length; i++) {// 判断 随机字符 与 哪个 li 内容对等if (str[randomletter] === lis[i].innerText) {// console.log(str[randomletter])for (var j = 0; j < lis.length; j++) {lis[j].setAttribute("name", "")}lis[i].setAttribute("name", "xz")}}}//定义一个计数器 - 分数var num = 0;// 定义一个变量a,接收定时器的执行时间var a = 3000;// 定义一个全局变量的timerId接收定时器 - 便于调用var timerId;// 定义定时器，每三秒换个键timerId = setInterval(randomkey, a)//获取h2标签document.querySelector("h2").innerText = "分数:" + num//获取 h3 标签 document.querySelector("h3").innerText = "现在速度:" + a + "毫秒"// 创建键盘按下事件document.addEventListener("keydown", function () {// 获取事件对象var evt = window.event// 获取键盘输出的字母var keyboard = String.fromCharCode(evt.keyCode)// 获取被选中的 livar li = document.querySelector(".row li[name=xz]")// 判断键盘输入的字母是否与选中li内容相等if (keyboard === li.innerText) {// 如果相等则分数+1//运行一次函数，更换下个键位randomkey();num++// 116 对应键盘上的 F5键}// 判断，如果输入的键位不符合则游戏失败// 116 对应键盘上的 F5键else if (evt.keyCode != 116) {clearInterval(timerId)num = 0a = 3000alert("游戏失败")}// // 如果分数够 30 则游戏通过// if (num === 30) {// clearInterval(timerId)// num = 0// a = 3000// alert("游戏通关")// }// 将分数放在 h2 中document.querySelector("h2").innerText = "分数:" + num})//创建键盘抬起事件document.addEventListener("keyup", function () {//每五次加速if (num % 5 == 0 && num !== 0) {if (a > 1000 ) {a -= 500} else if (a <= 1000) {a -= 100if (a === 200) {a = 200}}}//获取 h3 标签 document.querySelector("h3").innerText = "现在速度:" + a + "毫秒"// 先停止定时器 - 解决定时器会造成 键位 的频繁切换clearInterval(timerId)// 从新定义新的定时器，继续循环timerId = setInterval(randomkey, a)})
</script></html>
/*** 获取随机数的函数* @param {number} a 代表范围的数字* @param {number} b 代表范围的数字* @return {number} 返回范围内的随机整数*/
function getRandom(a, b){var max = a>b?a:bvar min = a>b?b:areturn parseInt(Math.random() * (max - min)) + min
}
/*** 获取16进制的随机颜色值*/
function getColor(){var color = '#'for(var i=0;i<3;i++){var num = getRandom(0, 256)var hex = num.toString(16)hex = hex.length === 1 ? '0' + hex : hex;color += hex}return color
}
/*** 批量设置样式的函数* @param {node} ele 被设置样式的标签对象* @param {object} styleObj 要设置的样式组成的键值对*/
function setStyle(ele, styleObj){for(var key in styleObj){ele.style[key] = styleObj[key]}
}
