Snake: Ich programmiere mein eigenes Videospiel

Schon lange beschäftigte mich der Gedanke, ein eigenes Videospiel zu entwickeln. Das Problem dabei ist, dass ich als Ein-Mann-Programmierer nie die Ressourcen eines grossen Spieleentwicklers haben werde, der mit mehreren hundert Leuten über viele Jahre an einem Videospiel arbeitet (siehe auch meinen Blog-Beitrag «Ist Fallout: New Vegas schon so alt?»). Aber das war natürlich nicht mein Ziel. Ideal wäre ein einfaches Projekt, bei dem ich grundlegende Spielmechaniken kennenlernen würde: Wie steuere ich eine Spielfigur? Wie erkenne ich, dass ich auf ein Hindernis gestossen bin? Oder wie spiele ich einen Sound ab?

Da Videospiele in der Anfangszeit der Computer mangels Hardware-Ausstattung relativ einfach zu programmieren waren, habe ich mich auf die Suche nach einem Spiel aus dieser Zeit gemacht, das ich nachprogrammieren konnte. Ich wurde schnell fündig und stiess auf den Klassiker «Snake» aus den 1970er-Jahren. Dabei steuerst du eine Schlange über ein Spielfeld und versuchst, das zufällig auf dem Feld liegende Futter zu fressen. Sobald die Schlange gefressen hat, wächst sie ein kleines Stück und der nächste Futterhappen taucht auf. Wenn du die Wände oder die Schlange selbst berührst, ist das Spiel vorbei.

Ich möchte einige Probleme aufzählen und wie ich sie gelöst habe, ohne dabei zu tief in die Programmierung einzusteigen.

• Die grundlegendste Frage war: Wie zeichne ich auf einer leeren Website? Das heisst, wie zeichne ich das Spielfeld und die darin enthaltenen Objekte wie Schlange, Nahrung, Punktzahl etc.? Diese Frage stellte sich mir bereits bei einem früheren Projekt, bei dem ich eine interaktive Karte von The Elder Scrolls Online erstellt hatte. Mithilfe einer sogenannten Leinwand (Canvas), die man über die Website «spannt», kann man beliebige Formen, Linien oder auch einzelne Punkte (Pixel) zeichnen. Der HTML-Code für das «Aufziehen» einer Leinwand namens snake-board mit einer Breite und Höhe von 600 Pixeln sieht beispielsweise so aus:

  <canvas id="snake-board" width="600" height="600"></canvas>
  

  Eine gerade Linie mit einer Länge von 50 Pixeln wird mit folgendem Programm-Code gezeichnet:

  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(50, 0);
  context.stroke();
  

• Wie kann ich die Schlange bewegen, war eine nächste Frage. Ich musste einen Algorithmus finden, der bei jeder Bewegung den Kopf der Schlange ein Feld mehr und das Ende der Schlange ein Feld weniger zeichnet, um die Illusion einer Bewegung zu erzeugen.
• Ein weiterer Algorithmus, den ich programmieren musste, beantortete die Frage: Wie finde ich heraus, wann die Schlange auf das Futter trifft? Denselben Algorithmus habe ich für die Kollisionsabfrage verwendet. Sobald die Schlange sich selbst oder die Wände berührt, ist das Spiel zu Ende.
• Die Steuerung der Schlange war eine der leichtesten Aufgaben. Man kann sogenannte Ereignisse (Events) programmieren, die beispielsweise auf Tasteneingaben reagieren. So konnte ich unter anderem die Pfeiltasten abfragen und wusste immer, in welche Richtung sich die Schlange bewegen sollte. Der Programm-Code dafür sieht so aus:

  $("#snakeControl_Key").addEventListener("click", function(e) {
    let button = e.currentTarget;
    if(button.id === "btnArrowUp") {
  	  // Die Pfeiltaste nach oben wurde gedrückt.
      …
  	}
  });

• Ein grösseres Problem hatte ich mit der Sound-Ausgabe auf meinem iPad. Die Fress- und Kollisionsgeräusche wurden nicht abgespielt. Es stellte sich heraus, dass iOS, das Betriebssystem für mobile Geräte von Apple, Audiodaten erst nach einer Benutzerinteraktion abspielt. Die Lösung des Problems bestand darin, diese Audiodaten einmal ohne Lautstärke abzuspielen, wenn der Benutzer das Spiel mit Enter startet.

So, nach all der Theorie wollen wir nun endlich Snake spielen. Ich hoffe, dass dir mein Spiel genauso viel Spass macht, wie mir das Programmieren.