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 文件本身编码转换 图文教程
Oct 12 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vue操作dom元素的3种方法示例
Sep 20 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常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Python translator使用实例
2008/09/06 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
办公室主任职责范本
2014/03/07 职场文书
二手房购房协议书范本
2014/10/05 职场文书
义诊活动通知
2015/04/24 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
基于Python实现一个春节倒计时脚本
2022/01/22 Python