前端飞机大战小游戏

一、案例效果

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

二、实现思路

• 创建游戏背景板；
• 创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove
• 创建子弹，让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动，top 小于 0 也就是子弹走出游戏面板时删除自身；
• 创建敌机，让敌机周期性的在游戏背景板左侧的随机距离的位置产生，并让其向 top 增加的方向(向下)移动；
• 定义函数，子弹和敌机相遇时消失。

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

三、完整代码+详细注释

           * {      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;    }       
  //创建我方战机  var fly = document.createElement('div'); //创建一个div  fly.id = 'my_fly'; //为div添加id名  fly.innerHTML = ''; //在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.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  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  xFS && xB  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) 

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