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>