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>

　　

jQuery 写的简单打字游戏的更多相关文章

  1. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  2. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  3. 几款用jQuery写的h5小游戏

    人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件 ...

  4. js 模仿jquery 写个简单的小demo

    <div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...

  5. jQuery写一个简单的弹幕墙

    概述 近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细 代码下载:http://www.demoda ...

  6. 利用while循环写的简单小游戏猜数字

    猜数字的大小游戏 C:\Users\Administrator>python Python 3.6.8 (tags/v3.6.8:3c6b436a57, Dec 23 2018, 23:31:1 ...

  7. 用Java写的简单五子棋游戏（原创五子连珠算法）

    源码jar包(已安装jdk环境可直接运行) 下载地址:http://download.csdn.net/detail/eguid_1/9532912 五子连珠算法为自创算法,对于五子棋该算法性能足以. ...

  8. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  9. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

随机推荐

  1. vsftpd：非常安全的ftp服务端程序

    主程序:/usr/sbin/vsftpd 主配置文件:/etc/vsftpd/vsftpd.conf CentOS 6  /etc/rc.d/init.d/vsftpd chkconfig vsftp ...

  2. HDFS shell命令行常见操作

    hadoop学习及实践笔记—— HDFS shell命令行常见操作 附:HDFS shell guide文档地址 http://hadoop.apache.org/docs/r2.5.2/hadoop ...

  3. 【Linux】- 简明Vim练习攻略

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  4. Charles安装及使用教程

    一. 简介及安装 一.charles的使用 1.1  charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统(电脑或者浏览器)的网络访问代理服务器,然后截取请求和请求结果达到 ...

  5. Redis 请求应答模式和往返延时 Pipelining

    Redis是一个CS结构的TCP服务器,使用”请求-应答”的模式.,客户端发起一个请求是这样的步骤: 客户端发送一个请求给服务器,然后等待服务器的响应,一般客户端使用阻塞模式来等待服务器响应. 服务器 ...

  6. Java进行Base64的编码(Encode)与解码(Decode)

    关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...

  7. C++解析(16)：友元与类中的函数重载

    0.目录 1.友元的尴尬能力 2.类中的函数重载 3.小结 1.友元的尴尬能力 什么是友元? 友元是C++中的一种关系 友元关系发生在函数与类之间或者类与类之间 友元关系是单项的,不能传递 友元的用法 ...

  8. A Magic Lamp HDU - 3183（RMQ返回下标）

    原文地址:https://blog.csdn.net/acdreamers/article/details/8692384 题意: 对于一个序列A[1...N],一共N个数,除去M个数使剩下的数组成的 ...

  9. 【NOI2006】聪明的导游

    [NOI2006]聪明的导游 题面 洛谷 题目描述 小佳最近迷上了导游这个工作,一天到晚想着带游客参观各处的景点.正好 M 市在举行 NOI,来参观的人特别的多.不少朋友给小佳介绍了需要导游的人. M ...

  10. BZOJ3262：陌上花开 & 洛谷3810：三维偏序——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3262 https://www.luogu.org/problemnew/show/3810 Desc ...