Exquisiter Snake-Implementierungsprozess in JavaScript

Inhaltsverzeichnis

1. HTML-Struktur erstellen
2. Erstellen Sie eine Tabelle
3. Erstellen Sie den Kopf und Körper der Schlange
4. Essen zubereiten
5. Bringen Sie die Schlange in Bewegung
6. Kontrollieren Sie die Richtung der Schlange
7. Code vervollständigen

Hauptseite
Spiel.js
Schlange.js
Essen.js

8. Bilder

IX. Fazit

Dieser Artikel ist nicht einfach! !

Heute hat der Blogger hart daran gearbeitet, ein kleines Schlangenspiel zu schreiben. Der gesamte Prozess von Grund auf war einfach aufregend.

Als nächstes wird dieser Blogger ausführlich über diesen Vorgang sprechen! !

Lassen Sie uns ohne weitere Umschweife einen Blick auf die Abschlusspräsentation werfen.

Erst als ich es gesehen habe, habe ich verstanden, was Operation ist, es ist einfach legendär! !

Lassen Sie uns als Nächstes über die eigentliche Operation sprechen, ohne zu prahlen!

Zunächst einmal müssen wir wissen, dass die sogenannte Schlange nichts anderes ist als die Farben, die über den Tisch laufen! Der anfängliche Effekt ist wie unten dargestellt

Natürlich werden hier Arrays für Operationen und Konstruktoren zur Kapselung verwendet.

Hier sind drei js-Dateien gekapselt, die zum Schreiben von Lebensmitteln, Schlangen und unserer Mediator-Game.js-Datei verwendet werden!

Wie ich gerade sagte, ist das Schreiben einer Schlange ein Prozess, der von Grund auf neu beginnt. Daher befand sich in unserer index.html zu Beginn nichts, nur eine Div-Box, und die anderen Tabellen, Schlangen und Lebensmittel wurden alle später mithilfe von Funktionen erstellt.

1. HTML-Struktur erstellen

Das Folgende ist der anfängliche Code in unserem Textkörper:

<Text>
    <div id="app">
    </div>
    <script src="js/Snake.js"></script>
    <script src="js/Food.js"></script>
    <script src="js/Spiel.js"></script>
    <Skript>
        var Spiel = neues Spiel();
    </Skript>
</body>

2. Erstellen Sie eine Tabelle

Der erste Schritt von Grund auf besteht natürlich darin, zuerst unsere Tabelle zur Seite hinzuzufügen, also benötigen wir ein allgemeines Gerüst! ! Auf diese Weise können Sie die im Bild oben dargestellte Tabelle sehen. Wenn man das sieht, scheint sich jeder nächste Schritt zu lohnen!

Funktion Spiel() {
    this.row = 25; //Anzahl der Zeilen this.col = 25; //Anzahl der Spalten this.init(); //Knoten initialisieren }
Spiel.prototype.init = Funktion () {
    this.dom = document.createElement('table'); // Eine Tabelle erstellen var tr, td;
    // Zeilen und Spalten durchlaufen für (var i = 0; i < this.row; i++) {
        tr = document.createElement('tr'); //Erstelle eine Zeile für (var j = 0; j < this.col; j++) {
            td = document.createElement('td'); // Eine Spalte erstellen tr.appendChild(td); // Die Spalte an die Zeile anhängen }
        this.dom.appendChild(tr); // Füge die Zeile der Tabelle hinzu}
    document.querySelector('#app').appendChild(this.dom); //Tabelle an div anhängen}

3. Erstellen Sie den Kopf und Körper der Schlange

Der zweite Schritt vom Nichts zum Etwas, Schlangenkopf, Schlangenkopf, Schlangenkopf, Schlangenkörper, Schlangenkörper, Schlangenkörper! Als ich das sah, wurde mir klar, wie wichtig es ist, zu lernen und zu wissen.

Funktion Schlange() {
    // Initialisierungskörper der Schlange this.body = [
        { 'Zeile': 3, 'Spalte': 5 },
        { 'Zeile': 3, 'Spalte': 4 },
        { 'Zeile': 3, 'Spalte': 3 },
        { 'Zeile': 3, 'Spalte': 2 }
    ];
}
Snake.prototype.render = Funktion () {
    // Rendering des Schlangenkopfes game.setColorHead(this.body[0].row, this.body[0].col);
    // Darstellung des Schlangenkörpers für (var i = 1; i < this.body.length; i++) {
        Spiel.SetColor(dieser.Körper[i].Zeile, dieser.Körper[i].col, '#649c49')
    }
}

Snake ruft die Eigenschaften des Mediator-Game-Prototyp-Objekts auf!

