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. whu Problem 1537 - A - Stones I 贪心

    题目链接: http://acm.whu.edu.cn/land/problem/detail?problem_id=1537 Stones I Time Limit: 1000MSMemory Li ...

  2. Docker 技术 介绍

    https://github.com/docker/docker 实现用户空间隔离的技术:名称空间(NameSpace),CGroup(控制组) 什么是NameSpace::简单的理解就是,每一个虚拟 ...

  3. Markdown使用github风格时报TLS错误解决办法

    https://docs.microsoft.com/en-us/officeonlineserver/enable-tls-1-1-and-tls-1-2-support-in-office-onl ...

  4. huawei oceanstor

      华为产品:OceanStor 6000 V3系列 OceanStor 6800 V3 网页登入设备页面:https+ip+端口 资源分配界面: 首页: wwn为2100xxxxxxxx47e4,设 ...

  5. 定制安全的PHP环境

    除了熟悉各种PHP漏洞外,还可以通过配置php.ini来加固PHP的运行环境.PHP官方也曾经多次修改php.ini的默认设置.在本书中,推荐php.ini中一些安全相关参数的配置. register ...

  6. 【数据库_Mysql】查询当前年份的sql

    1.本年份 SELECT DATE_FORMAT(NOW(), '%Y'); 2.本月份(显示数字) SELECT DATE_FORMAT(NOW(), '%m'); 3.本月份(显示英文) SELE ...

  7. [JSOI2008]Blue Mary的战役地图——全网唯一一篇dp题解

    全网唯一一篇dp题解 网上貌似全部都是哈希+二分(反正我是大概baidu了翻了翻)(还有人暴力AC了的..) 哈希还是相对于dp还是比较麻烦的. 而且正确性还有可能被卡(当然这个题不会) 而且还容易写 ...

  8. Ubuntu在vncviewer下Tab键失效

    打开命令行,运行如下命令即可解决: xfconf-query -c xfce4-keyboard-shortcuts -p /xfwm4/custom/'<'Super'>'Tab -r ...

  9. linux jq命令小结

    http://note.youdao.com/noteshare?id=0d84ff04edcaa0be512eb0c1e5c41f47

  10. python基础之装饰器（实例）

    1.必备 #### 第一波 #### def foo(): print 'foo' foo #表示是函数 foo() #表示执行foo函数 #### 第二波 #### def foo(): print ...