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 GTID Mha-Konfigurationsmethode
Gtid + Mha + Binlog-Serverkonfiguration: 1: Testu...
Tutorial-Diagramm zur Installation einer virtuellen Maschine unter dem Windows-7-Betriebssystem von VMware
Der Installationsprozess von VMware wird nicht de...
Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen
CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...
JavaScript implementiert Ziehen mit der Maus, um die Div-Größe anzupassen
In diesem Artikel wird der spezifische JavaScript...
Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen
Layoutteil: <div id="Schieberegler"&...
Zusammenfassung der Verwendung von Datetime und Timestamp in MySQL
Inhaltsverzeichnis 1. Wie wird die aktuelle Uhrze...
Detailliertes Tutorial zur Migration des Home-Verzeichnisses auf eine neue Partition unter Ubuntu
Wenn das Home-Verzeichnis des Benutzers immer grö...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
SQL-Aggregation, Gruppierung und Sortierung
Inhaltsverzeichnis 1. Aggregierte Abfrage 1. COUN...
So erstellen Sie eine Deep-Learning-Umgebung mit Python in einem Docker-Container
Überprüfen Sie die Virtualisierung im Task-Manage...
Warum wirkt sich die Verwendung von Limits in MySQL auf die Leistung aus?
Lassen Sie mich zunächst die MySQL-Version erklär...
Beispielüberprüfung MySQL | Update-Feld mit demselben Wert zeichnet Binlog auf
1. Einleitung Vor ein paar Tagen fragte mich ein ...
Linux-Unlink-Funktion und wie man Dateien löscht
1. Unlink-Funktion Bei Hardlinks wird mit „unlink...
Beispielcode für die benutzerdefinierte Scroll-Ansicht des WeChat-Applets
Miniprogramm Benutzerdefinierte Scroll-View-Bildl...
Gutes Website-Copywriting und gute Benutzererfahrung
Das Betrachten einer Website ist eigentlich wie di...