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. Spring1（）

    目的: 降低Java开发的复杂性 使用策略: 基于POJO的轻量级和最小侵入式的编程 通过依赖注入和面向接口实现松耦合 基于切面和惯例进行声明式编程 通过切面和模版减少样式代码 依赖注入:由Sprin ...

  2. Java中final修饰符深入研究

    一.开篇 本博客来自:http://www.cnblogs.com/yuananyun/ final修饰符是Java中比较简单常用的修饰符,同时也是一个被"误解"较多的修饰符.对很 ...

  3. Qt多线程-总结QThread-QThreadPool-QtConcurrent

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt多线程-总结QThread-QThreadPool-QtConcurrent     本文 ...

  4. QMap使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QMap使用     本文地址:https://www.techieliang.com/201 ...

  5. jmeter 兼容bug 记录一笔

    这个问题我也遇到过,然后网上搜到了这篇文章! 先说下问题: 我在做性能测试时,使用JMeter搞了100个并发,以100TPS的压力压测十分钟,但压力一直出现波动,而且出现波动时JMeter十分卡,如 ...

  6. Vue 自定义指令练习

    Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 取值: <div v-demo="{ color: 'white', ...

  7. wpf下使用NotifyIcon

    以前在winForm下使用过NotifyIcon,到wpf找不到了,在wpf下还是直接用WinForm里的那个NotifyIcon实现最小到系统托盘 定义一个NotifyIcon成员 : Notify ...

  8. Java开发Excel POI getPhysicalNumberOfCells 与 getLastCellNum的区别

    1.getPhysicalNumberOfCells 与 getLastCellNum的区别 用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全 ...

  9. C++解析(11)：对象的构造

    0.目录 1.对象的初始化 2.构造函数 3.无参构造函数与拷贝构造函数 4.小结 1.对象的初始化 对象中成员变量的初始值是多少? 下面的类定义中成员变量i和j的初始值是什么? 从程序设计的角度,对 ...

  10. Android 通过浏览器打开应用

    在很多应用的web站,其实都有这样一个功能,就是直接在网页中打开应用,接下来的就来探讨一下这个功能的实现,有些地方也我还没弄明白,还请懂的大神指点. 首先,得说一点不好消息,在微信中,这样的方式是行不 ...