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)
![Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]](/upload/images/67cad980eef6b.webp)
Artikel empfehlen
Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine
Da ich MySQL schon so lange verwende, glaube ich,...
Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18
MySql herunterladen 1. Öffnen Sie die offizielle ...
Das Vue-Projekt realisiert den Paging-Effekt
Der Paging-Effekt wird zu Ihrer Information im Vu...
Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript
Inhaltsverzeichnis Vorwort JavaScript find()-Meth...
Zusammenfassung der Ausnahmen bei der MySQL-Datenbankverbindung (sammelwürdig)
Beim Bereitstellen des Projekts auf Centos ist mi...
Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?
Inhaltsverzeichnis Vorwort 1. Warum treten domäne...
Realisierung des Karusselleffekts basierend auf jQuery
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen
Zunächst die Struktur innerhalb des Nginx-Contain...
Detaillierte Erläuterung der CentOS7-Onlineinstallation von Docker 17.03.2 unter Verwendung der Alibaba Cloud Docker Yum-Quelle
Referenzdokumentation Offizielle Docker-Installat...
So zeigen Sie Div auf einem Objekt an, ohne durch die Objektanimation blockiert zu werden
Heute habe ich eine Menüschaltfläche erstellt. Wen...
Detaillierte Erklärung, wo die von Docker abgerufenen Bilder gespeichert werden
Die vom Docker abgerufenen Befehle werden standar...
Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile
Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...
Detaillierte Erklärung der HTML-Download-Funktion
Das neue Projekt ist im Grunde abgeschlossen. Es ...
Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle
Da die Kollegen im Unternehmen die Standardausgab...
Analyse impliziter Fehler bei der gleichzeitigen Replikation von MySQL 5.7
Vorwort Die meisten unserer MySQL-Onlineumgebunge...