js实现打字小游戏

今日闲来无事，想试一试模拟打字游戏，下面是效果图，会记录判断打字，如果在外围添加setInterval函数，可以实现测试打字速度的功能。

html

<div class="wrapper">
<div id="text">A</div>
<input type="text" id="ipt">
</div>

css

body,
html {
width: 100%;
height: 100%;
}

.wrapper {
width: 400px;
margin: 20px auto;
}

div {
font-size: 100px;
font-weight: 900;
text-align: center;

}
input{
width: 400px;
margin: 20px auto;
}

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var text = document.getElementById('text')
var ipt = document.getElementById('ipt')
var res;
var newRes;
var random = Math.round(Math.random() * 25);
var count = 0
window.onkeyup = function (e) {
var random = Math.round(Math.random() * 25);
newRes = str[random]
res = text.innerHTML
text.innerHTML = newRes
if(e.keyCode == res.charCodeAt(0)){
count++;
ipt.value = '';
}else{
alert('game over' + '   ' +'您的得分是'+ ':' + count)
count = 0;
ipt.value = '';
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• javascript实现简单打字游戏
• 原生js实现打字动画游戏
• javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
• JavaScript打字小游戏代码
• javascript 打字游戏实现代码
• JS实现打字游戏