jQuery 写的简单打字游戏可以提示正确和错误的次数
varoff_x;//横坐标 varcount=0;//总分 varspeed=5000;//速度,默认是5秒. varkeyErro=0;//输入错误次数 varkeyRight=0;//输入正确的次数 //组织字母 varcharArray=newArray("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"); //按键码数组 vararrCode=newArray(); for(vari=65;i<=90;i++){ arrCode[i-65]=i; } //随机生产一个字母 varrandomChar=function(){ off_x=Math.random()*500+5;//在div横坐标 //off_y=Math.random()*500-10;//在div纵坐标 varc=charArray[parseInt(Math.random()*25)];//随机生成一个字母 varcharHtml="<divclass='char'id='"+c+"'style='left:"+off_x+"px;color:"+colorBox()+"'>"+c+"</div>"; $("#div1").append(charHtml); }; varcolorBox=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"; returnColor[parseInt(Math.random()*10)];//随机生颜色. } //每隔三秒就调用些方法生产字母 functionaccrueChar(){ //把随机出来的放在动画队列里 var_sildeFun=[ //把要执行的动画依次放入一个数组里 function(){$('#div1div').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"); }; functionrandCharHandle(){ randomChar(); _takeStart(); } randCharHandle(); } //健码的处理 functionkeyCode(event){ varkeyValue=event.keyCode; varflag=false; //alert(keyValue); for(vari=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> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="../../jQuery/jquery-1.8.3.js"></script> <scripttype="text/javascript"src="test.js"></script> <title>打字游戏</title> <styletype="text/css"> #div1{ border:2pxredsolid; width:500px; height:500px; background-color:black; } .char{ width:20px; height:20px; position:absolute; font:40px; } </style> </head> <bodyonkeypress="keyCode(event)"> <divid="div1"> </div> <div> <br>总数:<inputtype="text"readonly="readonly"> <inputtype="button"value="加速++"> <inputtype="button"value="减速--"> <br>错误次数:<labelid="erro"></label> <br>正确次数:<labelid="right"></label> </div> </body> </html>