jQuery 写的简单打字游戏

浏览数：42 / 时间：2015年06月09日

var off_x;   //横坐标
 var count=0;   //总分
 var speed=5000;  //速度,默认是5秒.
 var keyErro=0;   //输入错误次数
 var keyRight=0;   //输入正确的次数
 
 //组织字母
 var charArray=new Array("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 arrCode=new Array();
 for(var i=65;i<=90;i++){
  arrCode[i-65]=i;
    }
   //随机生产一个字母
  var randomChar=function(){
    off_x=Math.random()*500+5;    //在div横坐标
    //off_y=Math.random()*500-10;     //在div纵坐标
    var c=charArray[parseInt(Math.random()*25)];  //随机生成一个字母
    var charHtml="  <div class=‘char‘ id=‘"+c+"‘ style=‘left: "+off_x+"px;color:"+colorBox()+"‘>"+c+"</div>";
    $("#div1").append(charHtml);
  };
    
  var colorBox=function(){
       Color=[]; //用数组存放颜色的样式
     Color[0]="#ff2211";
     Color[1]="#ff3311";
     Color[2]="#ff5511";
                 Color[3]="#ff8811";
                 Color[4]="#ffBB99";
                 Color[5]="#1ff4f1";
                 Color[6]="#ff5566";
                 Color[7]="#668899";
                 Color[8]="#99BBfA";
                 Color[9]="#fECECC";
     return Color[parseInt(Math.random()*10)];   //随机生颜色.
  }
  
//每隔三秒就调用些方法生产字母
function accrueChar(){
  //把随机出来的放在动画队列里
  var _sildeFun=[
      //把要执行的动画依次放入一个数组里
  function(){$(‘#div1 div‘).animate({top:‘+=470px‘},speed,function(){
   //当动画执行完时,就删除
       $(this).remove();
       count-=10;
       $("input[type=‘text‘]").attr({"value":count});
  });}
  ];
 //将函数组放入slideList动画队列里
  $("#div1").queue(‘slideList‘,_sildeFun);
  var _takeStart=function(){
   //从队列最前端移除一个队列函数，并执行他。
    $("#div1").dequeue("slideList");
  };
  
 function randCharHandle(){
       randomChar();
   _takeStart();
 
 }
 randCharHandle();
}

//健码的处理
function keyCode(event){
  var keyValue = event.keyCode;
  var flag=false;
  //alert(keyValue);
   for(var i=0;i<=arrCode.length;i++){
       if(keyValue==arrCode[i]&&$("#"+charArray[i]+"").text()!=""){
        
          //选对后停止一秒
          $("#"+charArray[i]+"").stop(1000).remove();
          //选对就加10分
          count+=10;
          $("input[type=‘text‘]").attr({"value":count});
          $("#right").text(keyRight);
         
          flag=true;
          break;
       } 
   }
  if(flag){
   flag=false;
    keyRight++;
    $("#right").text(keyRight);
    
  }else{
   keyErro++;
   $("#erro").text(keyErro);
  }
}

$(function(){

  //加速
$("input[value=‘加速++‘]").click(function(){
   if(speed>0)
   speed-=1000;
});

//减速
$("input[value=‘减速--‘]").click(function(){
   speed+=1000;
});


});
window.setInterval("accrueChar()",1500);


/*******************************************HTML页面***************************************************/ 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="test.js"></script>
<title>打字游戏</title>
<style type="text/css">
#div1{
  border: 2px red solid;
  width:500px;
  height: 500px;
  background-color: black;
}
.char{
  width: 20px;
  height:20px;
  position:absolute;
  font: 40px;
  
}
</style>
</head>
<body onkeypress="keyCode(event)">
       <div id="div1">
        
       </div>
       <div>
          <br>总数:<input type="text" readonly="readonly">
                  <input type="button" value="加速++">
                  <input type="button" value="减速--">
          <br>错误次数:<label id="erro"></label>
          <br>正确次数:<label id="right"></label>
       </div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery 写的简单打字游戏