H5学习之制作打字游戏

打字游戏制作，HTML5初学者可以做来玩玩，效果图如上面所示。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打字游戏</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        main{
            width: 500px;
            height: 500px;
            background-color:#808080;
            border: 5px solid black;
            margin: 30px auto;
            border-radius: 50%;
        }
        #char{
            font-size: 350px;
            text-align: center;
        }
        .error{
                color: yellow;
            }
            #result{
                text-align: center;
            }
    </style>
</head>
<!--onkeyup监视键盘行为 松开键盘时会触发 =后面是触发的事件-->
<body onkeyup="key(event)">
    <main>
        <div id="char"></div>
    </main>
    <!--footer表示页脚-->
    <footer id="result"></footer>
    <script>
        // console.log(Math.random()*26)

        var char;//设置全局变量 哪里都可以用
        var okCount = 0;
        var errorCount = 0;
        function showChar(){
            // Math.random()可以生成0-1之间的随机数
            var code = Math.random()*26
            // Math.floor可以对括号内的数据向下取整
            var code1 = Math.floor(code)
            // charAt()可以返回指定位置的字符 在这里值code1代表的位置
            char = 'ABCDEFGHIJKLNMOPQRSTUVWXYZ'.charAt(code1)
            document.getElementById('char').innerHTML = char

        }
        showChar()
        // 点击键盘时触发的函数
        function key(event){
            // event.key获取点击键盘时的哪个字母
            // toUpperCase()把小写字母转化为大写
            var key = event.key.toUpperCase()
            var charBox = document.getElementById('char')
            function clearAnimated(){
                charBox.className = ''
            }
            // console.log(key)
            // 如果两个字符key和char相等 那么重新刷新showChar函数
            if(key == char){
                okCount = okCount + 1
                showChar()
                charBox.className = 'animated zoomIn'
                // setTimeout多少秒自后来调用这个函数
                setTimeout(clearAnimated,500)
            }
            else{
                errorCount =errorCount + 1
                charBox.className = 'animated shake error'
                setTimeout(clearAnimated,500)
            }
            function showResult(){
                if(okCount > 0 ){
                    var r = 100.0
                    if(errorCount > 0){
                        r = 100.0*okCount/(okCount + errorCount)
                    }
                    document.getElementById('result').innerHTML = '正确' + okCount + '个，错误' + errorCount + '个，正确率' + r.toFixed(2) + '%'
                }
            }
            showResult()
        }
    </script>
</body>
</html>

这个需要一个animate.css文件，这个可以在网上下载，百度搜一下就会有了。

素材下载：animate.css

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论