jquery小游戏

$(function () {
    //一：生成柱子  思路：设置柱子的宽度，一次性的创建柱子，并添加到盒子里
    var wellWidth=100;
    var bgColor=Math.ceil(Math.random()*19+1);//区间  1-20
    //封装柱子
    function well() {
        $("body").removeClass().addClass("bg"+bgColor);
        var rc=["pink","red","yellow","green","cyan"];
        //2.动态的创建第一个柱子
        $("<div class='well' style='width:"+wellWidth+"px;background:"+rc[parseInt(Math.random()*5)]+"'></div>").appendTo($(".well-box"));
        //3.设置柱子之间的最大间隙和最小间隙
        var min=80;
        //最大间隙=方柱子的盒子离窗口顶部的距离
        // console.log($(".container").offset().top);
        var max=$(".container").offset().top;

        //4.设置第二根柱子的left的值
        var leftWell2=wellWidth+parseInt(Math.random()*(max-min)+min);
        //5.创建第二根柱子
        $("<div class='well' style='width:"+wellWidth+"px;left:"+leftWell2+"px;background:"+rc[parseInt(Math.random()*5)]+"'></div>").appendTo($(".well-box"));

        //6.设置第三根柱子的left的值
        var leftWell3=leftWell2+wellWidth+parseInt(Math.random()*(max-min)+min);
        //7.创建第三根柱子
        $("<div class='well' style='width:"+wellWidth+"px;left:"+leftWell3+"px;background:"+rc[parseInt(Math.random()*5)]+"'></div>").appendTo($(".well-box"));

        //8.设置第四根柱子的left的值
        var leftWell4=leftWell3+wellWidth+parseInt(Math.random()*(max-min)+min);
        //9.创建第四根柱子
        $("<div class='well' style='width:"+wellWidth+"px;left:"+leftWell4+"px;background:"+rc[parseInt(Math.random()*5)]+"'></div>").appendTo($(".well-box"));

    }

    well();

    //二：鼠标按下不动，棍子长出来，控制的是棍子的宽度
    //设置节流阀  即开关
    var flag=true;
    var sudu=2000;
    $(".btnClick").mousedown(function () {
        if (flag){
            var max=$(".container").offset().top;
            $(".stick").animate({width:max},sudu)
        }
    })
    //鼠标松开按钮，棍子停止生长
    $(".btnClick").mouseup(function () {
        flag=false;
        $(".stick").stop();
        //让棍子倒下来
        $(".stick").addClass("stickDown");
        //调用小人跑起来的函数
        moveMan();
    })

    var index=0;   //记录柱子的索引号
    //三：封装小人跑起来的函数
    function moveMan() {
        //为了显示效果合理，加一个定时器
        setTimeout(function () {
            //1.把战力的小人缓存跑动的图片
            $(".man img").attr("src","img/dd.gif");
            //2.改变left值：获取棍子的宽度
            var stickWidth=$(".stick").width();
            $(".man img").animate({left:stickWidth},2000,function () {
                //3.判断小人挑战成功还是失败
                //3-1  挑战失败：棍子的宽度小于两个柱子之间的距离 或者大于两个柱子之间的距离+柱子的宽度

                //两个柱子之间的距离=后一个柱子的left值 - 前一个柱子的宽度
                var space=$(".well").eq(index+1).offset().left-wellWidth;
                if (stickWidth<space||stickWidth>(space+wellWidth)) {
                    //alert("挑战失败")
                    //调用挑战失败的函数;
                    fail();
                }else{
                    //挑战成功
                    //1.小人换成站立的图片,设置left值为0，并隐藏起来
                    //2.棍子初始化：棍子的宽度为0，移除 stickDown的样式
                    //2.柱子盒子整体移动animate()   移动完之后跑下一个柱子   index++
                    $(".man img").attr("src","img/dd.jpg").hide()
                    $(".stick").width(0).removeClass("stickDown");
                    $(".well-box").animate({left:"-"+$(".well").eq(index+1).css("left")},function () {
                        index++;
                        $(".man img").css("left",0).show();
                        flag=true;
                        if (index==3){
                            $(".dialog").show();
                            $(".dialog .name").text(sucText[parseInt(Math.random()*20)]);
                            $(".dialog .dialog-btn").append('<a class="play-agin" href="javascript:void(0)" onclick="location.reload()">重玩一次</a>'+'<a class="play-next" href="javascript:void(0)"">下一关</a>')
                            nextGame();
                        }
                    });

                }
            })
        },500)
    }


    //四：封装挑战失败的函数
    function fail() {
        //1.小人掉小去   rotate的类选择器   小人隐藏
        //2.棍子的宽度为0，移除 stickDown的样式
        //3.显示弹窗
        //4.给弹窗添加失败的文本内容
        $(".man img").addClass("rotate").fadeOut(function () {
            $(".dialog").show();
            $(".dialog .name").text(failText[parseInt(Math.random()*20)])
            $(".dialog .dialog-btn").append('<a href="javascript:void(0)" onclick="location.reload()">再试一次</a>')
        });
        $(".stick").width(0).removeClass("stickDown");
    }


    //五：封装下一关按钮调用的函数
    var pass=1;
    function nextGame() {
        $(".play-next").click(function () {
            pass++;
            $(".play-title").text("关卡"+pass);
            $(".dialog").hide();
            //小人初始化
            $(".man img").attr("src","img/dd.jpg").css("left",0).removeClass("rotate")
            //棍子初始化
            $(".stick").removeClass("stickDown").width(0);
            //打开开关
            flag=true;
            //把放柱子的盒子初始化
            $(".well-box").css("left", 0).empty();
            //把跑到第几根柱子的index值初始化
            index=0;

            $(".dialog .dialog-btn").empty();

            wellWidth-=10;
            sudu-=300;
            well();
            $("body").removeClass().addClass("bg"+bgColor);

        })
    }


//闯关失败的语句
    var failText = ['志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。',
        '海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。',
        '人生最重要的一点是，永远不要迷失自己。',
        '一个人承受孤独的能力有多大，他的能力就有多大。',
        '实力塑造性格，性格决定命运。',
        '普通人成功并非靠天赋，而是靠把寻常的天资发挥到不寻常的高度。',
        '对于强者，要关注他们的灵魂，对于弱者，他关注他们的生存。',
        '积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。',
        '成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。',
        '当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。',
        '有的人一生默默无闻，有的人一生轰轰烈烈，甚至千古流芳，为什么会这样？因为默默无闻的人只是满足于现状，而不去想怎么轰轰烈烈过一生，不要求自己，去做，去行动，怎么能够成功？',
        '人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。',
        '在人生的道路上，即使一切都失去了，只要一息尚存，你就没有丝毫理由绝望。因为失去的一切，又可能在新的层次上复得。',
        '没有一劳永逸的开始；也没有无法拯救的结束。人生中，你需要把握的是：该开始的，要义无反顾地开始；该结束的，就干净利落地结束。',
        '生命的奖赏远在旅途终点，而非起点附近。我不知道要走多少步才能达到目标，踏上第一千步的时候，仍然可能遭到失败。但我不会因此放弃，我会坚持不懈，直至成功！',
        '不要认为只要付出就一定会有回报，这是错误的。学会有效地工作，这是经营自己强项的重要课程。',
        '苦心人天不负，卧薪尝胆，三千越甲可吞吴。有志者事竞成，破釜沉舟，百二秦川终属楚。',
        '生命本身是一个过程，成功与失败只是人生过程中一些小小的片段，若果把生命与成功或失败联系在一起，生命将失去本身该有的意义。',
        '我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。',
        '努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。'];
//闯关成功的语句
    var sucText = ['勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑',
        '志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚',
        '骏马是跑出来的，强兵是打出来的。',
        '只有登上山顶，才能看到那边的风光。',
        '如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。',
        '平时没有跑发卫千米，占时就难以进行一百米的冲刺。',
        '梯子的梯阶从来不是用来搁脚的，它只是让人们的脚放上一段时间，以便让别一只脚能够再往上登。',
        '没有激流就称不上勇进，没有山峰则谈不上攀登。',
        '真正的才智是刚毅的志向。 —— 拿破仑',
        '山路曲折盘旋，但毕竟朝着顶峰延伸。',
        '只有创造，才是真正的享受，只有拚搏，才是充实的生活。',
        '敢于向黑暗宣战的人，心里必须充满光明。',
        '种子牢记着雨滴献身的叮嘱，增强了冒尖的勇气。',
        '自然界没有风风雨雨，大地就不会春华秋实。',
        '只会幻想而不行动的人，永远也体会不到收获果实时的喜悦。',
        '勤奋是你生命的密码，能译出你一部壮丽的史诗。',
        '对于攀登者来说，失掉往昔的足迹并不可惜，迷失了继续前时的方向却很危险。',
        '奋斗者在汗水汇集的江河里，将事业之舟驶到了理想的彼岸。',
        '忙于采集的蜜蜂，无暇在人前高谈阔论。',
        '勇士搏出惊涛骇流而不沉沦，懦夫在风平浪静也会溺水。'];

})