欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 写的简单打字游戏可以提示正确和错误的次数

程序员文章站 2022-06-07 10:21:39
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>