Natives JS zur Implementierung des Flugzeug-Kriegsspiels

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Flugzeugkriegsspiels als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

<html>
 <Kopf>
  <title>Flugzeugkriege</title>
  <style type="text/css"> 
 *{margin:0;padding:0;font-family:"Microsoft yahei"}
  Körper {Überlauf: versteckt;;}
  </Stil>
 </Kopf>

 <Text>


  <Skript>
 fenster.onload = funktion(){
  Spiel.exe();
 };
 var Spiel = {
  //Starte das Programm exe: function(){
   Dokument.Body.Style.Background = "#fff";
   var oDiv = document.createElement('div');
    oDiv.id = "Spielbox";
    oDiv.style.cssText = 'Breite: 600px; Höhe: 500px; Rahmen: 10px durchgezogen #999; Rand: 50px automatisch; Schriftfamilie: „Microsoft yahei“; Textausrichtung: zentriert; Position: relativ; Überlauf: ausgeblendet; Hintergrund: #fff';
   Dokument.body.appendChild(oDiv);
   dies.init();
  },

  Punktzahl : 0 ,
  ifEnd : falsch,
  //Initialisierung init: function(){
   
   var Dies = dies;
   var oDiv = document.getElementById('GameBox');
   oDiv.innerHTML = '';
   Spielstand = 0;
   Spiel.ifEnd = false;
   var oH = document.createElement('h1');
    oH.innerHTML = 'Aircraft War v1.0';
    oH.style.cssText = 'Farbe: #555555; Schriftgröße: 30px; oberer Abstand: 50px;';
    oDiv.appendChild( oH );
   für (var i=0;i<4;i++)
   {
    var oP = document.createElement('p');
     oP.index = i;
     oP.style.cssText = 'Schriftgröße: 18px; Farbe: weiß; Breite: 180px; Höhe: 50px; Rand: 40px automatisch; Textausrichtung: Mitte; Hintergrund: #999; Zeilenhöhe: 40px; Schriftfamilie: „Microsoft yahei“; Schriftstärke: fett; Cursor: Zeiger;'
    var html = '';
    oP.onmouseenter = function(){
     dieser.Stil.Hintergrund = '#ff9933';
     diese.Stil.Farbe = "##ff6600"
    };
    oP.onmouseleave = Funktion(){
     dieser.Stil.Hintergrund = '#999';
     diese.Stil.Farbe = "weiß"
    };
    oP.onclick = Funktion( e ){
     e = e || Fenster.Ereignis;
     Dies.start(dieser.index, oDiv, e);
    };
    Schalter( ich ){
     Fall 0:
      html = „Einfacher Schwierigkeitsgrad“;
      brechen;
     Fall 1:
      html = „Mittlerer Schwierigkeitsgrad“;
      brechen;
     Fall 2:
      html = 'Schwierigkeitsgrad';
      brechen;
     Fall 3:
      html = „Kleines besessenes Genie“;
      brechen;
    }
    oP.innerHTML = html;
    oDiv.appendChild(oP);

   };
  },
  //Starte das Spiel start: function(index, oGameBox, e){
   oGameBox.innerHTML = '';

   var oS = document.createElement('span');
    oS.innerHTML = dieser.score;
    oS.style.cssText = 'Position:absolut;links:20px;oben:20px;Schriftgröße:14px;Farbe:schwarz;';
   oGameBox.appendChild( oS );
   dieses.Flugzeug(oGameBox, e, Index);
   dieser.Feind(oGameBox, oS, Index);
  },
  //Über das Flugzeug plane: function(oGameBox, e, index){
   var x = e.seiteX;
    y = e.SeiteY;
   var oPlane = neues Bild();
    oPlane.src = "Bilder/Flugzeug.png";
    oEbene.Breite = 60;
    oEbene.Höhe = 36;
    oPlane.id = "Flugzeug";
   var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
   var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   Fenster.onresize = Funktion(){
    lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   };
   var top = y-tY;
   var links = x-lX;
    oPlane.style.cssText = 'Anzeige: Block; Position: absolut; oben: '+ oben + ' px; links: '+ links + ' px; ';
   oGameBox.appendChild( oFlugzeug );
   
   var leftMin = - oPlane.width/2;
   var leftMax = oGameBox.clientWidth - oPlane.width/2;
   var topMin = 0;
   var topMax = oGameBox.clientHeight - oPlane.height;

   Dokument.onmousemove = Funktion(e){
    wenn( !Spiel.ifEnd )
    {

     e = e || Fenster.Ereignis;
     var top = e.seiteY -tY;
     var left = e.seiteX -lX;

     top = Math.min(top, topMax); //Nimm den kleinsten Parameter, wenn (top > topMax)top = topMax;
     top = Math.max(top, topMin);//Nimm den größten Parameter left = Math.min(left, leftMax);//Nimm den kleinsten Parameter if(top > topMax)top = topMax;
     links = Math.max(links, linksMin);

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

  biu: Funktion (oPlane, oGameBox, Index) {
   var Geschwindigkeit;
   Schalter (Index)
   {
    Fall 0:
     Geschwindigkeit = 30;
     brechen;
    Fall 1:
     Geschwindigkeit = 40;
     brechen;
    Fall 2:
     Geschwindigkeit = 50;
     brechen;
    Fall 3:
     Geschwindigkeit = 10;
     brechen;
   
   }
   dies.BiuTimer = setInterval(Funktion(){
    var oBiu = neues Bild();
     oBiu.src = "Bilder/Bullet.png";
     oBiu.Breite = 6;
     oBiu.höhe = 22;
     oBiu.className = "Aufzählungszeichen";
    var top = oPlane.offsetTop - oBiu.height + 3;
    var left = oPlane.offsetLeft + oPlane.width/2 - oBiu.width/2;
     oBiu.style.cssText = 'Position:absolut;oben:'+oben+'px;links:'+links+'px;';
    oGameBox.appendChild( oBiu );

    oBiu.timer = setzeInterval( Funktion(){
     wenn( !oBiu.parentNode){
      Löschintervall( oBiu.timer );
     }
     oBiu.style.top = oBiu.offsetTop – 10 + „px“;
     wenn(oBiu.offsetTop < -oBiu.height ){
      Löschintervall( oBiu.timer );
      oBiu.parentNode.removeChild( oBiu );
     }
    }, 13 );
   } ,Geschwindigkeit );
  },
  Feind: Funktion (oGameBox, oS, Index) {
   var a, x;
   Schalter (Index)
   {
    Fall 0:
     ein = 1;
     x = 500;
     brechen;
    Fall 1:
     ein = 2;
     x = 300;
     brechen;
    Fall 2:
     ein = 3;
     x = 200;
     brechen;
    Fall 3:
     ein = 5;
     x = 100;
     brechen;
   
   }
   
   dies.EnemyTimer = setInterval( Funktion(){
    var oEnemy = neues Bild();
     oEnemy.src = "Bilder/Enemy.png";
     oFeind.Breite = 23;
     oFeind.Höhe = 30;
    var lMin = 0;
    var lMax = oGameBox.clientWidth - oEnemy.width;
    var left = Math.random()*(lMax-lMin) + lMin;
    oEnemy.style.cssText = 'position:absolut;oben: -'+(-oEnemy.height)+'px; links:'+left+'px;';
    oGameBox.appendChild( oEnemy );

    var b = Math.random() * a + 1;
    oEnemy.timer = setzeIntervall(Funktion(){ 
     oEnemy.style.top = oEnemy.offsetTop + b + 'px'; //Fallgeschwindigkeit des Gegners wenn (oEnemy.offsetTop >= oGameBox.clientHeight) {
      clearInterval( oEnemy.timer );
      oEnemy.parentNode.removeChild( oEnemy );
     }
    },13);

    //Kollisionsüberwachung mit Kugeln var allBiu = Game.getClass('bullet');
    oEnemy.pzBiu = setInterval(Funktion(){
     
     für (var i = 0; i < allBiu.length; i++)
     {
      wenn(Spiel.boom(oEnemy,allBiu[i]))
      {
       Spielstand++;
       oS.innerHTML = Spielstand;
       oEnemy.src = "Bilder/Boom.png";
       clearInterval( oEnemy.pzBiu );
       clearInterval( oEnemy.pzPlane );
       alleBiu[i].parentNode.removeChild( alleBiu[i] );
       setzeTimeout(Funktion(){
        wenn( oEnemy.parentNode ){
         oEnemy.parentNode.removeChild( oEnemy );
        };
       },300);
       brechen;
      }
     }
    },50);
    //Kollisionsüberwachung mit Kampfflugzeugen var oPlane = document.getElementById('plane');
    oEnemy.pzPlane = setzeInterval(Funktion(){
     if( Spiel.ifEnd ){
      clearInterval( oEnemy.pzPlane);
     }

     wenn(Spiel.boom(oFeind, oFlugzeug))
     {
      Spiel.ifEnd = true;
      clearInterval( oEnemy.pzPlane);
      clearInterval( Spiel.BiuTimer);
      clearInterval( Spiel.EnemyTimer);
      oEnemy.src = "Bilder/Boom.png";
      oPlane.src = "Bilder/boom2.png";
      setzeTimeout(Funktion(){
       Spiel.über( oGameBox );
      },300);
     }
    },50);
   }, x); //Geschwindigkeit der Feindgenerierung},
  //Kollisionserkennungsboom: 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;

   wenn (R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1)
   {
    return false; // Keine Kollision}
   anders
   {
    returniere true; // Treffer }
  },
   //Spiel vorbei, vorbei: Funktion (oGameBox) {
    oGameBox.innerHTML = '';
    var oDiv = document.createElement('div');
     oDiv.style.cssText = 'Breite: 300px; Höhe: 200px; Rand: 100px auto; Hintergrund: #e0e0e0; Rahmen: 5px durchgezogen #858585';
    var oT = document.createElement('h3');
     oT.innerHTML = "Spiel vorbei";
     oT.style.cssText = "padding-top:50px;Schriftgröße:25px;";

    var oP1 = document.createElement('p');
     oP1.innerHTML = 'Ihr Punktestand ist:' + '<span style="color:#ffffff;font-weight:bold;">' + this.score + '</span>';
     oP1.style.cssText = 'Schriftgröße: 16px; Farbe: #fff;';

    var oRestart = document.createElement('div');
     oRestart.style.cssText = 'Breite: 100px; Höhe: 40px; Schriftgröße: 14px; Textausrichtung: Mitte; Zeilenhöhe: 40px; Farbe: weiß; Hintergrund: #999; Rand: 20px automatisch; Cursor: Zeiger;';
     oRestart.innerHTML = 'Neustart';
     oNeustart.onclick = function(){
      Spiel.init();
     };

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

   //getclass-Methode getClass : Funktion( cName , übergeordnetes Element ) {
    übergeordnetes Element = übergeordnetes Element || Dokument;
    wenn( Dokument.getElementsByClassName ){
     gibt parent.getElementsByClassName(cName) zurück;
    }
    anders
    {
     var alle = parent.getElementsByTagName('*');
     var arr = [];
     für (var i = 0;i<all.length;i++)
     {
      var arrClass = all.className.split(' ');
      für (var j = 0; j < arrClass.length; j++) {
       wenn(arrClass[j] == cName)
       {
        arr.push(alle[i]);
        brechen;
       }
      }
     }
     Rückflug an;
   }
  },
 };
  </Skript>
 </body>
</html>

Rendern

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js+canvas realisiert den Flugzeugkrieg
JavaScript implementiert das Front-End-Flugzeugkriegsspiel
JavaScript zur Implementierung der Flugzeugkriegsführung
JavaScript zur Implementierung des Flugzeugkriegsspiels
Mit JS ein kleines Flugzeugkriegsspiel implementieren
js zur Realisierung des Flugzeugkriegsspiels
JS objektorientierte Implementierung von Aircraft War
js zur Realisierung des Flugzeugkriegsspiels
Ein vollständiges Beispiel zum Schreiben des Spiels „Aircraft vs. Tank“ in JavaScript
js+css zur Realisierung des Flugzeugkriegsspiels

<<: So implementieren Sie Docker Registry zum Erstellen eines privaten Image Warehouse

>>: CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)