Game.prototype.setColor = Funktion (Zeile, Spalte, Farbe) {
    this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.background = Farbe;
}

4. Essen zubereiten

Der dritte Schritt von nichts zu etwas ist Essen, Essen, Essen! Wenn wir das sehen, haben wir alle Grundformen!

Funktion Essen(SpielSchlange) {
    var selbst = dies;
    // Die folgende do-while-Schleifenanweisung wird verwendet, um zuerst eine Zeile und eine Spalte zu erstellen und dann zu bestimmen, ob sich die Zeile und die Spalte in der Schlange befinden. do {
        // Essensort this.row = parseInt(Math.random() * gameSnake.row)
        this.col = parseInt(Math.random() * gameSnake.col)
    } während ((Funktion () {
        // Durchlaufe die Zeile und Spalte der Schlange und prüfe dann, ob sie sich mit der neu zufällig generierten Zeile und Spalte des Futters überschneidet for (var i = 0; i < gameSnake.snake.body.length; i++) {
            wenn (self.row == gameSnake.snake.body[i].row und self.col == gameSnake.snake.body[i].col) {
                gibt true zurück;
            }
        }
        gibt false zurück;
    })());
}
Lebensmittel.prototype.render = Funktion () {
    Spiel.setHTML(diese.Zeile, diese.Spalte);
}

5. Bringen Sie die Schlange in Bewegung

Der vierte Schritt vom Nichts zum Etwas: Beweg dich, beweg dich, beweg dich! Die Verwendung von Kopf, Ende und Löschung eines Arrays ist hier eine perfekte Übereinstimmung!

//SchlangenbewegungSnake.prototype.update = function () {
    diese.Richtung = diese.wirdRichtung;
    Schalter (diese.Richtung) {
        Fall 'R': //rechts this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            brechen;
        Fall „D“: //Weiter this.body.unshift({ „row“: this.body[0].row + 1, „col“: this.body[0].col });
            brechen;
        Fall 'L': //links this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
            brechen;
        Fall 'U': //nach oben this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
            brechen;
    }
    // Todesurteil, der Teil jenseits der Tischkante if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
        alert('Ich bin gegen die Wand gelaufen, ich habe insgesamt ' + game.score + 'Erdbeeren' gegessen);
        dies.body.shift();
        clearInterval(spiel.timer);
        Standort.neu laden();
    }
    // Wenn du dich selbst schlägst, wirst du für tot erklärt, denn (var i = 1; i < this.body.length; i++) {
        // Wenn sich Zeile und Spalte des Kopfes der aktuellen Schlange und eines bestimmten Körperteils vollständig überlappen, if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
            alert('Bin gegen mich selbst gestoßen und habe es gegessen' + game.score + 'Erdbeere');
            dies.body.shift();
            clearInterval(spiel.timer);
            Standort.neu laden();
        }
    }
    // Schlange frisst Nahrung // Wenn der Kopf der aktuellen Schlange nicht mit der Nahrung überlappt, bedeutet dies, dass sie zu diesem Zeitpunkt noch keine Nahrung gefressen hat. Zu diesem Zeitpunkt wird der Schwanz gelöscht. Wenn er überlappt, bedeutet dies, dass es zu spät ist. Zu diesem Zeitpunkt löschen wir den Schwanz nicht if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
        // Zu diesem Zeitpunkt wird nur der Kopf hinzugefügt und der Schwanz wird nicht gelöscht. game.food = new Food(game); // Neues Essen erstellen game.score++;
        spiel.f = 0;
    } anders {
        this.body.pop(); //Lösche das letzte Element des Arrays}
}

6. Kontrollieren Sie die Richtung der Schlange

Der fünfte Schritt vom Nichts zum Etwas ist die Richtung der Schlange! Wenn Sie hier ankommen und auf jeden Schritt in der Vergangenheit zurückblicken, sind sie alle nur schwebende Wolken! !

// Ändere die Richtung der Schlange, um zu verhindern, dass sie sich umdreht, bevor sie einmal gerendert wurde Snake.prototype.changeDirection = function (d) {
    dies.willDirection = d;
}

