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

So implementieren Sie einen Animationsübergangseffekt im Frontend

Inhaltsverzeichnis Einführung Traditionelle Überg...

Lösung für die leere Seite nach einem vue.js-gepackten Projekt

Ich glaube, dass viele Partner, die gerade erst m...

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Inhaltsverzeichnis 1. Was ist ein Index? 2. Warum...

Detaillierte Erklärung der Vue px-zu-rem-Konfiguration

Inhaltsverzeichnis Methode 1 1. Konfigurations- u...

Dekomprimierung, Installation, Sicherung und Wiederherstellung von MySQL in einer Windows-Umgebung

Die Systemumgebung ist Server2012 1. Laden Sie di...

Xhtml-Sonderzeichensammlung

Name des Autors: &#160; no-break space = gesc...

Einige Tipps zur Verwendung von Less in Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...

Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT

Standardmäßig werden Breite und Höhe der Zelle au...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

So installieren Sie ElasticSearch auf Docker in einem Artikel

Inhaltsverzeichnis Vorwort 1. Docker installieren...

Der Unterschied und die Verwendung von json.stringify() und json.parse()

1. Unterschiede zwischen JSON.stringify() und JSO...

Der Button ist im IE auf beiden Seiten gestreckt

Wenn Sie Schaltflächen (Eingabe, Schaltfläche) sch...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 winx64

Die Installation komprimierter Pakete hat sich se...

Tutorial zur Installation von PHP auf CentOS über Yum

Lassen Sie mich zunächst vorstellen, wie Sie PHP ...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...