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. HTML5 <meta> 标签属性，所有meta用法

    基本标签 声明文档使用的字符编码:<meta charset="utf-8" /> 声明文档的兼容模式:<meta http-equiv="X-UA-C ...

  2. 一些有趣的erlang项目

    这里会收集一些erlang项目,有需可以转. erlang-bookmarks Scaling Erlang High Performance Erlang - Finding Bottlenecks ...

  3. 构建一个内网的私有CA步骤

    1:使用openssl命令生成一个私钥,私钥必须放在/etc/pki/CA/private/目录下 (umask 077; openssl genrsa -out /etc/pki/CA/privat ...

  4. 201621123037 《Java程序设计》第4周学习总结

    #Week04-面向对象设计与继承 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 关键词:超级父类."is-a".父类.子类.重载.继承.多态 1.2 尝 ...

  5. JS高级 2

    递归:函数自己调用自己 在JavaScript中唯一能产生作用域的东西是 函数!js中只有函数可以创建作用域 词法作用域,也叫做静态作用域 //就是在代码写好的那一刻,变量和函数的作用域就已经确定了, ...

  6. Qt使用QNetworkAccessManager实现Ftp操作

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt使用QNetworkAccessManager实现Ftp操作     本文地址:http: ...

  7. ZOJ 2060 A-Fibonacci Again

    https://vjudge.net/contest/67836#problem/A There are another kind of Fibonacci numbers: F(0) = 7, F( ...

  8. 判断一个变量是不是json，以及如何将变量转换成json

    https://blog.csdn.net/A123638/article/details/52486975这里看到一个很好的方法 // 判断变量是不是jsonisJson(variable: any ...

  9. 【bzoj3774】最优选择 网络流最小割

    题目描述 小N手上有一个N*M的方格图,控制某一个点要付出Aij的代价,然后某个点如果被控制了,或者他周围的所有点(上下左右)都被控制了,那么他就算是被选择了的.一个点如果被选择了,那么可以得到Bij ...

  10. Halum UVA - 11478（差分约束 + 二分最小值最大化）

    题意: 给定一个有向图,每条边都有一个权值,每次你可以选择一个结点v和一个整数d,把所有以v为终点的边的权值减小d,把所有以v为起点的边的权值增加d,最后要让所有边权的最小值非负且尽量大 两个特判 1 ...