Native JS implementa um jogo de digitação simples
Use javascript para fazer um jogo de digitação simples
Eu escrevi um pequeno jogo de cobra antes e parece ter uma boa resposta. Hoje vou escrever um jogo de digitação que é inferior e mais simples do que a cobra
Link para o jogo da cobra gananciosa anterior: jogo da cobra gananciosa .
Princípios de jogos de digitação
Gere o número aleatório correspondente de acordo com a codificação Unicode da letra. A chave para converter o número aleatório em uma letra são as duas linhas de código a seguir:
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
Em seguida, julgue se a tecla pressionada (keyCode) e a letra gerada aleatoriamente (zmcode) são iguais de acordo com o evento de pressionamento do teclado, você pode saber se a letra que você inseriu está correta, a cor da letra errada fica vermelha e a correta será gerada aleatoriamente.
A seguir, vamos diretamente ao código Kangkang:
HTML soma CSS
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
}
h1{
text-align: center;
font-size: 400px;
color: orangered;
/* color: royalblue; */
}
h2{
text-align: center;
font-size: 40px;
color: #FEC007;
}
p{
text-align: center;
color: #673AB7;
font-size: 40px;
}
u{
color: chartreuse;
}
h3{
text-align: center;
font-size: 50px;
color: #FE5722;
}
i{
color: gold;
}
</style>
<body>
<h1></h1>
<h2>按下开始</h2>
<p>正确率：<u></u></p>
<h3>你的级别：<i>操作一下？</i></h3>
</body>
JS
<script>
var h1 = document.querySelector('h1');
var h2 = document.querySelector('h2');
var u = document.querySelector('u');
var i = document.querySelector('i')
var zmcode;
function showzm(){
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
h1.innerHTML = zm;
}
//页面显示一个随机字母
showzm();
//正确的次数
var zc = 0;
//错误的次数
var cw = 0;
document.onkeydown = function(e){
//获取事件对象
e = e||window.event;
//让字母随机颜色
h1.style.color = '#'+ Math.random().toString(16).substr(-6);
//测试用
console.log(e.keyCode)
console.log(zmcode)
//如果按下的键code码和随机生成的code码一样就显示正确，并显示下一个字母
if(e.keyCode == zmcode){
zc ++;
h2.innerText = 'true';
showzm();
u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'
}else{
cw ++;
h2.innerText = 'false';
h1.style.color = 'red';
u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'
}
//等级判断:正确率等于正确的次数除以(正确的次数加错误的次数)
if((zc/(zc+cw))*100 > 99){
i.innerHTML = '无敌'
}
else if((zc/(zc+cw))*100 > 95){
i.innerHTML = '大神'
}
else if((zc/(zc+cw))*100 > 80){
i.innerHTML = '就这？'
}
else if((zc/(zc+cw))*100 > 60){
i.innerHTML = '也就一般。'
}
else{
i.innerHTML = '太菜了还得多练练'
}
}
</script>
Na verdade, não é difícil simplesmente julgar se os valores do código são iguais. A seguir, vamos dar uma olhada no efeito:
1. No
início, uma letra aleatória será gerada
. 2. Se a
entrada estiver correta, a próxima letra será substituída e a exatidão e exatidão de sua entrada serão exibidas em tempo real. Tenha o seu nível
3.
Quando você inserir a letra errada, a cor ficará vermelha, o seguinte também mostrará que você inseriu incorretamente e sua taxa correta diminuiu, talvez o nível também diminua!
