博客园 首页 私信博主 我的git 我的网站 管理 动画

会飞的小鸟小游戏 原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #fbWrap {
            width: 350px;
            height: 480px;
            background: url("img/bg.jpg");
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        #head {
            position: absolute;
            left: 50px;
            top: 150px;
        }

        #head span {
            background: url("img/bird0.png");
            position: absolute;
            right: 0;
            top: 20px;
            width: 40px;
            height: 26px;
            background-size: 100% 100%;
        }
        #scoring {
            position: absolute;
            left: 50%;
            top: 40px;
            z-index: 2;
            font-size: 50px;
        }
        #menu {
            position: absolute;
            left: 40%;
            top: 60%;
        }
        #bird {
            position: absolute;
            left: 30px;
            top: 10%;
            display: none;
            z-index: 10;
        }
        .die {
            transition: 0.5s;
            top: 393px !important;
            z-index: 99;
        }
        #ductWrap li {
            position: absolute;
            top: 0;
            left: 350px;
            width: 62px;
            height: 423px;
            list-style: none;

        }
        .duct_up {
            background: url("img/up_mod.png") repeat-y;
            height: 120px;
            position: relative;
        }
        .duct_up img {
            position: absolute;
            bottom: 0;
        }
        .duct_down {
            background: url("img/down_mod.png") repeat-y;
            height: 203px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .duct_down img {
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>

<audio autoplay="autoplay" preload="auto"
       src="game_music.mp3">
    你的浏览器不支持audio标签
</audio>

<div id="fbWrap">
    <div id="head" class="animated slideOutUp">
        <img src="img/head.jpg" alt="">
        <span></span>
    </div>
    <div id="scoring">
        0
    </div>
    <div id="menu">
        <img id="start" src="img/start.jpg" alt="">
    </div>
    <div id="bird">
        <img src="img/down_bird1.png" alt="">
    </div>
    <ul id="ductWrap">
    </ul>
</div>
</body>
<script type="text/javascript">
    // 开始按钮
    var startBtn = document.querySelector("#start");
    // head
    var head = document.querySelector("#head");
    // bird
    var bird = document.querySelector("#bird");
    // audio
    var audio = document.querySelector("audio");
    // 获取存放管道的div
    var ductWrap = document.querySelector("#ductWrap");
    // 获取存放分数的div
    var score = document.querySelector("#scoring");
    // 创建管道定时器
    var createDuctTimer = null;
    // 是否删除管道移动定时器
    var isDelTimer = false;
    startBtn.onclick = function () {
        // 隐藏开始按钮和head
        this.parentNode.style.display = "none";
        head.style.display = "none";
        // 显示小鸟
        bird.style.display = "block";
        // 小鸟移动的速度
        bird.speed = 0;
        // 小鸟移动
        bird.moveTimer = setInterval(function () {
            bird.speed += 0.5;
            if (bird.offsetTop <= 0) {
                bird.style.top = "0px";
            } else if (bird.offsetTop >= 394) {
                bird.style.top = "394px";
                clearInterval(bird.moveTimer);
                audio.src = "game_over.mp3";
                document.onmousedown = function (e) {
                    // 阻止默认事件
                    var ev = e || window.event;
                    ev.preventDefault();
                };
                // 当小鸟落地死亡时
                // 1:清除创建管道的定时器
                clearInterval(createDuctTimer);
                // 2:清除管道移动的定时器
                isDelTimer = true;
            }
            if (bird.speed <= 0) {
                bird.children[0].src = "img/up_bird0.png";
            } else {
                bird.children[0].src = "img/down_bird0.png";
            }
            bird.style.top = bird.offsetTop + bird.speed + "px";
            // 碰撞检测
            var ductRow = document.querySelectorAll(".duct_row");
            for (var i = 0; i < ductRow.length; i++) {
                var isCrash = crashFn(bird, ductRow[i]);
                if (isCrash == true) {
                    // 更换音乐
                    audio.src = "game_over.mp3";
                    // 清除小鸟移动
                    clearInterval(bird.moveTimer);
                    // 清除创建管道定时器
                    clearInterval(createDuctTimer);
                    // 清除管道移动
                    isDelTimer = true;
                    bird.className = "die";
                    document.onmousedown = function (e) {
                        var ev = e || window.event;
                        ev.preventDefault();
                    };
                }
            }
        }, 30);
        // 小鸟向上移动
        document.onmousedown = function (e) {
            // 阻止默认事件
            var ev = e || window.event;
            ev.preventDefault();
            bird.speed = -5;
            audio.src = "bullet.mp3";
        }
        // 创建管道
        createDuctTimer = setInterval(function () {
            var duct = document.createElement("li");
            // 上管道的随机高度
            var upHeight = randFn(62, 261);
            // 下管道的高度
            var downHeight = 423 - upHeight - 100;
            duct.innerHTML = '<div class="duct_up duct_row" style="height:' + upHeight + 'px"><img src="img/up_pipe.png"></div><div class="duct_down duct_row" style="height: ' + downHeight + 'px"><img src="img/down_pipe.png"></div>';
            // 管道第一次出现的位置
            duct.l = 350;
            // 给管道添加bol(用来判断是否加分)
            duct.scoreBol = true;
            // 管道移动
            duct.moveTimer = setInterval(function () {
                duct.l -= 3;
                duct.style.left = duct.l + "px";
                if (duct.l <= -62) {
                    // 清除管道
                    ductWrap.removeChild(duct);
                    clearInterval(duct.moveTimer);

                } else if (duct.l <= -31) {//当管道小于-31时,代表小鸟通过
                    if (duct.scoreBol == true) {
                        score.innerHTML = parseInt(score.innerHTML) + 10;
                    }
                    duct.scoreBol = false;
                }
                // 小鸟死亡,定时器移除
                if (isDelTimer == true) {
                    clearInterval(duct.moveTimer);
                }

            }, 30)
            // 把管道插入到ductWrap
            ductWrap.appendChild(duct);
        }, 3000);
    }
    // 随机函数
    function randFn(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }
    //碰撞检测
    function crashFn(obj1, obj2) {

        var obj1Left = obj1.offsetLeft;
        var obj1Right = obj1Left + obj1.offsetWidth;
        var obj1Top = obj1.offsetTop;
        var obj1Bottom = obj1Top + obj1.offsetHeight;

        var obj2Left = obj2.parentNode.offsetLeft;
        var obj2Right = obj2Left + obj2.offsetWidth;
        var obj2Top = obj2.offsetTop;
        var obj2Bottom = obj2Top + obj2.offsetHeight;
        // 1:obj1的右边 大于等于 obj2的左边
        // 2:obj1的下边 大于等于 obj2的上边
        // 3:obj1的左边 小于等于 obj2的右边
        // 4:obj1的上边 小于等于 obj2的下边
        if (obj1Right >= obj2Left && obj1Bottom >= obj2Top && obj1Left <= obj2Right && obj1Top <= obj2Bottom) {
            // 已经发生碰撞
            return true;
        } else {
            // 没有碰撞
            return false;
        }
    }
</script>
</html>

  原文章https://www.jianshu.com/p/9361a94df4da

转载仅供学习

posted @ 2019-10-30 20:10  魏婴  阅读(372)  评论(0编辑  收藏  举报