JavaScript打字小游戏

　　上半年自学了JavaScript，然后就做了个打字小游戏玩玩。

　　功能模块：                                        　　程序设计：

　　　1.可选择游戏时间，显示倒计时　　　　　　　1.定义全局变量

　　　2.可选择英文字母出现个数　　　　　　　　　2.控制游戏时间函数

　　　3.统计得分　　　　　　　　　　　　　　　　3.动画效果

　　　4.菜单选项　　　　　　　　　　　　　　　　4.设定字母图片出现的时间

　　　　　　　　　　　　　　　　　　　　　　　　5.判断函数

　　　　　　　　　　　　　　　　　　　　　　　　6.游戏菜单

　　　　　　　　　　　　　　　　　　　　　　　　7.游戏时间选项

　　　　　　　　　　　　　　　　　　　　　　　　8.显示游戏时间

　　　　　　　　　　　　　　　　　　　　　　　　9.游戏难度选项

　　　　　　　　　　　　　　　　　　　　　　　　10.游戏得分

　　

　　先上效果图：(PS：美工是硬伤)

　　

　　

　　主要代码设计：

  //-------全局变量-------
    var data={
    "10":["<img src='images/A.gif'/>"],"11":["<img src='images/B.gif'/>"],"12":["<img src='images/C.gif'/>"],"13":["<img src='images/D.gif'/>"],
    "14":["<img src='images/E.gif'/>"],"15":["<img src='images/F.gif'/>"],"16":["<img src='images/G.gif'/>"],"17":["<img src='images/H.gif'/>"],
    "18":["<img src='images/I.gif'/>"],"19":["<img src='images/J.gif'/>"],"20":["<img src='images/K.gif'/>"],"21":["<img src='images/L.gif'/>"],
    "22":["<img src='images/M.gif'/>"],"23":["<img src='images/N.gif'/>"],"24":["<img src='images/O.gif'/>"],"25":["<img src='images/P.gif'/>"],
    "26":["<img src='images/Q.gif'/>"],"27":["<img src='images/R.gif'/>"],"28":["<img src='images/S.gif'/>"],"29":["<img src='images/T.gif'/>"],
    "30":["<img src='images/U.gif'/>"],"31":["<img src='images/V.gif'/>"],"32":["<img src='images/W.gif'/>"],"33":["<img src='images/X.gif'/>"],
    "34":["<img src='images/Y.gif'/>"],"35":["<img src='images/Z.gif'/>"]
    };
    var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储
    var now=new Date();
    var Image; //随机出现图片
    var Divs;//随机出现层
    var count=0;//积分系统
    var key;//键盘的值
    var amounts=1;//出现字母图片的个数
    var gametime=30;//控制游戏的时间
    var gametimes;//时间为0
    var gametimess=30;//显示时钟变量
    var time1;//setInterval变量
    var time2=5000;//设定setInterval的时间
    var time3;
    var tab;//用来记录，传递tabindex焦点位置的值
    
    //--------这样写为了兼容FF浏览器-------
    var plug = {
        addEvent:function(o,e,f){
        if(o.addEventListener){
            o.addEventListener(e,f,false);
        }
        else if(o.attachEvent){
            o.attachEvent("on"+e,f);
        }
    }
    }
    plug.addEvent(window,"load",function(){Focus()});//兼容FF浏览器
    
    
    //------1.控制游戏时间函数--------
    function Gametime(){ 
        for(gametimes=gametime;gametimes>=0;gametimes--) {
        window.setTimeout('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000);
        } 
    }
    function Show(gametimes){
        if(gametimes==0){
        clearInterval(time1);//停止游戏
        alert("游戏结束!你的得分为:"+count);
        $("#main").empty();//清除main中的div
        $(".gameapply").empty();
        $("#select1").empty();
        $("#select2").empty();
        count=0;//得分清空为0
        Score();//让分数框显示为0
        Focus();//重新生成菜单选项
       }
    }
    
    
    //---------2.动画效果---------
         function fun(){
            datas.length=0;
            for(var i=0;i<amounts;i++){
             Image=parseInt(Math.random() * 26)+10;//随机出现字母图片
             datas.push(Image);//图片以数组中偶数存储,从零开始
             Divs=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置
             datas.push(Divs);//样式以数组中奇数存储
             var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间
             if(time<5000){
             var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
            $("#main").append($divs);
           //-----JQ动画函数----
           $(".divPop"+Divs).animate(
           {"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
          }
         }
        }
        
     
      //--------3.设定字母图片出现的时间------  
      function sets(){
        time1 = setInterval(fun,time2);
       }
    
     
      //---------4.绑定键盘---------
     //---------兼容FF浏览器---------
         document.onkeydown = function keydown(e){
            e = e||window.event;
            var key = e.charCode||e.keyCode
            select(key)
            }
    
     
     //---------5.判断函数---------
        function select(key){
         if(key==13){
            switch(tab){
                    case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏
                    case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏
                    case 2:alert("可以在左侧设置游戏选项");break;
                    case 3:window.opener=null;window.open('','_self');window.close();break;//退出游戏
                    case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戏
           }
         }
         for(var j=0;j<datas.length;j=j+2){//为了让data1里面样式和图片的值不重复（即奇数跟偶数的不可能重复，m的值或者k的值要相差一定的值）
              if(key==datas[j]+55){     
                $(".divPop"+datas[j+1]).hide();//key值相等,隐藏该层
                delete datas[j]; //为了避免有重复的字母，所以数组里面每遍历到一个(key==datas[j]+55)都要删除这个值
                count+=10;
                Score();
                break;
              }
           }
        }
    //---------6.游戏菜单-------   
    function Focus(){
          //---------初始化游戏界面--------
          var $selects=$("<div id='select'><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"游戏开始\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"游戏选项\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"退出游戏\"/></td></tr></table></div>");
          $(".gameapply").append($selects); 
              for(var i=30;i<=300;i=i+30){
              $("#select1").append('<option>' + i+ '</option>')
            }
            for(var j=1;j<=9;j++){
              $("#select2").append('<option>' + j+ '</option>')
            }
        //---------开始时取得第一个input的焦点--------
           $(".inputs:first").trigger("focus").addClass("input1");
           tab=1;//因为第一个焦点是没法输入Enter，所以要调用键盘输入事件
           var tabIndex=1;
       
       //----------获取tr行数，input个数--------
           $("#tables").find("tr").each(function(r) {
                    $(this).find("input").attr("tabindex", r+1);//tabindex为焦点位置的值，赋初值为1，遍历为1-2-3-4
             });
       //---------响应input的键盘上下操作
           $("#tables .inputs").bind("keydown", function(e){
                 tabIndex = parseInt($(this).attr("tabindex"));//取得当前tabindex焦点的值
                switch(e.which){
                    case 38://向上
                    tabIndex-=1;
                    tab=tabIndex;
                    break;
                    case 40://向下
                    tabIndex+=1;
                    tab=tabIndex;
                    break;
                    default:
                    return;
                }
                //--------判断tabIndex焦点的值
                if (tabIndex > 0 && tabIndex < 4) {
                $(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//当前input获取焦点
                    for(var i=0;i<=4;i++)
                    {
                          if(i==tabIndex){
                            break;
                          }
                          else{
                            $(this).removeClass("input1");
                          }
                    }
                    keydown();
                    return false;
                }
                return true;
             });
        }
        
        //--------7.游戏时间选项---------
        function Gametimeselect(){
                var option=document.getElementById("select1");
                for(var i=0;i<option.length;++i){  
                    if(option[i].selected)  {  
                            gametime=option.options[i].text;
                            gametimess=gametime;
                    }
              }
       }
       
       //-----8.显示游戏时间-------
       function countdown(){
           var timeshows=document.getElementById("timeshow");
           if(timeshows){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载
              if(gametimess<0){
                clearInterval(time3);//停止计时器
              }
              else{
                timeshows.value=gametimess;
                gametimess--;
              }
           }
        }
       
       
       //--------9.游戏难度选项---------
       function Gameselectamount(){
                var option=document.getElementById("select2");
                for(var i=0;i<option.length;++i){  
                    if(option[i].selected)  {  
                            amounts=option.options[i].text;
                    }  
              }
       }
      
      
      //---------10.游戏得分-----------
        function Score(){
                var sum=document.getElementById("sum");
                sum.value=count;
                if(count==0){ //初始化文本框分数为0
                    sum.value=count;
                }
        }    

　　总结：由于时间隔得比较久，代码方面没有优化，有个地方做得不是很好，就是字母出现的时间间隔过长，有兴趣的话可以尝试修复。代码仅供参考

　　源码下载

作者： ForEvErNoME
出处： http://www.cnblogs.com/ForEvErNoME/
欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能 推荐 或 关注