Das Spiel Snake hat sich still und leise seinen Platz in der digitalen Geschichte verdient. Was in den 1970er-Jahren als einfache Arcade-Idee begann, wurde dank der Nokia-Handys in den späten 90ern zu einer weltweiten Obsession. Mit nichts weiter als einem Schwarzweiß-Bildschirm und ein paar Richtungstasten waren Millionen von Menschen begeistert.
Jahrzehnte später ist Snake immer noch lebendig, auf Websites wie Google Snake, in mobilen Apps und sogar auf Smartwatches. Doch das Schöne an Snake ist nicht nur, wie viel Spaß es macht. Es ist auch unglaublich einfach zu erstellen. Tatsächlich kannst du ein funktionierendes Snake-Spiel in nur wenigen Minuten selbst bauen, und zwar mit nichts weiter als dem Editor und deinem Webbrowser.
So geht’s.
Ein bisschen Geschichte
Die ersten Versionen von Snake erschienen in den späten 1970er-Jahren unter Namen wie Blockade. Die Idee war immer gleich: Steuere eine Linie, die jedes Mal länger wird, wenn sie etwas frisst, und versuche, nicht mit dir selbst zu kollidieren.
1997 erlebte das Spiel seinen Durchbruch, als Nokia es auf dem Modell 6110 vorinstallierte. Für viele war es das erste Handyspiel überhaupt. Die Steuerung war einfach, aber die Herausforderung groß genug, um die Spieler bei der Stange zu halten. Snake wurde zu einem weltweiten Hit und gehört bis heute zu den meistgespielten Spielen aller Zeiten.
In den letzten Jahren hat Snake durch die Browser-Version von Google und unzählige Apps ein modernes Comeback erlebt. Aber es hat seinen ganz eigenen Reiz, die klassische Version selbst zu bauen und das ist viel einfacher als man denkt.
Was du brauchst
Du brauchst keine Programmiererfahrung und musst nichts installieren. Alles, was du brauchst:
- Einen Windows-Computer
- Den Editor (Notepad)
- Einen modernen Browser wie Chrome, Edge oder Firefox
Der Code
Unten findest du eine kompakte Version von Snake, geschrieben in HTML und JavaScript. Sie erstellt ein spielbares Spiel mit einer beweglichen Schlange, Futter und Kollisionsabfrage.
<!DOCTYPE html>
<html>
<canvas id="c" width="400" height="400" style="background:#eee"></canvas>
<script>
let ctx = c.getContext("2d"), g = 20, snake = [{x:10,y:10}], dx = 1, dy = 0;
let food = {x:15, y:10};
onkeydown = e => {
if (e.key=="ArrowUp" && dy==0) dx=0,dy=-1;
if (e.key=="ArrowDown" && dy==0) dx=0,dy=1;
if (e.key=="ArrowLeft" && dx==0) dx=-1,dy=0;
if (e.key=="ArrowRight" && dx==0) dx=1,dy=0;
};
setInterval(() => {
let head = {x: snake[0].x + dx, y: snake[0].y + dy};
if (head.x<0||head.y<0||head.x>=20||head.y>=20||snake.some(s=>s.x==head.x&&s.y==head.y)) {
snake = [{x:10,y:10}], dx=1, dy=0; return;
}
snake.unshift(head);
if (head.x == food.x && head.y == food.y)
food = {x: Math.floor(Math.random()*20), y: Math.floor(Math.random()*20)};
else snake.pop();
ctx.clearRect(0,0,400,400);
ctx.fillStyle="red";
ctx.fillRect(food.x*g, food.y*g, g, g);
ctx.fillStyle="green";
snake.forEach(s => ctx.fillRect(s.x*g, s.y*g, g-1, g-1));
}, 150);
</script>
</html>
So verwendest du es
- Öffne den Editor auf deinem Windows-PC.
- Füge den gesamten Code in eine neue Datei ein.
- Speichere die Datei unter dem Namen snake.html. Wähle im Dropdown-Menü „Dateityp“ die Option Alle Dateien, nicht .txt.
- Doppelklicke auf die Datei. Sie wird im Browser geöffnet, und das Spiel startet sofort.
Wie es funktioniert
- Das Spiel nutzt ein 20×20-Raster auf einer 400×400 Pixel großen Zeichenfläche.
- Die Pfeiltasten steuern die Richtung der Schlange.
- Das rote Quadrat ist Futter. Wenn die Schlange es frisst, wird sie länger.
- Wenn die Schlange die Wand oder sich selbst trifft, startet das Spiel neu.
Trotz der wenigen Codezeilen enthält diese Version von Snake echte Spiellogik: Bewegung, Kollisionserkennung, Futter-Generierung und automatische Neustarts.
Warum es sich lohnt, es auszuprobieren
Dieses Projekt ist perfekt für alle, die neugierig sind, wie Spiele funktionieren, aber noch nicht bereit sind, sich in komplexe Programmierung zu stürzen. Es ist schnell, leichtgewichtig und macht überraschend viel Spaß beim Experimentieren. Man kann die Geschwindigkeit ändern, die Farben anpassen oder die Größe des Spielfelds verändern, alles mit nur wenigen Änderungen. Und das Beste daran? Es funktioniert komplett offline, mit nichts weiter als dem Editor und deinem Browser.
Snake hat seit seinem pixeligen Debüt auf Nokia-Handys einen weiten Weg zurückgelegt. Es wurde für das Web neu interpretiert, an nahezu jedes Gerät angepasst, und jetzt, mit nur ein paar Zeilen Code, kann es auch dein eigenes Projekt werden. Ob zum Spaß, aus Nostalgie oder als erster Schritt in die Welt des Programmierens, dieses kleine Projekt beweist, dass selbst die einfachsten Spiele noch immer das Potenzial haben, etwas zu lehren, zu unterhalten und ein Stück Retro-Feeling zurückzubringen.
Neueste Kommentare