• 会飞的小鸟小游戏 原生js


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #fbWrap {
                 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;
                 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;
                 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;
                 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

    转载仅供学习

  • 相关阅读:
    【leetcode】1215.Stepping Numbers
    【leetcode】1214.Two Sum BSTs
    【leetcode】1213.Intersection of Three Sorted Arrays
    【leetcode】1210. Minimum Moves to Reach Target with Rotations
    【leetcode】1209. Remove All Adjacent Duplicates in String II
    【leetcode】1208. Get Equal Substrings Within Budget
    【leetcode】1207. Unique Number of Occurrences
    【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays
    【leetcode】LCP 3. Programmable Robot
    【leetcode】LCP 1. Guess Numbers
  • 原文地址:https://www.cnblogs.com/aomeng/p/11767404.html
Copyright © 2020-2023  润新知