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 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
vue实现移动端触屏拖拽功能
Aug 21 Javascript
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
php导入模块文件分享
2015/03/17 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python实现动态数组的示例代码
2019/07/15 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
教师节慰问信
2015/02/15 职场文书