前端飞机大战小游戏

  • 前端飞机大战小游戏已关闭评论
  • 13 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细条件:所有的元素都只在鼠标进入游戏背景区域时才触发运动。


一、案例效果

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

前端飞机大战小游戏

二、实现思路

  • 创建游戏背景板;
  • 创建我方战机,鼠标进入游戏面板后其随鼠标轨迹运动; 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站一键三连哦!感谢支持!!!