JavaScript_打字游戏

文章目录

效果图：

在这里插入图片描述

需求分析：

在char这个div里面显示要输入的字母，大写
在result这个div里面时时显示正确率，比如98%
给文档绑定按键事件
如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母
如果输入的内容和char里面不一致，显示错误动画：animated shake error
不管是正确还是错误都时时更新result里面的正确率

源代码：

HTML部分

<mian>
    <div id="char">A</div>
    <div id="result">请在按键上按下屏幕上显示的字母</div>
</mian>

css部分

为了实现一些特效，先创建一个animate.css文件，在封装一些动画效果放里面

/*animate.css*/
.animated {
    
    
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
    
    
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
    
    
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    
    
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
    
    
  from {
    
    
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    
    
    opacity: 1;
  }
}

@keyframes zoomIn {
    
    
  from {
    
    
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    
    
    opacity: 1;
  }
}

.zoomIn {
    
    
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
            .animated {
    
    
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes shake {
    
    
  from, to {
    
    
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    
    
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    
    
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
    
    
  from, to {
    
    
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    
    
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    
    
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
    
    
  -webkit-animation-name: shake;
  animation-name: shake;
}

css主体代码，无动画特效版

<style>
        body {
     
     
            margin: 0;
            /*开启弹性布局，并让弹性布局中的子元素
                水平居中对齐，垂直居中对齐*/
            display: flex;
            justify-content: center;
            align-items: center;
            /*文字居中*/
            text-align: center;
            /*设置背景颜色的经像渐变*/
            background: radial-gradient(circle, #444, #111, #000);
        }

        #char {
     
     
            font-size: 400px;
            color: lightgreen;
            /*设置文字阴影*/
            /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
            /*位置可以为负值*/
            text-shadow: 0 0 50px #666;
        }

        #result {
     
     
            font-size: 20px;
            color: #888;
        }

        /*找到id为char及类名为error的div元素*/
        #char.error {
     
     
            color: red;
        }
</style>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>
// 定义一个函数:rand
// 参数:最小整数，最大整数
// 返回:两个整数之间的一个随机整数
function rand(min, max) {
     
     
    return parseInt(Math.random() * (max - min + 1)) + min;
}    
</script>

js主体部分，需要用到封装的函数，调用即可

<script>
    // 获取相关元素
    var charDiv = document.getElementById('char');
    var resultDiv = document.getElementById('result');

    // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用
    var code, tirme;

    var rightNum = 0;//正确次数
    var wrongNum = 0;//错误次数
    // 1 在char这个div里面显示要输入的字母，大写
    showChar();
    // 3 给文档绑定按键事件
    document.onkeyup = function (e) {
     
     
        // 事件对象
        e = window.event || e;
        // 获取按键编码
        var keyCode = e.keyCode || e.which;
        // 4 如果输入的内容和char里面一致
        if (keyCode == code) {
     
     
            // 显示正确动画：animated zoomIn
            charDiv.className = "animated zoomIn";
            rightNum++;
            showChar()
        }
        // 5 如果输入的内容和char里面不一致
        else {
     
     
            // 显示错误动画：animated shake error
            charDiv.className = "animated shake error";
            wrongNum++
        }
        // 为了下一次有动画，在本次动画完后要移除类名
        setTimeout(function () {
     
     
            charDiv.className = "";
        }, 500)
        // 6 不管是正确还是错误都时时更新result里面的正确率
        // 正确率 = 正确次/总次数
        resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

    }
    // 函数功能:在char这个div里面随机显示要输入的字母:大写
    function showChar() {
     
     
            // 先随机出一个字母编码
            code = rand(65, 90);
            // 变成一个字母
            var char = String.fromCharCode(code);
            // 显示在char这个div里面
            charDiv.innerHTML = char;
    }
</script>

总代码

<html>

<head>
    <meta charset="utf-8">
    <title>打字游戏</title>
    <!--引入animate.css动画库-->
    <link rel="stylesheet" href="animate.css">
    <style>
        body {
     
     
            margin: 0;
            /*开启弹性布局，并让弹性布局中的子元素
                水平居中对齐，垂直居中对齐*/
            display: flex;
            justify-content: center;
            align-items: center;
            /*文字居中*/
            text-align: center;
            /*设置背景颜色的经像渐变*/
            background: radial-gradient(circle, #444, #111, #000);
        }

        #char {
     
     
            font-size: 400px;
            color: lightgreen;
            /*设置文字阴影*/
            /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
            /*位置可以为负值*/
            text-shadow: 0 0 50px #666;
        }

        #result {
     
     
            font-size: 20px;
            color: #888;
        }

        /*找到id为char及类名为error的div元素*/
        #char.error {
     
     
            color: red;
        }
    </style>
</head>

<body>
    <mian>
        <div id="char">A</div>
        <div id="result">请在按键上按下屏幕上显示的字母</div>
    </mian>
</body>

</html>
<script>
    // 定义一个函数:rand
    // 参数:最小整数，最大整数
    // 返回:两个整数之间的一个随机整数
    function rand(min, max) {
     
     
        return parseInt(Math.random() * (max - min + 1)) + min;
    }
</script>
<script>
    // 获取相关元素
    var charDiv = document.getElementById('char');
    var resultDiv = document.getElementById('result');

    // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用
    var code, tirme;

    var rightNum = 0;//正确次数
    var wrongNum = 0;//错误次数
    // 1 在char这个div里面显示要输入的字母，大写
    showChar();
    // 3 给文档绑定按键事件
    document.onkeyup = function (e) {
     
     
        // 事件对象
        e = window.event || e;
        // 获取按键编码
        var keyCode = e.keyCode || e.which;
        // 4 如果输入的内容和char里面一致
        if (keyCode == code) {
     
     
            // 显示正确动画：animated zoomIn
            charDiv.className = "animated zoomIn";
            rightNum++;
            showChar()
        }
        // 5 如果输入的内容和char里面不一致
        else {
     
     
            // 显示错误动画：animated shake error
            charDiv.className = "animated shake error";
            wrongNum++
        }
        // 为了下一次有动画，在本次动画完后要移除类名
        setTimeout(function () {
     
     
            charDiv.className = "";
        }, 500)
        // 6 不管是正确还是错误都时时更新result里面的正确率
        // 正确率 = 正确次/总次数
        resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

    }
    // 函数功能:在char这个div里面随机显示要输入的字母:大写
    function showChar() {
     
     
            // 先随机出一个字母编码
            code = rand(65, 90);
            // 变成一个字母
            var char = String.fromCharCode(code);
            // 显示在char这个div里面
            charDiv.innerHTML = char;
    }
</script>

JavaScript_打字游戏

文章目录

效果图：

需求分析：

源代码：

猜你喜欢