<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. 【转】测试LibreOffice SDK 开发环境配置(Windows)

    原文:http://www.aqcoder.com/blog/detail/id/7441186b-93fd-482c-b4d7-0facd1ee498d 下载与安装 LibreOffice 主页:h ...

  2. WinForm/Silverlight多线程编程中如何更新UI控件的值

    单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello World!";就搞定了,但是如果在一个新线程中这么 ...

  3. Linq to Sql 聚合查询

    //输出体重最大的同学,并要求最大体重得大于39,并按照体重大下,对分组结果进行排序. var result = from query in linq.Student group query by q ...

  4. 自己做了一个json格式化工具,亲测可以使用

    随笔背景:在向后台请求数据之后,我们常常会拿到一串json格式.此时,为了方便查看key-value,程序猿们常常使用一些在线json格式化工具或者是类似于notepadd++这样的工具进行转换.今天 ...

  5. wrHDL编译中软核代码初始化及编译耗时长的问题

    问题的提出整个WR的ISE工程比较大,编译时间很长,导致开发效率低.通过分析发现,ISE在综合的时候大量的时间都花在了初始化DPRAM上.调研发现Xilinx提供了BMM文件和DATA2MEM工具,可 ...

  6. 关于Android的背景色配色小结

    三基色原理:三基色是指红,绿,蓝三色,人眼对红.绿.蓝最为敏感,大多数的颜色可以通过红.绿.蓝三色按照不同的比例合成产生.同样绝大多数单色光也可以分解成红绿蓝三种色光.这是色度学的最基本原理,即三基色 ...

  7. Hibernate自动创建表

    只要在hibernate.cfg.xml添加这句话,就可以自动生成数据表 <property name="hibernate.hbm2ddl.auto">update& ...

  8. xUtils 1.8.4 (Android工具库) 发布 - http模块优化

    感谢关注xUitls的网友最近一段时间给予的热心反馈,xUtils近期做了很多细节优化,同时修复和优化了大家反馈的一些问题.重要的变化有http请求返回更全面的结果信息:下载设置断点续下时,如果服务器 ...

  9. android项目中values中几个文件的作用

    最近反编译了几个Android软件,发现一些以前未用到的资源文件:ids.xml——为应用的相关资源提供唯一的资源id.id是为了获得xml中的对象而需要的参数,也就是Object = findVie ...

  10. DataTables 控件使用和心得 (1) - 入门

    什么是DataTables DataTables是一个基于HTML/CSS/JavaScript的前端列表组件. 基于JQuery 开源并且免费(除特殊支持服务) 主要特色: 高性能,响应式,功能完整 ...