js实现打字小游戏

这篇文章主要为大家详细介绍了js实现打字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

js实现打字小游戏

html

<div> <div>A</div> <input type="text"> </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 = ''; } }

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ce752d7e0cca8e24bcde997437c29c3c.html