Ballspiel

So funktioniert das Script

Das Spiel besteht aus zwei Schleifen, die unabhängig voneinander laufen: ball_steuer() kümmert sich alle 50 Millisekunden um den Ball — fallen lassen, Zusammenstöße prüfen, Punkte zählen —, und platten_steuer() schiebt alle 30 Millisekunden die vier Balken nach oben und würfelt neue aus, sobald einer oben herausgewandert ist. Dazu kommt ein Tastatur-Beobachter für die Seitwärtsbewegung. Der komplette Spielzustand steckt in einer Handvoll Variablen ganz oben.

const platten_top  = [112, 350, 50, 600];
const platten_left = [125, 50, 50, 100];
const platten_gros = [4, 4, 2, 6];
const platten_type = ["platte", "spitz", "platte", "platte"];

Vier gleich lange Arrays (nummerierte Listen) beschreiben die vier Balken: Höhe, seitliche Position, Breite in Zwölftel-Einheiten und Art. Was zu Balken Nummer 1 gehört, steht in allen vier Listen an Position 1 — man nennt das parallele Arrays. Heute würde man dafür eher eine Liste aus Objekten nehmen, aber das Prinzip ist gut zu erkennen. Interessant: platten_gros ist ein Faktor, die tatsächliche Breite in Bildpunkten ist immer platten_gros * 12.

if (ball_left > (platten_left[i] - 10) && ball_left < (platten_left[i] + (platten_gros[i] * 12))
    && ball_top > (platten_top[i] - 13) && ball_top < (platten_top[i] + 12)) {

Das ist die Kollisionsprüfung, das Herzstück fast jedes Geschicklichkeitsspiels. Sie fragt für jeden Balken vier Dinge gleichzeitig: Ist der Ball weit genug rechts, weit genug links, tief genug und noch nicht zu tief? Nur wenn alle vier Bedingungen zutreffen, überlappen sich Ball und Balken. Die Zahlen 10, 13 und 12 sind die Toleranzen, die die Größe des Balls berücksichtigen — an ihnen könnt ihr drehen, wenn euch das Landen zu schwer oder zu leicht vorkommt.

Damit diese Rechnung überhaupt aufgeht, müssen Ball und Balken genau dort gezeichnet werden, wo das Script sie vermutet. Deshalb ist das Spielfeld div#anzeige die Bühne mit position: relative, und alle beweglichen Teile darin stehen auf position: absolute. Ihre top- und left-Werte zählen dann vom linken oberen Eck der Bühne — also in genau dem Koordinatensystem, mit dem auch platten_top und ball_top rechnen. Mit position: relative wäre jedes Element stattdessen von seinem Platz im normalen Textfluss aus verschoben worden, und weil die Balken im Quelltext untereinander stehen, hätte sich Balken für Balken ein zusätzlicher Versatz aufaddiert: Man würde die Balken um einige Dutzend Bildpunkte neben der Stelle sehen, an der sie tatsächlich treffen.

if (platten_type[i] === "platte") {
  ball_top = (platten_top[i] - 12);
  punkte = ((actual_flug * actual_flug) + punkte);
  actual_flug = 0;
}

Bei einer normalen Platte wird der Ball genau obendrauf gesetzt, und der Flug wird abgerechnet. actual_flug ist die Anzahl der Takte seit dem letzten Bodenkontakt; sie wird mit sich selbst multipliziert, bevor sie zu den Punkten kommt. Deshalb bringt ein langer Flug überproportional viel — das ist die eigentliche Spielidee. Danach beginnt der Zähler wieder bei null.

if (actual_flug <= 20) { ball_top = ball_top + 1; }
else if (actual_flug > 20 && actual_flug <= 40) { ball_top = ball_top + 1.5; }
else if (actual_flug > 40) { ball_top = ball_top + 2; }

So entsteht die Beschleunigung: In den ersten 20 Takten fällt der Ball einen Bildpunkt pro Takt, danach eineinhalb, ab Takt 41 zwei. Eine echte Schwerkraft-Simulation würde stattdessen eine Geschwindigkeit fortlaufend erhöhen; die drei Stufen hier sind die einfache Variante und für ein Spiel völlig ausreichend.

if (ball_top < 187 && ball_top > 0 && weiter === "yes") {
  setTimeout(ball_steuer, 50);
} else {
  live--;
  …
}

Am Ende ruft sich die Funktion über setTimeout selbst wieder auf — 50 Millisekunden später. So entsteht die Spielschleife, ganz ohne while: Jeder Durchlauf plant den nächsten. Fällt der Ball unter die Marke 187 oder ist er in eine Stachelplatte gelaufen, wird stattdessen ein Leben abgezogen; bleibt noch eines übrig, startet der Ball oben links neu, sonst endet das Spiel.

const zufall = (Math.round(Math.random() * 13));
if (zufall <= 6) { platten_type[m] = "platte"; }
else if (zufall <= 12) { platten_type[m] = "spitz"; }
else if (zufall === 13) { platten_type[m] = "herz"; }

Wandert ein Balken oben aus dem Feld, wird er unten neu gewürfelt: Art, Breite und Seitenlage bekommen neue Zufallswerte. Die Zahlenbereiche verteilen die Häufigkeiten — sichere Platten und Stacheln sind etwa gleich wahrscheinlich, ein Herz ist die Ausnahme. Wer das Spiel entschärfen will, vergrößert einfach den Bereich für "platte", etwa auf zufall <= 9.

if (Hexadezimalcode === 37) { if (ball_left >= 1) { ball_left = ball_left - 2; } }
else if (Hexadezimalcode === 39) { if (ball_left < 288) { ball_left = ball_left + 2; } }

37 und 39 sind die Codes der linken und rechten Cursortaste. Die zusätzlichen Abfragen halten den Ball innerhalb des 300 Bildpunkte breiten Feldes. Das Original horchte auf keypress; heutige Browser melden Cursortasten dort nicht mehr, deshalb steht hier keydown. Die Bewegung von zwei Bildpunkten pro Tastendruck dürft ihr gern erhöhen, wenn euch die Steuerung zu zäh ist.