JavaScript, um die Idee des Schlangenspiels umzusetzen

JavaScript, um die Idee des Schlangenspiels umzusetzen

Die Implementierungsidee des Javascript-Spiels Snake wird zu Ihrer Information erläutert (vollständige Codeimplementierung). Der spezifische Inhalt ist wie folgt

Wirkungsprozess

1. 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:
  • Exquisiter Snake-Implementierungsprozess in JavaScript
  • JS implementiert das Schlangenspiel
  • JavaScript-Implementierung des klassischen Schlangenspiels
  • JS praktisches objektorientiertes Schlangenspielbeispiel

<<:  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

Artikel empfehlen

Webseiten-Erlebnis: Farbabstimmung für Webseiten

<br />Die Farbe einer Webseite ist entscheid...

Detaillierte Analyse der Ursache für die Meldung des Fehlers „Der Server wird beendet, ohne die PID-Datei zu aktualisieren“ beim Starten von MySQL

Bei vielen Benutzern ist dieser Fehler beim Start...

Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10

Installation, Konfiguration, Start, Anmeldung und...

Grundkenntnisse im Website-Design: Neulinge lesen bitte dies

Heutzutage beginnen viele Leute damit, Websites z...

Einige Möglichkeiten zur Lösung des Problems des in Jenkins integrierten Docker-Plugins

Inhaltsverzeichnis Hintergrund Frage 1 Fehler 2 F...

Einführung in Jenkins und wie man Jenkins mit Docker bereitstellt

1. Verwandte Konzepte 1.1 Jenkins-Konzepte: Jenki...

Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell

Wie oben gezeigt, sind Füllwerte zusammengesetzte...

Detaillierte Erklärung zur Verwendung von Titel-Tags und Absatz-Tags in XHTML

XHTML-Überschriftenübersicht Wenn wir Word-Dokume...

Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]

Ich bin vor zwei Tagen beim Bearbeiten der schrift...

JavaScript zur Implementierung eines Sprachwarteschlangensystems

Inhaltsverzeichnis einführen Hauptmerkmale Effekt...

Vue realisiert Preiskalendereffekt

In diesem Artikelbeispiel wird der spezifische Co...

js um das Schlangenspiel mit Kommentaren zu implementieren

In diesem Artikelbeispiel wird der spezifische Co...

Analyse des Framework-Prinzips des Linux-Eingabesubsystems

Eingabe-Subsystem-Framework Das Linux-Eingabesubs...

Lösung für das Problem, dass Docker Containerdienste nicht stoppen oder löschen kann

Vorwort Heute habe ich von einem Entwickler die R...

Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native

Inhaltsverzeichnis 1. Benutzerdefiniertes Routing...