Ausweichen

So funktioniert das Script

Das Script besteht aus vier Bausteinen: dem Spielzustand in ein paar Zählvariablen, einer Endlosschleife, die zehnmal pro Hundertstelsekunde alles neu positioniert, einer Tastaturabfrage und der Trefferprüfung. Ein Spielfeld im eigentlichen Sinn gibt es nicht — es sind schlicht zwei Bilder, die per CSS über einer schwarzen Fläche verschoben werden.

let a = 0;   // Spalte der Figur (0 bis 5)
let c = Math.round(Math.random() * 5);   // Spalte des Kristalls
let d = 0;   // Fallfortschritt
let z = 0;   // Bildzähler, treibt das Tempo
let life = 1;   // 1 = Spiel läuft, 0 = getroffen

Das ist der komplette Spielzustand. Solche knappen Namen sind heute unüblich, aber sie zeigen gut, wie wenig ein Spiel im Kern braucht: zwei Positionen, ein Fortschritt, ein Tempo und ein Ja/Nein für „läuft noch". Alles andere ergibt sich daraus.

function move() {
  if (life === 1) {
    zaehler();
    spieler.style.left = (a * 50) + "px";
    d++;
    auto.style.top = (d * z / 200) + "px";
    auto.style.left = (c * 50) + "px";
    hit();
    if (d * z / 200 > 300) { d = 0; c = Math.round(Math.random() * 5); }
  }
  window.setTimeout(move, 10);
}

Das ist die Spielschleife. Sie zeichnet ein Bild und meldet sich mit setTimeout(move, 10) selbst für in zehn Millisekunden wieder an — so entsteht eine Animation, ohne dass irgendwo eine while-Schleife den Browser blockiert. Wichtig: Als erstes Argument steht hier die Funktion move, nicht der Text "move()". Alte Scripts übergaben oft Zeichenketten, die der Browser dann auswerten musste — das ist langsam und gilt heute als unsicher.

Die Positionen berechnen sich aus dem Zustand: Die Figur steht in Spalte a, also bei a * 50 Pixeln von links. Der Kristall fällt auf die Höhe d * z / 200. Weil d und z mit jedem Bild wachsen, wird jeder neue Durchlauf schneller als der vorige — das ist der ganze Trick hinter dem steigenden Schwierigkeitsgrad. Erreicht der Kristall Höhe 300, wird d zurückgesetzt und mit Math.round(Math.random() * 5) eine neue Spalte zwischen 0 und 5 ausgewürfelt.

function hit() {
  if (a === c && d * z / 200 > 250 && life === 1) {
    wechsel("aw-imgplayer", spieler1);
    life = 0;
  }
}

Die Kollisionsprüfung ist erfreulich einfach, weil sich beide Figuren nur in ganzen Spalten bewegen: Stehen sie in derselben Spalte (a === c) und ist der Kristall tief genug unten (Höhe über 250), sitzt der Treffer. Danach schaltet life auf 0 — die Schleife läuft zwar weiter, überspringt aber den ganzen Bewegungsblock, das Spiel steht still.

function keycheck(e) {
  const y = e.which || e.keyCode;
  if (y === 78) restart();
  keyleft(y);
  keyright(y);
  if (a < 0) a = 0;
}
document.addEventListener("keydown", keycheck);

Jeder Tastendruck im Dokument landet in keycheck. Das Ereignisobjekt e enthält in which beziehungsweise keyCode die Nummer der gedrückten Taste: 37 ist Pfeil links, 39 Pfeil rechts, 78 der Buchstabe N. Die beiden Klammern danach begrenzen die Figur: Nach links darf a nicht unter 0 rutschen, nach rechts kappt die Schleife bei 5. Zwei Zeilen, die verhindern, dass die Figur aus dem Feld läuft.

const spieler0 = new Image();
spieler0.src = bilderpfad + "/spieler0.gif";

Die beiden Figurbilder werden gleich zu Beginn als Image-Objekte angelegt. Damit lädt der Browser sie im Voraus in den Zwischenspeicher — wenn im Trefferfall auf das zweite Bild umgeschaltet wird, ist es sofort da und blitzt nicht kurz weiß auf. Diese Technik heißt Preloading und ist bei Bildwechseln immer noch nützlich.

Zum Anpassen: Der Pfad zu den drei Bildern steht ganz oben in bilderpfad — das ist die einzige Zeile, die ihr für die eigene Homepage ändern müsst. Das Spielfeld ist 300 × 350 Pixel groß und in sechs Spalten à 50 Pixel geteilt; wenn ihr andere Bildgrößen verwendet, müsst ihr die 50 in a * 50 und c * 50 sowie die Feldmaße im <style>-Block entsprechend anpassen. Wollt ihr es von Anfang an schwerer haben, gebt z einen höheren Startwert.