Ich habe mir schon ein paar Episoden von Canvas-Videos auf MOOC angeschaut und wollte schon immer üben, etwas zu schreiben. Ich habe das Gefühl, dass Snake relativ einfach ist. Als ich auf dem College war, bin ich auch auf viele Probleme gestoßen.
Der Endeffekt ist wie folgt (wenn das Bild zu groß ist, dauert es zu lange. Die Software zum Aufzeichnen von GIF hat ein Zeitlimit ...)
Beginnen Sie mit der Definition des Spielbereichs. Auf dem Bildschirm von Snake gibt es nur zwei Elemente: den Schlangenkörper und den Apfel, und beide können aus quadratischen Gittern bestehen. Fügen Sie Lücken zwischen den Quadraten hinzu. Warum Lücken hinzufügen? Sie können sich vorstellen, dass, wenn Sie alle Gitter erfolgreich ausfüllen und keine Lücken vorhanden sind, ein großes, festes Quadrat entsteht ... Sie haben keine Ahnung, wie der Schlangenkörper aussieht.
Zeichne ein Bild.
Die Koordinaten der oberen linken Ecke des Gitters sind (0, 0), die Abszisse nimmt nach rechts zu und die Ordinate nimmt nach unten zu. Diese Richtung ist die gleiche wie bei Canvas.
Jedes Mal, wenn wir ein Gitter zeichnen, müssen wir in der oberen linken Ecke beginnen. Wir wissen immer, dass die Koordinaten der oberen linken Ecke von Canvas (0, 0) sind. Angenommen, die Seitenlänge des Gitters ist GRID_WIDTH der Lücke ist GAP_WIDTH, wir können das (i, j)-te erhalten. Die Koordinaten der oberen linken Ecke des Gitters (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Gehen Sie davon aus, dass der Schlangenkörper aus drei blauen Gittern besteht. Wir können nicht nur drei Gitter, sondern auch zwei violette Lücken zeichnen. Andernfalls wissen Sie, wie bereits erwähnt, nicht, wie der Schlangenkörper aussieht. Wie im Bild unten gezeigt, kann es zwar gespielt werden, ohne Lücken zu ziehen, das Erlebnis wird jedoch definitiv anders sein.
Zeichnen Sie Lücken zwischen benachbarten Gittern, ohne Lücken zu zeichnen
Jetzt können wir versuchen, eine Schlange zu zeichnen. Der Schlangenkörper ist eigentlich eine Sammlung von Gittern. Jedes Gitter wird durch ein Array dargestellt, das zwei Positionsinformationen enthält. Die gesamte Schlange kann durch ein zweidimensionales Array dargestellt werden.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000 } </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // Die Seitenlänge des Gitters const GAP_WIDTH = 2; // Die Seitenlänge der Lücke const ROW = 10; // Wie viele Rasterreihen gibt es insgesamt und wie viele Raster gibt es in jeder Zeile let canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = canvas.getContext('2d'); let snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // Eins initialisieren