如何使用原生JS實現(xiàn)飛機大戰(zhàn)小游戲

發(fā)布時間：2021-06-09 14:21:41 來源：億速云閱讀：162 作者：小新欄目：開發(fā)技術(shù)
小編給大家分享一下如何使用原生JS實現(xiàn)飛機大戰(zhàn)小游戲，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
本文實例為大家分享了JS實現(xiàn)飛機大戰(zhàn)小游戲的具體代碼，供大家參考，具體內(nèi)容如下
<html>
 <head>
  <title> 飛機大戰(zhàn) </title>
  <style type="text/css"> 
 *{margin:0;padding:0;font-family:"Microsoft yahei"}
  body{overflow:hidden;;}
  </style>
 </head>

 <body>


  <script>
 window.onload = function(){
  Game.exe();
 };
 var Game = {
  //啟動程序
  exe :function(){
   document.body.style.background = '#fff';
   var oDiv = document.createElement('div');
    oDiv.id = 'GameBox';
    oDiv.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff';
   document.body.appendChild(oDiv);
   this.init();
  },

  score : 0 ,
  ifEnd : false,
  //初始化
  init: function(){
   
   var This = this;
   var oDiv = document.getElementById('GameBox');
   oDiv.innerHTML = '';
   Game.score = 0;
   Game.ifEnd = false;
   var oH = document.createElement('h2');
    oH.innerHTML = '飛機大戰(zhàn) v1.0';
    oH.style.cssText = 'color:#555555;font-size:30px;padding-top:50px;';
    oDiv.appendChild( oH );
   for (var i=0;i<4 ;i++ )
   {
    var oP = document.createElement('p');
     oP.index = i;
     oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;'
    var html = '';
    oP.onmouseenter = function(){
     this.style.background = '#ff9933';
     this.style.color = '##ff6600'
    };
    oP.onmouseleave = function(){
     this.style.background = '#999';
     this.style.color = 'white'
    };
    oP.onclick = function( e ){
     e = e || window.event;
     This.start( this.index , oDiv , e );
    };
    switch( i ){
     case 0:
      html = '簡單難度';
      break;
     case 1:
      html = '中等難度';
      break;
     case 2:
      html = '困難難度';
      break;
     case 3:
      html = '小天才附體';
      break;
    }
    oP.innerHTML = html;
    oDiv.appendChild(oP);

   };
  },
  //游戲開始
  start : function( index , oGameBox , e  ){
   oGameBox.innerHTML = '';

   var oS = document.createElement('span');
    oS.innerHTML = this.score;
    oS.style.cssText = 'position:absolute;left:20px;top:20px;font-size:14px;color:black;';
   oGameBox.appendChild( oS );
   this.plane( oGameBox , e ,index );
   this.enemy( oGameBox ,oS ,index );
  },
  //關(guān)于飛機
  plane : function( oGameBox , e ,index ){
   var x = e.pageX;
    y = e.pageY;
   var oPlane = new Image();
    oPlane.src = 'images/plane.png';
    oPlane.width = 60;
    oPlane.height = 36;
    oPlane.id = 'plane';
   var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
   var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   window.onresize = function(){
    lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   };
   var top = y- tY;
   var left = x- lX;
    oPlane.style.cssText = 'display:block;position:absolute;top:'+top+'px;left:'+left+'px;';
   oGameBox.appendChild( oPlane );
   
   var leftMin = - oPlane.width/2;
   var leftMax = oGameBox.clientWidth - oPlane.width/2;
   var topMin = 0;
   var topMax = oGameBox.clientHeight - oPlane.height;

   document.onmousemove = function(e){
    if( !Game.ifEnd )
    {

     e = e || window.event;
     var top = e.pageY -tY;
     var left = e.pageX -lX;

     top = Math.min( top , topMax );//取參數(shù)里最小的if( top > topMax )top = topMax;
     top = Math.max( top ,topMin );//取參數(shù)里最大的
     left = Math.min( left , leftMax );//取參數(shù)里最小的if( top > topMax )top = topMax;
     left = Math.max( left ,leftMin );

     oPlane.style.left = left + 'px';
     oPlane.style.top = top + 'px';
    }
   };
   this.biu( oPlane , oGameBox ,index );
  },

  biu : function( oPlane , oGameBox ,index ){
   var speed ;
   switch ( index )
   {
    case 0:
     speed = 30;
     break;
    case 1:
     speed = 40;
     break;
    case 2:
     speed = 50;
     break;
    case 3:
     speed = 10;
     break;
   
   }
   this.BiuTimer = setInterval(function(){
    var oBiu = new Image();
     oBiu.src = 'images/bullet.png';
     oBiu.width = 6;
     oBiu.height = 22;
     oBiu.className = 'bullet';
    var top = oPlane.offsetTop - oBiu.height +3 ;
    var left = oPlane.offsetLeft + oPlane.width/2 -oBiu.width/2;
     oBiu.style.cssText = 'position:absolute;top:'+top+'px;left:'+left+'px;';
    oGameBox.appendChild( oBiu );

    oBiu.timer = setInterval( function(){
     if( !oBiu.parentNode){
      clearInterval( oBiu.timer );
     }
     oBiu.style.top = oBiu.offsetTop - 10 + 'px';
     if( oBiu.offsetTop < -oBiu.height ){
      clearInterval( oBiu.timer );
      oBiu.parentNode.removeChild( oBiu );
     }
    }, 13 );
   } ,speed );
  },
  enemy : function( oGameBox ,oS , index ){
   var a , x;
   switch ( index )
   {
    case 0:
     a = 1;
     x = 500;
     break;
    case 1:
     a = 2;
     x = 300;
     break;
    case 2:
     a = 3;
     x = 200;
     break;
    case 3:
     a = 5;
     x = 100;
     break;
   
   }
   
   this.EnemyTimer = setInterval( function(){
    var oEnemy = new Image();
     oEnemy.src = 'images/enemy.png';
     oEnemy.width = 23;
     oEnemy.height = 30;
    var lMin = 0;
    var lMax = oGameBox.clientWidth - oEnemy.width;
    var left = Math.random()*(lMax-lMin) + lMin;
    oEnemy.style.cssText = 'position:absolute;top: -'+(-oEnemy.height)+'px; left:'+left+'px;';
    oGameBox.appendChild( oEnemy );

    var b = Math.random() * a + 1  ;
    oEnemy.timer = setInterval(function(){ 
     oEnemy.style.top = oEnemy.offsetTop + b + 'px';//敵軍的下落速度
     if( oEnemy.offsetTop >= oGameBox.clientHeight ){
      clearInterval( oEnemy.timer );
      oEnemy.parentNode.removeChild( oEnemy );
     }
    },13);

    //和子彈的碰撞監(jiān)測
    var allBiu = Game.getClass('bullet');
    oEnemy.pzBiu = setInterval(function(){
     
     for(var i = 0;i < allBiu.length;i++)
     {
      if( Game.boom( oEnemy ,allBiu[i]))
      {
       Game.score ++;
       oS.innerHTML = Game.score;
       oEnemy.src = 'images/boom.png';
       clearInterval( oEnemy.pzBiu );
       clearInterval( oEnemy.pzPlane );
       allBiu[i].parentNode.removeChild( allBiu[i] );
       setTimeout(function(){
        if( oEnemy.parentNode ){
         oEnemy.parentNode.removeChild( oEnemy );
        };
       },300);
       break;
      }
     }
    },50);
    //和戰(zhàn)機的碰撞監(jiān)測

    var oPlane = document.getElementById('plane');
    oEnemy.pzPlane = setInterval(function(){
     if( Game.ifEnd ){
      clearInterval( oEnemy.pzPlane);
     }

     if( Game.boom( oEnemy , oPlane))
     {
      Game.ifEnd = true;
      clearInterval( oEnemy.pzPlane);
      clearInterval( Game.BiuTimer);
      clearInterval( Game.EnemyTimer);
      oEnemy.src = 'images/boom.png';
      oPlane.src = 'images/boom2.png';
      setTimeout(function(){
       Game.over( oGameBox );
      },300);
     }
    },50);
   } , x );//敵軍生成速度
  },
  //碰撞監(jiān)測
  boom : function( obj1 , obj2 ){
   var T1 = obj1.offsetTop;
   var B1 = T1 + obj1.clientHeight;
   var L1 = obj1.offsetLeft;
   var R1 = L1 + obj1.clientWidth;

   var T2 = obj2.offsetTop;
   var B2 = T2 + obj2.clientHeight;
   var L2 = obj2.offsetLeft;
   var R2 = L2 + obj2.clientWidth;

   if ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 )
   {
    return false; // 沒撞上
   }
   else
   {
    return true; // 撞上了
   }
  },
   //游戲結(jié)束
   over : function( oGameBox ){
    oGameBox.innerHTML = '';
    var oDiv = document.createElement('div');
     oDiv.style.cssText = 'width:300px;height:200px;margin:100px auto;background:#e0e0e0;border:5px solid #858585';
    var oT = document.createElement('h4');
     oT.innerHTML = 'Game Over';
     oT.style.cssText = 'padding-top:50px;font-size:25px;';

    var oP1 = document.createElement('p');
     oP1.innerHTML = '您的得分是：' + '<span >' + this.score + '</span>';
     oP1.style.cssText = 'font-size:16px;color:#fff;';

    var oRestart = document.createElement('div');
     oRestart.style.cssText = 'width:100px;height:40px;font-size:14px;text-align:center;line-height:40px;color:white;background:#999;margin:20px auto;cursor:pointer;';
     oRestart.innerHTML = '重新開始';
     oRestart.onclick = function(){
      Game.init();
     };

    oDiv.appendChild( oT );
    oDiv.appendChild( oP1 );
    oDiv.appendChild( oRestart );
    oGameBox.appendChild( oDiv );
   },

   //getclass 方法
   getClass : function( cName , parent ){
    parent = parent || document;
    if( document.getElementsByClassName ){
     return parent.getElementsByClassName(cName);
    }
    else
    {
     var all = parent.getElementsByTagName('*');
     var arr = [];
     for( var i = 0;i<all.length;i++ )
     {
      var arrClass = all.className.split(' ');
      for( var j = 0; j < arrClass.length;j++ ){
       if( arrClass[j] == cName )
       {
        arr.push( all[i]);
        break;
       }
      }
     }
     return arr;
   }
  },
 };
  </script>
 </body>
</html>
效果圖
如何使用原生JS實現(xiàn)飛機大戰(zhàn)小游戲