HTML5 – Canvas – Snake

Auf meinem Weg zum JavaScript Ninja .. falsch .. eigentlich wollte ich nur mit dem neuen HTML5 Element Canvas rumspielen .. am Ende habe ich dann aber glaube ich mehr mit JavaScript rumgespielt .. aber darauf wird es hinauslaufen .. das CANVAS Element ist ohne Javascript im Grunde völlig nutzlos .. CANVAS ist wieder Name schon sagt die weiße Leinwand die euch zur Verfügung steht ..

Pinsel und Farben sind aber JavaScript .. und mehr muss man zu Canvas dann auch fast nicht mehr sagen ..

Das Element lässt euch machen was ihr wollt .. sofern es sich irgendwie mit JavaScript machen lässt.

Das Spiel

Inspiriert vom No Tears Guide to HTML5 Games habe ich dann beschlossen das klassische Snake das man von den alten Nokia Handys kennt in JavaScript nachzubauen .. hier könnt ihr mein Canvas Snake mal ausprobieren.

Ich habe etwas von jQuery und dem jQuery Hotkeys Plugin Gebrauch gemacht .. aber nur um die Tastatureingaben sicher abzufangen .. der Rest ist natives JS.

Der Quelltext ist schön knapp und wie ich finde sehr gut lesbar .. mal sehen .. wenn ich die Tage Zeit habe werde ich vielleicht noch ein bei “magische” Codeschnipsel kommentieren ..

Das komplizierteste war das Array das sich die Länge und Position der Schlange merkt .. und obsolete Positionen der Schlange wieder cleared ..

this.body.push([this.x, this.y])      
if (this.body.length > this.taillength) {          
  var clear = this.body.shift();
  cx.clearRect(clear[0], clear[1], this.grid, this.grid); 
}

Hier schaue ich wie lange die Schlange ist und wische dann alles was über die Länge die in der taillength Variablen steht wieder weg.

Weiterhin ist die Kollisionskontrolle etwas schwerer zu verstehen als der Rest. Es gibt einmal die Kontrolle ob die Schlange ihr Futter frisst und zum zweiten ob die Schlange crashed .. in sich selbst oder in die Begrenzung.

Für das Futter checke ich nur ob der Kopf (this.x / this.y) der Schlange sich an der gleichen Position wie das Futter befindet

if (this.x  randomPointX && this.y  randomPointY) {
  this.taillength++;
  food(); 
}

Für die Kollisionskontrolle mit der Wand oder Schwanz muss ich schauen ob sich der Kopf mit den Koordinaten die aktuell im body Array stehen überschneidet .. ganz gut hilft einem hier die .some Methode mit der man einfach schauen kann ob im kompletten Array die Werte vorkommen ..

Spielen tut man mit dem Cursor und ihr braucht einen Browser der HTML5 unterstützt ..

Hier gehts zum Canvas – HTML5 – Snake

Leave a Reply

Your email address will not be published. Required fields are marked *