JavaScript-Implementierung des klassischen Schlangenspiels
|
In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des klassischen Schlangenspiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Verwendet hauptsächlich den Singleton-Modus, alle Elemente werden dynamisch erstellt; 1. Erstellen Sie eine Karte
var Karte;
Funktion map(){
dies.mapp=null;
dies.makemap=Funktion(){
dies.mapp = Dokument.createElement ("div");
this.mapp.className = "meineKarte";
Dokument.Body.AppendChild(diese.mapp);
}
}2. Erstellen Sie ein Schlangenmodell Erstellen Sie eine Sammlung, um die ersten drei Abschnitte der Schlange zu speichern, durchlaufen Sie die Sammlung, erstellen Sie die Größe und Farbe der Schlange, stellen Sie die Breite und Höhe jedes Abschnitts auf 30 Pixel ein und initialisieren Sie die Richtung des Schlangenkopfes nach rechts
var Snack;
Funktion Snack () {
this.snackk=[["rot",3,1,null],["rosa",2,1,null],["rosa",1,1,null]];
dies.direct="richtig";
dies.makesnack=Funktion(){
für(var i=0;i<this.snackk.length;i++){
wenn (this.snackk[i][3]==null){
dies.snackk[i][3]=document.createElement("div");
dies.snackk[i][3].className = "eatsnack";
dies.snackk[i][3].style.backgroundColor =dies.snackk[i][0];
Map.mapp.appendChild(dies.snackk[i][3]);
}
dies.snackk[i][3].style.left=dies.snackk[i][1]*30+"px";
dies.snackk[i][3].style.top=dies.snackk[i][2]*30+"px";
}
};3. Dynamische Schlange, durchläuft den Set-Snackk, der jeden Abschnitt der Schlange von hinten nach vorne speichert, übergibt die Attribute jedes Abschnitts von hinten nach vorne und legt die Bewegungsrichtung des Schlangenkopfes fest. Der linke und obere Rand der Schlange ändern sich mit der Richtungsänderung. Stellen Sie dann einen Timer ein, um die Schlange alle 100 ms zu bewegen;
dies.movesnack=Funktion(){
var long = this.snackk.length - 1;
für(var i=long; i>0; i--){
dies.snackk[i][1]=dieses.snackk[i-1][1];
dies.snackk[i][2]=dieses.snackk[i-1][2];
}
Schalter(diese.direkt){
Fall "richtig": //richtig this.snackk[0][1] +=1;
brechen;
Fall "links": //links this.snackk[0][1] -=1;
brechen;
Fall "runter": //runter this.snackk[0][2] +=1;
brechen;
Fall "hoch": //hoch this.snackk[0][2] -=1;
brechen;
}
4. Essen zubereiten. Nahrung wird auf der Karte zufällig generiert. Die Größe der Nahrung entspricht der Größe jedes Abschnitts der Schlange.
var. Guoguo;
Funktion guozi(){
dies.guoo=null;
dies.x;
dies.y;
dies.makeguozi=Funktion(){
this.x = Math.floor( Math.random() * 30); //0-29
dies.y=Math.floor( Math.random() * 20); //0-19
wenn(dies.guoo==null){
dies.guoo=document.createElement("div");
this.guoo.className = "guozi";
Map.mapp.appendChild(dieses.guoo);
}
dies.guoo.style.left=dieses.x * 30+"px";
dies.guoo.style.top = dies.y * 30+"px";
}
}5. Legen Sie Tastaturereignisse fest und steuern Sie mit den Tasten Auf, Ab, Links und Rechts die Richtung des Schlangenkopfes.
Dokument.Body.onkeyup=Funktion(e){
// console.log(e);
Schalter(e.Schlüsselcode){
Fall 37: //linksif(Snack.direct!="rechts"){
Snack.direct = "links";
}
brechen;
Fall 39:// rechtswenn(Snack.direct!="links"){
Snack.direct = "richtig";
}
brechen;
Fall 38: //nach oben wenn(Snack.direct!="nach unten"){
Snack.direct = "nach oben";
}
brechen;
Fall 40: //Weiterwenn(Snack.direct!="up"){
Snack.direct = "nach unten";
}
brechen;
Fall 87:
wenn (Snack.direct != "nach unten") {
Snack.direct = "nach oben";
}
brechen;
Fall 65:
wenn (Snack.direct != "rechts") {
Snack.direct = "links";
}
brechen;
Fall 68:
wenn (Snack.direct != "links") {
Snack.direct = "richtig";
}
brechen;
Fall 83:
wenn (Snack.direct != "nach oben") {
Snack.direct = "nach unten";
}
brechen;
}
};6. Erkennen Sie die Position des Schlangenkopfes und des Futters. Wenn der Schlangenkopf das Futter frisst, nimmt die Länge der Schlange zu und dem Snack-Set werden Elemente hinzugefügt. Dann wird zufällig Futter erstellt, die Position des Futters wird erkannt und das Futter wird erneut gefressen.
wenn(dieser.snackk[0][1]==Guoguo.x && dieser.snackk[0][2]==Guoguo.y ){
dies.snackk.push([
"Rosa",
dieser.snackk[dieser.snackk.Länge-1][1],
dieser.snackk[dieser.snackk.Länge-1][2],
Null
]);
Guoguo.makeguozi ();
}7. Stellen Sie den Schlangenkörper so ein, dass er durch die Wand geht. Wenn die oberen, unteren, linken und rechten Ränder des Schlangenkopfes gleich 0 sind, ändern Sie die Ränder auf den Maximalwert.
wenn(dieser.snackk[0][1]>29){
this.snackk[0][1]=0 ; //Gehe von rechts durch die Wand}
wenn(dieser.snackk[0][1]<0){
this.snackk[0][1]=29; //Gehe von rechts durch die Wand}
wenn(dieser.snackk[0][2]>19){
this.snackk[0][2]=0 ; //Gehe von rechts durch die Wand}
wenn(dieser.snackk[0][2]<0){
this.snackk[0][2]=19; //Gehe von rechts durch die Wand}
dies.makesnack();
dies.stopsnack();
};8. Gestalten Sie das Spiel so, dass es endet. Die Schlange stirbt, wenn sie ihren eigenen Körper trifft. Das Spiel endet und der Timer wird ausgeschaltet. Wenn die oberen und linken Ränder des Schlangenkopfes mit den oberen und linken Rändern eines Teils des Schlangenkörpers übereinstimmen, endet das Spiel und ein Hinweisbild erscheint, um das Ende des Spiels anzuzeigen.
dies.stopsnack=Funktion(){
für(var k=this.snackk.length-1;k>0;k--){
wenn (dieser.snackk[0][1]==dieser.snackk [k][1] && dieser.snackk[0][2]==dieser.snackk [k][2]) {
ClearInterval(Zeit);
var gameover = document.createElement("div");
gameover.className = "über";
gameover.style.display = "Block";
Map.mapp.appendChild (Spiel vorbei);
}
}
}
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:
|
<<: Detaillierte Erklärung zur korrekten Installation von OpenCV auf Ubuntu
>>: Detaillierte Erläuterung verschiedener Möglichkeiten zur Installation von CMake unter Ubuntu
Artikel empfehlen
Eine ausführliche Diskussion zur Detailanalyse im Webdesign
Bei der Designarbeit höre ich oft, dass an der Übe...
In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)
Mit dem obigen Artikel habe ich meine Einführung i...
Schritte zur VSCode-Konfiguration mit der Git-Methode
Git ist in vscode integriert und viele Vorgänge k...
Verwenden von JS zum Implementieren eines einfachen Rechners
Verwenden Sie JS, um einen einfachen Rechner für ...
Erläuterung der Docker Compose-Netzwerkeinstellungen
Grundlegende Konzepte Standardmäßig erstellt Comp...
MySQL 1130-Ausnahme, Remote-Anmeldung nicht möglich – Lösung
Inhaltsverzeichnis Frage: 1. Aktivieren Sie die B...
Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern
So erhalten Sie den Container-Startbefehl Der Con...
Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.
1. Hintergrund Vor kurzem stießen einige Freunde ...
Mehrere Möglichkeiten zum Ändern der SELECT-Optionen in einer HTML-Dropdown-Box
Nachdem das Formular übermittelt wurde, wird die z...
So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)
1. Software-Download MySQL-Download und -Installa...
Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens
Angenommen, es gibt einen solchen Anfangscode: &l...
So fügen Sie CentOS7 systemd benutzerdefinierte Systemdienste hinzu
systemd: Das Service-Systemctl-Skript von CentOS ...
Details zum JavaScript-Prototyp und zur Prototypkette
Inhaltsverzeichnis 1. Prototyp (expliziter Protot...
Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS
1. Die Entstehung des Problems Habe eine flache L...
Verwenden von JavaScript zum Implementieren von Karusselleffekten
In diesem Artikel wird der spezifische Code für J...