SOURCE

$(function(){
    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 n=0,timer=null,score=0,time="";
    var i=0;
    function math(){
        var num  = Math.floor(Math.random()*25)+1;//生成0~25 的随机数
        return num;
        i++;
        if(i>=100){
            Jie9();
        }
    };
    $("[value=开始]").click(function(){
        n=0;
        clearInterval(timer);
        $(".bianK a").remove();
        score=0;
        $(".score").html(score);
        timer=setInterval(function(){

            n++;
            var m=parseInt(n/60);
            var s=parseInt(n%60);
             if(!$(".a1").is(":animated")){
                 $(".a1").remove();
                 One();
            }else if(!$(".a2").is(":animated")){
                 $(".a2").remove();
                 Two();
            }else if(!$(".a3").is(":animated")){
                 $(".a3").remove();
                 Three();
            }
            time=toDub(m)+":"+toDub(s);
            $(".time").html(time);
        },1000);
        One();
        Two();
        Three();

         $("body").keydown(function(e){
        
        if($(".a1").html()==e.key.toUpperCase()){
            $(".a1").remove();
            One();
            addScore();
        }else if($(".a2").html()==e.key.toUpperCase()){
            $(".a2").remove();
            Two();
            addScore();
        }else if($(".a3").html()==e.key.toUpperCase()){
            $(".a3").remove();
            Three();
            addScore();
        };
    });
    
        
    });

    $("[value=结束]").click(function(){
        Jie();
        $("body").unbind();
    });

    function Jie(){
        clearInterval(timer);
        alert("游戏结束！、您的游戏时间为："+time+"、最终分数为："+score);
     
    };
    function toDub(n){
        return n<10?"0"+n:""+n;
    };

    function One(){
        var s = $(".bianK").add("<a>"+arr[math()]+"</a>").appendTo(".bianK");//添加一个新的a标签 位置在div的里面。
        s.last().animate({"bottom":"-1px"},4500);//设置动画
        s.last().addClass("a1");//设置新添加的标签的class值为“a2”。
    };

    function Two(){
        var s1 = $(".bianK").add("<a>"+arr[math()]+"</a>").appendTo(".bianK");//添加一个新的a标签 位置在div的里面。
        s1.last().animate({"bottom":"-1px"},3000);//设置动画
        s1.last().addClass("a2");//设置新添加的标签的class值为“a2”。
    };

    function Three(){
        var s2 = $(".bianK").add("<a>"+arr[math()]+"</a>").appendTo(".bianK");//添加一个新的a标签 位置在div的里面。
        s2.last().animate({"bottom":"-1px"},3000);//设置动画
        s2.last().addClass("a3");//设置新添加的标签的class值为“a2”。
        
    };

    function addScore(){
        $(".score").html(score);
        score++;
    };

   
   
});

<div class="ban">
    <span>时间</span>
    <span class="span_score">分数</span>
    <p class="time"></p>
    <p class="score"></p>
    <input type="button" value="开始"/>
    <input type="button" value="结束"/>
    <div class="bianK"></div>
</div>

.ban{
    height:400px;
    width: 300px;
    position: absolute;
}
.bianK{
    height: 300px;
    width: 300px;
    border: 1px solid;
    position: relative;
    top:10px;
}
span{
    position: absolute;
    left: 10%;
}
.span_score{
    left:50%;
}
.time{  
    margin :30px 0px 0px 0px; 
    height: 30px;
    width: 100px;
    border: 1px solid;
    float: left;
}

.score{
    margin :30px 0px 0px 30px; 
    height: 30px;
    width:100px;
    border: 1px solid;
    float: left;
}

input{
    margin: 18px 0px 0px 5px;
    
}
a{
    margin: 5px;
    text-align: center;
    height: 50px;
    width: 50px;
    display:inline-block;
    border: 1px solid red;
    color:aqua;
    font-size: 30px;
    position: absolute;
}
.a1{
    left: 0%;
}
.a2{
    left: 20%;
}
.a3{
    left: 40%;
}
.a4{
    left: 60%;
}