// Überwachung von Tastaturereignissen einrichten Game.prototype.bindEvent = function () {
    var selbst = dies;
    document.addEventListener('Taste gedrückt', Funktion (e) {
        // Verwende den ASCII-Codewert um den Richtungsschalter der Tastatur zu bestimmen (e.keyCode) {
            Fall 37: //linkswenn (self.snake.direction == 'R') return; // Erstmal beurteilen, ob die aktuelle Richtung nach rechts geht, wir können zu diesem Zeitpunkt nicht die linke Taste drücken self.snake.changeDirection('L');
                selbst.d = "L";
                brechen;
            Fall 38: // nach oben if (self.snake.direction == 'D') return; // Zuerst eine Beurteilung vornehmen, ob die aktuelle Richtung nach unten geht, wir können zu diesem Zeitpunkt die Aufwärtstaste nicht drücken self.snake.changeDirection('U');
                self.d = "U";
                brechen;
            Fall 39: //rechtswenn (self.snake.direction == 'L') return; // Zuerst eine Beurteilung vornehmen, ob die aktuelle Richtung nach links geht, wir können zu diesem Zeitpunkt nicht die rechte Taste drücken self.snake.changeDirection('R');
                selbst.d = "R";
                brechen;
            Fall 40: //Weiterwenn (self.snake.direction == 'U') return; // Erstmal beurteilen, ob die aktuelle Richtung nach oben geht, wir können die Taste jetzt nicht drücken self.snake.changeDirection('D');
                selbst.d = "D";
                brechen;
        }
    })
}

Zum Schluss stellen wir einfach den Stil nach Belieben ein. Hier stelle ich die entsprechende Farbe entsprechend meinem Lieblingsrosa ein und füge das Essen ein, das ich mag! !

7. Code vervollständigen

Hauptseite

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Schlange</title>
    <Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
 
        #app {
            Position: relativ;
            Rand: 20px durchgezogen #f8bbd0;
            Hintergrundfarbe: #fce4ec;
            Breite: 500px;
            Höhe: 500px;
            Rand: 15px automatisch;
        }
 
        Tisch {
            Rahmen-Zusammenbruch: Zusammenbruch;
            Hintergrundfarbe: #fce4ec;
        }
 
        td {
            Position: relativ;
            Hintergrundgröße: 100 % 100 %;
            Randradius: 50 %;
            Breite: 20px;
            Höhe: 20px;
            Textausrichtung: zentriert;
            /* Hintergrundfarbe: #fce4ec; */
            /* Rahmen: 1px durchgezogen #aaa; */
        }
 
        td .snake {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 100 %;
            Höhe: 100%;
        }
 
        .Start,
        .aussetzen {
            Cursor: Zeiger;
            Position: absolut;
            Breite: 150px;
            oben: 50 %;
            links: 50%;
            transformieren: übersetzen(-50 %, -50 %);
        }
 
        .aussetzen {
            Anzeige: keine;
            Z-Index: 2;
        }
    </Stil>
</Kopf>
 
<Text>
    <!-- <h3 id="f">Frame-Nummer: 0</h3>
    <h3 id="score">Punktzahl: 0</h3> -->
    <div id="app">
        <img src="images/start.gif" alt="" class="start">
        <img src="images/suspended.png" alt="" class="suspend">
    </div>
    <!-- <script src="js/last.js"></script> -->
    <script src="js/Snake.js"></script>
    <script src="js/Food.js"></script>
    <script src="js/Spiel.js"></script>
    <Skript>
        var Spiel = null;
        varflag = wahr;
        var suspend = document.querySelector('.suspend');
        document.querySelector('.start').addEventListener('klicken', function () {
            // document.querySelector('#app').style.backgroundColor='weiß';
            diese.Stil.Anzeige = "keine";
            Spiel = neues Spiel();
            document.querySelector('table').addEventListener('click', function () {
                clearInterval(spiel.timer);
                suspend.style.display = "Blockieren";
 
            })
            suspend.addEventListener('klicken', Funktion () {
                suspend.style.display = "keine";
                spiel.timer = setzeIntervall(funktion () {
                    spiel.f++;
                    // document.getElementById('f').innerHTML = 'Framenummer:' + game.f;
                    // document.getElementById('score').innerHTML = 'Ergebnis:' + game.score;
                    // Bildschirm löschen game.clear();
                    // Schlangenbewegung (Update)
                    // Geschwindigkeit der Schlange aktualisieren. Wenn die Schlange länger wird, sollte die Geschwindigkeit erhöht werden var während = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
                    spiel.f % während == 0 und spiel.snake.update();
 
                    // spiel.snake.update();
                    // Rendere die Schlange game.snake.render();
                    // Essen rendern game.food.render();
                }, 10)
            })
        })
    </Skript>
</body>
 
</html>

Spiel.js

