Snake

So funktioniert das Script

Das Script besteht aus vier Bereichen: dem Aufbau des Spielfelds aus 180 kleinen Bildern, dem Spielzustand in zwei Arrays, den vier Bewegungsfunktionen samt Zeitgeber und der Prüfung auf Zusammenstoß. Bemerkenswert ist, dass hier weder ein Canvas noch ein einziges gezeichnetes Pixel vorkommt — bewegt wird ausschließlich, indem bei einzelnen Bildern die src ausgetauscht wird.

for (let i = 0; i < 15; i++) {
  speicher[i] = [];
  Img[i] = [];
  for (let j = 0; j < 12; j++) {
    speicher[i][j] = 0;
    Img[i][j] = "punkt" + (i + 1) + "_" + (j + 1);
  }
}

Zwei zweidimensionale Arrays halten das ganze Spiel zusammen. Img merkt sich zu jeder Koordinate den Namen des zugehörigen Bildes — Img[7][5] ist "punkt8_6". Mit document.getElementById(Img[7][5]) kommt das Script also an genau das Bild in Spalte 8, Zeile 6. speicher merkt sich, was auf einem Feld liegt: eine 0 für „frei“, den Text "zufall" für das rote Futter und ansonsten eine Zahl. Und die Zahl ist der eigentliche Trick des Scripts.

speicher[x_v][i_v]++;
for (let a = 0; a < 15; a++) {
  for (let b = 0; b < 12; b++) {
    if (speicher[a][b] > 0) {
      speicher[a][b]++;
      if (speicher[a][b] > gr_wert) { gr_wert = speicher[a][b]; x_n = a; i_n = b; }
    }
  }
}
snake_weg();

Bei jedem Schritt wird das neue Kopffeld belegt, und danach werden alle belegten Felder um eins hochgezählt. Die Zahl ist damit so etwas wie das Alter eines Schlangenglieds: Der Kopf hat die kleinste, das Schwanzende die größte. Während die Schleife durchzählt, merkt sie sich in x_n und i_n die Koordinaten des höchsten Werts — das ist das Schwanzende. snake_weg() setzt dort das Bild wieder auf Weiß und den Speicher auf 0. So wandert die Schlange, ohne dass das Script jemals eine Liste ihrer Glieder führen müsste.

else if (speicher[x_v][i_v] === "zufall") {
  speicher[x_v][i_v] = 1; laenge++;
  ...
  zuf_punkt();
}

Läuft der Kopf auf das rote Futter, passiert fast dasselbe — mit einem entscheidenden Unterschied: snake_weg() wird nicht aufgerufen. Das Schwanzende bleibt also liegen, und genau dadurch wird die Schlange ein Feld länger. Anschließend legt zuf_punkt() ein neues Futterstück aus. Die Funktion würfelt eine freie Stelle aus und ruft sich selbst noch einmal auf, falls das ausgewürfelte Feld schon belegt ist — ein einfaches Beispiel für Rekursion.

function rechts_v() {
  x_v++;
  if (x_v > 14 || speicher[x_v][i_v] > 0) {
    // ... Spielfeld leeren, Zeitgeber stoppen, Meldung ausgeben ...
  } else {
    elseZweig();
  }
}

Für jede der vier Richtungen gibt es eine solche Funktion. Sie schiebt die Kopfkoordinate um ein Feld weiter und prüft danach zweierlei: Ist der Rand überschritten, und liegt auf dem Zielfeld schon ein Schlangenglied (> 0)? Beides beendet das Spiel. Dass das Futter dabei nicht als Hindernis zählt, ergibt sich von selbst: Auf einem Futterfeld steht der Text "zufall", und der ist nun einmal nicht größer als 0.

function rechts_3() {
  if (richtung === 0) {
    richtung = 1;
    rechts_v();
    clearInterval(Int_oben); clearInterval(Int_unten);
    Int_rechts = setInterval(rechts_v, 300);
  }
}

An den Knöpfen hängen nicht die Bewegungsfunktionen selbst, sondern diese kleinen Umschalter. richtung merkt sich, ob die Schlange gerade waagerecht (1) oder senkrecht (0) fährt; nur der jeweils quere Knopf reagiert. Damit ist die Kehrtwende ausgeschlossen. setInterval(rechts_v, 300) sorgt für den Selbstlauf: Alle 300 Millisekunden rückt die Schlange ein Feld weiter, bis clearInterval den Zeitgeber wieder abschaltet. Wollt ihr ein schnelleres Spiel, setzt ihr die vier 300er auf 200 oder 150 herunter.

brett += '<div class="snake-zelle" style="top:' + ((j - 1) * 22) + 'px; left:' + ((i - 1) * 22) + 'px;">'
       + '<img id="punkt' + i + '_' + j + '" src="' + feld_1 + '" alt=""></div>';

Das Spielfeld baut initSnake() in einer Doppelschleife zusammen: 15 mal 12 kleine Kästchen, jedes 22 Pixel groß und genau dorthin gesetzt, wo seine Zeile und Spalte es verlangen. Jedes Kästchen enthält ein Bild mit der sprechenden id punkt3_7. Erst wenn der ganze Text fertig ist, wandert er in einem Rutsch per innerHTML in das Spielfeld — das ist deutlich schneller, als 180 Elemente einzeln einzufügen. Zum Schluss werden drei Bilder auf Blau gestellt: die Schlange in Ruhestellung, bevor das Spiel beginnt.