学习jQuery第五天

今天做一个简单的小游戏
部分js代码

设置随机颜色

  function colors() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var colors = "rgb(" + r + "," + g + "," + b + ")";
        return colors;
    }

封装生成柱子的函数

function getWell(n) {
    for (var i = 0; i < n; i++) {
        //生成柱子
        $("<div class='well' style='width: " + wellWidth + "px; background-color: " + colors() + "; left: " + (leftWell) + "px;'></div>").appendTo($(".well-box"));
        //left值
        var leftWell = $(".well").eq(i).offset().left + parseInt(Math.random() * (max - min) + min);
    }
}

封装柱子

   function well() {

        //1.随机换背景图片
        var bgImage = Math.ceil(Math.random() * 19 + 1);//区间1-20
        $("body").removeClass().addClass("bg" + bgImage);
        //2.创建柱子
        getWell(n);
    }

    well();//调用

鼠标按下不动,棍子长出来,控制的就是棍子的宽度

  $(".btnClick").mousedown(function () {
        $(this).css({
            backgroundImage:"url(img/btn-bg-click.png)"
        })
        if (flag) {
            var max = $(".container").offset().top;
            $(".stick").animate({width: max}, stickPace);
        }
    })

鼠标松开按钮,棍子停止生长

   $(".btnClick").mouseup(function () {
        $(this).css({
            backgroundImage:"url(img/btn-bg.png)"
        })
        flag = false;
        //棍子停止生长
        $(".stick").stop();
        //让棍子倒下
        $(".stick").addClass("stickDown");
        //调用小人跑起来的函数
        moveMan();
    })