小霸王打字机
打字小游戏
依稀记得童年时期，站在电视机傍边，和自己的小伙伴玩小霸王学习机的情景。时间如白驹过隙，现在小伙伴的孩子都会打酱油了，而自己为了生活和梦想依旧在奋斗。怀念青春，就写了这样的一个小游戏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小霸王学习机</title>
<style>
body{
margin:0;/*开启弹性布局，让弹性布局的子元素水平居中对齐，垂直居中对齐*/
padding:0;
display:flex;
/* 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 */
justify-content:center;
align-items:center;
/*文字居中*/
text-align:center;
/*设置背景颜色的经像渐变*/
background:radial-gradient(circle,#FFF,#000,#000);
}
#char{
font-size: 400px;
color: lightgreen;
/*设置文字阴影*/
/*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
/*位置可以为负值*/
text-shadow: 0 0 50px #666;
}
#result{
font-size: 20px;
color: #888;
}
/*找到id为char及类名为error的div元素*/
#char.error{
color:red;
}
</style>
</head>
<body>
<div>
<div id="char">A</div>
<div id="result">请在按键上按下屏幕上显示的字母</div>
</div>
<script>
//来保存65-90之间的任意一个随机整数
var code;
//正确的次数
var okCount = 0;
//错误的次数
var errorCount = 0;
//获取显示字符的div
var charBox = document.getElementById('char');
//获取显示结果的div
var result = document.getElementById('result');
//获取A-Z之间的任意一个字符
function show(){
//获取[0,1)
var rand = Math.random();
code = rand*26;
//floor向下取整
code = Math.floor(code);//0到25的整数
code = code+65;//获取65-90自己拿的任意整数
console.log(code);
//将unicode的10进制转化为对应的字符
var char = String.fromCharCode(code);
console.log(char);
//把字符显示在界面上
charBox.innerHTML = char;
}
show();//调用方法
//键盘按下的事件
window.onkeydown = function(ev){
//获取键盘对应的10进制编码
var key = ev.keyCode;
//判断按下的和随机获取的字符相等
if(key == code){
//正确，计数加1
okCount++;
//显示下个字符
show();
//通过计js给div添加类名，添加按键正确的动画
charBox.classNmae = "animated zoomIn";
}else{
//按键错误，错误计数加1
errorCount++;
//添加按键错误的动画
charBox.className = "error";
}
showResult();
//500毫秒后清除动画
setTimeout(clearAnimated,500);
}
function clearAnimated(){
//负责清除动画
charBox.className="";
}
//展示计算的结果
function showResult(){
var rate = 100*okCount/(okCount+errorCount);
//显示正确个数，错误个数和正确率
result.innerHTML= '正确' + okCount+'个' + '错误'+errorCount+'个'+'正确率'+rate.toFixed(2)+'%';//toFixed(2)保留两位小数
}
</script>
</body>
</html>总结
就是简单的实现了按下键盘和屏幕上显示的字母一样时，下面的计数实时显示出正确(错误)个数和计算出正确率。然后显示在界面上。主要是键盘按下事件获取按下的字符和随机显示的字符是否相等。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年11月07日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录