前端飞机大战小游戏

前端飞机大战小游戏

首页枪战射击飞机大战游戏更新时间:2024-05-11
一、案例效果

点击打开视频讲解更加详细

二、实现思路

- 创建游戏背景板;

- 创建我方战机,鼠标进入游戏面板后其随鼠标轨迹运动; onmousemove

- 创建子弹,让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动,top 小于 0 也就是子弹走出游戏面板时删除自身;

- 创建敌机,让敌机周期性的在游戏背景板左侧的随机距离的位置产生,并让其向 top 增加的方向(向下)移动;

- 定义函数,子弹和敌机相遇时消失。

条件:所有的元素都只在鼠标进入游戏背景区域时才触发运动。

三、完整代码 详细注释

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style> * { margin: 0; padding: 0; } /* 背景 */ #background { width: 320px; height: 580px; background-image: url(./img/bg.jpg); margin: auto; } /* 我方飞机 */ #my_fly { width: 30px; height: 30px; position: absolute; cursor: pointer; } </style> </head> <body> <!-- 游戏面板 --> <div id="background"></div> </body> <script> //创建我方战机 var fly = document.createElement('div'); //创建一个div fly.id = 'my_fly'; //为div添加id名 fly.innerHTML = '<img src ="./img/my_fly.png" width=30px height=30px>'; //在div中插入飞机的图片 document.body.appendChild(fly); //将刚创建的div追加到body中 //使飞机鼠标跟随 document.onmousemove = function (e) { //onmousemove 当鼠标移动时触发事件 var fly = document.getElementById('my_fly'); //获取我方战机 var bg = document.getElementById('background'); //获取背景 var fly_X = e.clientX - 20; //获取鼠标的坐标 -20是减去飞机宽高的一半,以达到飞机中心与鼠标对应 var fly_Y = e.clientY - 20; //游戏背景的区域 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) { //只有在游戏背景区域内飞机才跟随鼠标移动 fly.style.top = fly_Y 'px'; //将鼠标此时的坐标赋值给我方飞机 fly.style.left = fly_X 'px'; //此时飞机跟随鼠标移动,我们为该行为定义一个属性 fly.follow = true; //今后follow为true则代表飞机可跟随鼠标移动,false则相反 } } //创建子弹 var objB = { //子弹相关变量 name: 'bullet', //名称 num: 1, //数量 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) { //当飞机可跟随鼠标移动时可以发射子弹 var bull = document.createElement('div'); //创建div元素作为子弹 bull.id = obj.name obj.num; //子弹的id名随创建数量不断变化(因为id值唯一) 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 = parseInt(fly.style.top) 'px'; //子弹发出的位置 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) } //让子弹运动起来 function moveBullet() { var fly = document.getElementById('my_fly'); if (fly.follow) { for (var i = 0; i < objB.arr.length; i ) { //遍历子弹的对象 var newArr = objB.arr[i].split('|'); //将数组arr中的元素切割出来放入新数组 var eleB = document.getElementById(newArr[0]); //切割后第0项为id 第一项为top 第二项为left newArr[1] = parseInt(newArr[1]) - 1; //数组第一项为top,不断减1则子弹便会向上运动 eleB.style.top = newArr[1] 'px'; objB.arr[i] = newArr[0] '|' newArr[1] '|' newArr[2]; if (newArr[1] < 0) { //第一项为top,当top小于0 也就是子弹走出游戏面板时删除该子弹 objB.arr.splice(i, 1); var delEle = document.getElementById(newArr[0]); //获取走出面板的子弹 delEle.parentNode.removeChild(delEle); //删除自身 } } } } //创建敌机(与创建子弹类似) var objF = { //敌机相关变量 name: 'foe', //名称 num: 1, //数量 arr: [], //敌机的属性['id|top|left'] width: 34, //敌机宽 height: 24, //敌机高 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) { //当飞机可跟随鼠标移动时出现敌机 var bull = document.createElement('div'); //创建div元素作为敌机 bull.id = obj.name obj.num; //子弹的id名随创建数量不断变化(因为id值唯一) 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; //敌机的顶部初始位置为0 obj.arr[length] = obj.arr[length] bull.style.top '|'; bull.style.left = bg.offsetLeft 290 * Math.random() 'px'; //敌机的左侧初始位置为随机 obj.arr[length] = obj.arr[length] bull.style.left; } document.body.appendChild(bull); //将敌机添加到body } }, 1000) } //让敌机运动起来 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 ) { //遍历敌机的对象 var newArr = objF.arr[i].split('|'); //将数组arr中的元素切割出来放入新数组 var eleB = document.getElementById(newArr[0]); //切割后第0项为id 第一项为top 第二项为left newArr[1] = parseInt(newArr[1]) 1; //数组第一项为top,不断加1则飞机便会向下运动 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); } } } } //调用运动函数 setInterval(function () { moveBullet(); //子弹运动 moveFoe(); //敌机运动 //子弹和敌机相遇时消失 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>

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved