打字游戏简约版

首先将要产生的按键存到数组当中,随机产生角标,获得按键,创建标签,添加到屏幕当中,然后获得按键事件,与每一个值进行比较,如果有一样的,则删除,如果没有,则随机添加几个字母,还有经过指定时间,添加合适数量的字母,直到全部删除完,结束。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>打字游戏</title>

<style type="text/css">

    #div1{

        width:100%;

        background:green;

    }

    #div1 h2{

        float: left;m

        color:red;

        font-size: 50px;

        margin-left:40px;

    }

</style>

<script type="text/javascript">

    window.onload=function(){

        

        var oDiv=document.getElementById('div1');//获得div元素

        var arr=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];//可以添加的元素

        var h2s=oDiv.getElementsByTagName('h2');//得到div中的h2标签

        var timer;//定义定时器变量

       

        function tianjia(){//添加元素的方法

            if(h2s.length!=0){//如果存在h2标签,说明还没有打完,再添加

            var suiji=Math.floor(Math.random()*26);//随机产生数组角标

            var zimu=arr[suiji];//获得对应角标的字母

            var h2=document.createElement('h2');//创建h2标签

            h2.innerHTML=zimu;//将内容添加到h2标签中

            oDiv.appendChild(h2);//将h2标签添加到div中

            }else{

                alert('你赢了');//如果没有h2标签了,弹出你赢了

            }

        }

        for(var i=0;i<5;i++){//首先先添加5的元素,在div当中有一个h2标签,才能添加

            tianjia();

        }

        var obtn1=document.getElementById('1');//得到1按钮

        obtn1.onclick=function(){//当点击1按钮时

            clearInterval(timer);//关闭所有其他定时器

            timer=setInterval(tianjia,1000);//每秒执行一次添加函数

        }

        var obtn2=document.getElementById('2');//同理

        obtn2.onclick=function(){

            clearInterval(timer);

            timer=setInterval(tianjia,500);

        }

        var obtn3=document.getElementById('3');

        obtn3.onclick=function(){

            clearInterval(timer);

            timer=setInterval(tianjia,330);

        }

         

        window.onkeydown=function(e){//键盘按键事件

            var result;//定义全局变量

            var ev=e||window.event;//获得兼容性事件对象

            var jian=String.fromCharCode(ev.keyCode);//将按键的Code值转化为准确按键

            

            for(var j=0;j<h2s.length;j++){//如果有你按下的键,则删除

                if(jian==h2s[j].innerHTML){

                    result=oDiv.removeChild(h2s[j]);

                }

            }

            if(!result){//如果你按的没有这个元素,则添加3个字母

               for(var n=0;n<3;n++){

                    tianjia();

               }

                

            }

        }

    }

</script>

</head>

<body>

每秒增加数量:<input id='1' type="button" value="1"/>

<input id="2" type="button" value="2"/>

<input id="3" type="button" value="3"/>

<div id="div1">

    <h2 id="suiji">Q</h2>

</div>

    

</body>

</html>

 

你可能感兴趣的:(游戏)