Funktion Spiel() {
    this.row = 25; //Anzahl der Zeilenthis.col = 25; //Anzahl der Spaltenthis.score = 0; //Ergebnisthis.init(); //Knoten initialisierenthis.snake = new Snake(); //Schlange instanziieren classthis.food = new Food(this); //Essen initialisieren// this.last = new Last();
    this.start(); //Timer-Task ausführen this.bindEvent(); //Überwachung von Tastaturereignissen this.d = 'R';
}
Spiel.prototype.init = Funktion () {
    this.dom = document.createElement('table'); // Eine Tabelle erstellen var tr, td;
    // Zeilen und Spalten durchlaufen für (var i = 0; i < this.row; i++) {
        tr = document.createElement('tr'); //Erstelle eine Zeile für (var j = 0; j < this.col; j++) {
            td = document.createElement('td'); // Eine Spalte erstellen tr.appendChild(td); // Die Spalte an die Zeile anhängen }
        this.dom.appendChild(tr); // Füge die Zeile der Tabelle hinzu}
    document.querySelector('#app').appendChild(this.dom); //Tabelle an div anhängen}
// Durchlaufe die Tabelle und lösche die Farben auf der Tabelle. Game.prototype.clear = function () {
    für (var i = 0; i < diese.Zeile; i++) {
        für (var j = 0; j < this.col; j++) {
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].style.background = '';
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML = '';
        }
    }
}
// So legen Sie die Farbe der Zeilen und Spalten der Tabelle fest Game.prototype.setColor = function (row, col, color) {
    this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.background = Farbe;
}
// Setze den Schlangenkopf Game.prototype.setColorHead = function (row, col) {
    var img = document.createElement('img');
    img.src = "Bilder/Schlange.png";
    img.className = "Schlange";
    this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].appendChild(img);
    // this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor='transparent'
    Schalter (dieses.d) {
        Fall „R“: //Rechtsbruch;
        Fall „D“: //Weiter img.style.transform = „drehen(90 Grad)“;
                brechen;
        Fall „L“: //links img.style.transform = „drehen(180 Grad)“;
                brechen;
        Fall „U“: // oben img.style.transform = „drehen(-90 Grad)“;
                brechen;
    }
}
// Essen rendern Game.prototype.setHTML = function (row, col) {
    this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundImage = 'url(./images/food.png)';
}
// Überwachung von Tastaturereignissen einrichten Game.prototype.bindEvent = function () {
    var selbst = dies;
    document.addEventListener('Taste gedrückt', Funktion (e) {
        // Verwende den ASCII-Codewert um den Richtungsschalter der Tastatur zu bestimmen (e.keyCode) {
            Fall 37: //linkswenn (self.snake.direction == 'R') return; // Erstmal beurteilen, ob die aktuelle Richtung nach rechts geht, wir können zu diesem Zeitpunkt nicht die linke Taste drücken self.snake.changeDirection('L');
                selbst.d = "L";
                brechen;
            Fall 38: // nach oben if (self.snake.direction == 'D') return; // Zuerst eine Beurteilung vornehmen, ob die aktuelle Richtung nach unten geht, wir können zu diesem Zeitpunkt die Aufwärtstaste nicht drücken self.snake.changeDirection('U');
                self.d = "U";
                brechen;
            Fall 39: //rechtswenn (self.snake.direction == 'L') return; // Zuerst eine Beurteilung vornehmen, ob die aktuelle Richtung nach links geht, wir können zu diesem Zeitpunkt nicht die rechte Taste drücken self.snake.changeDirection('R');
                selbst.d = "R";
                brechen;
            Fall 40: //Weiterwenn (self.snake.direction == 'U') return; // Erstmal beurteilen, ob die aktuelle Richtung nach oben geht, wir können die Taste jetzt nicht drücken self.snake.changeDirection('D');
                selbst.d = "D";
                brechen;
        }
    })
}
Spiel.prototype.start = Funktion () {
    // Frame-Nummer this.f = 0;
    // Der Kern des Timers ist die Essenz der Spieldarstellung: Bildschirm löschen - aktualisieren - rendern this.timer = setInterval(function () {
        spiel.f++;
        // document.getElementById('f').innerHTML = 'Framenummer:' + game.f;
        // document.getElementById('score').innerHTML = 'Ergebnis:' + game.score;
        // Bildschirm löschen game.clear();
        // Schlangenbewegung (Update)
        // Geschwindigkeit der Schlange aktualisieren. Wenn die Schlange länger wird, sollte die Geschwindigkeit erhöht werden var während = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        spiel.f % während == 0 und spiel.snake.update();
        // spiel.snake.update();
        // Rendere die Schlange game.snake.render();
        // Essen rendern game.food.render();
    }, 10)
}

Schlange.js

