jQuery 写的简单打字游戏可以提示正确和错误的次数
程序员文章站
2023-11-09 23:11:22
var off_x; //横坐标
var count=0; //总分
var speed=5000; //速度,默认是5秒.
var keyerro=0; //输入...
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; //在p横坐标 //off_y=math.random()*500-10; //在p纵坐标 var c=chararray[parseint(math.random()*25)]; //随机生成一个字母 var charhtml=" <p class='char' id='"+c+"' style='left: "+off_x+"px;color:"+colorbox()+"'>"+c+"</p>"; $("#p1").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(){$('#p1 p').animate({top:'+=470px'},speed,function(){ //当动画执行完时,就删除 $(this).remove(); count-=10; $("input[type='text']").attr({"value":count}); });} ]; //将函数组放入slidelist动画队列里 $("#p1").queue('slidelist',_sildefun); var _takestart=function(){ //从队列最前端移除一个队列函数,并执行他。 $("#p1").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"> #p1{ 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)"> <p id="p1"> </p> <p> <br>总数:<input type="text" readonly="readonly"> <input type="button" value="加速++"> <input type="button" value="减速--"> <br>错误次数:<label id="erro"></label> <br>正确次数:<label id="right"></label> </p> </body> </html>