手把手教你原生js实现‘雷霆战机’

关注，不迷路，欢迎点关注

代码运行效果

整个代码的主要难度是理解，js操作dom的代码，如何灵活的添加元素，删除元素，样式的改变，添加class，等等，以及一些逻辑，另外则是理解定时器与计时器的创造与删除，鼠标事件函数，以及在子弹和敌机相遇时改变样式为爆炸，总体不难，创造的计时器必须在网页取消前删除掉。本文的css样式较多，就选择两个分开写的，本文中的飞机和爆炸的图片可以在百度搜索阿里巴巴矢量图标库下载，对于js还需多练。以下代码粘贴到编译器内，运行即可。

<!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>
 <link rel="stylesheet" type="text/css" href="flycss/style.css">
</head>
<body>
 <div class="wrap" id='wrapId'>
 <!-- 飞机 -->
 <div class="airplaneDiv" id="airplaneId"></div>
 </div>
 <script>
 var doc = document;
 function gId(n) {
 return doc.getElementById(n)
 }
 gId('wrapId').onmousemove = function(e) {
 var eL = e.pageX - gId('wrapId').offsetLeft - 20;
 var eT = e.pageY - gId('wrapId').offsetTop - 30;
 gId('airplaneId').style.left = eL + 'px';
 gId('airplaneId').style.top = eT + 'px';
 }
 // 生成子弹
 function creatFire(e) {
 var _fire = doc.createElement('div');
 _fire.style.left = e.pageX - gId('wrapId').offsetLeft + 'px';
 _fire.style.top = e.pageY - 80 + 'px';
 _fire.setAttribute('class', 'bulletDiv');
 gId('wrapId').appendChild(_fire);
 // 选出x轴线上所有的目标,然后进行坐标的比对
 var _fireTarget_X = [];
 var _lis1 = gId('wrapId').querySelectorAll('li')
 for (var c = 0; c < _lis1.length; c++) {
 if ((_fire.offsetLeft > _lis1[c].offsetLeft) &&
 (_fire.offsetLeft < (_lis1[c].offsetLeft + 30))) {
 _fireTarget_X.push(_lis1[c]);
 }
 }
 var n = _fire.offsetTop;
 var _s = setInterval(
 function() {
 _fire.style.top = n-- + 'px';
 if (_fireTarget_X.length >= 0) {
 for (var d = 0; d < _fireTarget_X.length; d++) {
 if ((n == _fireTarget_X[d].offsetTop) &&
 (_fireTarget_X[d].getAttribute('class') != 'targetDiv yes_boom')) {
 _fireTarget_X[d].setAttribute('class', 'targetDiv yes_boom')
 var _e = setTimeout(function() {
 gId('wrapId').removeChild(_fire);
 clearInterval(_s)
 clearTimeout(_e);
 }, 200)
 }
 }
 }
 if (n <= 0) {
 gId('wrapId').removeChild(_fire);
 clearInterval(_s);
 }
 }, 10)
 }
 // 生成敌军 列表数据
 function targetListObj() {
 var _arrs = [];
 for (var i = 0; i < 10; i++) {
 var _obj = {};
 _obj._x = Math.floor(Math.random() * 10);
 _obj._y = Math.floor(Math.random() * 10);
 _arrs.push(_obj)
 }
 creatTarget(_arrs);
 }
 // 这个方法相当于开始游戏的按钮
 targetListObj()
 // 生成各个子弹
 function creatTarget(_arrs) {
 for (var i = 0; i < _arrs.length; i++) {
 var _target = doc.createElement('li');
 _target.setAttribute('class', 'targetDiv no_boom');
 _target.style.left = _arrs[i]._x * 100 + 'px';
 gId('wrapId').appendChild(_target);
 }
 var _lis = gId('wrapId').querySelectorAll('li');
 var n = 0;
 var _t = setInterval(
 function() {
 for (var j = 0; j < _lis.length; j++) {
 _lis[j].style.top = (_arrs[j]._y++) * 5 + 'px';
 n++;
 if (n > 900) {
 clearInterval(_t)
 gId('wrapId').removeChild(_lis[j]);
 }
 }
 }, 100);
 }
 // 射击子弹
 gId('wrapId').onclick = function(e) {
 creatFire(e);
 }
 </script>
</body>
</html>

css样式

科技讯】6月4日消息，今天给大家带来双系统的雷霆战机破解版，可以随意刷宝箱刷装备。并且这个版本非常精简，喜欢的同学不要等啦。雷霆战机最新破解版发布，本次破解版为最新精简版可随意刷宝箱刷装备，使用苹果公司最新发布的Swift语言编写，加入防封代码无尽100万无异常，有兴趣的朋友可以下载试试。

安卓最新破解版 ios最新普通版

是否需要root权限：需要

是否需要越狱：需要

下载地址：【点我下载】

，

分源码

录制的一个演示视频，大家可以看一看

html5结合JavaScript写的太空袭击战手机飞机大战游戏，消灭敌机获得胜利。默认设置飞机等级、选择关卡、鼠标拉动战斗机，进行移动。

在线咨询

上一篇：HTML5开发常见的7个框架，不可不知，收藏啦
下一篇：《响应式开发》16个最佳响应式HTML5框架分享

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

手把手教你原生js实现‘雷霆战机’

您的项目需求