Funktion Schlange() {
    // Initialisierungskörper der Schlange this.body = [
        { 'Zeile': 3, 'Spalte': 5 },
        { 'Zeile': 3, 'Spalte': 4 },
        { 'Zeile': 3, 'Spalte': 3 },
        { 'Zeile': 3, 'Spalte': 2 }
    ];
    this.direction = 'R'; //Semaphor, legt die Bewegungsrichtung fest this.willDirection = 'R'; //Die zu ändernde Richtung besteht darin, auf der Stelle eine Kehrtwende zu machen}
Snake.prototype.render = Funktion () {
    // Rendering des Schlangenkopfes game.setColorHead(this.body[0].row, this.body[0].col);
    // Darstellung des Schlangenkörpers für (var i = 1; i < this.body.length; i++) {
        Spiel.SetColor(dieser.Körper[i].Zeile, dieser.Körper[i].col, '#649c49')
    }
}
//SchlangenbewegungSnake.prototype.update = function () {
    diese.Richtung = diese.wirdRichtung;
    Schalter (diese.Richtung) {
        Fall 'R': //rechts this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            brechen;
        Fall „D“: //Weiter this.body.unshift({ „row“: this.body[0].row + 1, „col“: this.body[0].col });
            brechen;
        Fall 'L': //links this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
            brechen;
        Fall 'U': //nach oben this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
            brechen;
    }
    // Todesurteil, der Teil jenseits der Tischkante if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
        alert('Ich bin gegen die Wand gelaufen, ich habe insgesamt ' + game.score + 'Erdbeeren' gegessen);
        dies.body.shift();
        clearInterval(spiel.timer);
        Standort.neu laden();
    }
    // Wenn du dich selbst schlägst, wirst du für tot erklärt, denn (var i = 1; i < this.body.length; i++) {
        // Wenn sich Zeile und Spalte des Kopfes der aktuellen Schlange und eines bestimmten Körperteils vollständig überlappen, if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
            alert('Bin gegen mich selbst gestoßen und habe es gegessen' + game.score + 'Erdbeere');
            dies.body.shift();
            clearInterval(spiel.timer);
            Standort.neu laden();
        }
    }
    // Schlange frisst Nahrung // Wenn der Kopf der aktuellen Schlange nicht mit der Nahrung überlappt, bedeutet dies, dass sie zu diesem Zeitpunkt noch keine Nahrung gefressen hat. Zu diesem Zeitpunkt wird der Schwanz gelöscht. Wenn er überlappt, bedeutet dies, dass es zu spät ist. Zu diesem Zeitpunkt löschen wir den Schwanz nicht if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
        // Zu diesem Zeitpunkt wird nur der Kopf hinzugefügt und der Schwanz wird nicht gelöscht. game.food = new Food(game); // Neues Essen erstellen game.score++;
        spiel.f = 0;
    } anders {
        this.body.pop(); //Lösche das letzte Element des Arrays}
}
// Ändere die Richtung der Schlange, um zu verhindern, dass sie sich umdreht, bevor sie einmal gerendert wurde Snake.prototype.changeDirection = function (d) {
    dies.willDirection = d;
}

Essen.js

Funktion Essen(SpielSchlange) {
    var selbst = dies;
    // Die folgende do-while-Schleifenanweisung wird verwendet, um zuerst eine Zeile und eine Spalte zu erstellen und dann zu bestimmen, ob sich die Zeile und die Spalte in der Schlange befinden. do {
        // Essensort this.row = parseInt(Math.random() * gameSnake.row)
        this.col = parseInt(Math.random() * gameSnake.col)
    } während ((Funktion () {
        // Durchlaufe die Zeile und Spalte der Schlange und prüfe dann, ob sie sich mit der neu zufällig generierten Zeile und Spalte des Futters überschneidet for (var i = 0; i < gameSnake.snake.body.length; i++) {
            wenn (self.row == gameSnake.snake.body[i].row und self.col == gameSnake.snake.body[i].col) {
                gibt true zurück;
            }
        }
        gibt false zurück;
    })());
}
Lebensmittel.prototype.render = Funktion () {
    Spiel.setHTML(diese.Zeile, diese.Spalte);
}

8. Bilder

Als nächstes werde ich die von mir verwendeten Bilder hier einfügen und diejenigen, denen sie gefallen, können sie direkt verwenden!

IX. Fazit

Freunde, die bis zum Ende gelesen haben, denkt Ihr, dass es eigentlich ganz einfach ist? Wenn Sie interessiert sind, probieren Sie es jetzt aus! !

Dies ist das Ende dieses Artikels über den Implementierungsprozess von JavaScript Exquisite Snake. Weitere relevante Inhalte zu JavaScript Snake finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren: