Kommentar: Die Schwierigkeit des Spiels besteht darin, wie man die Bewegung einer gierigen Schlange simuliert. Es ist offensichtlich einfach, wenn es nur ein Quadrat ist. Wie kann man jedoch die Länge der Schlange steuern, nachdem sie länger wird? Hier finden Sie eine kurze Einführung in die spezifische Implementierung. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Spielbetriebsanweisungen
Verwenden Sie die Pfeiltasten, um die Bewegung der Schlange auf und ab links und rechts zu steuern. Die verräterische Schlange wird nach dem Essen des Essens eine Länge wachsen.
Spielimplementierung
Die Schwierigkeit des Spiels besteht darin, die Bewegung einer gierigen Schlange zu simulieren. Es ist offensichtlich einfach, wenn es nur ein Quadrat ist. Aber wie man die Länge der Schlange steuert, nachdem sie länger wird
Was ist mit der Bewegung jedes Platzes?
Wenn Sie die Bewegung der Schlange beobachten, können Sie feststellen, dass vom Kopf bis zum Schwanz der Schlange die Position jedes Quadrats im nächsten Moment sein vorheriges Quadrat im aktuellen Moment ist.
Standort. Wir müssen also nur die Bewegung des Kopfes der glänztlichen Schlange kontrollieren. Die Positionen anderer Teile können wiederum analogisiert werden.
Ein weiteres bemerkenswertes Thema ist
Wo sollten die neu hinzugefügten Blöcke platziert werden, nachdem die Schlange Essen gegessen hat?
Die Antwort ist, dass im nächsten Moment der neu hinzugefügte Block an der Heckposition des aktuellen Moments erscheinen sollte.
Nach dem Essen des Essens sollte ein Quadrat hinzugefügt werden, bevor jede Position der Schlange aktualisiert wird, und seine Position wird auf die Heckposition des aktuellen Moments eingestellt.
Im aktuellen Moment werden dann die Positionen aller Blöcke mit Ausnahme der neuen Blöcke aktualisiert.
index.html
Snake.js
var canvas;
var ctx;
var Timer;
//Maßnahmen
var x_cnt = 15;
var y_cnt = 15;
var Unit = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * Einheit;
var box_height = 15 * Einheit;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
// Bilder
var image_sprite;
// Objekte
var Schlange;
var Food;
var food_x;
var food_y;
// Funktionen
Funktionsrolle (SX, SY, SW, SH, Richtung, Status, Geschwindigkeit, Bild, Flag)
{
this.x = sx;
this.y = sy;
this.w = SW;
this.h = sh;
Diese. Direktion = Richtung;
this.status = Status;
this.speed = Geschwindigkeit;
this.image = Bild;
this.flag = Flag;
}
Funktionstransfer (Schlüsselcode)
{
Schalter (Schlüsselcode)
{
Fall 37:
Rückkehr 1;
Fall 38:
Rückkehr 3;
Fall 39:
Rückkehr 2;
Fall 40:
Rückkehr 0;
}
}
Funktion addfood ()
{
//food_x=box_x+math.floor(math.random()*(box_width-Unit));
//food_y=box_y+math.floor(math.random()*(box_height-Unit));
food_x = unit * math.floor (math.random () * x_cnt);
food_y = unit * math.floor (math.random () * y_cnt);
Food = neue Rolle (Food_x, Food_y, Einheit, Einheit, 0, 0, Image_sprite, true);
}
Funktionsspiel (Ereignis)
{
var keycode;
if (event == null)
{
KeyCode = window.event.KeyCode;
window.event.preventDefault ();
}
anders
{
KeyCode = Event.KeyCode;
Event.PreventDefault ();
}
var cur_direction = Transfer (KeyCode);
Schlange [0] .Direktion = cur_direction;
}
Funktion update ()
{
// Fügen Sie der Schlange einen neuen Teil hinzu, bevor Sie die Schlange bewegen
if (Snake [0] .x == food.x && snake [0] .y == food.y)
{
var länge = snake.length;
var Tail_x = Snake [Länge - 1] .x;
var Tail_y = Snake [Länge - 1] .y;
var tail = neue Rolle (Tail_x, Tail_y, Einheit, Einheit, Schlange [Länge - 1] .Direktion, 0, 0, Image_sprite, true);
Snake.push (Schwanz);
Addfood ();
}
// Attribute ändern
// den Kopf beweg dich
Schalter (Schlange [0] .Direktion)
{
Fall 0: // unten
Schlange [0] .y += Einheit;
if (Snake [0] .y> bound_down - Einheit)
Schlange [0] .y = bound_down - Einheit;
brechen;
Fall 1: // links
Schlange [0] .x -= Einheit;
if (Snake [0] .x <bound_left)
Schlange [0] .x = bound_left;
brechen;
Fall 2: // rechts
Schlange [0] .x += Einheit;
if (Snake [0] .x> bound_right - Einheit)
Schlange [0] .x = bound_right - Einheit;
brechen;
Fall 3: // Up
Schlange [0] .y -= Einheit;
if (Snake [0] .y <bound_up)
Schlange [0] .y = bound_up;
brechen;
}
// Bewegen Sie einen anderen Teil der Schlange
für (var i = snake.length-1; i> = 0; i--)
{
if (i> 0)
//snake ich.
{
Schlange [i] .x = Schlange [i - 1] .x;
Schlange [i] .y = Schlange [i - 1] .y;
}
}
}
Funktion Drawscene ()
{
ctx.clearRect (box_x, box_y, box_width, box_height);
ctx.strokestyle = "rgb (0,0,0";
ctx.strokerect (box_x, box_y, box_width, box_height);
// Kollisionen Erkennung
// Bilder zeichnen
für (var i = 0; i <snake.length; i ++)
{
ctx.drawimage (image_sprite, snake [i] .x, snake [i] .y);
}
ctx.drawimage (image_sprite, food.x, food.y);
}
Funktion init ()
{
canvas = document.getElementById ("szene");
ctx = canvas.getContext ('2d');
// Bilder
Image_sprite = new Image ();
Image_sprite.src = "Bilder/Sprite.png";
Image_sprite.onload = Funktion ())
{}
// Ojects
Snake = new Array ();
var head = neue Rolle (0 * Einheit, 0 * Einheit, Einheit, Einheit, 5, 0, 1, Image_sprite, true);
Snake.push (Kopf);
window.addeventListener ('keydown', spiele, false);
Addfood ();
setInterval (Update, 300); //Notiz
setInterval (Drawscene, 30);
}
Verwandte Lesung: HTML5 -Schlangenspiel perfekt implementiert mit 63 Codezeilen