Native JS to implement the aircraft war game

This article example shares the specific code of JS to implement the aircraft war game for your reference. The specific content is as follows

<html>
 <head>
  <title> Aircraft Wars</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 = {
  //Start the program 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,
  //initialization init: function(){
   
   var This = this;
   var oDiv = document.getElementById('GameBox');
   oDiv.innerHTML = '';
   Game.score = 0;
   Game.ifEnd = false;
   var oH = document.createElement('h1');
    oH.innerHTML = 'Aircraft War 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 = 'Easy Difficulty';
      break;
     case 1:
      html = 'Medium difficulty';
      break;
     case 2:
      html = 'Difficulty';
      break;
     case 3:
      html = 'Little genius possessed';
      break;
    }
    oP.innerHTML = html;
    oDiv.appendChild(oP);

   };
  },
  //Start the game 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 );
  },
  //About the plane 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 ); //Take the smallest parameter if( top > topMax )top = topMax;
     top = Math.max( top ,topMin );//Take the largest parameter left = Math.min( left , leftMax );//Take the smallest parameter 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'; //Enemy's falling speed if( oEnemy.offsetTop >= oGameBox.clientHeight ){
      clearInterval( oEnemy.timer );
      oEnemy.parentNode.removeChild( oEnemy );
     }
    },13);

    //Collision monitoring with bullets 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);
    //Collision monitoring with fighter planes 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); //Enemy generation speed},
  //Collision detection 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; // No collision}
   else
   {
    return true; // hit }
  },
   //Game over 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('h3');
     oT.innerHTML = 'Game Over';
     oT.style.cssText = 'padding-top:50px;font-size:25px;';

    var oP1 = document.createElement('p');
     oP1.innerHTML = 'Your score is:' + '<span style="color:#ffffff;font-weight:bold;">' + 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 = 'Restart';
     oRestart.onclick = function(){
      Game.init();
     };

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

   //getclass method 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>

Rendering

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: