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


Posted in Javascript onJuly 01, 2014
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>
Javascript 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
JavaScript利用正则表达式去除日期中的“-”
Jul 01 #Javascript
jquery实现图片按比例缩放示例
Jul 01 #Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
Visual Studio中js调试的方法图解
Jun 30 #Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 #Javascript
You might like
ThinkPHP3.1查询语言详解
2014/06/19 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
微信小程序 图片上传实例详解
2017/05/05 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python实现最短路径的实例方法
2020/07/19 Python
python自动化办公操作PPT的实现
2021/02/05 Python
供电工程专业求职信
2014/08/09 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
新生入学欢迎词
2015/01/26 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang