打字小游戏

Posted a155-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打字小游戏相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1{
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="clock">
        倒计时：<span>10</span>秒
    </div>
        <h1></h1>
        <script type="text/javascript">
            var h1=document.querySelector("h1")
            var html=document.querySelector("html")
            var charcode;
            var num=0;
            var time=10;
            function rand(){
                var random = parseInt(Math.random()*26)
             charcode=65+random;
             //数字转换成字符
            var str = String.fromCharCode(charcode)
            h1.innerHTML=str;
            }
            rand()
            //键盘按键事件
            html.onkeydown=function(e){
                if(charcode==e.keyCode)
                 {num++;
                     rand()
                     
                 h1.style.color="#FFFF00"
                 //文本阴影
                 h1.style.textShadow="blue"
                 }
                 else{
                     rand()
                     h1.style.color="red"
                     
                 }
         
            }
            //计时器
            var clock= setInterval(function(){
                var span=document.querySelector("span")
                time--;
                span.innerHTML=time
                if(time==0)
                {
                    //删除计时器
                    clearInterval(clock)
                alert("你每分钟能打"+num*6+"字！！！")
                }
            },1000)
            
        </script>
    </body>
</html>

 

以上是关于打字小游戏的主要内容，如果未能解决你的问题，请参考以下文章

json 打字稿片段

typescript 打字稿+角度1的启动片段

Java JUI打字小游戏项目

前端搭建打字通游戏（内附源码）

html + css + js 实现一个打字小游戏（建议收藏）

html + css + js 实现一个打字小游戏（建议收藏）