打字小游戏
Posted HAI6545
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打字小游戏相关的知识，希望对你有一定的参考价值。
/* 浏览器和标签都有默认的样式 清除默认样式 */
*
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)
// 获取被选中的 li
var 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 = 0
a = 3000
alert("游戏失败")
// // 如果分数够 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 -= 100
if (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:b
var min = a>b?b:a
return 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]
以上是关于打字小游戏的主要内容，如果未能解决你的问题，请参考以下文章