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
JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle
In diesem Artikel wird der spezifische Code für J...
Methode zur Verhinderung von SSH-Cracking auf Linux-Servern (empfohlen)
1. Der Linux-Server konfiguriert /etc/hosts.deny ...
So verwenden Sie Nexus, um JAR-Pakete zu privaten Servern hinzuzufügen
Warum müssen wir einen privaten Nexus-Server erst...
So verwenden Sie einen Docker-Container für den Zugriff auf das Host-Netzwerk
Vor Kurzem wurde ein System bereitgestellt, das n...
HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite
Div-Lösung bei Konflikten zwischen relativer und ...
So deinstallieren Sie MySQL sauber (getestet und effektiv)
Wie deinstalliere ich Mysql vollständig? Befolgen...
So führen Sie Befehle auf einem Remote-Linux-System über SSH aus
Manchmal müssen wir einige Befehle auf einem Remo...
Beispielcode für ungewöhnliche HTML-Tags „optgroup“, „sub“, „sup“ und „bdo“
Optgroup wird im Auswahltag verwendet, um den Inha...
Neue Verwendung von watch und watchEffect in Vue 3
Inhaltsverzeichnis 1. Neue Verwendung der Uhr 1.1...
Eine kurze Diskussion über die Eigenschaften von CSS-Float
In diesem Artikel werden die Eigenschaften von CS...
Vue implementiert die Bottom-Query-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert
Nachdem die Tabellenbreite auf der Seite auf width...
Beispiel für die Konfiguration von nginx zur Implementierung von SSL
Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...
React implementiert die Erweiterungs- und Reduzierfunktion komplexer Suchformulare
Geben Sie der Zeit Zeit und lassen Sie die Vergan...
Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7
Hier kommt CentOS7 zum Einsatz und die Kernel-Ver...