Snake: Ich programmiere mein eigenes Videospiel

Der Gedanke, ein eigenes Videospiel zu entwickeln, beschäftigte mich schon lange. Das Problem dabei ist, dass ich als Ein-Mann-Programmierer niemals die Ressourcen habe, wie ein grosser Spieleentwickler, der mit mehreren 100 Personen über viele Jahre ein Videospiel herstellt (siehe auch meinen Blog-Beitrag «Ist Fallout: New Vegas schon so alt?»), auf die Beine zu stellen. Aber das war selbstverständlich nicht mein Ziel. Ein einfaches Projekt wäre ideal, wo ich grundlegende Spielmechaniken kennenlernen würde: Wie steuere ich eine Spielfigur? Wie stelle ich fest, dass ich auf ein Hindernis gestossen bin? Oder wie kann ich einen Sound abspielen?

Da Videospiele in den Anfangszeiten des Computers aufgrund mangelnder Hardware-Ausstattung relativ einfach programmiert waren, machte ich mich auf die Suche nach einem damaligen Spiel, das ich nachprogrammieren konnte. Schnell wurde ich fündig und stiess auf den Klassiker «Snake» aus den 1970er-Jahren. Dabei steuerst du eine Schlange auf einem Spielfeld und versuchst, die Nahrung, die zufällig auf dem Feld liegt, 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 zu Ende.

Ich möchte einige Fragestellungen aufführen und wie ich sie gelöst habe, ohne dabei zu tief in die Programmierung zu gehen.

  • Die grundlegendste Frage war: Wie kann ich auf einer leeren Website zeichnen? Also wie zeichne ich das Spielfeld und die darin enthaltenen Objekte wie Schlange, Nahrung, Punktzahl etc.? Ich hatte diese Fragestellung schon einmal in einem älteren Projekt, wo ich eine interaktive Karte von The Elder Scrolls Online erstellt hatte. Mithilfe einer sogenannten Leinwand (Canvas), die man auf die Website «aufspannt», kann man beliebige Formen, Linien oder sogar einzelne Punkte (Pixel) zeichnen. Beispielsweise lautet der HTML-Code für das «Aufziehen» einer Leinwand namens snake-board und einer Breite und Höhe von 600 Pixeln wie folgt:
    <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 bewege ich die Schlange, war eine nächste Frage. Ich musste einen Algorithmus finden, der bei jeder Bewegung den Kopf der Schlange um ein Feld zusätzlich und dafür das Schlangenende um ein Feld weniger zeichnet, um die Illusion einer Bewegung zu erzeugen.
  • Einen weiteren Algorithmus hatte ich zu programmieren, der die Frage beantwortete: Wie stelle ich fest, wann die Schlange auf die Nahrung trifft? Den gleichen Algorithmus verwendete ich für die Kollisionsabfrage. Sobald sich die Schlange 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 zu bewegen hat. 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 stellte sich bei der Sound-Ausgabe auf meinem iPad heraus. Die Fressens- und Kollisionsgeräusche wurden nicht abgespielt. Es stellte sich heraus, dass iOS, das Betriebssystem der mobilen Geräte von Apple, Audiodaten erst nach einer Benutzerinteraktion abspielt. Die Lösung des Problems bestand darin, diese Audiodaten ohne Lautstärke einmal abzuspielen, wenn der Benutzer das Spiel mit Enter startet.

So, nach all den theoretischen Ausführungen wollen wir endlich Snake spielen. Ich hoffe, dir wird mein Spiel gefallen, so wie ich grossen Spass hatte, es zu programmieren.