<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. (转)java中的进程与线程

    (转自地址http://www.ibm.com/developerworks/cn/java/j-lo-processthread/) Java 进程的建立方法 在 JDK 中,与进程有直接关系的类为 ...

  2. 对象序列化成Json字符串 及 反序列化成对象

    一. public static string JsonSerializer<T>(T t)        {            DataContractJsonSerializer ...

  3. 62. Unique Paths && 63 Unique Paths II

    https://leetcode.com/problems/unique-paths/ 这道题,不利用动态规划基本上规模变大会运行超时,下面自己写得这段代码,直接暴力破解,只能应付小规模的情形,当23 ...

  4. 关于netty

    现在我们一般使用应用程序或者链接库相互进行通信.例如,我们经常通过一个使用http协议的客户端链接库,从网站服务器中获得信息,并且通过网站服务,调用一些远程程序. 然而,一些通用协议或者它们的实现方式 ...

  5. P1906联合权值

    描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...

  6. Ubuntu12.04下编译OpenCv2.4.9程序

    引用地址http://blog.163.com/huai_jing@126/blog/static/171861983201311103411229/ 方法1:直接命令编译: g++ main.cpp ...

  7. 基于VC的ACM音频编程接口压缩Wave音频（一）

    (一)概述 音频数据一般都具有较高的采样率,经过压缩的原始数据才具有实用价值,否则不仅要占用大量存储空间而且在播放或进行网络传输时效率也是非常低下的,所以音频数字压缩编码在多媒体应用中有着广泛而又重要 ...

  8. modal的使用

    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...

  9. 《利用Python进行数据分析》第7章学习笔记

    数据规整化:清理.转换.合并.重塑 合并数据集 pandas.merge pandas.concat combine_first 数据库风格的DataFrame合并 索引上的合并 join()实例方法 ...

  10. 使用https的HSTS需要注意的一个问题

    HSTS(HTTP Strict Transport Security) 简单来说就是由浏览器进行http向https的重定向.如果不使用HSTS,当用户在浏览器中输入网址时没有加https,浏览器会 ...