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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
简单分析javascript中的函数
Sep 10 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
js实现动态时钟
Mar 12 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
js中eval详解
2012/03/30 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
TensorFlow平台下Python实现神经网络
2018/03/10 Python
超简单使用Python换脸实例
2019/03/27 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
领导的自我鉴定
2013/12/28 职场文书
给女儿的表扬信
2014/01/18 职场文书
保险专业自荐信范文
2014/02/20 职场文书
实训报告范文大全
2014/11/04 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
交通事故起诉书
2015/05/19 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Nginx四层负载均衡的配置指南
2021/06/11 Servers