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
Reines js, um den Effekt eines Karussells zu erzielen
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7
Hier kommt CentOS7 zum Einsatz und die Kernel-Ver...
Lösen Sie das Installationsproblem von Linux Tensorflow2.0
conda aktualisieren conda pip installieren tf-nig...
Vue implementiert die Methode zur Anzeige des Prozentsatzes der Echart-Kreisdiagrammlegende
Dieser Artikel stellt hauptsächlich den Kreisdiag...
Beispiele für die Verwendung von React Ref
Inhaltsverzeichnis Was ist ref So verwenden Sie r...
Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele
Der Interviewer wird Sie manchmal fragen: „Sagen ...
Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung
SSH steht für Secure Shell, ein sicheres Übertrag...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
Wachstumserfahrung eines Webdesigners
<br />Vorab muss ich sagen, dass ich ein abs...
Absteigender Index in MySQL 8.0
Vorwort Ich glaube, jeder weiß, dass Indizes geor...
Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports
ssh ist eines der beiden Befehlszeilentools, die ...
Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat
Beim dynamischen Verketten von Zeichenfolgen verw...
Grundlegendes HTML-Verzeichnisproblem (Unterschied zwischen relativem und absolutem Pfad)
Relativer Pfad – ein Verzeichnispfad, der basieren...
Beispielcode zur Implementierung eines Laufschriftformats mit CSS3
Hintergrund Folgendes ist passiert: Luzhu erfuhr ...
So stellen Sie LNMP und phpMyAdmin in Docker bereit
Umweltvorbereitung: Stellen Sie lnmp auf einem Ho...