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. 【vue】vue安装卡住/报错

    网上有很多教程怎么安装: 安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org 升级npmcnpm install ...

  2. 【Java】数组升序和降序

    int[] x={1,6,4,8,6,9,12,32,76,34,23}; 升序: Arrays.sort(x); 降序: resort(x); public int[] resort(int[] n ...

  3. 算法08 五大查找之：二叉排序树(BSTree)

    上一篇总结了索引查找,这一篇要总结的是二叉排序树(Binary Sort Tree),又称为二叉查找树(Binary Search Tree) ,即BSTree. 构造一棵二叉排序树的目的,其实并不是 ...

  4. 【刷题】BZOJ 5293 [Bjoi2018]求和

    Description master 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径上所有节点深度的k 次方和,而且每次的k 可能是不同的.此处节点深度的定义是这个节点到 ...

  5. Spring Boot系列教程四：配置文件详解properties

    一.配置随机数,使用随机数 在application.properties文件添加配置信息 #32位随机数 woniu.secret=${random.value} #随机整数 woniu.numbe ...

  6. 【BZOJ4651】【NOI2016】网格（Tarjan，哈希）

    [BZOJ4651][NOI2016]网格(Tarjan,哈希) 题面 BZOJ 洛谷 题解 首先把题目稍微变得好说一些,给定一个网格,已经删去了若干个格子 问最少删去多少个格子使得图不连通. 这题的 ...

  7. 函数式编程（1）-高阶变成（2）-filter

    filter Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的时,filter()把传入的函数依次作用于每个元素,然 ...

  8. 国内外三个领域巨头告诉你Redis怎么用

    随着数据体积的激增,MySQL+memcache已经满足不了大型互联网类应用的需求,许多机构也纷纷选择Redis作为其架构上的补充.这里我们将为大家分享社交巨头新浪微博.传媒巨头Viacom及图片分享 ...

  9. [ACM][2018南京预赛]Sum

    一.题面 样例输入: 2 5 8 样例输出: 8 14 二.思路 关键词:线性筛 在Zed的帮助下知道了这是一道线性筛的比较裸的题了.考试过程中肝这道题的时间最久,费了心思找到递推式后,发现根本不是在 ...

  10. oracle-DECODE()函数

    DECODE()函数 DECODE(value, if1, then1, if2,then2, if3,then3, . . . else ) 含义解释: DECODE(条件,值1,翻译值1,值2,翻 ...