html制作打字游戏,js实现打字小游戏

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

html

A

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

}

}

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