Native JS implements a simple typing game
Use javascript to make a simple typing game
I wrote a small snake game before and it seems to have a good response. Today I will write a typing game that is lower and simpler than snake
Link to the previous greedy snake game: greedy snake game .
Principles of typing games
Generate the corresponding random number according to the unicode encoding of the letter. The key to converting the random number into a letter is the following two lines of code:
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
Then judge whether the pressed key (keyCode) and the randomly generated letter (zmcode) are equal according to the keyboard press event, you can know whether the letter you input is correct, the color of the wrong letter turns red, and the correct one will be randomly generated.
Next, let's directly Kangkang code:
HTML sum 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>
In fact, it’s not difficult to simply judge whether the code values are equal. Next, let’s take a look at the effect:
1. At the
beginning, a random letter will be generated
. 2. If the
input is correct, the next letter will be replaced, and the correctness and correctness of your input will be displayed in real time. Have your level
3.
When you enter the wrong letter, the color will turn red, and the following will show that you have entered incorrectly and your correct rate has decreased, maybe the level will also decrease!
