<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        #div1{

            width:300px;

            height:300px;

            background-color:#691e1e;

        }

        .char {

            width: 20px;

            height: 20px;

            position: absolute;

            font: 40px;

        }

    </style>

</head>

<body onkeypress="keyCode(event)">

    <script src="jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        var off_x;   //横坐标

        var count = ;   //总分

        var speed = ;  //速度,默认是5秒.

        var keyRight = ;   //输入正确的次数

        var keyErro = ;   //输入错误次数  

        //组织字母

        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 colorBox = function () {

            Color = []; //用数组存放颜色的样式

            Color[] = "#ff2211";

            Color[] = "#ff3311";

            Color[] = "#ff5511";

            Color[] = "#ff8811";

            Color[] = "#ffBB99";

            Color[] = "#1ff4f1";

            Color[] = "#ff5566";

            Color[] = "#668899";

            Color[] = "#99BBfA";

            Color[] = "#fECECC";

            return Color[parseInt(Math.random() * )];   //随机生颜色.

        }

        //按键码数组

        var arrCode = new Array();

        for (var i = ; i <= ; i++) {

            arrCode[i - ] = i;

        }

        //随机生产一个字母

        var randomChar = function () {

            off_x = Math.random() *  + ;    //在div横坐标

            //off_y=Math.random()*500-10;     //在div纵坐标

            var c = charArray[parseInt(Math.random() * )];  //随机生成一个字母

            var charHtml = "  <div class='char' id='" + c + "' style='left: " + off_x + "px;color:" + colorBox() + "'>" + c + "</div>";

            $("#div1").append(charHtml);

        };

        //每隔三秒就调用些方法生产字母

        function accrueChar() {

            //把随机出来的放在动画队列里

            var _sildeFun = [

                //把要执行的动画依次放入一个数组里

            function () {//自定义动画

                $('#div1 div').animate({

                    top: '+=280px'

                }, speed, function () {

                    //当动画执行完时,就删除,分数减10

                    $(this).remove();

                    count -= ;

                    $("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 = ; i <= arrCode.length; i++) {

                if (keyValue == arrCode[i] && $("#" + charArray[i] + "").text() != "") {

                    //选对后停止一秒,然后删除字母

                    $("#" + charArray[i] + "").stop().remove();

                    //选对就加10分

                    count += ;

                    $("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 () {

            $("#but").click(function () {

                window.setInterval("accrueChar()", );

            })

        })

    </script>

    <div id="div1">

    </div>

    <br>总数:<input type="text" readonly="readonly">

    <br>错误次数:<label id="erro"></label>

    <br>正确次数:<label id="right"></label>

    <button id="but">开始</button>

</body>

</html>

jQuery学习-打字游戏的更多相关文章

  1. jQuery 写的简单打字游戏

    var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight= ...

  2. jQuery学习总结（一）——jQuery基础与学习资源

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法. 一.jQuery简介与第一个jQuery程序 1.1.jQu ...

  3. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  4. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  5. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

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

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

  7. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  8. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. MVC, MVP, MVVM比较以及区别

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

  2. Web大文件上传控件-jsp-sql示例更新-Xproer.HttpUploader6.2

    版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. R语言数据处理利器——dplyr简介

    dplyr是由Hadley Wickham主持开发和维护的一个主要针对数据框快速计算.整合的函数包,同时提供一些常用函数的高速写法以及几个开源数据库的连接.此包是plyr包的深化功能包,其名字中的字母 ...

  4. Hyper-V初涉_Hyper-V虚拟机文件交换

    使用虚拟机时,文件交互就显得十分重要.如果能实现物理机与虚拟机之间的文件交互,将会节省大量的时间.比较可惜的是,Hyper-V虚拟机并不支持USB存储设备,所以在文件交换上略显麻烦. 与Hyper-V ...

  5. [置顶]PADS PCB功能使用技巧系列之NO.005- 如何正确使用Verify Design？

    有没有遇到过进行Verify Design通过后,回来的样板仍然出现短路或其它莫名其妙的问题?此情此景,你是否一度对PADS失去的希望?但,工具是没有问题的,看看怎么样正确有效地使用它吧.主要需要注意 ...

  6. mysql5.7 密码策略

    查看现有的密码策略 mysql> SHOW VARIABLES LIKE 'validate_password%';+-------------------------------------- ...

  7. 基于AutoCAD的ObjectARX之NET扩展(mcnetarx)-AcdbEntMake

    1.创建一个结果缓冲区. 2.调用AcdbEntMake创建对象. 示例: ' 创建文字实体 Dim rb As ResultBuffer = New ResultBuffer rb.Add(New ...

  8. 【转】windows消息和消息队列详解

    转载出处:http://blog.csdn.net/bichenggui/article/details/4677494  windows消息和消息队列 与基于MS - DOS的应用程序不同,Wind ...

  9. Ajax的同步与异步

    原文地址:http://www.cnblogs.com/Joetao/articles/3525007.html <%@ Page Language="C#" AutoEve ...

  10. 如何遍历HashMap

    HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,但两者的遍历速度是有差别的 java Map 遍历速度最优解 第一种: Map map = new HashM ...