用jquery简单实现打字游戏

首先html部分

<input type="button" id="btn1" value="开始游戏"/>
<span class="score">0</span>

其次简单css样式

 .score{
            display: none;
            position: absolute;
            top:0;
            right: 0;
        }
        .letter{
            position: absolute;
            top:0;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: red;
        }

最后jquery实现打字游戏

 $(function(){
        var score1=0;
        $("#btn1").click(function(){
            $(this).hide();
            $(".score").show();
            createSpan();
        });
        function createSpan(){
            var k=Math.floor(Math.random()*26)+65;
            var ch=String.fromCharCode(k);
            var i=parseInt(Math.random()*255);
            var j=parseInt(Math.random()*255);
            var m=parseInt(Math.random()*255);
            var co=i+","+j+","+m;
            var span=$("<span class='letter letter"+k+"'>"+ch+"</span>");
            span.css("left",parseInt(Math.random()*document.documentElement.clientWidth));
            span.css("top",parseInt(Math.random()*document.documentElement.clientHeight));
            span.css("background-color","rgb("+co+")");
            $("body").append(span);
            setTimeout(createSpan,500);
        }
        $(document).keydown(function(e){
            var clientheight=(document.documentElement.clientHeight+200);
            $(".letter"+ e.keyCode).animate({top:clientheight+"px"},1000,function(){
                $(this).remove();
                score1+=10;
                $(".score").html(score1);
            });
        })
    })