jQuery 写的简单打字游戏可以提示正确和错误的次数
更新时间：2014年07月01日 09:50:40 投稿：whsnow
这篇文章主要介绍了使用jQuery写的简单打字游戏可以提示正确和错误的次数,需要的朋友可以参考下
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; //在div横坐标
//off_y=Math.random()*500-10; //在div纵坐标
var c=charArray[parseInt(Math.random()*25)]; //随机生成一个字母
var charHtml=" <div class='char' id='"+c+"' style='left: "+off_x+"px;color:"+colorBox()+"'>"+c+"</div>";
$("#div1").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(){$('#div1 div').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");
};
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">
#div1{
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)">
<div id="div1">
</div>
<div>
<br>总数:<input type="text" readonly="readonly">
<input type="button" value="加速++">
<input type="button" value="减速--">
<br>错误次数:<label id="erro"></label>
<br>正确次数:<label id="right"></label>
</div>
</body>
</html>
相关文章
本篇文章主要是对jquery淡入淡出效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。这篇文章主要介绍了 jquery的 filter()方法使用,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了浅谈jQuery的offset()方法及示例分享的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了DOM操作和jQuery实现选项移动操作代码分享的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
标签云想必大家都有见到过吧，那么3D标签云，有没有接触过呢？本例为大家介绍下通过jquery 实现的3D标签云，感兴趣的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery实现新消息在网页标题闪烁提示的相关资料,需要的朋友可以参考下2015-06-06
商品拖动选择效果如图所示，感兴趣的朋友已经迫不及待想实现了吧，下面与大家分享下具体的实现思路及处理程序2013-05-05
这篇文章主要介绍了jQuery插件imgPreviewQs实现上传图片预览的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了easyUI使用分页过滤器对数据进行分页操作,结合实例形式详细分析了easyUI分页过滤器对数据进行分页操作具体步骤与相关操作技巧,需要的朋友可以参考下2020-06-06![jQuery中[attribute!=value]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg9.png)
jQuery中[attribute!=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute!=value]选择器用法,实例分析了[attribute!=value]选择器匹配不包含指定属性元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
![jQuery中[attribute!=value]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论