<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. Android Application类作用简单说明

    每个程序运行时创建一个Application类的对象且只创建一个 Application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期. Application来进行一些,如: ...

  2. Python 学习---------Ｄay1

    第一章 问答环节一．人们为何使用Python 软件质量 开发者的效率 程序的可移植性 标准库的支持 组件集成 享受乐趣二．Python的缺点 Python唯一的缺点就是:与C/C++这类编译语言相比, ...

  3. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

  4. 转行IT行业的心路历程2

    2011/07-2016/12 11年毕业之后阴差阳错的到了宁波慈星股份,学习了针织机械.当初的想法很简单从沈阳到南方,因为南方小厂多机会多,因为我的目标就是当老板(呵呵,大部分的人的目标都是吧,现在 ...

  5. windows编程:资源和播放声音

    要播放声音,要附加项:winmm.lib,然后包含头文件:#include <mmsystem.h> 播放声音用PlaySound函数,只能播放midi和wav波形文件. #define ...

  6. Android 向系统日历中添加事件

    查了一天半,总算有点大概了.以下是自己的理解,有错误的地方望指正. android系统有日历功能,应用程序可以根据一些接口开发自己的功能,即使是日历app也是根据这些接口开发的,所以我们可以利用程序向 ...

  7. 一个demo让你彻底理解Android触摸事件的并发

    注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOW ...

  8. 道路翻新 (Revamping Trails, USACO 2009 Feb)

    题意:给定m<=50000的1-n有联通的图,求最多可以使K<=20条边变为0的情况下的最短路是多少.. 思路:简单的分层图最短路,对于每个点拆成K个点.. 然后求一边最短路.. code ...

  9. Paypal支付接口

    先吐槽一下,国外的创业环境真的远远好于国内的创业环境. vps便宜,网络质量好,没有各种政策监管,各种便捷的金融工具.这其中就包括paypal. Paypal 支持两种付款方式,信用卡+paypal注 ...

  10. Win7系统修改hosts文件不能保存的解决方法

    地址:http://jingyan.baidu.com/album/e5c39bf56564a539d7603312.html