这篇“如何用JavaScript模拟实现打字小游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用JavaScript模拟实现打字小游戏”文章吧。
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模拟实现打字小游戏”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。