整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
關(guān)注，不迷路，歡迎點(diǎn)關(guān)注
代碼運(yùn)行效果
整個(gè)代碼的主要難度是理解，js操作dom的代碼，如何靈活的添加元素，刪除元素，樣式的改變，添加class，等等，以及一些邏輯，另外則是理解定時(shí)器與計(jì)時(shí)器的創(chuàng)造與刪除，鼠標(biāo)事件函數(shù)，以及在子彈和敵機(jī)相遇時(shí)改變樣式為爆炸，總體不難，創(chuàng)造的計(jì)時(shí)器必須在網(wǎng)頁(yè)取消前刪除掉。本文的css樣式較多，就選擇兩個(gè)分開(kāi)寫(xiě)的，本文中的飛機(jī)和爆炸的圖片可以在百度搜索阿里巴巴矢量圖標(biāo)庫(kù)下載，對(duì)于js還需多練。以下代碼粘貼到編譯器內(nèi)，運(yùn)行即可。
<!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'>
<!-- 飛機(jī) -->
<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軸線上所有的目標(biāo),然后進(jìn)行坐標(biāo)的比對(duì)
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)
}
// 生成敵軍 列表數(shù)據(jù)
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);
}
// 這個(gè)方法相當(dāng)于開(kāi)始游戲的按鈕
targetListObj()
// 生成各個(gè)子彈
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日消息，今天給大家?guī)?lái)雙系統(tǒng)的雷霆戰(zhàn)機(jī)破解版，可以隨意刷寶箱刷裝備。并且這個(gè)版本非常精簡(jiǎn)，喜歡的同學(xué)不要等啦。 雷霆戰(zhàn)機(jī)最新破解版發(fā)布，本次破解版為最新精簡(jiǎn)版可隨意刷寶箱刷裝備，使用蘋(píng)果公司最新發(fā)布的Swift語(yǔ)言編寫(xiě)，加入防封代碼無(wú)盡100萬(wàn)無(wú)異常，有興趣的朋友可以下載試試。
安卓最新破解版 ios最新普通版
是否需要root權(quán)限：需要
是否需要越獄：需要
下載地址：【點(diǎn)我下載】
下載地址：【點(diǎn)我下載】
，
分源碼
錄制的一個(gè)演示視頻，大家可以看一看
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
html5結(jié)合JavaScript寫(xiě)的太空襲擊戰(zhàn)手機(jī)飛機(jī)大戰(zhàn)游戲，消滅敵機(jī)獲得勝利。默認(rèn)設(shè)置飛機(jī)等級(jí)、選擇關(guān)卡、鼠標(biāo)拉動(dòng)戰(zhàn)斗機(jī)，進(jìn)行移動(dòng)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
