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>