<!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>键盘游戏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
/* 背景设置径向渐变 */
background: radial-gradient(circle, #444, #000, #000);
}
.wrap {
margin: auto;
}
.char {
text-align: center;
font-size: 400px;
color: lightgreen;
/* 设置文字阴影: 水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 0 0 50px #666;
}
.res {
font-size: 20px;
color: #888;
}
</style>
</head>
<body>
<div class="wrap">
<div class="char">A</div>
<div class="res">请在按键上按下屏幕上显示的字母</div>
</div>
<script>
let sum = 0; // 初始化按下的次数
let csum = 0; // 初始化按下正确的次数
let msum = 0; // 初始化按下错误的次数
let crate = 0; // 初始化正确率
let char = document.querySelector('.char');
// 生成随机大写字母
function randomStr() {
// [0,26)
let code = 65 + Math.floor(Math.random() * 26);
let str = String.fromCharCode(code);
document.querySelector('.char').innerHTML = str;
}
// 初次调用
randomStr();
// 按键按下时判断,keypress事件只响应字符类按键
window.onkeypress = function (e) {
sum++;
let chr = char.innerHTML;
let value = e.key.toUpperCase();
console.log(value);
if(value == chr){
csum++;
// 生成随机大写字母
randomStr();
}else{
msum++;
char.style.color = 'red';
setTimeout(function(){
char.style.color = 'lightgreen';
},200)
}
crate = (csum / sum).toFixed(2)*100;
document.querySelector('.res').innerHTML = `正确${csum}个,错误${msum}个,正确率为${crate}%`
}
</script>
</body>
</html>
键盘小游戏
最新推荐文章于 2024-09-14 18:52:56 发布