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
MySQL-Einfügungsproblem bei JSON
MySQL 5.7.8 und höher unterstützt nun einen nativ...
Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud
Inhaltsverzeichnis 0. Hintergrund 1. Installation...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64
Ich habe erst vor Kurzem angefangen, mich mit Dat...
28 berühmte Beispiele für Blog-Redesigns
1. WebDesignerWall 2. Veerles Blog 3. Lernprogram...
Schauen wir uns einige leistungsstarke Operatoren in JavaScript an
Inhaltsverzeichnis Vorwort 1. Null-Koaleszenzoper...
Herausforderung des HTML-Symbol-zu-Entity-Algorithmus
Herausforderung: Wandelt die Zeichen &, <,...
Detaillierte Erläuterung der MySQL-Indexprinzipien und -Optimierung
Vorwort Dieser Artikel wurde von einem hohen Tier...
Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern
So erhalten Sie den Container-Startbefehl Der Con...
Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)
Inhaltsverzeichnis Entwurfsszenario Technische Pu...
Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML
Die folgenden Attribute sind nicht sehr browserkom...
MySQL-Abfrage – Erlernen grundlegender Abfrageoperationen
Vorwort MySQL ist das beliebteste relationale Dat...
Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems
Im Web gibt es zwei gängige Ladesymbole: eines is...
Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.
In diesem Artikelbeispiel wird der spezifische Co...
So ändern Sie Flash-SWF-Dateien in Webseiten
Ich denke, dies ist ein Problem, auf das viele Leu...
So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher
Vorwort In diesem Artikel wird der Vorgang zum He...