JavaScript小鸟起飞案例

关注

原创最新推荐文章于 2025-10-28 11:41:21 发布 716 阅读 AI 写同款· GEO 优化 ›

JavaScript实现Fly Bird小游戏 JavaScript实现Fly Bird小游戏 1.分析页面结构，理清需求和功能游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。 1.1 开始界面游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟 start 按钮，点击进入游戏界面一直移动的地面 1.2 游戏界面显示越过障碍数量的计分器移动的障碍物，分别是上管道和下管道点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面 1.3 结束界面... 阅读详情

js中如果涉及到元素移动建议大家使用定位

1、开始起飞(从左往右飞)

实现步骤

点击按钮改变img的left值
left值 = 在当前left值的基础上 + 10
开启定时器自动移动图片位置

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0px;
        }
    </style>
</head>

<body>
    <button>开始飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button")[0];
        var oImg = document.getElementsByTagName("img")[0];
        // 2.点击事件
        btn.onclick = function () {

            setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                oImg.style.left = current + "px";
            }, 50)

        }
    </script>

</body>

问题1 一直飞飞出屏幕

解决: 限制飞的范围当飞到1000px的手停止定时器

// 2.点击事件
        btn.onclick = function () {

           var timer =  setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if(current>=1000){
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)

        }

问题2 多次点击速度越来愉快

分析原因: 每次点击都会定义一个定时器多次点击会导致定时器累加会累加执行
解决方法:每次点击的时候先把原先的定时器清除掉

<script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button")[0];
        var oImg = document.getElementsByTagName("img")[0];
        
        var timer;
        // 2.点击事件
        btn.onclick = function () {
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer =  setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if(current>=1000){
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)
        }
    </script>

2、来回飞(从右往左飞)

实现步骤
- 在left值的基础上 -10
问题1:解决目标值的问题飞到0就停止

// 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
          
            timer =  setInterval(function () {
                // 在当前left值的基础上-10
                var current = parseInt(getStyle(oImg, "left")) - 10;
                //判断目标值
                if(current<=0){
                    current=0;
                    clearInterval(timer);
                }
                oImg.style.left = current + "px"
            }, 50)

        }

问题1 如果点击开始起飞但是飞到一半就返回和越飞越快的问题
解决方法让开始起飞和结束起飞共用一个定时器每次点击的时候都清除定时器

<script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if (current >= 1000) {
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)
        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
            clearInterval(timer);
            timer =  setInterval(function () {
                // 在当前left值的基础上-10
                var current = parseInt(getStyle(oImg, "left")) - 10
                if(current<=0){
                    current=0;
                    clearInterval(timer);
                }
                oImg.style.left = current + "px"
            }, 50)

        }
    </script>

小鸟起飞函数封装

基础封装

<body>
    <button>开始飞</button>
    <button>往回飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            move(oImg, "left", 10, 1000)

        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
            move(oImg, "left", -10, 0)
        }
        // 3.基础封装
        /* 
                封装的步骤
                    1.先声明一个函数  将主要代码放入到函数中
                    2.找函数中可变的值   作为函数参数代入到函数中
                    3.调用调试
        */

        function move(elem, attr, step, target) {
            /* 
               elem  操作的元素
               attr  属性
               step  步长  可以是正数  也可以是负数   +  10   + -10
               target  目标值
            */
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step

               	if(current>=target){
                  current = target;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>

</body>

解决目标值

问题1:目标值问题
分析原因
- 开始飞 if (current >= target)
- 往回飞 if (current <= target)
解决方法:根据step判断
开始飞 step 10 > 0
往回飞 step 10 < 0

<body>
    <button>开始飞</button>
    <button>往回飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            move(oImg, "left", 10, 1000)
        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";

            move(oImg, "left", -10, 0)

        }

        /*
            问题1:目标值问题
            分析原因
                    开始飞     if (current >= target)
                    往回飞     if (current <= target)
            解决方法
                    根据step判断
                        开始飞  step 10  > 0
                        往回飞  step 10 < 0
        */

        function move(elem, attr, step, target) {
            /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step

                if (step > 0 && current >= target) {
                    current = target;
                    // 停止定时器
                    clearInterval(timer)
                } else if (step < 0 && current <= target) {
                    current = target;
                    clearInterval(timer);
                }

                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>

</body>

解决step正负数问题

问题2:用户不考虑step正负数的问题
解决方法：判断current值和target值 current target
- 开始飞 0 < 1000 +step
- 往回飞 1000 > 0 - step

<body>
    <button>开始飞</button>
    <button>往回飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            move(oImg, "left", 10, 1000)
        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";

            move(oImg, "left", 10, 0)

        }
        /*
            问题1:目标值问题
            分析原因
                    开始飞     if (current >= target)
                    往回飞     if (current <= target)
            解决方法
                    根据step判断
                        开始飞  step 10  > 0
                        往回飞  step 10 < 0
        */
        /*
            问题2:用户不考虑step正负数的问题
            解决方法
                 current     target
            开始飞   0    <    1000       +step
            往回飞  1000   >     0         -step
        */ 

        function move(elem, attr, step, target) {
            /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
          	//解决步长
            step =  parseInt( getStyle(elem,attr) ) < target ? step:-step
           
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step
								//解决目标值
                if (step > 0 && current >= target) {
                    current = target;
                    // 停止定时器
                    clearInterval(timer)
                } else if (step < 0 && current <= target) {
                    current = target;
                    clearInterval(timer);
                }
                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>
</body>

函数封装最终版

common.js

/* 
    *author  李某某
    *作用     让样式运动
    * params   elem                  标签
    * params   attr     string类型   样式名
    * params   step      numbre类型   步长
    * params   target    number类型   目标值

*/
function move(elem, attr, step, target) {
    /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
    step =  parseInt( getStyle(elem,attr) ) < target ? step:-step
    clearInterval(elem.timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
    elem.timer = setInterval(function () {  //将定时器id存储到标签的自定义属性timer上
        // 在left值的基础上+10    先获取到left值
        var current = parseInt(getStyle(elem, attr)) + step

        if (step > 0 && current >= target) {
            current = target;
            // 停止定时器
            clearInterval(elem.timer)
        } else if (step < 0 && current <= target) {
            current = target;
            clearInterval(elem.timer);
        }
        elem.style[attr] = current + "px";
    }, 50)
}

在页面中使用

<script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0];
        btn.onclick = function(){
            // move(oDiv,"width",20,500);
            move(oDiv,"height",10,100);
        }
    </script>