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 OOP包机制,类创建的方法定义
Nov 02 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
Vue项目打包编译优化方案
Sep 16 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采集腾讯微博的实现代码
2012/01/19 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP的全局错误处理详解
2016/04/25 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
简单的php购物车代码
2020/06/05 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js表头排序实现方法
2015/01/16 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Django forms组件的使用教程
2018/10/08 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
总经理秘书工作职责
2013/12/26 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
超市创业计划书
2014/04/24 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