js飞翔的小鸟

提示：未经本人同意，请不要转载哦。

---

一个简单易懂js飞翔的小鸟游戏

代码写的可能不是很好，可以学个思路
由于管道图片没找到，就自己搜了一张

css排版部分

 * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 343px;
            height: 480px;
            position: relative;
            overflow: hidden;
        }

        #gameover {
            width: 343px;
            height: 480px;
            background: red;
            position: absolute;
            z-index: 4;
            text-align: center;
            font-size: 30px;
            color: #fff;
            padding-top: 150px;
            display: none
        }

        #gameover #btn {
            width: 100px;
            height: 50px;
        }

        #bird {
            position: absolute;
            top: 200px;
            left: 10px;
            z-index: 2;
        }

        #bg img {
            float: left;
        }

        #bg {
            width: 686px;
            position: absolute;
        }

        #box .guanUp {
            position: absolute;
            z-index: 2
        }

        #box .guanDown {
            position: absolute;
            z-index: 2
        }

        #shia {
            position: absolute;
            left: 300px;
            ;
            z-index: 3;
            font-size: 30px;
            color: #ffff
        }

---

body部分

也是一个很简单的排版

<div id="box">
        <div id="shia">
            <span id="shijian">0</span>s
        </div>
        <div id="gameover">
            <p>游戏结束 </p>
            <button id="btn">重开</button>
            <p id="">
                您坚持了 <span id="overtime">0</span>s
            </p>
        </div>
        <img src="img/bird0.png" id='bird'>
        <div id="bg">
            <img src="img/bg.jpg" alt="">
            <img src="img/bg.jpg" alt="">
        </div>
    </div>

js部分讲解

点击跳跃

定义小鸟速度 ：speed = 0，每25mm让速度增加0.5，当降落超过地面的高度，清除计时器，超过屏幕高度，就为0。跳跃时切换up，相反切换down图片
小鸟跳起来清除默认事件，否则会出现能把图片选中，并且清除计时器，重新调用。
还有一个简答的随机数

function move() {
           setBirdMove = setInterval(function () {
               speed += 0.5
               a = bird.offsetTop + speed
               if (a >= 450) {
                   a = 450
                   clearInterval(setBirdMove)
                   setBirdMove = null
                   speed = 0
               } else if (a < 0) {
                   a = 0
               }
               //跳跃换图片
               if (speed > 0) {
                   bird.src = "img/down_bird1.png"
               } else {
                   bird.src = "img/up_bird1.png"
               }
               bird.style.top = a + "px"
           }, 25)
       }
       move()
           //按下小鸟挑起
       window.onmousedown = function (e) {
           e.preventDefault()
           clearInterval(setBirdMove)
           move()
           speed = -randFn(4, 8)
       }
        //随机数
     function randFn(min, max) {
           return parseInt(Math.random() * (max - min + 1) + min);
       }

背景移动

定义速度为bgSpeed图片移动做成简单的无缝轮播。

        //背景移动
        var bgSpeed = 0
        var bg_move
        bg_move = setInterval(function () {
            bg.style.left = -bgSpeed + "px"
            bgSpeed++
            if (bgSpeed == 343) {
                bgSpeed = 0
            }
        }, 20)

添加管道

创建Img标签,随机高度，固定的宽度，以及首次出现的位置,并写一个计时器，每500mm发动一次

    //添加管道
        function addguanUp() {
            guanUp = document.createElement("img")
            guanUp.className = "guanUp"
            guanUp.style.bottom = 0
            ranWid = randFn(140, 215)
            guanUp.style.height = ranWid + "px"
            guanUp.style.width = 80 + "px"
            guanUp.style.left = "340px"
            guanUp.src = "img/down_pipe.png"
            box.appendChild(guanUp)

            guanDown = document.createElement("img")
            guanDown.className = "guanDown"
            guanDown.style.top = 0
            guanDown.style.left = "340px"
            ranWid = randFn(140, 215)
            guanDown.style.height = ranWid + "px"
            guanDown.style.width = 80 + "px"
            guanDown.src = "img/up_pipe.png"
            box.appendChild(guanDown)
        }
        //添加管道
        setadd = setInterval(function () {
            addguanUp()
        }, 500)

管子移动碰撞检测

定义速度speedups，获取上管道，下管道的标签，然后获取标签的top,left,height,width。当管道超出屏幕，就删除管道。管道的top值与width，为一个区间，left与height为一个区间，就可以得到管道的面积，当小鸟碰到管道就结束游戏。

     //管子移动
        var speedups = 1
        guanmove = setInterval(function () {
            ups = document.querySelectorAll("#box .guanUp")
            downs = document.querySelectorAll("#box .guanDown")
            //鸟的X  y距离
            birdTop = bird.offsetTop
            birdLeft = bird.offsetLeft
            for (var i = 0; i < ups.length; i++) {
                ups[i].style.left = ups[i].offsetLeft - speedups + 'px'
                uptop = ups[i].offsetTop //管道距离
                upgao = ups[i].offsetHeight
                upleft = ups[i].offsetLeft
                upkuan = ups[i].offsetWidth
                if (ups[i].offsetLeft < -70) {
                    box.removeChild(ups[i])
                }
                if (birdLeft >= upleft && upleft <= upleft + upkuan && birdTop >= uptop && birdTop <= uptop +
                    upgao) {
                    gameover.style.display = "block"
                }
            }
            for (var i = 0; i < downs.length; i++) {
                downs[i].style.left = downs[i].offsetLeft - speedups + 'px'
                downtop = downs[i].offsetTop //管道距离
                downgao = downs[i].offsetHeight
                downleft = downs[i].offsetLeft
                downkuan = downs[i].offsetWidth
                if (downs[i].offsetLeft < -70) {
                    box.removeChild(downs[i])
                }
                if (birdLeft >= downleft && downleft <= downleft + downkuan && birdTop >= downtop && birdTop <
                    downtop + downgao) {
                    gameover.style.display = "block"
                }
            }

        }, 1)

持续时间

用来记录游戏的持续时间。

     //时间
        overtimet = setInterval(function () {
            // overtime.innerHTML++
            shijian.innerHTML++
            overtime.innerHTML = shijian.innerHTML
        }, 1000)

点击重新开始游戏

做个一个很简单的刷新网页。

     btn.onclick = function () {
            history.go(0)
        }