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 = '';
 }

 }

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