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:
|
<<: So implementieren Sie Docker Registry zum Erstellen eines privaten Image Warehouse
>>: CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)
Artikel empfehlen
Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?
Hintergrund In diesem Artikel wird hauptsächlich ...
Anzeigemodus von Elementen in CSS
In CSS werden Element-Tags entsprechend den unter...
Installieren Sie mysql5.7 unter Ubuntu 18.04
Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...
Der HTML 5-Entwurf wurde kein formeller Standard
<br />Gestern habe ich beim W3C gesehen, das...
Ubuntu 20.04 – Bestes Konfigurationshandbuch (unverzichtbar für Anfänger)
1. Systemkonfiguration 1. Deaktivieren Sie das Su...
Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)
So erstellen Sie eine virtuelle Maschine auf VMwa...
Detailliertes Tutorial von VMware zum Erstellen einer virtuellen Linux-Maschine und zum Einrichten eines virtuellen Maschinennetzwerks
So erstellen Sie eine virtuelle Linux-Maschine in...
So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler
Wir alle wissen, dass wir die Eigenschaften der P...
Detaillierte Erläuterung inkompatibler Änderungen an Rendering-Funktionen in Vue3
Inhaltsverzeichnis Änderungen an der Rendering-AP...
Verstehen von MySQL-Deadlock-Routinen durch eindeutige Index-S-Sperre und X-Sperre
In „MySQL-Deadlock-Probleme anhand des Quellcodes...
Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx
Trennung von statischer und dynamischer Dynamisch...
Zwei Möglichkeiten zum Schreiben gespeicherter Prozeduren in MySQL mit und ohne Rückgabewerte
Vorgang 1: mit Rückgabewert: Prozedur löschen, fa...
So deaktivieren Sie die Überprüfung auf Fremdschlüsseleinschränkungen in untergeordneten MySQL-Tabellen
Vorbereiten: Definieren Sie eine Lehrertabelle un...
So implementieren Sie einen binären Suchbaum mit JavaScript
Eine der am häufigsten verwendeten und diskutiert...
Zeichnen eines Feuerwerkseffekts von 2021 basierend auf JS mit Quellcode-Download
Diese Arbeit nutzt das Wissen der Front-End-Entwi...