手把手教你原生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實現‘雷霆戰機’

您的項目需求