<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } #box { width: 320px; height: 568px; background: url('./images/bg.png') no-repeat; position: relative; left: 640px; overflow: hidden; } #me { width: 32px; height: 32px; background: url('./images/me.png') no-repeat; position: absolute; top: 570px; left: -640px; } </style> </head> <body> <div id='box'> <div id='me'></div> </div> <script> var box = document.getElementById('box'); var me = document.getElementById('me'); var bulletsBox = document.createElement('div'); bulletsBox.id = 'bulletsBox'; box.appendChild(bulletsBox); var foesBox = document.createElement('div'); foesBox.id = 'foesBox'; box.appendChild(foesBox); var num = 0; var flag; var arr = []; // 存放子弹的相关信息 'id|left|top' var arrF = []; //存放敌机的相关信息； box.onmousemove = function(e) { flag = true; // 鼠标进入背景区，飞机跟着鼠标移动 var x = e.pageX - box.offsetLeft - parseInt(me.offsetWidth / 2); var y = e.pageY; x = (x < 0) ? 0 :x; x = (x > box.offsetWidth - me.offsetWidth) ? box.offsetWidth - me.offsetWidth : x; y = (y < 0) ? 0 : y; y = (y > box.offsetHeight - me.offsetHeight) ? box.offsetHeight - me.offsetHeight: y; me.style.left = x + 'px'; me.style.top = y + 'px'; } // 创建子弹 setInterval(function() { if(flag) { // 创建子弹 var x = me.style.left; var y = me.style.top; if(num < 50) { var div = document.createElement('div'); div.id = 'bullet' + num; div.index = num; div.className = 'bullets'; div.style.width = 10 + 'px'; div.style.height = 10 + 'px'; div.style.background = 'url('+ './images/b.png' +') no-repeat'; div.style.position = 'absolute'; div.style.left = parseInt(x) + 10 + 'px'; div.style.top = y; arr.push(div.id + '|' + parseInt(x) + '|' + parseInt(y)); // "bullet0|167|385" // console.log(arr); bulletsBox.appendChild(div); // console.log(num); // 创建敌机 var xF = getRandom(0,box.offsetWidth-me.offsetWidth); var yF = 10; var div = document.createElement('div'); div.id = 'foe' + num; div.index = num; div.className = 'foes'; div.style.width = 32 + 'px'; div.style.height = 32 + 'px'; div.style.background = 'url('+ './images/foe.png' +') no-repeat'; div.style.position = 'absolute'; div.style.left = xF + 'px'; div.style.top = yF + 'px'; arrF.push(div.id + '|' + xF + '|' + yF); // "bullet0|167|385" // console.log(arrF); foesBox.appendChild(div); // console.log(num); } num++; } },700) // 让子弹运动 setInterval(function() { // 让子弹运动 for(var i = 0; i < arr.length; i++) { var step = 10; var newArr = arr[i].split('|'); var id = newArr[0]; var top = newArr[2]; var bullet = document.getElementById(id); top -= step; bullet.style.top = top + 'px'; arr[i] = id + '|' + newArr[1] + '|' + top; if(parseInt(bullet.style.top) < 0) { arr.splice(i,1); bullet.parentNode.removeChild(bullet); } } // 让敌机运动 for(var i = 0; i < arrF.length; i++) { var step = 10; var newArrF = arrF[i].split('|'); var id = newArrF[0]; var top = newArrF[2]; // 字符串 var foe = document.getElementById(id); top = parseInt(top) + step; foe.style.top = top + 'px'; arrF[i] = id + '|' + newArrF[1] + '|' + top; if(parseInt(foe.style.top) > box.offsetHeight - foe.offsetHeight) { arrF.splice(i,1); foe.parentNode.removeChild(foe); } } for(var i = 0;i < arr.length; i++) { var newArr = arr[i].split('|'); var id = newArr[0]; var top = parseInt(newArr[2]); var bullet = document.getElementById(id); for(var j = 0; j < arrF.length;j++) { var newArrF = arrF[j].split('|'); var idF = newArrF[0]; var topF = parseInt(newArrF[2]); var foe = document.getElementById(idF); if(parseInt(bullet.style.top) > parseInt(foe.style.top) - foe.offsetHeight && parseInt(bullet.style.top) < parseInt(foe.style.top) && parseInt(bullet.style.left) > parseInt(foe.style.left) && parseInt(bullet.style.left) < parseInt(foe.style.left) + foe.offsetWidth) { arr.splice(i,1); bullet.parentNode.removeChild(bullet); arrF.splice(j,1); foe.parentNode.removeChild(foe); } } } },100) // removeBF(); // function removeBF() { // for(var i = 0;i < arr.length; i++) { // var newArr = arr[i].split('|'); // var id = newArr[0]; // var top = parseInt(newArr[2]); // var bullet = document.getElementById(id); // for(var j = 0; j < arrF.length;j++) { // var newArrF = arrF[j].split('|'); // var idF = newArrF[j]; // var topF = parseInt(newArrF[2]); // var foe = document.getElementById(idF); // console.log('薰铉'); // if(parseInt(bullet.style.top) > parseInt(foe.style.top) - foe.offsetHeight && parseInt(bullet.style.top) < parseInt(foe.style.top) && parseInt(bullet.style.left) > parseInt(foe.style.left) && parseInt(bullet.style.left) < parseInt(foe.style.left) + foe.offsetWidth) { // console.log('238239'); // bullet.parentNode.removeChild(bullet); // arr.splice(i,1); // foe.parentNode.removeChild(foe); // arrF.splice(j,1); // } // } // } // } function getRandom(min,max) { return Math.floor(Math.random() * (max - min + 1) + min); } </script> </body> </html>
运行结果：
