微客导航 » 文章资讯 » js实现打字小游戏

js实现打字小游戏

2023-08-04 11:12:07 300

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

html

css

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

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

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

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

varstr='ABCDEFGHIJKLMNOPQRSTUVWXYZ'
vartext=document.getElementById('text')
vaript=document.getElementById('ipt')
varres;
varnewRes;
varrandom=Math.round(Math.random()*25);
varcount=0
window.onkeyup=function(e){
varrandom=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('gameover'+''+'您的得分是'+':'+count)
count=0;
ipt.value='';
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现打字小游戏

热门推荐

随机推荐