JavaScript实现像素鸟小游戏

我就是我 2023-05-30 09:19 8阅读 0赞

# JavaScript实现像素鸟小游戏 #

我还没有开始玩就结束了，略微的尴尬!  
今天的效果图就像下面这个样子。大家应该都玩过像素鸟这个游戏吧，没有玩过的个人建议先去玩几次，体验一下游戏大概是怎么实现的，先自己思考一下具体的思路。接着在看代码部分。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]

这里是html+css部分（因为css部分代码比较少，所以就直接放在HTML部分的）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #game {
                width: 800px;
                height: 600px;
                border: 2px solid;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }
    
            #game .sky {
                width: 200%;
                height: 600px;
                background: url("img/sky.png");
                position: absolute;
                left: 0;
                top: 0;
            }
    
            #game .land {
                width: 1600px;
                height: 112px;
                background: url("img/land.png");
                position: absolute;
                left: 0;
                bottom: 0;
            }
    
            #game .bird {
                width: 33px;
                height: 26px;
                background: url("img/bird.png");
                position: absolute;
                left: 200px;
                top: 150px;
                background-position: -8px -10px;
                z-index: 1;
            }
    
            #game .pipeup {
                background: url("img/pipeDown.png") no-repeat left bottom;
                width: 52px;
                height: 200px;
                position: absolute;
                top: 0;
                right: 0;
            }
    
            #game .pipedown {
                background: url("img/pipeUp.png") no-repeat;
                width: 52px;
                height: 200px;
                position: absolute;
                bottom: 112px;
                right: 0;
            }
    
            #game .over {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .5);
                color: #fff;
                font-size: 4em;
                text-align: center;
                line-height: 600px;
                z-index: 2;
                display: none;
            }
    
            .msg{
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div id="game">
            <div class="over">
                游戏结束
            </div>
            <div class="sky"></div>
            <div class="land"></div>
            <div class="bird"></div>
        </div>
        <p class="msg">
            回车键开始/暂停，空格键跳跃
        </p>
    
        <script src="index.js"></script>
    </body>
    
    </html>

接下来就是js部分了。

/**
     * 产生一个通用的计时器对象
     * @param duration 间隔时间
     */
    function getTimer(duration) {
        var timerId;
        return {
            start: function () {
                //this -> 当前计时器对象
                if (timerId) {
                    //已经有计时器了
                    return;
                }
                var that = this; //保存this的指向
                timerId = setInterval(function () {
                    if (that.onTick) {
                        that.onTick();
                    }
                }, duration)
            },
            stop: function () {
                clearInterval(timerId);
                timerId = null;
            },
            onTick: undefined
        }
    }
    
    //天空
    var sky = {
        dom: document.querySelector(".sky"), //对应的dom对象
        width: 800, //宽度
        height: 488, //高度
        left: 0,
        timer: getTimer(20), //天空移动的计时器
        show: function () { //重新显示天空
            this.dom.style.left = this.left + "px";
        }
    }
    
    sky.timer.onTick = function () {
        sky.left--;
        if (sky.left <= -sky.width) {
            sky.left = 0;
        }
        //重新显示天空
        sky.show();
    }
    
    //大地
    var land = {
        dom: document.querySelector(".land"), //对应的dom对象
        width: 800, //宽度
        left: 0,
        timer: getTimer(20), //大地移动的计时器
        show: function () { //重新显示大地
            this.dom.style.left = this.left + "px";
        }
    }
    
    land.timer.onTick = function () {
        land.left -= 2;
        if (land.left <= -land.width) {
            land.left = 0;
        }
        //重新显示大地
        land.show();
    }
    
    //小鸟
    var bird = {
        dom: document.querySelector(".bird"),
        width: 33,
        height: 26,
        left: 200,
        top: 150,
        maxTop: 488 - 26,//top的最大值
        speed: 0, //当前速度：像素/秒
        g: 1200, //加速度：像素/秒²
        swingStatus: 0, //翅膀摆动的状态：0，1，2
        show: function () {
            //显示一只小鸟
            this.dom.style.top = this.top + "px";
            //根据swingStatus设置背景图位置
            if (this.swingStatus === 0) {
                this.dom.style.backgroundPosition = "-8px -10px";
            }
            else if (this.swingStatus === 1) {
                this.dom.style.backgroundPosition = "-60px -10px";
            }
            else {
                this.dom.style.backgroundPosition = "-113px -10px";
            }
        },
        swingTimer: getTimer(150), //煽动翅膀的计时器
        dropTimer: getTimer(20), //往下掉的计时器
        jump: function () {
            //往上跳
            bird.speed = -400;
        }
    }
    
    bird.swingTimer.onTick = function () {
        bird.swingStatus = (bird.swingStatus + 1) % 3;
        // bird.swingStatus++;
        // if (bird.swingStatus === 3) {
        //     bird.swingStatus = 0;
        // }
        bird.show();
    }
    
    bird.dropTimer.onTick = function () {
        var t = 0.02; //0.02秒移动一段
        var dis = bird.speed * t + 0.5 * bird.g * t * t; //距离
        var newSpeed = bird.speed + bird.g * t; //新的速度
        bird.top += dis; //更新坐标
        if (bird.top > bird.maxTop) {
            //超过了最大纵坐标
            bird.top = bird.maxTop;
        }
        bird.speed = newSpeed; //更新速度
        bird.show(); //重新显示
    }
    
    /**
     * 得到最小值到最大值之间的随机整数
     * @param {*} min 
     * @param {*} max 取不到
     */
    function getRandom(min, max) {
        //百度：产生一个最小值到最大值之间的随机数
        return Math.floor(Math.random() * (max - min)) + min;
    }
    
    /**
     * 得到一个新创建的柱子对
     */
    function createPipePair() {
        var pair = {
            left: sky.width, //横坐标
            width: 52,
            up: {//上边的柱子,
                dom: document.createElement("div")
            },
            down: {//下边的柱子
                dom: document.createElement("div")
            },
            show: function () {
                this.up.dom.style.height = this.up.height + "px";
                this.down.dom.style.height = this.down.height + "px";
    
                this.up.dom.style.left = this.down.dom.style.left = this.left + "px";
            }
        }
        //计算两个数字的高度
        var spaceHeight = 150;//空隙的高度
        var minHeight = 70;
        var maxHeight = sky.height - spaceHeight - minHeight;
        pair.up.height = getRandom(minHeight, maxHeight); //随机产生上面柱子的高度
        pair.down.height = sky.height - spaceHeight - pair.up.height; //求下面柱子的高度
        pair.up.top = 0;
        pair.down.top = pair.up.height + spaceHeight;
    
        //初始化设置dom对象
        pair.up.dom.className = "pipeup";
        pair.down.dom.className = "pipedown";
        game.dom.appendChild(pair.up.dom);
        game.dom.appendChild(pair.down.dom);
    
        pair.show();
    
        return pair;
    }
    
    //柱子对产生器
    var pairProducer = {
        pairs: [], //保存所有的柱子对
        produceTimer: getTimer(2000), //产生柱子对的计时器
        moveTimer: getTimer(20) //移动所有柱子的计时器
    }
    
    pairProducer.produceTimer.onTick = function () {
        var pair = createPipePair();
        pairProducer.pairs.push(pair);
    }
    
    pairProducer.moveTimer.onTick = function () {
        for (var i = 0; i < pairProducer.pairs.length; i++) {
            var pair = pairProducer.pairs[i];
            pair.left -= 2;
            //判断该柱子是否需要移除
            if (pair.left < -pair.width) {
                //移除？
                pairProducer.pairs.splice(i, 1); //从数组中删除
                i--;
                pair.up.dom.remove();
                pair.down.dom.remove();
            }
            pair.show();
        }
        gameJudgement();
    }
    
    //判定游戏结束
    function gameJudgement() {
        if (bird.top === bird.maxTop) {
            //游戏结束
            game.over();
            return;
        }
    
        //小鸟碰到柱子
        for (var i = 0; i < pairProducer.pairs.length; i++) {
            var pair = pairProducer.pairs[i]; //拿到一个柱子对
            //判断小鸟和pair是否碰撞
            if (isHit(pair)) {
                game.over();
            }
        }
    }
    /**
     * 判断小鸟和柱子对是否碰撞
     * @param {*} pair 
     */
    function isHit(pair) {
        var bx = bird.left + bird.width / 2;//鸟的中心点横坐标
        var by = bird.top + bird.height / 2; //鸟的中心点纵坐标
        var upx = pair.left + pair.width / 2; //上柱子中心点横坐标
        var downx = upx; //下柱子中心点横坐标
        var upy = pair.up.height / 2; //上柱子中心点纵坐标
        var downy = pair.down.top + pair.down.height / 2;
        var isHitUp = Math.abs(bx - upx) < (bird.width + pair.width) / 2 && Math.abs(by - upy) < (bird.height + pair.up.height) / 2;//是否和上边的柱子相交
        var isHitDown = Math.abs(bx - downx) < (bird.width + pair.width) / 2 && Math.abs(by - downy) < (bird.height + pair.down.height) / 2;//是否和上边的柱子相交
        return isHitUp || isHitDown;
    }
    
    //游戏对象
    var game = {
        dom: document.getElementById("game"),
        isStop: true, //是否已停止
        isOver: false, //是否游戏结束
        over: function () {   //游戏结束方法
            this.isOver = true;
            var divOver = document.querySelector(".over");
            divOver.style.display = "block";
            this.stop();
        },
        start: function () {
            sky.timer.start();
            land.timer.start();
            bird.swingTimer.start();
            bird.dropTimer.start();
            pairProducer.produceTimer.start();
            pairProducer.moveTimer.start();
            this.isStop = false;
        },
        stop: function () {
            sky.timer.stop();
            land.timer.stop();
            bird.swingTimer.stop();
            bird.dropTimer.stop();
            pairProducer.produceTimer.stop();
            pairProducer.moveTimer.stop();
            this.isStop = true;
        }
    }
    
    //事件
    window.onkeydown = function (e) {
        if (e.key === "Enter") {
            if (game.isOver) {
                //重新开始
                location.reload();
                return;
            }
            //按下的是回车
            if (game.isStop) {
                game.start();
            }
            else {
                game.stop();
            }
        }
        else if (e.key === " ") {
            //按下的是空格
            bird.jump();
        }
    }

代码要自己先看懂哦！  
拿走不谢！~~~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191109110153564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA==,size_16,color_FFFFFF,t_70