jQuery写飞翔的小鸟

最新推荐文章于 2022-03-31 21:12:14 发布

杨-Yuki

最新推荐文章于 2022-03-31 21:12:14 发布

阅读量367

点赞数 3

分类专栏： jQ

本文链接：https://blog.csdn.net/Orange_Sheep/article/details/107908913

版权

jQ 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //引入外部css
    <link rel="stylesheet" href="css/index.css">
    //引入jQuery文件
    <script src="js/jquery.min.js"></script>

</head>

<body>
    <!-- 滚动背景 -->
    <div class="sky_img">
        <!-- 小鸟图片 -->
        <img src="img/ww.png" class="bird" alt="">
        <!--存放分数-->
        <div class="score">
        </div>
        <!-- 开始游戏按钮 -->
        <h2 class="h2">开始游戏</h2>
        <!-- 遮罩层 -->
        <div class="mask"></div>
        <!-- 游戏结束弹框 -->
        <div class="sucess">
            <h1>Game over!</h1>
            <span>您的最终分数是：</span>
            <span class="results"></span>
            <h2 class="return">重新开始</h2>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

css：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Georgia, Times, 'Microsoft Yahei', serif;
   // 取消默认鼠标双击选中状态
    -webkit-user-select: none;
    /* Safari 和 Chrome */
    -moz-user-select: none;
    /* 老的 Firefox */
    -o-user-select: none;
    /* Opera */
    user-select: none;
}

html,
body {
    width: 100%;
}


/* 滚动背景图 */

.sky_img {
    position: relative;
    width: 100%;
    height: 600px;
    background: url('../img/sky.png');
    overflow: hidden;
}


/* 小鸟图片 */

.bird {
    width: 30px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 270px;
    transform: translateX(-50%);
}


/* 开始游戏 */

h2 {
    width: 100px;
    height: 50px;
    cursor: pointer;
    margin: 350px auto;
}


/* 分数 */

.score {
    color: yellow;
    font-weight: bold;
    font-size: 30px;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 99;
}


/* 遮罩层 */

.mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    z-index: 999;
    background-color: rgba(0, 0, 0, .6);
}


/* 弹框 */

.sucess {
    width: 300px;
    height: 300px;
    font-weight: bold;
    margin: 150px -130px;
    position: absolute;
    left: 50%;
    top: 60px;
    /*让文本居中*/
    text-align: center;
    display: none;
    z-index: 9999;
}

.sucess h1 {
    font-size: 40px;
    margin-top: 40px;
    color: pink;
}

.results,
span {
    margin-top: 30px;
    color: cyan;
    font-size: 20px;
    font-weight: bold;
}

.return {
    color: orangered;
    margin-top: 10px;
}

js：

var n = 0;
// 获取小鸟图片
var flybird = $(".bird").get(0);
// 创建一个小鸟对象
var flyBird = {
        stepx: 52, // 加速度
        stepy: 0,
        x: flybird.offsetLeft,
        y: flybird.offsetTop
    }
    //定义一个变量  用来存放分数的
var count = 0;
// z
var timer = setInterval(function() {
    // 背景图移动
    // 往左滚动 所以是-n + "px"
    $('.sky_img').css({
        'background-position': -n + 'px',
    });
    n += 5;

    // 小鸟运动

    // 加速度
    flyBird.stepy += 1;
    // 小鸟距离上面的距离
    flyBird.y += flyBird.stepy;
    if (flyBird.stepy >= 10) {
        flyBird.stepy = -10,
            flyBird.y += flyBird.stepy;
    }
    $(flybird).css("top", flyBird.y + "px")

}, 20);
var flying = true;

// 点击开始游戏
$(".h2").click(function() {
    $(".h2").hide();
    // 停止开场动画
    clearInterval(timer);
    // 小鸟运动
    flyBird.stepy = 0;
    setInterval(function() {
        if (flying) {
            $('.sky_img').css({
                'background-position': -n + 'px',
            });
            n += 5;
            flyBird.y += flyBird.stepy;
            flyBird.stepy += 1;
            flyBird.x = flyBird.stepx;
            //碰到上边死亡
            if (flyBird.y <= 0) {
                flying = false;
                $(".mask").css("display", "block");
                $(".sucess").css("display", "block")
                $(".score").css("display", "none")
            }
            //碰到下边死亡
            if (flyBird.y >= 600) {
                flying = false;
                $(".mask").css("display", "block");
                $(".sucess").css("display", "block")
                $(".score").css("display", "none")
            }
            $(flybird).css("top", flyBird.y + "px");
            $(flybird).css("left", flyBird.x + "px");
        }
    }, 30)


    // 绑定鼠标点击事件
    $('.sky_img').click(function() {
        flyBird.stepy = -10;
    });
    // 键盘空格键
    $(document).keydown(function(e) {
        if (e.keycode == undefined) {
            flyBird.stepy = -10;
        }
    });

    // // 创建柱子

    var createzz = function(x) {
        // 创建柱子对象
        var zz = {
            x: x, //距离左边
            upHeight: 0, //上面柱子高度
            downHeight: 0 //下面柱子高度
        }
        zz.x = x;
        // 随机生成上面柱子高度
        zz.upHeight = Math.floor(Math.random() * 200 + 50);
        // 下面柱子高度 = 总高度-中间空余空间-上面柱子高度
        zz.downHeight = 600 - 150 - zz.upHeight;

        // 创建上面柱子
        var upDiv = document.createElement("div");
        console.log(upDiv);
        $(upDiv).css({
            "position": "absolute",
            "height": zz.upHeight + "px",
            "width": "52px",
            "left": zz.x + "px",
            "top": 0,
            "background": "url(img/pipe2.png) no-repeat center bottom"
        });
        $('.sky_img').append($(upDiv));

        // 创建下面柱子
        var downDiv = document.createElement("div");
        $(downDiv).css({
            "position": "absolute",
            "height": zz.downHeight + "px",
            "width": "52px",
            "left": zz.x + "px",
            "top": zz.upHeight + 150 + "px",
            "background": "url(img/pipe1.png) no-repeat"
        });
        $('.sky_img').append($(downDiv));

        // 移动柱子
        function Movezz() {
            if (flying) {
                // 柱子往左移动 一次5px
                zz.x -= 5;
                // 上下柱子移动
                $(upDiv).css("left", zz.x + "px");
                $(downDiv).css("left", zz.x + "px");
                if (zz.x <= -52) {
                    zz.x = 1800;
                }
                //判断小鸟是否飞过柱子
                if (zz.x >= 0 && flyBird.x >= zz.x + 52) {
                    count++;
                    $(".score").html(count);
                    $(".results").html(count);
                }

                var ucheck = flyBird.x + 30 > zz.x && flyBird.x < zz.x + 52 && flyBird.y <= zz.upHeight;
                var dcheck = flyBird.x + 30 > zz.x && flyBird.x < zz.x + 52 && flyBird.y + 30 >= zz.downHeight + 150;
                if (ucheck || dcheck) {
                    flying = false;
                    $(".mask").css("display", "block");
                    $(".sucess").css("display", "block")
                    $(".score").css("display", "none")
                }
            }
        }
        var zztimer = setInterval(Movezz, 30);
    }
    createzz(300);
    createzz(600);
    createzz(900);
    createzz(1200);
    createzz(1500);
    createzz(1800);

//重新开始游戏
    $(".return").click(function() {
        location.href = "index.html";
    })
});

杨-Yuki

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery写飞翔的小鸟

html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> //引入外部css <link rel="styles
复制链接

扫一扫

专栏目录