<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. 在app中打开appStore中其他app

    var str = "https://itunes.apple.com/cn/app/zhang-jiange-hao-tou-zi-ke/id402382976?mt=8"//这 ...

  2. Android Sqlite数据库相关——实现将 Sqlite 数据库复制到SD 卡

    确定 sqlite 数据库所在位置(一般在data/data/com.pagename/databases/ 下,其中 com.pagename为当前项目包名) 确定 sqlite 数据库名称,拼接到 ...

  3. doxygen的使用（二）给代码添加javadoc风格的注释

    原创文章,欢迎阅读,禁止转载.本文记一下javadoc风格注释的写法,这些特殊格式的注释称作标签.按照这种规范写的注释才能生成到文档中. 块注释的写法 /** * @brief 这个块注释 * dox ...

  4. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  5. 【react学习笔记】-jsx

    //jsx定义组件 var Divider = React.creatClass({ getIsComplete:function(){ return 'is-complete' }, handleC ...

  6. linux shell

    1.+到n for i in {1..n}doa=$(($a+$i))doneecho $a 2. 写一个脚本.输入如下效果 0 01 012 0123 01234 012345 0123456 01 ...

  7. Java生成不重复的数的方法

    在开发时要给某些表加上编号,而且编号是唯一的,自己用时间生成了下,觉得可能存在并发情况.所以在网上查了一下,就是随机生成.方法如下: //方法一(用当前时间精确到毫秒,截取任意几位) Date dat ...

  8. EDA技术与ASIC设计和FPGA开发有什么关系？FPGA在ASIC设计中有什么用途？

    利用EDA技术进行电子系统设计的最后目标是完成专用集成电路ASIC的设计和实现:FPGA和CPLD是实现这一途径的主流器件.FPGA和CPLD通常也被称为可编程专用IC,或可编程ASIC.FPGA和C ...

  9. 特征哈希（Feature Hashing）

    [本文链接:http://www.cnblogs.com/breezedeus/p/4114686.html,转载请注明出处] 我的博客主营地迁至github,欢迎朋友们有空去看看:http://br ...

  10. HashMap LinkedHashMap源码分析笔记

    MapClassDiagram