火柴人、全jquery、使用jquery制作简单英雄难过棍子关

火柴人、全jquery、使用jquery制作简单英雄难过棍子关

1.jpg //背景
stick.gif //人物走动图片
stick_stand.png //人物不动时样式
需导入jquery

//页面加载时加载
    $(document).ready(function () {
        var count = 0;//分数
        //创建div,
        $("body").append("<div class='div1'></div>");
        //body的样式
        $("body").css({
            "margin": "0px",
            "padding": "0px",
            "background": "url('images/1.jpg') no-repeat"
        });

        var w = $("body").width();//获取当前body的宽度
        var h = $(window).height();//获取当前窗体的高度
        //窗体加载时执行，适应浏览器高度
        $(".div1").css({
            "width": w,
            "height": h,
            "float": "left",
            "position": "relative",

        })
        //改变窗体大小时适应浏览器高度 ，执行
        $(window).resize(function () {
            var w = $("body").width();//获取当前body的宽度
            var h = $(window).height();//获取当前窗体的高度
            $(".div1").css({
                "width": w,
                "height": h,
                "position": "relative",
            })
            //body的样式
            $("body").css({
                "margin": "0px",
                "padding": "0px",
                "background": "url('images/1.jpg') no-repeat"
            });

            //火柴人脚下的石块样式
            $(".div_step").css({
                "bottom": "0px",
            })
            $("#btnSha").css({
                "top": click_button.offset().top + 30,
                "left": click_button.offset().left - 100,
            })
        })
        //创建一个点击按钮
        $(".div1").append("<div style=''><button id='click_button'>点击按钮</button></div>");
        var click_button = $("#click_button");//按钮对象

        click_button.css({
            "width": "100px",
            "height": "100px",
            "position": "absolute",
            "top": "20%",
            "left": "50%",
            "border-radius": "50% 50% 50% 50%",
            "color": "black",
            "background": "url('images/btn-bg.png') no-repeat"
        })
        //创建的重新开始按钮
        $(".div1").append("<button style='background:blue;color:white;border:1px solid' id='btnSha'>重新开始</button>");
        var btnsha = $("#btnSha");
        btnsha.css({
            "position": "absolute",
            "top": click_button.offset().top + 30,
            "left": click_button.offset().left - 100,
        })
        btnsha.click(function () {
            document.location.reload();
        })
        //创建一个div显示关卡
        $(".div1").append("<div id='levelCount'>关卡" + count + "</div>");
        var levelCount = $("#levelCount");
        levelCount.css({
            "width": "100px",
            "height": "50px",
            "font-size": "26px",
        })
        //创建石柱
        var divStep1 = step(0, 0, 100);
        var random1 = Math.floor(Math.random() * ($(window).height() - 100) + 100);
        var divStep2 = step(1, random1, Math.floor(Math.random() * (100) + 50));
        //创建一个桥
        $(".div1").append("<div id='div_bridge'></div>");
        var div_bridge = $("#div_bridge"); //桥对象
        var bridgeW = 5;
        div_bridge.css({
            "width": bridgeW + "px",
            "height": "0px",
            "position": "absolute",
            "bottom": $(".div_step").height() - 1,
            "left": parseInt($(".div_step").width()) - bridgeW,
            "background-color": "black"
        })
        //火柴人人物
        $(".div1").append("<div id='div_person'></div>");
        var div_person = $("#div_person");//火柴人人物对象样式
        div_person.css({
            "width": "65px",
            "height": "97",
            "background": "url('images/stick_stand.png')  no-repeat",
            "position": "absolute",
            "left": $(".div_step").width() - 65,
            "bottom": $(".div_step").height() - 1,
            // "border": "1px solid red"
        })


        //方法
        //创建火柴人脚下的石块,参数：索引，位置，宽度
        function step(i, left, width) {
            $(".div1").append("<div class='div_step'></div>");
            //火柴人脚下的石块样式
            $(".div_step").css({
                "position": "absolute",
                "bottom": "0px",
                "background": "black",
                "height": "150px"
            })
            $(".div_step").eq(i).css({
                "left": left + "px",
                "width": width + "px",
            })
            return $(".div_step").eq(i);
        }
        var time;//时间
        var zop = false;
        onmousedown(); //调用鼠标按下事件方法
        onmouseup();//调用鼠标松开事件方法
        //鼠标按下事件调用方法
        function onmousedown() {
            click_button.mousedown(function () {
                //鼠标移开事件
                click_button.mouseout(function () {
                    clearInterval(time);
                    return;
                })
                //局部变量，控制桥的长度
                var bridgeHeight = 0;
                time = setInterval(function () {
                    bridgeHeight += 5;
                    //桥的长度变化增加
                    div_bridge.height(bridgeHeight);
                }, 15);
            })
        }


        //鼠标松开事件
        function onmouseup() {

            click_button.mouseup(function () {
                click_button.unbind();//解除按钮绑定所有事件
                clearInterval(time);
                //棍子倒下
                div_bridge.animate({}, function () {
                    div_bridge.css({
                        'transform-origin': '0% 100%', //固定旋转的点，以此点为中心旋转
                        'transform': 'rotate(90deg)', //旋转2d动画 90°
                        'transition': 'transform .3s linear',//过渡动画
                    });
                    //人物500毫秒后走动
                    setTimeout(function () {
                        //更改人物的背景图片
                        div_person.css({
                            "background": "url('images/stick.gif')",
                        })
                        seupGo(divStep1, divStep2);//执行方法
                    }, 500, function () {
                        div_bridge.css("left", step2W - div_bridge.width() + "px");//桥的位置为人物所在的柱子的宽度-桥的宽度
                        var step = divStep1;
                        divStep1 = divStep2;
                        divStep2 = step;
                        click_button.bind("mousedown", onmousedown());//恢复按钮绑定的按下事件
                        click_button.bind("mouseup", onmouseup());//恢复按钮绑定的按下事件
                    });

                })

            })
        }
        //鼠标松开后执行的方法
        function seupGo(step1, step2) {
            click_button.unbind();//解除按钮绑定所有事件
            //问题：如何知道人物是在哪根柱子上，柱子的宽获取
            var bridgeH = div_bridge.height() + step1.eq(0).width();//桥的长度+柱子1的宽度
            //人物根据桥的长度移动 ,此时要加上人物所在的柱子的宽度
            div_person.animate({ "left": bridgeH }, 1000, function () {
                var step2l = step2.offset().left;//第二根柱子的左边距离
                var step2W = step2.width();//第二根柱子的宽度
                //判断是否是在第二个柱子上 : 如果桥的长度 小于 第二根柱子的左边距离 或者 桥的长度 大于 第二个柱子左边距离加上其宽
                if (bridgeH < step2l || bridgeH > step2l + step2W) {
                    div_person.animate({
                        "bottom": "0px",

                    }, 500, function () {
                        alert("Game Over");
                        document.location.reload();
                    });
                    return;
                }
                //桥的恢复样式
                div_bridge.css({
                    'transform': 'rotate(0deg)', //旋转2d动画 恢复原样
                    'transition': 'transform 0s linear',//过渡动画
                    "height": "0px",//桥的高度恢复为0
                })
                //人物恢复原样
                div_person.css({
                    "background": "url('images/stick_stand.png')",
                })
                //待人物走到第二个柱子，人物和柱子都向后移动恢复成加载状态
                step2.animate({
                    "left": "0px",//人物所在的柱子位置为0
                }, 500)
                div_person.animate({
                    //人物的位置为：人物所站的柱子的宽度 - 人物的宽度
                    "left": step2.width() - div_person.width(),
                }, 500)
                step1.animate({
                    //柱子1的位置为 本身宽度的负数
                    "left": -step1.width(),
                }, 500, function () {
                    //柱子消失后从右边进来，
                    step1.css({ "left": "2000px", })
                    step1.animate({
                        "left": Math.floor(Math.random() * ($(window).height() - 100) + 150),//位置可以为：随机数
                    }, 500, function () {
                        div_bridge.css("left", step2W - div_bridge.width() + "px");//桥的位置为人物所在的柱子的宽度-桥的宽度
                        var step = divStep1;
                        divStep1 = divStep2;
                        divStep2 = step;
                        click_button.bind("mousedown", onmousedown());//恢复按钮绑定的按下事件
                        click_button.bind("mouseup", onmouseup());//恢复按钮绑定的按下事件
                        count++;
                        levelCount.text("关卡" + count);
                    })
                })

            });
        }
    });//加载页面时加载的内容