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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
微信开发 微信授权详解
Oct 21 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
vue实现Toast组件轻提示
Apr 10 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
浅析PHP水印技术
2007/02/14 PHP
php中的实现trim函数代码
2007/03/19 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Django发送邮件功能实例详解
2019/09/02 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
车间班组长岗位职责
2013/11/13 职场文书
初三学习决心书
2014/03/11 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
接收函
2019/04/22 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技