用js，css，html实现简单的“蹦蹦鸟”小游戏

最新推荐文章于 2024-06-13 10:05:02 发布

顾兮丶

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量313

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_56831647/article/details/139092967

版权

上一篇文章分享了如何用js代码实现简单的“羊了个羊”的小游戏，各位有兴趣的可以去看一下哦用html, js ,css实现一个简易的羊了个羊 - 网页版-CSDN博客

今天就来分享一下如何用js代码实现一个简单的“蹦蹦鸟”小游戏吧，

首先先了解一下游戏规则：

1. 玩家操作的是一只时刻在下降的“鸟儿”，

2. 玩家可以点击空格让 “鸟儿”跳跃一小段距离

3. 场景中有“管道”作为障碍物，玩家需要操作“鸟儿”别撞到“管道”即可，也不能让鸟儿坠落，否则游戏失败

游戏规则很简单，我这里直接提供代码，大家感兴趣的可以自己研究一下代码，基本上都写了简单的注释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蹦蹦鸟</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .body{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .screen {
            width: 5000px;
            height: 100%;
            position: relative;
            background-color: green;
            background-image: url("imgs/th.jpg");
            transition: 0.1s;
            overflow-y: hidden;
        }

        .brid {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 45%;
            left: 40vw;
            transition: 0.1s;
            background-image: url("imgs/mriou.png");
            background-size: cover;
            z-index: 999;
        }

        .blocks {
            background-image: url("imgs/gd.jpg");
            background-size: 100% 100%;
        }

        #block-1 {
            width: 100px;
            height: 350px;
            position: absolute;
            left: 1000px;
            transform: rotate(180deg);
        }

        #block-2 {
            width: 100px;
            height: 350px;
            position: absolute;
            left: 1500px;
            top: calc(100% - 350px);
        }


        #block-3 {
            width: 100px;
            height: 350px;
            position: absolute;
            left: 2500px;
            transform: rotate(180deg);
        }

        #block-4 {
            width: 100px;
            height: 350px;
            position: absolute;
            left: 3000px;
            transform: rotate(180deg);
        }

        #block-5 {
            width: 100px;
            height: 350px;
            position: absolute;
            left: 3500px;
            top: calc(100% - 350px);
        }
    </style>
</head>

<body>
    <div class="body">
        <!-- 场景 -->
        <div class="screen">
            <!-- 障碍物 -->
            <div class="blocks" id="block-1"></div>
            <div class="blocks" id="block-2"></div>
            <div class="blocks" id="block-3"></div>
            <div class="blocks" id="block-4"></div>
            <div class="blocks" id="block-5"></div>
        </div>
        <!-- 马里奥 -->
        <div class="brid"></div>
    </div>
</body>

</html>

<script>
    let brid = document.getElementsByClassName("brid")[0]; // 马里奥
    let dropHeight = document.body.clientHeight; // 整个场景的高度， 用于判断马里奥是否掉出场景外
    let hasDropH = getElementTop(brid); // 马里奥已经下落的距离

    // 马里奥下落
    function Drop() {
        hasDropH += 5;
        brid.style.top = `${hasDropH}px`;
    }

    // 让马里奥持续下降
    let timer = setInterval(() => {
        Drop();
        if (hasDropH >= dropHeight) {
            clearInterval(timer);
            alert("游戏结束");
        }
        IsHit();
    }, 100);

    // 按空格让马里奥上升
    function Rise() {
        document.addEventListener("keydown", (e) => {
            if (e.code === "Space") {
                clearInterval(timer);
                hasDropH -= 30;
                brid.style.top = `${hasDropH}px`;
                timer = setInterval(() => {
                    Drop();
                    if (hasDropH >= dropHeight) {
                        clearInterval(timer);
                        alert("游戏结束");
                    }
                    IsHit();
                }, 100);
                IsHit();
            }
        });
    }

    // 场景移动
    function ScreenMove() {
        let screen = document.getElementsByClassName("screen")[0];
        let moveLenght = 0;
        let screenTimer = setInterval(() => {
            moveLenght -= 10;
            screen.style.left = `${moveLenght}px`;
            if (moveLenght * -1 >= screen.clientWidth) {
                alert("游戏结束, 挑战成功！");
                clearInterval(screenTimer);
            }
            IsHit();
        }, 100);
    }

    // 判断马里奥是否和管道相撞
    function IsHit() {
        // 循环所有管道
        let blocks = document.getElementsByClassName("blocks");
        for (let i = 0; i < blocks.length; i++) {
            let d = blocks[i];
            let mark = CheckHit(getElementLeft(brid), getElementTop(brid), brid.clientWidth, brid.clientHeight, getElementLeft(d), getElementTop(d), d.clientWidth, d.clientHeight);
            if (mark) {
                alert("游戏结束");
            }
        }
    }

    // 判断是否相撞
    function CheckHit(x1, y1, yw, yh, x2, y2, bw, bh) {
        var yx = x1;
        var yr = x1 + yw;
        var yy = y1;
        var yb = y1 + yh;

        var bx = x2;
        var br = x2 + bw;
        var by = y2;
        var bb = y2 + bh;
        //如果鱼的右边小于炮弹的x坐标or鱼的x坐标大于炮弹的右边or鱼的底部小于炮弹的y坐标or鱼的y坐标大于炮弹的底部
        if (yr < bx || yx > br || yb < by || yy > bb) {
            return false;
        } else {
            return true;
        }
    }
    // 获取element的x坐标
    function getElementLeft(element) {
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }
    // 获取element的y坐标
    function getElementTop(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        while (current !== null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    }

    Rise();
    ScreenMove();
</script>

在css部分中引用的图片，大家可以自己替换图片路径为自己的哈，有疑问欢迎提出来哦！！

游戏画面是这样的：

顾兮丶

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用js，css，html实现简单的“蹦蹦鸟”小游戏

3. 场景中有“管道”作为障碍物，玩家需要操作“鸟儿”别撞到“管道”即可，也不能让鸟儿坠落，否则游戏失败。游戏规则很简单，我这里直接提供代码，大家感兴趣的可以自己研究一下代码，基本上都写了简单的注释。上一篇文章分享了如何用js代码实现简单的“羊了个羊”的小游戏，各位有兴趣的可以去看一下哦。在css部分中引用的图片，大家可以自己替换图片路径为自己的哈，有疑问欢迎提出来哦！今天就来分享一下如何用js代码实现一个简单的“蹦蹦鸟”小游戏吧，1. 玩家操作的是一只时刻在下降的“鸟儿”，
复制链接

扫一扫