飞机移动吐子弹

最新推荐文章于 2024-04-29 07:22:08 发布

Xzy_strive

最新推荐文章于 2024-04-29 07:22:08 发布

阅读量146

点赞数

分类专栏： DOM事件文章标签：飞机移动吐子弹

本文链接：https://blog.csdn.net/Xzy_strive/article/details/95312615

版权

DOM事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 <style>
        .plane {
            width: 66px;
            height: 80px;
            position: absolute;
            background-image: url(./imgs/own.png);
        }

        .bullet {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: blue;
            position: absolute;
            margin-left: -7px;
        }
    </style>

 <div class="plane"></div>
    <script>
        //mousemove
        var div = document.querySelector('.plane');
        //div跟随鼠标移动，
        window.onmousemove = function (evt) {
            //在此，我们需要知道与事件相关联的信息，通常这些信息被存放在事件对象上。
            //得到事件对象的方法为：
            //  1. 事件处理函数的参数     //现代浏览器获取方法
            //  2. window.event         //IE8及以前浏览器
            //  evt.clientX 客户区左上角坐标
            //  evt.clientY 客户区左上角坐标
            var x = evt.clientX - div.offsetWidth / 2;
            var y = evt.clientY - div.offsetHeight / 2;
			//鼠标为位置在div的中心
            div.style.left = x + 'px';
            div.style.top = y + 'px';
        }
        //定义一个创造子弹的函数
        function biuBiuBiu() {
            var bullet = document.createElement('div');
            //创造出来的div给同一个类
            bullet.className = 'bullet';
           //每个子弹的位置根据飞机定位
            bullet.style.left = div.offsetLeft + div.offsetWidth / 2 + 'px';
            bullet.style.top = div.offsetTop + 'px';
            //把子弹放在body里，不要放在飞机的盒子里
            document.body.appendChild(bullet)
        }
			//定义一个间隔函数创造子弹	
        setInterval(function () {
            biuBiuBiu();
            bulletFly();			//并让子弹向上移动
        }, 500)
			//定义一个间隔函数让子弹向上移动
        function bulletFly() {
            setInterval(function () {
            //统一子弹
                var bullets = document.querySelectorAll('.bullet');
                var currentTop;
				//遍历每个子弹，一起设定位置移动
                for (var i = 0; i < bullets.length; i++) {
                    currentTop = bullets[i].offsetTop;
                   //当判断条件满足时，移除子弹，要不然子弹会越来越多知道浏览器卡死
                    if (currentTop < -100) {
                        bullets[i].remove();
                    } else {
                  //当子弹移除时要把改变子弹位置的代码分开，用if和else分支
                        bullets[i].style.top = currentTop - 5 + 'px';
                    }
                }
            }, 16)
        }
    </script>