<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<html>
<head>
<meta charset="utf-8">
<title>打字游戏</title>
<!--引入animate.css动画库-->
<link rel="stylesheet" href="animate.css">
<style>
body {
margin: 0;
/*开启弹性布局，并让弹性布局中的子元素 水平居中对齐，垂直居中对齐*/
display: flex;
justify-content: center;
align-items: center;
/*文字居中*/
text-align: center;
/*设置背景颜色的经像渐变*/
background: radial-gradient(circle, #444, #111, #000);
}
#charContent {
font-size: 400px;
color: lightgreen;
/*设置文字阴影*/
/*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
/*位置可以为负值*/
text-shadow: 0 0 50px #666;
}
#result {
font-size: 20px;
color: #888;
}
/*找到id为char及类名为error的div元素*/
#charContent.error {
color: red;
}
</style>
</head>
<body>
<mian>
<div id="charContent">A</div>
<div id="result">请在按键上按下屏幕上显示的字母</div>
</mian>
</body>
</回头ml>
<script src="../../public.js"></script>
<script>
//按键正确： "animated zoomIn";
//按键错误：
"animated shake error";
//页面加载 char中随机显示 A--Z之间的任意一个字符 65-- - 90 在页面中显示A--Z之间的任意一个字符 初始化页面字母内容 页面加载添加一个随机的大写字母
var playGame = {
charContent: document.getElementById("charContent"),
result: document.getElementById("result"),
init: function () {
var rand = getRand(65, 90);
var ch = String.fromCharCode(rand);
this.charContent.className = "animated zoomIn";
this.charContent.innerHTML = ch;
},
//游戏开始
start: function () {
var _this = this;
var sucCount = 0;
//正确个数
var failedCount = 0;
//错误个数
document.onkeydown = function (eve) {
var e = eve || event //获取对应键码值
var code = e.keyCode || e.which || e.charCode;
//通过键码值得到对应的字符 codeChar
var codeChar = String.fromCharCode(code);
//获取当前charContent的字符内容 textChar
var textChar = _this.charContent.innerHTML;
//animate.css在切换同一个动画， css没法执行 需要行删除再添加 _this.charContent.className = "";
//判断codeChar与textChar是否相等
if (codeChar === textChar) {
//如果相等说明按下的字符正解 切换下一个随机字母
setTimeout(function () {
//有正确的动画
_this.init();
})
sucCount++;
} else {
//不相等说明按下错误 添加错误动画 setTimeout
(function () {
_this.charContent.className = "animated shake error";
})
failedCount++;
}
//统计正确率 并将正确率显示在result中
_this.result.innerHTML = "正确：" + sucCount + "个，错误：" +
failedCount + "个，正确率：" + parseInt((sucCount / (sucCount + failedCount)) * 100) +
"%";
}
}
}
playGame.init();
playGame.start();
</script>
</script>
</body>
</html>
