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
Detaillierte Erläuterung des Mechanismus und der Implementierung der Accept-Sperre in Nginx
Vorwort nginx verwendet ein Multiprozessmodell. W...
So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers
Im vorherigen Artikel wurde ein ausführliches Bei...
Beispielcode des Vue-Symbolselektors
Quelle: http://www.ruoyi.vip/ Vue von „vue“ impor...
Eine detaillierte Diskussion der Auswertungsstrategien in JavaScript
Inhaltsverzeichnis Eine Kastanie zum Abdecken Par...
Ausführliche Erklärung zur Docker-Maschine
Unterschiede zwischen Docker und Docker Machine D...
Zusammenfassung der englischen Namen chinesischer Schriftarten
Wenn Sie in CSS die Eigenschaft „font-family“ ver...
So behandeln Sie den vom Linux-System gemeldeten Fehler tcp_mark_head_lost
Problembeschreibung Kürzlich meldete ein Host die...
Detaillierte Erklärung der InnoDB-Speicherdateien in MySQL
Physisch gesehen besteht eine InnoDB-Tabelle aus ...
Lösung für den Fehler „MySQL-Server ist verschwunden“
MySQL-Server hat Problem in PHP behoben 1. Hinter...
Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker
Problemphänomen: [root@localhost ~]# Docker-Image...
CSS3 verwendet Transformationsverformung in Kombination mit Ereignissen, um die fächerförmige Navigation zu vervollständigen
Weil ich in diesem Fall das Wort Übergang falsch ...
Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur
Öffnen Sie das dekomprimierte Verzeichnis von Tom...
Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen
Offizielle Website: http://code.google.com/p/zen-c...
js, um einen einfachen Front-End-Paging-Effekt zu erzielen
Einige Projekte haben ein relativ einfaches Gesch...
Teilen Sie 8 MySQL-Fallstricke, die Sie erwähnen müssen
MySQL ist einfach zu installieren, schnell und ve...