前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)
生活随笔
收集整理的這篇文章主要介紹了
前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
一、案例效果
二、實(shí)現(xiàn)思路
三、完整代碼+詳細(xì)注釋
四、涉及要點(diǎn)
五、案例素材
一、案例效果
二、實(shí)現(xiàn)思路
- 創(chuàng)建游戲背景板；
- 創(chuàng)建我方戰(zhàn)機(jī)，鼠標(biāo)進(jìn)入游戲面板后其隨鼠標(biāo)軌跡運(yùn)動(dòng)；?onmousemove
- 創(chuàng)建子彈，讓子彈周期性的在戰(zhàn)機(jī)處發(fā)出并讓其向 top?值減小的方向(向上)移動(dòng)，top 小于 0 也就是子彈走出游戲面板時(shí)刪除自身；
- 創(chuàng)建敵機(jī)，讓敵機(jī)周期性的在游戲背景板左側(cè)的隨機(jī)距離的位置產(chǎn)生，并讓其向 top 增加的方向(向下)移動(dòng)；
- 定義函數(shù)，子彈和敵機(jī)相遇時(shí)消失。
條件：所有的元素都只在鼠標(biāo)進(jìn)入游戲背景區(qū)域時(shí)才觸發(fā)運(yùn)動(dòng)。
三、完整代碼+詳細(xì)注釋
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>飛機(jī)大戰(zhàn)</title><style>* {margin: 0;padding: 0;}/* 背景 */#background {width: 320px;height: 580px;background-image: url(./img/bg.jpg);margin: auto;}/* 我方飛機(jī) */#my_fly {width: 30px;height: 30px;position: absolute;cursor: pointer;}</style> </head><body><!-- 游戲面板 --><div id="background"></div> </body> <script>//創(chuàng)建我方戰(zhàn)機(jī)var fly = document.createElement('div'); //創(chuàng)建一個(gè)divfly.id = 'my_fly'; //為div添加id名fly.innerHTML = '<img src ="./img/my_fly.png" width=30px height=30px>'; //在div中插入飛機(jī)的圖片document.body.appendChild(fly); //將剛創(chuàng)建的div追加到body中//使飛機(jī)鼠標(biāo)跟隨document.onmousemove = function (e) { //onmousemove 當(dāng)鼠標(biāo)移動(dòng)時(shí)觸發(fā)事件var fly = document.getElementById('my_fly'); //獲取我方戰(zhàn)機(jī)var bg = document.getElementById('background'); //獲取背景var fly_X = e.clientX - 20; //獲取鼠標(biāo)的坐標(biāo) -20是減去飛機(jī)寬高的一半，以達(dá)到飛機(jī)中心與鼠標(biāo)對(duì)應(yīng)var fly_Y = e.clientY - 20;//游戲背景的區(qū)域var bgX = fly_X > bg.offsetLeft && fly_X < bg.offsetLeft + bg.offsetWidth - 30;var bgY = fly_Y > bg.offsetTop && fly_Y < bg.offsetTop + bg.offsetHeight - 30;if (bgX && bgY) { //只有在游戲背景區(qū)域內(nèi)飛機(jī)才跟隨鼠標(biāo)移動(dòng)fly.style.top = fly_Y + 'px'; //將鼠標(biāo)此時(shí)的坐標(biāo)賦值給我方飛機(jī)fly.style.left = fly_X + 'px';//此時(shí)飛機(jī)跟隨鼠標(biāo)移動(dòng)，我們?yōu)樵撔袨槎x一個(gè)屬性fly.follow = true; //今后follow為true則代表飛機(jī)可跟隨鼠標(biāo)移動(dòng)，false則相反}}//創(chuàng)建子彈var objB = { //子彈相關(guān)變量name: 'bullet', //名稱num: 1, //數(shù)量arr: [], //子彈的屬性['id|top|left']width: 5, //子彈寬height: 10, //子彈高path: './img/bullet.png'}creatBullet(objB);function creatBullet(obj) {setInterval(function () {var fly = document.getElementById('my_fly');if (fly.follow) { //當(dāng)飛機(jī)可跟隨鼠標(biāo)移動(dòng)時(shí)可以發(fā)射子彈var bull = document.createElement('div'); //創(chuàng)建div元素作為子彈bull.id = obj.name + obj.num; //子彈的id名隨創(chuàng)建數(shù)量不斷變化(因?yàn)閕d值唯一)var length = obj.arr.length;if (length < 40) {obj.arr[length] = bull.id + '|';obj.num++;bull.style.width = obj.width + 'px'; //子彈的相關(guān)屬性bull.style.height = obj.height + 'px';bull.style.position = 'absolute';bull.style.background = 'url(' + obj.path + ')';bull.style.top = parseInt(fly.style.top) + 'px'; //子彈發(fā)出的位置obj.arr[length] = obj.arr[length] + bull.style.top + '|';bull.style.left = parseInt(fly.style.left) + 12 + 'px';obj.arr[length] = obj.arr[length] + bull.style.left;}document.body.appendChild(bull); //將子彈添加到body}}, 700)}//讓子彈運(yùn)動(dòng)起來(lái)function moveBullet() {var fly = document.getElementById('my_fly');if (fly.follow) {for (var i = 0; i < objB.arr.length; i++) { //遍歷子彈的對(duì)象var newArr = objB.arr[i].split('|'); //將數(shù)組arr中的元素切割出來(lái)放入新數(shù)組var eleB = document.getElementById(newArr[0]);//切割后第0項(xiàng)為id 第一項(xiàng)為top 第二項(xiàng)為left newArr[1] = parseInt(newArr[1]) - 1; //數(shù)組第一項(xiàng)為top，不斷減1則子彈便會(huì)向上運(yùn)動(dòng)eleB.style.top = newArr[1] + 'px';objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];if (newArr[1] < 0) { //第一項(xiàng)為top，當(dāng)top小于0 也就是子彈走出游戲面板時(shí)刪除該子彈objB.arr.splice(i, 1);var delEle = document.getElementById(newArr[0]); //獲取走出面板的子彈delEle.parentNode.removeChild(delEle); //刪除自身}}}}//創(chuàng)建敵機(jī)（與創(chuàng)建子彈類似）var objF = { //敵機(jī)相關(guān)變量name: 'foe', //名稱num: 1, //數(shù)量arr: [], //敵機(jī)的屬性['id|top|left']width: 34, //敵機(jī)寬height: 24, //敵機(jī)高path: './img/he_fly.png'}creatFoe(objF);function creatFoe(obj) {setInterval(function () {var fly = document.getElementById('my_fly');var bg = document.getElementById('background'); //獲取背景if (fly.follow) { //當(dāng)飛機(jī)可跟隨鼠標(biāo)移動(dòng)時(shí)出現(xiàn)敵機(jī)var bull = document.createElement('div'); //創(chuàng)建div元素作為敵機(jī)bull.id = obj.name + obj.num; //子彈的id名隨創(chuàng)建數(shù)量不斷變化(因?yàn)閕d值唯一)var length = obj.arr.length;if (length < 40) {obj.arr[length] = bull.id + '|';obj.num++;bull.style.width = obj.width + 'px';bull.style.height = obj.height + 'px';bull.style.position = 'absolute';bull.style.background = 'url(' + obj.path + ')';bull.style.top = 0; //敵機(jī)的頂部初始位置為0obj.arr[length] = obj.arr[length] + bull.style.top + '|';bull.style.left = bg.offsetLeft + 290 * Math.random() + 'px'; //敵機(jī)的左側(cè)初始位置為隨機(jī)obj.arr[length] = obj.arr[length] + bull.style.left;}document.body.appendChild(bull); //將敵機(jī)添加到body}}, 1000)}//讓敵機(jī)運(yùn)動(dòng)起來(lái)function moveFoe() {var fly = document.getElementById('my_fly');var bg = document.getElementById('background'); //獲取背景if (fly.follow) {for (var i = 0; i < objF.arr.length; i++) { //遍歷敵機(jī)的對(duì)象var newArr = objF.arr[i].split('|'); //將數(shù)組arr中的元素切割出來(lái)放入新數(shù)組var eleB = document.getElementById(newArr[0]);//切割后第0項(xiàng)為id 第一項(xiàng)為top 第二項(xiàng)為left newArr[1] = parseInt(newArr[1]) + 1; //數(shù)組第一項(xiàng)為top，不斷加1則飛機(jī)便會(huì)向下運(yùn)動(dòng)eleB.style.top = newArr[1] + 'px';objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];if (newArr[1] > bg.offsetLeft - 30) {objF.arr.splice(i, 1);var delEle = document.getElementById(newArr[0]);delEle.parentNode.removeChild(delEle);}}}}//調(diào)用運(yùn)動(dòng)函數(shù)setInterval(function () {moveBullet(); //子彈運(yùn)動(dòng)moveFoe(); //敵機(jī)運(yùn)動(dòng)//子彈和敵機(jī)相遇時(shí)消失for (var i = 0; i < objF.arr.length; i++) {var newArr = objF.arr[i].split('|');var eleF = document.getElementById(newArr[0]);var xFS = parseInt(newArr[2]);var xFE = parseInt(newArr[2]) + 34;var yFS = parseInt(newArr[1]);var yFE = parseInt(newArr[1]) + 24;for (var j = 0; j < objB.arr.length; j++) {var newArr1 = objB.arr[j].split('|');var eleB = document.getElementById(newArr1[0]);var xB = parseInt(newArr1[2]);var yB = parseInt(newArr1[1]);var xCheck = xB > xFS && xB < xFE;var yCheck = yB > yFS && yB < yFE;if (xCheck && yCheck) {objF.arr.splice(i, 1);eleF.parentNode.removeChild(eleF);objB.arr.splice(j, 1);eleB.parentNode.removeChild(eleB);}}}}, 10) </script></html>四、涉及要點(diǎn)
鼠標(biāo)進(jìn)入游戲界面時(shí)觸發(fā)元素運(yùn)動(dòng)
dom 事件?onmousemove?當(dāng)指針在元素上方移動(dòng)時(shí)，發(fā)生此事件。
創(chuàng)建戰(zhàn)機(jī)、子彈
document.createElement(element)
創(chuàng)建 HTML 元素，可以 element.id、element.style、element.innerHTML 等為其設(shè)置相關(guān)屬性；
//創(chuàng)建我方戰(zhàn)機(jī) var fly = document.createElement('div'); //創(chuàng)建一個(gè)div fly.id = 'my_fly'; //為div添加id名刪除戰(zhàn)機(jī)、子彈
document.removeChild(element)
刪除 HTML 元素，可以結(jié)合父元素?parentNode 使用，如我們刪除走出游戲面板的子彈，先找到子彈，再刪除該子彈自身，其實(shí)就是刪除該元素的父元素的子元素；
var delEle = document.getElementById(newArr[0]); //獲取走出面板的子彈 delEle.parentNode.removeChild(delEle); //刪除自身將創(chuàng)建的 dom 元素追加到頁(yè)面
document.appendChild(element)
添加 HTML 元素， 每一個(gè)創(chuàng)建完的 dom 元素都需要添加后才能顯示，如我們將創(chuàng)建的我方戰(zhàn)機(jī)添加到 body 中；
document.body.appendChild(fly); //將剛創(chuàng)建的div追加到body中五、案例素材
背景 bg.jpg
己方飛機(jī) my_fly.png
敵方飛機(jī) he_fly.png
子彈 bullet.png
總結(jié)
以上是生活随笔為你收集整理的前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【联盛德W806上手笔记】七、I2C
- 下一篇： snmp服务中snmpwalk命令常用方