原生JS实现一个简单的打字小游戏
- 利用javascript制作一个简单的打字小游戏
-
- 之前写了一个贪吃蛇小游戏好像反响不错 今天我来写一个比贪吃蛇更low更简单的打字小游戏
- 打字小游戏原理
- 接下来咋们直接康康代码：
-
- HTML和CSS
- JS
利用javascript制作一个简单的打字小游戏
之前写了一个贪吃蛇小游戏好像反响不错 今天我来写一个比贪吃蛇更low更简单的打字小游戏
之前贪吃蛇小游戏链接: 贪吃蛇小游戏.
打字小游戏原理
根据字母的unicode编码 生成相应的随机数 在把随机数转换成字母 关键就是下面两行代码:
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
然后根据键盘按下事件 判断按下的键(keyCode)和随机生成字母(zmcode)有没有相等就可以知道你输入的字母有没有正确,错误字母颜色变红,正确就在随机生成一个字母。
接下来咋们直接康康代码：
HTML和CSS
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
}
h1{
text-align: center;
font-size: 400px;
color: orangered;
}
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>
其实也没什么难度就是简单的判断code值有没有相等 接下来我们来看看效果：
1.
开始会随机生成一个字母
2.
输入正确就换下一个字母，并且实时显示你输入对错以及正确率还有你的级别
3.
当你输入错误字母颜色会变红，下面也会显示你输入错误以及你的正确率下降，说不定级别也会下降哟！
