Escape

So funktioniert das Script

Escape ist eines der ältesten Scripts in unserem Archiv und stammt aus einer Zeit vor canvas und CSS-Animationen. Bewegte Grafik machte man damals so: Man legt jedes bewegliche Objekt in ein eigenes <div>, positioniert es absolut über style.left und style.top und schreibt in kurzen Abständen neue Werte hinein. Genau das tut dieses Spiel — mit fünf Kästchen, einer Zeitschleife und ein paar Zeilen Abstandsrechnung. Die Datei ist bewusst im Originalzustand geblieben; die folgenden Ausschnitte stammen daraus.

function setposX(divname, xpos) {
  … document.getElementById(divname).style.left = xpos + "px";
}
function giveposX(divname) {
  … var posLeft = parseInt(document.getElementById(divname).style.left + "");
  return posLeft;
}

Das sind die vier Grundbefehle des Spiels: Position lesen und Position setzen, je einmal waagerecht und einmal senkrecht. Bemerkenswert ist, dass das Spiel keine eigene Liste mit Koordinaten führt — es fragt die Kästchen jedes Mal direkt: „Wo stehst du gerade?“ Deshalb muss beim Lesen parseInt mitspielen, denn style.left liefert die Zeichenkette "205px" und nicht die Zahl 205. Im Original stehen um jede dieser Funktionen noch drei weitere Zweige für Netscape 4, Internet Explorer 4 und 5 herum — Browser, die es längst nicht mehr gibt.

if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) {
  enemyxdir[num] = -1 * enemyxdir[num];
}
var newposx = giveposX(enemy) + (step_x*enemyxdir[num]) + 0;
setposX(enemy, newposx);

So prallen die blauen Blöcke ab. Jeder Block hat in enemyxdir und enemyydir eine Richtung gespeichert, die nur zwei Werte kennt: 1 oder -1. Stößt der Block an den linken oder rechten Rand des 450 Pixel breiten Feldes, wird die Richtung mit -1 multipliziert und kehrt sich damit um. Anschließend wird die Schrittweite mit der Richtung multipliziert und auf die alte Position addiert. Dass die vier Blöcke unterschiedlich schnell und in verschiedene Richtungen unterwegs sind, liegt allein an den Schrittweiten, mit denen sie aufgerufen werden: movenemy(0,-10,12), movenemy(1,-12,-20) und so weiter.

if (gametime >= 0 && gametime < 100) speed = 80;
else if (gametime >= 100 &&  gametime < 200) speed = 60;
…
else speed = 10;

setTimeout(movenemies,speed);

Hier steckt die Spielschleife und zugleich der Schwierigkeitsgrad. movenemies bewegt alle vier Blöcke einmal und bestellt sich danach mit setTimeout selbst für später wieder — ein Trick, mit dem man eine Dauerschleife baut, die den Browser trotzdem atmen lässt. Der Zähler gametime läuft dabei bei jedem Durchgang um eins hoch, und je höher er steht, desto kürzer wird die Pause bis zum nächsten Aufruf. Aus 80 Millisekunden werden am Ende 10 — das Spiel wird also achtmal so schnell.

var difX = giveposX('box') - giveposX(enemy) - 0;
var difY = giveposY('box') - giveposY(enemy) - 0;

if (difX > (-1 * givesize('box', 'x')) && difX < givesize(enemy, 'x') &&
    difY > (-1 * givesize('box', 'y')) && difY < givesize(enemy, 'y')) {
  touch = 1;
}

Das ist die Kollisionsprüfung, und sie ist ein schönes Beispiel für ein Standardverfahren: Zwei Rechtecke überlappen sich genau dann, wenn sie sich sowohl waagerecht als auch senkrecht überschneiden. Waagerecht ist das der Fall, wenn der Abstand der linken Kanten kleiner ist als die Breite des einen und größer als die negative Breite des anderen Rechtecks. Trifft beides zu, wird die Merkvariable touch auf 1 gesetzt, und die Runde endet.

if (curY > 69 && curX > 69 && curY < 381 && curX < 381) return false;
else stop(); reset();

Und das ist der schwarze Rand. Das Spielfeld ist ein Raster aus 9 × 9 Zellen zu je 50 Pixeln; die äußere Zellreihe ist schwarz eingefärbt. Statt diese Felder einzeln zu prüfen, vergleicht das Script schlicht die Mauskoordinaten mit vier festen Zahlen — alles zwischen 70 und 380 ist erlaubt, alles außerhalb beendet die Runde. Wer sich ein größeres Spielfeld wünscht, müsste also nicht nur die Tabelle erweitern, sondern auch diese vier Zahlen und die 450 in der Abprall-Rechnung anpassen.