Pong

So funktioniert das Script

Pong braucht vier Bausteine: einen Spielzustand (wo sind Ball und Balken, in welche Richtung fliegt der Ball?), eine Tastatursteuerung, eine Schleife, die den Ball bewegt, und eine zweite Schleife für den Computergegner. Anders als bei Rechen-Scripts läuft hier also dauernd etwas, auch wenn niemand klickt.

let hohe_du = 110;
let hohe_computer = 110;
let ball_left = 80;
let ball_top = 150;
let stat = "null";
let richtung = "rechts";

Das ist der komplette Spielzustand, und er besteht nur aus Zahlen und zwei kurzen Texten. Die Positionen sind Pixelangaben innerhalb des schwarzen Feldes. stat merkt sich, ob das Spiel schon läuft, und richtung ist der interessanteste Wert: Statt mit Geschwindigkeiten in x- und y-Richtung zu rechnen, kennt dieses Script sechs feste Flugrichtungen — "rechts", "links" sowie "ro", "ru", "lo" und "lu" für rechts oben, rechts unten, links oben und links unten.

function Taste_druecken(ereignis) {
  const taste = ereignis.key;
  if (taste === "ArrowUp") {
    Hexadezimalcode = 38;
  } else if (taste === "ArrowDown") {
    Hexadezimalcode = 40;
  } else if (taste === " ") {
    Hexadezimalcode = 32;
  } else {
    return;
  }
  ereignis.preventDefault();
  steuerung();
}

Jeder Tastendruck auf der Seite landet in dieser Funktion. ereignis.key liefert den Namen der Taste im Klartext — "ArrowUp", "ArrowDown" oder bei der Leertaste schlicht ein Leerzeichen. Interessiert uns die Taste nicht, bricht return sofort ab. Andernfalls verhindert preventDefault(), dass der Browser seine übliche Reaktion zeigt: Ohne diese Zeile würde die Seite beim Drücken der Pfeiltasten wegscrollen.

if (Hexadezimalcode === 38) {
  if (hohe_du >= 1 && stat === "laufend") {
    hohe_du--;
  }
}

steuerung() übersetzt den Tastendruck in eine Bewegung. Pfeil nach oben verringert hohe_du um eins — im Web zählt die senkrechte Achse von oben nach unten, kleinere Werte liegen also weiter oben. Die beiden zusätzlichen Bedingungen sind die Leitplanken: Der Balken darf nicht über den oberen Rand hinaus, und bewegen lässt er sich nur, solange das Spiel läuft.

if ((ball_left + 20) >= 320 && ball_top >= hohe_computer && ball_top < (hohe_computer + 33)) {
  richtung = "lo";
}

So sieht eine Kollisionsprüfung aus. Übersetzt heißt die Zeile: Wenn die rechte Kante des Balls (Position plus 20 Pixel Ballbreite) den Balken des Computers erreicht hat und der Ball dabei im oberen Drittel dieses Balkens liegt, dann fliegt er ab jetzt nach links oben. Für die Mitte und das untere Drittel gibt es zwei entsprechende Zeilen — daher kommt der typische Pong-Effekt, dass man den Ball über die Trefferstelle „steuern" kann. Trifft keine der Bedingungen zu, fliegt der Ball einfach weiter.

document.getElementById("ball").style.left = ball_left + 'px';
document.getElementById("ball").style.top = ball_top + 'px';
setTimeout(ball_steuer, 10);

Hier wird gezeichnet und die Schleife am Leben gehalten. Die neuen Koordinaten wandern in die CSS-Eigenschaften left und top — beachtet das angehängte 'px', ohne die Einheit ignoriert der Browser den Wert. Danach ruft sich die Funktion über setTimeout in 10 Millisekunden selbst wieder auf. Diese Selbstaufrufe sind die Spielschleife; wer die 10 erhöht, macht den Ball langsamer.

if (ball_top < hohe_computer) {
  hohe_computer--;
}

Der Computergegner ist bewusst schlicht: Er fährt dem Ball hinterher, und zwar nur, solange der Ball auf ihn zufliegt. Seine Schleife läuft mit 20 Millisekunden halb so schnell wie die des Balls — deshalb kann man ihn überhaupt schlagen. Wollt ihr den Gegner leichter machen, setzt den Wert höher (etwa 40); ein Wert von 10 macht ihn nahezu unbesiegbar.

Zum Anpassen: Das Spielfeld ist 400 × 300 Pixel groß; die Zahlen 320 (Balken des Computers), 80 (euer Balken) und 280 (unterer Rand) im Script gehören dazu und müssen mitwandern, wenn ihr die Fläche ändert. Farbe und Rundung des Feldes stecken im <style>-Block, die Bilder für Ball und Balken lassen sich beliebig austauschen.