JavaScript—飞机大战
今天来写个游戏,飞机大战
1,布局
2,思路
1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动。
2,在自己飞机的上方,间隔1s生成子弹。子弹往上移动 当top:0 子弹消失
3,每隔1s 产生敌机 top 0,left 随机,敌机向下移动,敌机超过边距时。敌机消失。
4,子弹和敌机相遇时。子弹和敌机同时消失
3,代码
1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动。
let view = document.getElementById('view'); // 创建自己的飞机 let air = document.createElement('div'); air.id = 'air' document.body.appendChild(air) document.onmousemove = function (e) { e = e || window.event // 边距 let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight if (aX&&aY) { air.style.left = e.clientX - air.offsetWidth / 2 + 'px'; air.style.top = e.clientY - air.offsetHeight / 2 + 'px' } }
2,在自己飞机的上方,间隔1s生成子弹。子弹往上移动 当top:0 子弹消失
//获取区域 let view = document.getElementById('view'); // 创建自己的飞机 let air = document.createElement('div'); air.id = 'air' document.body.appendChild(air) document.onmousemove = function (e) { e = e || window.event // 边距 let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight if (aX && aY) { air.style.left = e.clientX - air.offsetWidth / 2 + 'px'; air.style.top = e.clientY - air.offsetHeight / 2 + 'px' ObJ_billet.bif=true } } let caerBl_time=setInterval( function () { if (ObJ_billet.bif){ //在自己飞机的上方 caeationBillet() } },1000 ) //用来保存子弹数据 let ObJ_billet = { name: 'billet_', num: 0, //是否在区域 bif:false, arr: []//保存id,xy坐标 } function run_Billet(bl,i) { let runBl_time=setInterval(function () { bl.style.top=bl.offsetTop-1+'px' ObJ_billet.arr[i] = bl.id + '|' +bl.offsetLeft + '|' +bl.offsetTop if (bl.offsetTop<0){ bl.parentNode.removeChild(bl); clearInterval(runBl_time) } },30) } //xy 坐标 function caeationBillet() { let billet = document.createElement('div') billet.className = 'bullet' billet.id = ObJ_billet.name + ObJ_billet.num; document.body.appendChild(billet) //子弹在飞机上方 billet.style.left = air.offsetLeft+air.offsetWidth/2+ 'px' billet.style.top =air.offsetTop-billet.offsetHeight-1+ 'px' //保存数据 ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' +billet.offsetLeft + '|' +billet.offsetTop //子弹运动 run_Billet(billet,ObJ_billet.num) // 自增1 ObJ_billet.num+=1 //挡子弹有最多100个 if (ObJ_billet.num>=100){ ObJ_billet.num=0; } }
3,每隔1s 产生敌机 top 0,left 随机,敌机向下移动,敌机超过边距时。敌机消失。
<script> //获取区域 let view = document.getElementById('view'); // 创建自己的飞机 let air = document.createElement('div'); air.id = 'air' document.body.appendChild(air) document.onmousemove = function (e) { e = e || window.event // 边距 let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight if (aX && aY) { air.style.left = e.clientX - air.offsetWidth / 2 + 'px'; air.style.top = e.clientY - air.offsetHeight / 2 + 'px' ObJ_billet.bif=true } } let caerBl_time=setInterval( function () { if (ObJ_billet.bif){ //在自己飞机的上方 caeationBillet() caeationHair() } },1000 ) //用来保存子弹数据 let ObJ_billet = { name: 'billet_', num: 0, //是否在区域 bif:false, arr: []//保存id,xy坐标 } let ObJ_Hair = { name: 'hair_', num: 0, arr: []//保存id,xy坐标 } // 子弹运动 function run_Billet(element,i) { let runBl_time=setInterval(function () { element.style.top=element.offsetTop-1+'px' ObJ_billet.arr[i] = element.id + '|' +element.offsetLeft + '|' +element.offsetTop // 超出边界消失 if (element.offsetTop<0){ element.parentNode.removeChild(element); clearInterval(runBl_time) } },30) } // 敌机运动 function run_Hair(element,i) { let runHair_time=setInterval(function () { element.style.top=element.offsetTop+1+'px' ObJ_Hair.arr[i] = element.id + '|' +element.offsetLeft + '|' +element.offsetTop // 超出边界消失 if (element.offsetTop>view.offsetHeight-element.offsetHeight){ element.parentNode.removeChild(element); clearInterval(runHair_time) } },30) } //创建子弹 function caeationBillet() { let billet = document.createElement('div') billet.className = 'bullet' billet.id = ObJ_billet.name + ObJ_billet.num; document.body.appendChild(billet) //子弹在飞机上方 billet.style.left = air.offsetLeft+air.offsetWidth/2+ 'px' billet.style.top =air.offsetTop-billet.offsetHeight-1+ 'px' //保存数据 ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' +billet.offsetLeft + '|' +billet.offsetTop //子弹运动 run_Billet(billet,ObJ_billet.num) // 自增1 ObJ_billet.num+=1 //挡子弹有最多100个 if (ObJ_billet.num>=100){ ObJ_billet.num=0; } } // 创建敌机 function caeationHair() { let hair = document.createElement('div') hair.className = 'hair' hair.id = ObJ_Hair.name + ObJ_Hair.num; view.appendChild(hair) //飞机由上往下 left随机大小0到view宽度 let random_L=randomNum(0,view.offsetWidth-hair.offsetWidth) hair.style.left = random_L+ 'px' hair.style.top =0+ 'px' ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' +hair.offsetLeft + '|' +hair.offsetTop run_Hair(hair,ObJ_Hair.num) // 自增1 ObJ_Hair.num+=1 //飞机有最多100个 if (ObJ_Hair.num>=100){ ObJ_Hair.num=0; } } //生成从minNum到maxNum的随机数 function randomNum(minNum,maxNum){ return parseInt(Math.random()*(maxNum-minNum+1)+minNum) } </script>
4,子弹和敌机相遇时。子弹和敌机同时消失
//搜索所有的子弹,相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you top 子弹<=飞机
ript> //获取区域 let view = document.getElementById('view'); // 创建自己的飞机 let air = document.createElement('div'); air.id = 'air' document.body.appendChild(air) document.onmousemove = function (e) { e = e || window.event // 边距 let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight if (aX && aY) { air.style.left = e.clientX - air.offsetWidth / 2 + 'px'; air.style.top = e.clientY - air.offsetHeight / 2 + 'px' ObJ_billet.bif = true } } let caerBl_time = setInterval( function () { if (ObJ_billet.bif) { //在自己飞机的上方 caeationBillet() caeationHair() //搜索所有的子弹,相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you top 子弹<=飞机 for (let i = 0; i < ObJ_billet.arr.length; i++) { let barr=ObJ_billet.arr[i].split('|') for (let j=0;j<ObJ_Hair.arr.length;j++){ let harr=ObJ_Hair.arr[j].split('|')//id x y if (document.getElementById(barr[0])&&document.getElementById(harr[0])){ let yif=parseInt(barr[2])<=parseInt(harr[2]) //Y相遇 let xif=parseInt(barr[1])>=parseInt(harr[1])&&parseInt(barr[1])<=parseInt(harr[1])+34 if (yif&&xif){ //消失元素 关闭记时器 let billet_a=document.getElementById(barr[0]) let hair_a=document.getElementById(harr[0])//获取敌机 billet_a.parentNode.removeChild(billet_a)//删除子弹 hair_a.parentNode.removeChild(hair_a)//删除敌机 clearInterval(runBl_time) clearInterval(runHair_time) }} } } } }, 1000) //用来保存子弹数据 let ObJ_billet = { name: 'billet_', num: 0, bif: false, //是否在区域 arr: []//保存id,xy坐标 } let ObJ_Hair = { name: 'hair_', num: 0, arr: []//保存id,xy坐标 } let runBl_time=null;//子弹定时器 let runHair_time=null;//飞机定时器 // 子弹运动 function run_Billet(element, i) { runBl_time = setInterval(function () { element.style.top = element.offsetTop - 1 + 'px' ObJ_billet.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop // 超出边界消失 if (element.offsetTop < 0) { element.parentNode.removeChild(element); clearInterval(runBl_time) } }, 30) } // 敌机运动 function run_Hair(element, i) { runHair_time = setInterval(function () { element.style.top = element.offsetTop + 1 + 'px' ObJ_Hair.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop + '|' + '' // 超出边界消失 if (element.offsetTop > view.offsetHeight - element.offsetHeight) { element.parentNode.removeChild(element); clearInterval(runHair_time) } }, 30) } //创建子弹 function caeationBillet() { let billet = document.createElement('div') billet.className = 'bullet' billet.id = ObJ_billet.name + ObJ_billet.num; document.body.appendChild(billet) //子弹在飞机上方 billet.style.left = air.offsetLeft + air.offsetWidth / 2 + 'px' billet.style.top = air.offsetTop - billet.offsetHeight - 1 + 'px' //保存数据 ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' + billet.offsetLeft + '|' + billet.offsetTop + '|' + '1' //子弹运动 run_Billet(billet, ObJ_billet.num) // 自增1 ObJ_billet.num += 1 //挡子弹有最多100个 if (ObJ_billet.num >= 100) { ObJ_billet.num = 0; } } // 创建敌机 function caeationHair() { let hair = document.createElement('div') hair.className = 'hair' hair.id = ObJ_Hair.name + ObJ_Hair.num; document.body.appendChild(hair) //飞机由上往下 left随机大小0到view宽度 let random_L = randomNum(view.offsetLeft, view.offsetLeft + view.offsetWidth - hair.offsetWidth) hair.style.left = random_L + 'px' hair.style.top = 0 + 'px' ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' + hair.offsetLeft + '|' + hair.offsetTop run_Hair(hair, ObJ_Hair.num) // 自增1 ObJ_Hair.num += 1 //飞机有最多100个 if (ObJ_Hair.num >= 100) { ObJ_Hair.num = 0; } } //生成从minNum到maxNum的随机数 function randomNum(minNum, maxNum) { return parseInt(Math.random() * (maxNum - minNum + 1) + minNum) }
总结
BUG 有点多 效果可以实现 有点卡顿 等我调试 调试 大战BUG