前端案例：飞机大战( js+dom 操作，代码完整)

目录

一、案例效果

二、实现思路

三、完整代码+详细注释

四、涉及要点

---

一、案例效果

二、实现思路

• 创建游戏背景板；
• 创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove
• 创建子弹，让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动，top 小于 0 也就是子弹走出游戏面板时删除自身；
• 创建敌机，让敌机周期性的在游戏背景板左侧的随机距离的位置产生，并让其向 top 增加的方向(向下)移动；
• 定义函数，子弹和敌机相遇时消失。

条件：所有的元素都只在鼠标进入游戏背景区域时才触发运动。

三、完整代码+详细注释

四、涉及要点

鼠标进入游戏界面时触发元素运动

dom 事件 onmousemove 当指针在元素上方移动时，发生此事件。

创建战机、子弹

document.createElement(element)

创建 HTML 元素，可以 element.id、element.style、element.innerHTML 等为其设置相关属性；

//创建我方战机
var fly = document.createElement('div'); //创建一个div
fly.id = 'my_fly'; //为div添加id名

删除战机、子弹

document.removeChild(element)

删除 HTML 元素，可以结合父元素 parentNode 使用，如我们删除走出游戏面板的子弹，先找到子弹，再删除该子弹自身，其实就是删除该元素的父元素的子元素；

var delEle = document.getElementById(newArr[0]); //获取走出面板的子弹
delEle.parentNode.removeChild(delEle); //删除自身

将创建的 dom 元素追加到页面

document.appendChild(element)

添加 HTML 元素， 每一个创建完的 dom 元素都需要添加后才能显示，如我们将创建的我方战机添加到 body 中；

document.body.appendChild(fly); //将刚创建的div追加到body中