Natives JS zur Realisierung eines einfachen Schlangenspiels
|
In diesem Artikel wird der spezifische Code von js zur Implementierung des Schlangenspiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Erstes Bild
Und nun ohne weitere Umschweife der Code. Wenn er dir gefällt, hinterlasse uns bitte deine Sternchen ♥(ˆ◡ˆԅ)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<Titel></Titel>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.l {
schweben: links;
}
.R {
schweben: rechts;
}
.clear_fix::nach {
Inhalt: '';
Höhe: 0;
Breite: 100 %;
Anzeige: Block;
klar: beides;
Überlauf: versteckt;
Sichtbarkeit: versteckt;
}
.Körper {
Rand: 50px 0 0 50px;
Breite: 700px;
}
.forts. {
Breite: 500px;
Höhe: 500px;
Rand: 1px durchgehend grün;
Rand rechts: 8px;
Position: relativ;
}
.cont div {
Position: absolut;
Breite: 10px;
Höhe: 10px;
Hintergrundfarbe: orange;
Rand: 1px durchgezogen #000;
Box-Größe: Rahmenbox;
}
.fortsetzung .snakeHead {
Randradius: 50 %;
}
.cont span {
Position: absolut;
Anzeige: Inline-Block;
Breite: 10px;
Höhe: 10px;
Rand: 1px durchgezogen #000;
Box-Größe: Rahmenbox;
Randradius: 50 %;
Hintergrund: grün;
}
.Punktzahl {
Breite: 188px;
Höhe: 500px;
Rand: 1px durchgehend rot;
}
.score p {
Textausrichtung: zentriert;
Höhe: 50px;
Zeilenhöhe: 50px;
Schriftgröße: 30px;
Rand: 20px 0;
Farbe: braun
}
.Ergebnis .Zeit{
Farbe: Chartreuse;
Schriftgröße: 20px;
}
.btn {
Rand links: 50px
}
.btn .aktiv {
Hintergrundfarbe: grün;
}
Taste {
Breite: 100px;
Höhe: 30px;
Schriftgröße: 24px;
}
</Stil>
</Kopf>
<Text>
<div id="wrap">
<div Klasse="Body Clear_Fix">
<div Klasse="Fortsetzung l">
</div>
Punktzahl:
</br>
<p>0 Punkte</p>
<hr>
Zeit:
<p Klasse="Zeit"></p>
</div>
</div>
<div Klasse="btn">
<button>Starten</button>
<button class="active">Normal</button>
<button>Schwierig</button>
<button>Hölle</button>
</div>
</div>
<Skript>
var Schlange = {
/* Globale Ereignisse initialisieren, anfänglichen Ereignis-Listener hinzufügen*/
init: Funktion () {
dies.btns = document.querySelectorAll('button');
Dies.score = document.querySelector('p');
dies.cont = document.querySelector('.cont');
//Container für Zeitanzeige this.time = document.querySelector('.time');
//Richtung der Schlange, „r“ bedeutet rechts this.dir = „r“;
/* Zeitgeber */
dieser.timer = '';
/* Ursprüngliche Position des Schlangenkopfes */
dies.kopf = {
l: 30,
t: 10
}
//Schlangenschwanz this.ender = {
l: '',
T: ''
};
dieses.Lebensmittelelement = {
l: '',
T: ''
};
//Startzustand this.isStart = false;
/* Punktezähler */
dieser.Zähler = 0;
//Der einfache Status ist 1, der schwierige ist 2, der Höllenstatus ist 3
dieser.status = 1;
diese.Geschwindigkeit = 10
this.btns[0].onclick = this.startFn //Starten oder pausieren this.btns[1].onclick = this.simpleFn //Abhören im einfachen Modus this.btns[2].onclick = this.difcultFn //Abhören im schwierigen Modus this.btns[3].onclick = this.hardFn //Abhören im Höllenmodus this.initCreate();
dies.getTime()
//Ein zufälliges Lebensmittel this.getfood()
},
initErstellen() {
//Erstelle einen ersten Schlangenkopf und 3 Schlangenkörper für (let i = 0; i <= 3; i++) {
let item = document.createElement('div');
Objekt.zuweisen(item.style, {
links: this.head.l - 10 * i + 'px',
oben: this.head.t + 'px',
/* borderRadius: '50%' */
})
wenn (i == 0) {
item.className = "Schlangenkopf"
}
Schlange.cont.appendChild(Artikel);
}
},
/* Füge einen Abschnitt des Schlangenkörpers hinzu*/
createSnake: Funktion (Objekt) {
Intervall löschen(snake.timer)
var div = document.createElement('div');
div.style.left = Schlange.ender.l;
div.style.top = snake.ender.t;
Schlange.cont.appendChild(div);
Konsole.log(Schlange.Kontrolle.Kinder);
Schlange.bewegen();
/* konsole.log(snake.cont); */
},
/*Überprüfen, ob es die Startzeit ist*/
startFn: Funktion () {
wenn (!snake.isStart) {
Schlange.bewegen();
snake.btns[0].innerHTML = 'Pause';
snake.isStart = true;
} anders {
Schlange.Stopp();
snake.btns[0].innerHTML = "Start";
snake.isStart = falsch;
}
},
/* Beginn der Bewegung, Kernmodul*/
verschieben: Funktion () {
Dokument.onkeydown = Schlange.controlFn;
var itemsAll = Schlange.cont.children;
/* console.log(itemsAlle);
Konsole.log(itemsAll,itemsAll[0].nodeName); */
/* Array zum Speichern jedes Abschnitts des Schlangenkörpers*/
var Elemente = [];
var Spanne;
/* var Elemente = Array.from(itemsAll).filter(Funktion (v, k) {
Rückgabewert v.nodeName === 'DIV'
}); */
/* console.log(Elemente); */
/* Filtere div (Schlangenkörper) und span (Nahrung) */
für (var j = 0; j < itemsAll.length; j++) {
wenn (itemsAll[j].nodeName == 'DIV') {
Elemente.push(ElementeAlle[j])
} anders {
span = ArtikelAlle[j]
}
}
/* Position des Schlangenkopfes ermitteln */
var l = Schlange.Kopf.l;
var t = Schlange.Kopf.t;
console.log(l, t);
console.log(Elemente)
Intervall löschen(snake.timer)
/* Tastaturüberwachung */
Dokument.onkeydown = Schlange.controlFn
/* Beginne mit der Bewegung */
snake.timer = setzeIntervall(Funktion () {
/* Die Position des Schlangenschwanzes aufzeichnen und in dem Objekt aktualisieren, in dem der Schlangenschwanz gespeichert ist*/
snake.ender.l = Artikel[Artikellänge - 1].Stil.links;
snake.ender.t = Artikel[Artikellänge - 1].style.top;
/* Aktualisiere die Position der Schlange*/
für (var i = items.length - 1; i > 0; i--) {
Elemente[i].style.left = Elemente[i - 1].style.left;
Elemente[i].style.top = Elemente[i - 1].style.top;
}
/* Bestimme die Richtung des Schlangenkopfes und aktualisiere seine Position*/
wenn (snake.dir == 'l') {
l -= Schlangengeschwindigkeit;
}
wenn (snake.dir == 'r') {
l += Schlangengeschwindigkeit;
}
wenn (snake.dir == 't') {
t -= Schlangengeschwindigkeit;
}
if (snake.dir == 'b') {
t += Schlangengeschwindigkeit;
}
/* Außerhalb der Grenze y */
wenn (l < 0 || l > 490 || t < 0 || t > 490) {
Intervall löschen(snake.timer)
snake.reStart(confirm('Schlangenmonster, du bist gegen die Wand gelaufen! Willst du nochmal von vorne anfangen?'))
}
Elemente[0].style.left = l + 'px';
Elemente[0].style.top = t + 'px';
/* Aktualisiere das Objekt, das den Schlangenkopf aufzeichnet*/
Schlange.Kopf.l = l
Schlange.Kopf.t = t
/* konsole.log(items[0].style); */
/* Schlangenkopf einfügen */
Schlange.cont.appendChild(Elemente[0])
für (var k = 1; k < Elemente.Länge; k++) {
/* Feststellen, ob der Schlangenkopf sich selbst gebissen hat*/
wenn (items[0].style.left == items[k].style.left und items[0].style.top == items[k]
.Stil.oben) {
snake.reStart(confirm('Schlangenmonster, du hast dich zu Tode gebissen, willst du nochmal von vorne anfangen?'))
/* console.log(Elemente[0].style.left,Elemente[0].style.top);
Konsole.log(Elemente[0].Stil.links,Elemente[0].Stil.oben); */
Intervall löschen(snake.timer)
/* Warnung (,Spiel vorbei!');
fenster.standort.neuladen(wahr) */
zurückkehren
}
/* Füge den Schlangenkörper ein */
snake.cont.appendChild(Elemente[k])
}
/* Das Essen gegessen */
Konsole.log(span.style.left, span.style.top);
/* console.log(l, 'iss das Essen'); */
wenn (l == parseInt(span.style.left) und t == parseInt(span.style.top)) {
Schlange.essen()
}
}, parseInt(300 / Schlange.status))
},
essen() {
Schlange.erstelleSchlange()
Schlange.getfood()
Schlange.Zähler++;
snake.score.innerHTML = `${snake.counter*100} Punkte`
},
/* Das Spiel endet und es wird entschieden, ob es neu gestartet werden soll*/
reStart: Funktion (Wert) {
wenn (Wert) {
Fenster.Standort.neu laden(true)
}
},
/* Nahrung produzieren */
getfood: Funktion () {
wenn (document.querySelector('span')) {
console.log('hereinkommen');
Dokument.QuerySelector('span').remove();
}
var span = document.createElement('span');
var l = Schlange.randM(0, 49) * 10
var t = Schlange.randM(0, 49) * 10
console.log('Essen holen', l, t);
span.style.left = l + "px";
span.style.top = t + 'px';
snake.cont.appendChild(span);
wenn (snake.isStart) {
Schlange.bewegen()
}
},
/* Zufallszahlen generieren */
getTime() {
lass zeit,h,m,s
setzeIntervall(Funktion () {
Zeit = neues Datum()
h = Zeit.getHours()
m = Zeit.getMinutes();
s = Zeit.getSeconds();
wenn (h < 10) {
h = '0' + h
}
wenn (m < 10) {
m = '0' + m
}
wenn (s < 10) {
s = '0' + s
}
snake.time.innerHTML = `${h}: ${m}: ${s}`
}, 1000)
},
randM: Funktion (min, max) {
gibt Math.round(Math.random() * (max - min) + min) zurück
},
/* Pause*/
Stopp: Funktion () {
Intervall löschen(snake.timer)
},
/* Einfacher Modus */
simpleFn: Funktion () {
Schlange.status = 1;
Schlange.btnFn()
snake.btns[1].className = "aktiv"
},
/* Komplexer Modus */
UnterschiedFn: Funktion () {
Schlange.status = 3;
Schlange.btnFn()
snake.btns[2].className = "aktiv"
},
/* Höllenmodus */
hardFn: Funktion () {
Schlange.status = 5;
Schlange.btnFn()
snake.btns[3].className = "aktiv"
},
btnFn: Funktion () {
snake.btns.forEach(Funktion (v, k) {
v.Klassenname = ''
});
wenn (snake.isStart) {
Schlange.bewegen();
}
},
/* Schaltflächen zum Bewegen der Schlange*/
controlFn: Funktion (el) {
var el = el || Fenster.Ereignis;
var code = el.schlüsselcode || el.welcher;
konsole.log(code);
wenn ((code == 40 || code == 83)&&snake.dir != 't') {
snake.dir = "b"
}
wenn ((code == 39 || code == 68)&&snake.dir != 'l') {
snake.dir = "r"
}
wenn ((code == 38 || code == 87)&&snake.dir != 'b') {
snake.dir = "t"
}
wenn ((code == 37 || code == 65)&&snake.dir != 'r') {
snake.dir = "l"
}
}
}
Schlange.init();
</Skript>
</body>
</html>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:
|
>>: Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
Artikel empfehlen
So richten Sie den PostgreSQL-Start unter Ubuntu 16.04 ein
Da PostgreSQL kompiliert und installiert ist, müs...
Detaillierte Erklärung zur Interpretation der Nginx-Konfigurationsdatei
Die Nginx-Konfigurationsdatei ist hauptsächlich i...
JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste
In diesem Artikel wird der spezifische JavaScript...
Was sind die Unterschiede zwischen SQL und MySQL
Was ist SQL? SQL ist eine Sprache zum Betrieb von...
Detaillierte Erläuterung der MySQL-Methode zur Optimierung der Reihenfolge nach Anweisung
In diesem Artikel erfahren Sie mehr über die Opti...
So verwenden Sie „union all“ in MySQL, um die Union-Sortierung zu erhalten
Manchmal kommt es in einem Projekt aus irreversib...
Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen
Existiert die Zeit wirklich? Manche Menschen glau...
Datendiebstahl mit CSS in Firefox
0x00 Einführung Vor einigen Monaten habe ich eine...
Detaillierte Erläuterung der zugrunde liegenden Implementierungsmethode des Nginx-Polling-Algorithmus
Einführung in den Polling-Algorithmus Viele Leute...
Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.
Standardmäßig sind MySQL-Zeichentypen nicht case-...
CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten
Das Anordnungslayout zum Ausrichten der beiden En...
ElementUI implementiert kaskadierenden Selektor
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten
Inhaltsverzeichnis Projekthintergrund Start Erste...
Docker-Container vom Einstieg bis zur Obsession (empfohlen)
1. Was ist Docker? Jeder kennt virtuelle Maschine...
So schreiben Sie HTML-Header in der Webentwicklung für mobile Geräte
Code kopieren Der Code lautet wie folgt: <Kopf...