利用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;
            /* 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>

其实也没什么难度就是简单的判断code值有没有相等接下来我们来看看效果：
1.
开始会随机生成一个字母

2.
输入正确就换下一个字母，并且实时显示你输入对错以及正确率还有你的级别

3.
当你输入错误字母颜色会变红，下面也会显示你输入错误以及你的正确率下降，说不定级别也会下降哟！
在这里插入图片描述

原生JS实现一个简单的打字小游戏