Die Implementierungsidee des Javascript-Spiels Snake wird zu Ihrer Information erläutert (vollständige Codeimplementierung). Der spezifische Inhalt ist wie folgt Wirkungsprozess1. Zuerst müssen wir die Leinwand bedienen <!doctype html> <html> <Kopf> <meta charset="utf-8"> <title>Schlange</title> </Kopf> <Text> <canvas id="canvas"></canvas> <!-- Die Leinwand, die wir bedienen möchten --> <input type="button" value="Spiel starten" /><!-- Spiel starten-Button--> <Skript> //Element abrufen var canvas = document.getElementById("canvas"); //Canvas suchen, das wir bearbeiten möchten var context = canvas.getContext("2d"); //Geben Sie an, dass die Umgebung für Vorgänge auf der Leinwand 2d ist. var but = document.getElementsByTagName("input")[0]; //Start-Button suchen</script> 2. Während der Initialisierung canvas.width = 500; //Leinwandbreite definieren canvas.height = 500; //Leinwandhöhe definieren canvas.style.border = "5px solid #000"; //Leinwandrand definieren var times = 100; //Standardzeit 200 Millisekunden var long = 10; //Anzahl der Schlangenkörper im Verhältnis zur Schrittlänge var x = y =8; //Anfangskoordinaten der Schlange var direction = 3; // 1 hoch 2 rechts 3 runter 0 links var size = 8; //Länge jeder Bewegung der Schlange (Schrittlänge) var map = []; //Wird verwendet, um die Koordinaten jeder Bewegung der Schlange aufzuzeichnen var foodx = 0; //Die anfängliche X-Achsenkoordinate des Futters var foody = 0; //Die anfängliche Y-Achsenkoordinate des Futters var onOff = true; var foodT = true; var Timer = null; 3. Kontrollieren Sie die Koordinaten der Schlange entsprechend der Richtung, bestimmen Sie, ob die Koordinaten der Schlange die Leinwandgrenze überschreiten, und bestimmen Sie, ob die Schlange sich selbst berührt hat //Steuere die Koordinaten der Schlange entsprechend der Richtung switch(direction){ Fall 1: y = y - Größe; Unterbrechung; //Großbuchstabe 2: x = x + Größe; Unterbrechung; //Rechts Fall 3: y = y + Größe; Unterbrechung; //Kleinbuchstabe 0: x = x - Größe; Unterbrechung; //Links} //Beurteilen Sie, ob die Koordinaten der Schlange die Leinwandgrenze überschreiten. Wenn ja, wird eine Aufforderung zur Wandkollision angezeigt und das Spiel endet, wenn (x> 500 || x <0 || y> 500 || y <0) { // alert("Sie sind gegen eine Wand gelaufen! Versuchen Sie es weiter …"); fenster.standort.neuladen(); } //Beurteile, ob die Schlange dich berührt hat. Wenn sie dich berührt hat, ist das Spiel vorbei for(var i=0; i<map.length; i++){ wenn(parseInt( map[i].x ) == x und parseInt( map[i].y ) == y){ // alert("Du hast dich selbst geschlagen und bist gestorben! Versuche es weiter …"); window.location.reload(); //Neu laden} } 4. Dann zeichne die Schlange //Zeichne die Schlange if(map.length>long){ var cl = map.shift(); Kontext.clearRect(cl['x'],cl['y'],Größe,Größe); } map.push({'x':x,'y':y}); context.fillStyle = "#777"; //Fülle die Farbe der Schlange context.fillRect(x,y,size,size); //Zeichne die Schlange 5. Wenn die Koordinaten des Futters den Koordinaten der Schlange entsprechen (die Schlange frisst das Futter) //Wenn beurteilt wird, dass die Koordinaten des Futters den Koordinaten der Schlange entsprechen (die Schlange frisst das Futter) wenn(Essenx*8 == x && Esseny*8 == y ){ food(); //Zeichne erneut Futter long++; //Die Länge der Schlange erhöht sich mal = mal - 10; //Beschleunige clearInterval(timer); einAus = wahr; setTimeout(goto,times); //Neue Runde starten} 6. Bestimmen Sie die zufälligen Anzeigekoordinaten von Lebensmitteln und zeichnen Sie die Lebensmittel //Ermittle die zufälligen Anzeigekoordinaten von Lebensmitteln und zeichne Lebensmittelfunktion food(){ foodx = Math.ceil(Math.random()*40); //Zufällige Koordinaten des Essens auf der X-Achse foody = Math.ceil(Math.random()*40); //Zufällige Koordinaten des Essens auf der Y-Achse context.fillStyle = "mediumvioletred"; //Füllfarbe des Essens context.fillRect(foodx*8,foody*8,8,8); //Essen zeichnen } 7. Achten Sie auf das Drücken der Richtungstaste, um die Richtung zu erfahren, in die sich die Schlange bewegt //Achten Sie auf die gedrückte Richtungstaste, um die Richtung der Schlange zu ermitteln. document.onkeydown = function(ev){ var ev = ev || Ereignis; var cod = ev.keyCode - 37; Schalter(Kabeljau){ Fall 1: Richtung = 1; Unterbrechung; //nach oben Fall 2: Richtung = 2; Unterbrechung; //nach rechts Fall 3: Richtung = 3; Unterbrechung; //nach unten Fall 0: Richtung = 0; Unterbrechung; //nach links } } Vollständige Codeimplementierung <!doctype html> <html> <Kopf> <meta charset="utf-8"> <title>Schlange</title> </Kopf> <Text> <canvas id="canvas"></canvas> <!-- Die Leinwand, die wir bedienen möchten --> <input type="button" value="Spiel starten" /><!-- Spiel starten-Button--> <Skript> //Element abrufen var canvas = document.getElementById("canvas"); //Canvas suchen, das wir bearbeiten möchten var context = canvas.getContext("2d"); //Geben Sie an, dass die Umgebung für Vorgänge auf der Leinwand 2d ist. var but = document.getElementsByTagName("input")[0]; //Start-Button suchen//Initialisieren canvas.width = 500; //Leinwandbreite definieren canvas.height = 500; //Leinwandhöhe definieren canvas.style.border = "5px solid #000"; //Leinwandrand definieren var times = 100; //Standardzeit 200 Millisekunden var long = 10; //Anzahl der Schlangenkörper im Verhältnis zur Schrittlänge var x = y =8; //Anfangskoordinaten der Schlange var direction = 3; // 1 hoch 2 rechts 3 runter 0 links var size = 8; //Länge jeder Bewegung der Schlange (Schrittlänge) var map = []; //Wird verwendet, um die Koordinaten jeder Bewegung der Schlange aufzuzeichnen var foodx = 0; //Die anfängliche X-Achsenkoordinate des Futters var foody = 0; //Die anfängliche Y-Achsenkoordinate des Futters var onOff = true; var foodT = true; var Timer = null; Funktion Stern(){ //Steuere die Koordinaten der Schlange entsprechend der Richtung switch(direction){ Fall 1: y = y - Größe; Unterbrechung; //Großbuchstabe 2: x = x + Größe; Unterbrechung; //Rechts Fall 3: y = y + Größe; Unterbrechung; //Kleinbuchstabe 0: x = x - Größe; Unterbrechung; //Links} //Beurteilen Sie, ob die Koordinaten der Schlange die Leinwandgrenze überschreiten. Wenn ja, wird eine Aufforderung zur Wandkollision angezeigt und das Spiel endet, wenn (x> 500 || x <0 || y> 500 || y <0) { // alert("Sie sind gegen eine Wand gelaufen! Versuchen Sie es weiter …"); fenster.standort.neuladen(); } //Beurteile, ob die Schlange dich berührt hat. Wenn sie dich berührt hat, ist das Spiel vorbei for(var i=0; i<map.length; i++){ wenn(parseInt( map[i].x ) == x und parseInt( map[i].y ) == y){ // alert("Du hast dich selbst geschlagen und bist gestorben! Versuche es weiter …"); window.location.reload(); //Neu laden} } //Zeichne die Schlange if(map.length>long){ var cl = map.shift(); Kontext.clearRect(cl['x'],cl['y'],Größe,Größe); } map.push({'x':x,'y':y}); context.fillStyle = "#777"; //Fülle die Farbe der Schlange aus context.fillRect(x,y,size,size); //Zeichne die Schlange //Wenn die Futterkoordinaten den Koordinaten der Schlange entsprechen (die Schlange frisst das Futter) wenn(Essenx*8 == x && Esseny*8 == y ){ food(); //Zeichne erneut Futter long++; //Die Länge der Schlange erhöht sich mal = mal - 10; //Beschleunige clearInterval(timer); einAus = wahr; setTimeout(goto,times); //Neue Runde starten} } //Ermittle die zufälligen Anzeigekoordinaten von Lebensmitteln und zeichne Lebensmittelfunktion food(){ foodx = Math.ceil(Math.random()*40); //Zufällige Koordinaten des Essens auf der X-Achse foody = Math.ceil(Math.random()*40); //Zufällige Koordinaten des Essens auf der Y-Achse context.fillStyle = "mediumvioletred"; //Füllfarbe des Essens context.fillRect(foodx*8,foody*8,8,8); //Essen zeichnen } //Starte das Spiel Funktion goto(){ wenn(anAus){ Timer = Intervall einstellen(Stern, Zeiten); einAus = falsch; } wenn(EssenT){ Essen(); foodT = falsch; } } //Klicken Sie auf die Schaltfläche, um das Spiel zu startenbut.onclick = goto;//Klicken Sie auf die Schaltfläche, um das Spiel zu starten//Achten Sie auf die Richtung, in die die Richtungstaste gedrückt wird, um die Richtung zu ermitteln, in die sich die Schlange bewegtdocument.onkeydown = function(ev){ var ev = ev || Ereignis; var cod = ev.keyCode - 37; Schalter(Kabeljau){ Fall 1: Richtung = 1; Unterbrechung; //nach oben Fall 2: Richtung = 2; Unterbrechung; //nach rechts Fall 3: Richtung = 3; Unterbrechung; //nach unten Fall 0: Richtung = 0; Unterbrechung; //nach links } } </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:
|
<<: Detaillierte Erklärung des Prinzips zum Erstellen von Tomcat in Eclipse
>>: So prüfen Sie, ob eine Tabelle in MySQL vorhanden ist, und löschen sie dann stapelweise
Inhaltsverzeichnis Vorwort Array.istArray Konstru...
Umfassendes Verständnis des html.css-Überlaufs XM...
Das Image kann auf hub.docker.com gespeichert wer...
Inhaltsverzeichnis nächstesTick Syntaxvereinfachu...
Zum ersten Mal schreiben. Gestatten Sie mir, mich...
Inhaltsverzeichnis Vorwort 1. Der Anforderungsinh...
Problembeschreibung MySQL wurde erfolgreich gesta...
In diesem Artikelbeispiel wird der spezifische Co...
Das hier erwähnte SSH heißt Security Shell. Ich g...
Inhaltsverzeichnis Was ist das Protokoll langsame...
1. Was ist Eventdelegation? Ereignisdelegierung: ...
Dieser Artikel stammt vom Apache Spark Meetup, da...
Auf einem Server werden drei MySQL-Instanzprozess...
Effektbild: 1. Einleitung Ihr eigenes Applet muss...
Vorwort Wenn Sie ein Topmenü erstellen, müssen Si...