鼠标跟随小飞机，发射子弹

需求：小飞机跟随鼠标移动，会发射子弹

效果：

1. 小飞机会跟随鼠标移动。
2. 每隔一段时间小飞机会发射一枚子弹
3. 子弹会沿着发出时的位置向上移动

思路：

1. 开场一个div，设置背景图片为小飞机。（本项目只需要一个div标签，不做代码展示）
2. 设置鼠标移动事件，获取鼠标位置。
3. 设置小飞机位置跟随鼠标。
4. 设置间隔函数，动态获取子弹（即小球）。
5. 设置间隔函数，更改小球的垂直方向的位置。

CSS代码：

<style>
        body{background:wheat;}
        div {
            width: 66px;
            height: 80px;
            background: url(./imgs/own.png);	/*小飞机图片路径（自行寻找）*/
            position:absolute;					/*定位*/
            cursor:none;						/*设置鼠标状态：不显示*/
        }
    </style>

JS代码：

<script>
        var plane = document.querySelector('div')			//获取div
        window.onmousemove = function(evt){					//鼠标移动事件
            var e = evt || window.event;					//解决兼容性问题
            var x = e.clientX;													//获取鼠标坐标			
            var y = e.clientY;
            plane.style.top = y - plane.offsetHeight/2 + 'px';	//设置小飞机跟随
            plane.style.left = x - plane.offsetWidth/2 + 'px';
        }

        //每秒钟发出一个小球
        setInterval (function(){
        	//动态创建'子弹',并设置样式
            var ball = document.createElement('div');
            ball.style.width= '30px';
            ball.style.height= '30px';
            ball.style.borderRadius= '50%';
            ball.style.background= 'green';
            ball.style.position='absolute';

			//获取小球的水平垂直坐标
            ball.style.left = ((plane.offsetLeft)+(parseInt(ball.style.width)/2)) + 'px';
            ball.style.top = plane.offsetTop + 'px'
            var balltop = plane.offsetTop

            //小球相对body定位
            var body=document.querySelector('body')
            body.appendChild(ball);

            //小球每秒钟Y移动多少
            setInterval(function(){
                balltop -= 5
                ball.style.top=balltop + 'px';
            },16)

        },300)
    </script>

难点：

1. 小飞机跟随鼠标，位置居中
2. 需要两个间隔函数，一个控制小球创建，一个控制小球移动
3. 小球位置添加到body上
4. 兼容性问题