Asteroids

Ein Raumschiff fliegt über die Seite, auf der es steht — und schießt sie Element für Element in Trümmer.

Asteroids war Ende der siebziger Jahre einer der ersten großen Arkade-Hits: ein Raumschiff im Weltall, das treibende Felsbrocken zerschießt. Erik Rothoff Andersson hat aus dieser Idee ein JavaScript gemacht, das den Spieß umdreht — die Asteroiden sind hier die Bausteine der Webseite selbst. Wir haben es damals auf erkie.github.io gefunden und ins Archiv aufgenommen.

Ein Klick auf „Spiel starten“ legt eine unsichtbare Spielfläche über die ganze Seite und setzt das Raumschiff oben links ab. Gesteuert wird mit den Pfeiltasten: Pfeil hoch gibt Schub, links und rechts drehen das Schiff. Wer lieber die linke Hand benutzt, nimmt W, A und D. Die Leertaste feuert, und jedes getroffene Element verschwindet mit einer kleinen Funkenwolke aus der Seite. Der Punktestand steht unten rechts, zehn Punkte pro Treffer. Solltet ihr die Ziele aus den Augen verlieren, hält die Taste B alle zerstörbaren Elemente rot blinkend umrandet.

Beenden könnt ihr das Spiel jederzeit mit ESC. Alles, was ihr abgeschossen habt, ist damit natürlich noch nicht wieder da — die Seite ist ja wirklich verändert worden. Ein Neuladen mit F5 stellt sie vollständig her. Solange das Spiel läuft, ist die Seite nicht bedienbar; ihr solltet also erst lesen und dann schießen.

Technisch ist das Script eine schöne Fundgrube. Es zeichnet auf einem canvas-Element, arbeitet mit Vektoren für Position, Richtung und Geschwindigkeit, und die Trefferabfrage funktioniert nicht über Formen, sondern über document.elementFromPoint — der Browser selbst verrät, was an einer Bildschirmstelle liegt. Wer wissen will, wie eine Spielschleife und eine einfache Flugphysik aufgebaut sind, findet weiter unten eine Erklärung der wichtigsten Stellen.

Auf einer eigenen Seite eingebaut ist das Script vor allem ein Gag für Besucher — an eine Aprilscherz-Seite oder eine Fehlerseite gehängt, sorgt es zuverlässig für Verblüffung. Wer klassisches Arkade-Gefühl ohne Kollateralschaden sucht, findet in derselben Kategorie BreakOut, Pong und Snake.

Spiele Baujahr 2010 läuft in deinem Browser

Steuerung: Pfeiltasten (oder W, A, D) fliegen und drehen, die Leertaste schießt, B hebt alle zerstörbaren Elemente hervor, ESC beendet das Spiel. Ein Neuladen der Seite mit F5 stellt alles wieder her.

So funktioniert das Script

Das Script ist ungewöhnlich lang, aber gut sortiert. Es besteht aus vier Bausteinen: einem kleinen Rechenwerkzeug für Vektoren (Punkte und Richtungen), der Suche nach den zerstörbaren Elementen der Seite, einer Spielschleife, die fünfzigmal pro Sekunde alles ein Stück weiterbewegt, und den Zeichenbefehlen für das Canvas. Wir gehen die zentralen Mechanismen an je einem kurzen Ausschnitt durch — den Rest könnt ihr im Code darunter in Ruhe nachlesen.

Die Spielschleife

this.update = function () {
  const nowTime = new Date().getTime();
  const tDelta = (nowTime - lastUpdate) / 1000;
  lastUpdate = nowTime;
  // ... rechnen und zeichnen ...
  setTimeout(updateFunc, 1000 / FPS);
};

Die Funktion update() ist das Herz des Spiels. Ganz am Ende ruft sie sich über setTimeout selbst wieder auf — bei FPS = 50 also etwa alle 20 Millisekunden. So entsteht eine Endlosschleife, die den Browser trotzdem nicht blockiert.

Wichtig ist die Zeile mit tDelta (gesprochen „Delta t“, die verstrichene Zeit): Sie misst, wie viele Sekunden seit dem letzten Durchlauf wirklich vergangen sind. Alle Bewegungen werden anschließend mit diesem Wert multipliziert. Dadurch fliegt das Raumschiff auf einem schnellen und auf einem langsamen Rechner gleich schnell — der langsame Rechner macht einfach größere Sprünge.

Bewegung und Physik

if (this.keysPressed[code("up")] || this.keysPressed[code("W")]) {
  this.vel.add(this.dir.mulNew(acc * tDelta));
  drawFlame = true;
} else {
  this.vel.mul(0.96);
}

Das Raumschiff hat zwei Vektoren: dir zeigt, wohin die Nase blickt, vel (von velocity, Geschwindigkeit) beschreibt, wohin es sich tatsächlich bewegt. Wird Schub gegeben, kommt ein Stück Richtung zur Geschwindigkeit hinzu — deshalb add. Ohne Schub wird die Geschwindigkeit pro Durchlauf mit 0.96 multipliziert, sie schrumpft also um vier Prozent. Das ist die Reibung, die das Schiff langsam ausrollen lässt.

if (this.vel.len() > maxSpeed) this.vel.setLength(maxSpeed);
this.pos.add(this.vel.mulNew(tDelta));

Danach wird die Geschwindigkeit auf maxSpeed gedeckelt und erst dann auf die Position addiert. Genau dieses Nacheinander von Beschleunigen, Bremsen und Verschieben macht das typische, etwas schlitternde Asteroids-Fahrgefühl aus. Wer lieber ein trägeres Schiff möchte, verkleinert oben acc (die Beschleunigung); wer eine Eisfläche will, setzt den Reibungsfaktor 0.96 näher an 1.

Der Rand des Bildschirms

if (this.pos.x > w) {
  window.scrollTo(this.scrollPos.x + 50, this.scrollPos.y);
  this.pos.x = 0;
} else if (this.pos.x < 0) {
  window.scrollTo(this.scrollPos.x - 50, this.scrollPos.y);
  this.pos.x = w;
}

Verlässt das Schiff rechts das Bild, taucht es links wieder auf — und die Seite scrollt zugleich ein Stück weiter. So kommt ihr auch an Elemente heran, die weiter unten stehen. w und h sind Breite und Höhe des sichtbaren Fensters; sie werden bei jeder Größenänderung neu bestimmt.

Die Tastatursteuerung

function keyName(event) {
  const key = event.key || "";
  return key.length === 1 ? key.toUpperCase() : key;
}

function eventKeydown(event) {
  const key = keyName(event);
  that.keysPressed[key] = true;
  if (key === code(" ")) that.firedAt = 1;
  ...
}

Das Script merkt sich nicht, dass eine Taste gedrückt wurde, sondern welche gerade gedrückt ist: keysPressed ist ein Objekt, in dem beim keydown ein Eintrag auf true und beim keyup wieder auf false gesetzt wird. Die Spielschleife schaut dann bei jedem Durchlauf nach, was gerade anliegt. Nur so lassen sich mehrere Tasten gleichzeitig halten — fliegen, drehen und schießen in einem.

event.key liefert den Namen der Taste als Text: "ArrowUp", "Escape", " " für die Leertaste oder eben "w". Die Hilfsfunktion keyName() schreibt einzelne Buchstaben groß, damit w und W dieselbe Taste sind. Früher wurde dafür die inzwischen veraltete Nummer event.keyCode benutzt.

Was ist getroffen?

function getElementFromPoint(x, y) {
  applyVisibility("hidden");
  let element = document.elementFromPoint(x, y);
  if (!element) {
    applyVisibility("visible");
    return false;
  }
  if (element.nodeType === 3) element = element.parentNode;
  applyVisibility("visible");
  return element;
}

Hier steckt der eigentliche Trick des Spiels. Statt Formen zu vergleichen, fragt das Script den Browser: document.elementFromPoint(x, y) liefert das Element, das an dieser Bildschirmstelle liegt. Weil das Spiel-Canvas über der ganzen Seite liegt, würde es sich selbst zurückbekommen — deshalb wird die Spielfläche für einen Augenblick auf visibility: hidden gesetzt und gleich danach wieder sichtbar gemacht. Sehen kann man das nicht, es passiert innerhalb desselben Durchlaufs.

const murdered = getElementFromPoint(this.bullets[i].pos.x, this.bullets[i].pos.y);
if (murdered && murdered.tagName &&
    indexOf(ignoredTypes, murdered.tagName.toUpperCase()) === -1 &&
    hasOnlyTextualChildren(murdered) &&
    murdered.className !== "ASTEROIDSYEAH") {
  addParticles(this.bullets[i].pos);
  this.dying.push(murdered);
  this.bullets.splice(i, 1);
}

Bevor etwas zerstört wird, prüft das Script drei Dinge: Das Element darf nicht in der Liste ignoredTypes stehen (dort stehen HTML, BODY, SCRIPT und ähnliche Bausteine, ohne die die Seite zusammenbräche), es darf nur Text enthalten und nicht zum Spiel selbst gehören. Trifft alles zu, wandert es in die Liste dying, wird ein Stück weiter unten mit removeChild aus der Seite entfernt und der Punktestand um zehn erhöht. Zugleich sorgt addParticles für die rot-gelben Funken.

Zeichnen auf dem Canvas

this.ctx.drawPlayer = function () {
  this.save();
  this.translate(that.pos.x, that.pos.y);
  this.rotate(that.dir.angle());
  this.tracePoly(playerVerts);
  this.fillStyle = "white";
  this.fill();
  this.tracePoly(playerVerts);
  this.stroke();
  this.restore();
};

Das Raumschiff ist ein Dreieck aus drei Eckpunkten (playerVerts). Gezeichnet wird es immer an derselben Stelle — nämlich um den Nullpunkt herum. Verschoben und gedreht wird stattdessen das Koordinatensystem: translate rückt den Nullpunkt an die Schiffsposition, rotate dreht ihn in Flugrichtung. save() und restore() merken sich den Zustand davor und stellen ihn wieder her, damit die nächste Zeichenoperation wieder normal beginnt. Das ist ein Muster, das euch bei fast jeder Canvas-Animation begegnet.

Was sich leicht ändern lässt

const FPS = 50;
const acc = 300;
const maxSpeed = 600;
const rotSpeed = 360;
const bulletSpeed = 700;
const timeBetweenFire = 150;
const maxBullets = 20;

Ziemlich weit oben im Script stehen alle Stellschrauben beieinander. rotSpeed ist die Drehgeschwindigkeit in Grad pro Sekunde, timeBetweenFire der Mindestabstand zwischen zwei Schüssen in Millisekunden — kleiner heißt Dauerfeuer. Auch die Farben der Funken (["red", "yellow"] in randomParticleColor) und die Größe des Schiffs (playerWidth, playerHeight) lassen sich gefahrlos anpassen.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

<!-- präsentiert von kostenlose-javascripts.de -->
<style>
.asteroids-start { font: inherit; padding: 0.5em 1.2em; cursor: pointer; }
.asteroids-hinweis { font-size: 0.9em; }
</style>
<p><button type="button" class="asteroids-start" id="asteroids-start">Spiel starten</button></p>
<p class="asteroids-hinweis">Steuerung: Pfeiltasten (oder W, A, D) fliegen und drehen, die Leertaste schießt, B hebt alle zerstörbaren Elemente hervor, ESC beendet das Spiel. Ein Neuladen der Seite stellt alles wieder her.</p>
<script>
// Asteroids - Script by Erik Rothoff Andersson, erkie.github.com
function Asteroids() {
  if (!window.ASTEROIDS) window.ASTEROIDS = { enemiesKilled: 0 };

  // --- Vektor: ein Punkt bzw. eine Richtung mit x und y ---------------
  function Vector(x, y) {
    this.x = x;
    this.y = y;
  }
  Vector.prototype = {
    cp: function () {
      return new Vector(this.x, this.y);
    },
    mul: function (factor) {
      this.x *= factor;
      this.y *= factor;
      return this;
    },
    mulNew: function (factor) {
      return new Vector(this.x * factor, this.y * factor);
    },
    add: function (vec) {
      this.x += vec.x;
      this.y += vec.y;
      return this;
    },
    addNew: function (vec) {
      return new Vector(this.x + vec.x, this.y + vec.y);
    },
    sub: function (vec) {
      this.x -= vec.x;
      this.y -= vec.y;
      return this;
    },
    subNew: function (vec) {
      return new Vector(this.x - vec.x, this.y - vec.y);
    },
    rotate: function (angle) {
      const x = this.x, y = this.y;
      this.x = x * Math.cos(angle) - Math.sin(angle) * y;
      this.y = x * Math.sin(angle) + Math.cos(angle) * y;
      return this;
    },
    rotateNew: function (angle) {
      return this.cp().rotate(angle);
    },
    setAngle: function (angle) {
      const l = this.len();
      this.x = Math.cos(angle) * l;
      this.y = Math.sin(angle) * l;
      return this;
    },
    setAngleNew: function (angle) {
      return this.cp().setAngle(angle);
    },
    setLength: function (length) {
      const l = this.len();
      if (l) this.mul(length / l);
      else this.x = this.y = length;
      return this;
    },
    setLengthNew: function (length) {
      return this.cp().setLength(length);
    },
    normalize: function () {
      const l = this.len();
      this.x /= l;
      this.y /= l;
      return this;
    },
    normalizeNew: function () {
      return this.cp().normalize();
    },
    angle: function () {
      return Math.atan2(this.y, this.x);
    },
    collidesWith: function (rect) {
      return this.x > rect.x && this.y > rect.y &&
        this.x < rect.x + rect.width && this.y < rect.y + rect.height;
    },
    len: function () {
      const l = Math.sqrt(this.x * this.x + this.y * this.y);
      if (l < 0.005 && l > -0.005) return 0;
      return l;
    },
    is: function (test) {
      return typeof test === "object" && test !== null &&
        this.x === test.x && this.y === test.y;
    },
    toString: function () {
      return "[Vector(" + this.x + ", " + this.y + ") angle: " +
        this.angle() + ", length: " + this.len() + "]";
    }
  };

  const that = this;

  // --- Einstellungen: hier lässt sich das Spiel bequem verändern ------
  let w = document.documentElement.clientWidth;
  let h = document.documentElement.clientHeight;
  const playerWidth = 20, playerHeight = 30;
  const playerVerts = [
    [-1 * playerHeight / 2, -1 * playerWidth / 2],
    [-1 * playerHeight / 2, playerWidth / 2],
    [playerHeight / 2, 0]
  ];
  const ignoredTypes = ["HTML", "HEAD", "BODY", "SCRIPT", "TITLE", "META",
    "STYLE", "LINK", "SHAPE", "LINE", "GROUP", "IMAGE", "STROKE", "FILL",
    "SKEW", "PATH", "TEXTPATH"];
  const hiddenTypes = ["BR", "HR"];
  const FPS = 50;
  const acc = 300;
  const maxSpeed = 600;
  const rotSpeed = 360;
  const bulletSpeed = 700;
  const particleSpeed = 400;
  const timeBetweenFire = 150;
  const timeBetweenBlink = 250;
  const bulletRadius = 2;
  const maxParticles = 40;
  const maxBullets = 20;

  this.flame = { r: [], y: [] };

  this.toggleBlinkStyle = function () {
    if (this.updated.blink.isActive) {
      removeClass(document.body, "ASTEROIDSBLINK");
    } else {
      addClass(document.body, "ASTEROIDSBLINK");
    }
    this.updated.blink.isActive = !this.updated.blink.isActive;
  };

  addStylesheet(".ASTEROIDSBLINK .ASTEROIDSYEAHENEMY", "outline: 2px dotted red;");

  // --- Spielzustand ---------------------------------------------------
  this.pos = new Vector(100, 100);
  this.lastPos = false;
  this.vel = new Vector(0, 0);
  this.dir = new Vector(0, 1);
  this.keysPressed = {};
  this.firedAt = false;
  this.updated = {
    enemies: false,
    flame: new Date().getTime(),
    blink: { time: 0, isActive: false }
  };
  this.scrollPos = new Vector(0, 0);
  this.bullets = [];
  this.enemies = [];
  this.dying = [];
  this.totalEnemies = 0;
  this.particles = [];

  // Sucht alle Elemente der Seite zusammen, die abgeschossen werden dürfen
  function updateEnemyIndex() {
    for (let i = 0, enemy; (enemy = that.enemies[i]); i++) {
      removeClass(enemy, "ASTEROIDSYEAHENEMY");
    }
    const all = document.body.getElementsByTagName("*");
    that.enemies = [];
    for (let i = 0, el; (el = all[i]); i++) {
      if (indexOf(ignoredTypes, el.tagName.toUpperCase()) === -1 &&
          el.prefix !== "g_vml_" && hasOnlyTextualChildren(el) &&
          el.className !== "ASTEROIDSYEAH" && el.offsetHeight > 0) {
        el.aSize = size(el);
        that.enemies.push(el);
        addClass(el, "ASTEROIDSYEAHENEMY");
        if (!el.aAdded) {
          el.aAdded = true;
          that.totalEnemies++;
        }
      }
    }
  }
  updateEnemyIndex();

  // --- Die Flamme am Heck: bei jedem Frame leicht neu gewürfelt -------
  let createFlames;
  (function () {
    const rWidth = playerWidth, rIncrease = playerWidth * 0.1;
    const yWidth = playerWidth * 0.6, yIncrease = yWidth * 0.2;
    const halfR = rWidth / 2, halfY = yWidth / 2;
    const halfPlayerHeight = playerHeight / 2;
    createFlames = function () {
      that.flame.r = [[-1 * halfPlayerHeight, -1 * halfR]];
      that.flame.y = [[-1 * halfPlayerHeight, -1 * halfY]];
      for (let x = 0; x < rWidth; x += rIncrease) {
        that.flame.r.push([-random(2, 7) - halfPlayerHeight, x - halfR]);
      }
      that.flame.r.push([-1 * halfPlayerHeight, halfR]);
      for (let x = 0; x < yWidth; x += yIncrease) {
        that.flame.y.push([-random(2, 7) - halfPlayerHeight, x - halfY]);
      }
      that.flame.y.push([-1 * halfPlayerHeight, halfY]);
    };
  })();
  createFlames();

  // --- Kleine Helfer ---------------------------------------------------
  function radians(deg) {
    return deg * 0.0174532925;
  }
  function random(from, to) {
    return Math.floor(Math.random() * (to + 1) + from);
  }

  // Namen der Tasten, wie sie event.key liefert
  function code(name) {
    const table = {
      "up": "ArrowUp", "down": "ArrowDown",
      "left": "ArrowLeft", "right": "ArrowRight", "esc": "Escape"
    };
    if (table[name]) return table[name];
    return name;
  }
  // Buchstaben immer groß, damit "w" und "W" dieselbe Taste sind
  function keyName(event) {
    const key = event.key || "";
    return key.length === 1 ? key.toUpperCase() : key;
  }

  function boundsCheck(vec) {
    if (vec.x > w) vec.x = 0;
    else if (vec.x < 0) vec.x = w;
    if (vec.y > h) vec.y = 0;
    else if (vec.y < 0) vec.y = h;
  }

  function size(element) {
    let el = element, left = 0, top = 0;
    do {
      left += el.offsetLeft || 0;
      top += el.offsetTop || 0;
      el = el.offsetParent;
    } while (el);
    return {
      x: left, y: top,
      width: element.offsetWidth || 10,
      height: element.offsetHeight || 10
    };
  }

  function addEvent(obj, type, fn) {
    obj.addEventListener(type, fn, false);
  }
  function removeEvent(obj, type, fn) {
    obj.removeEventListener(type, fn, false);
  }
  function indexOf(arr, item, from) {
    return arr.indexOf(item, from);
  }
  function addClass(element, className) {
    element.classList.add(className);
  }
  function removeClass(element, className) {
    element.classList.remove(className);
  }

  function applyVisibility(vis) {
    for (let i = 0, p; (p = window.ASTEROIDSPLAYERS[i]); i++) {
      p.gameContainer.style.visibility = vis;
    }
  }

  // Was liegt an diesem Punkt? Dafür wird das Spiel kurz unsichtbar
  function getElementFromPoint(x, y) {
    applyVisibility("hidden");
    let element = document.elementFromPoint(x, y);
    if (!element) {
      applyVisibility("visible");
      return false;
    }
    if (element.nodeType === 3) element = element.parentNode;
    applyVisibility("visible");
    return element;
  }

  function addParticles(startPos) {
    const time = new Date().getTime();
    for (let i = 0; i < maxParticles; i++) {
      that.particles.push({
        dir: (new Vector(Math.random() * 20 - 10, Math.random() * 20 - 10)).normalize(),
        pos: startPos.cp(),
        cameAlive: time
      });
    }
  }

  function setScore() {
    that.points.textContent = window.ASTEROIDS.enemiesKilled * 10;
  }

  // Nur Elemente, die ausschließlich Text enthalten, sind Ziele
  function hasOnlyTextualChildren(element) {
    if (indexOf(hiddenTypes, element.tagName) !== -1) return false;
    if (element.offsetWidth === 0 && element.offsetHeight === 0) return false;
    for (let i = 0; i < element.childNodes.length; i++) {
      if (element.childNodes[i].nodeType !== 3 &&
          indexOf(hiddenTypes, element.childNodes[i].tagName) === -1 &&
          element.childNodes[i].childNodes.length !== 0) return false;
    }
    return true;
  }

  function addStylesheet(selector, rules) {
    const stylesheet = document.createElement("style");
    stylesheet.id = "ASTEROIDSYEAHSTYLES";
    stylesheet.textContent = selector + "{" + rules + "}";
    document.head.appendChild(stylesheet);
  }
  function removeStylesheet(name) {
    const stylesheet = document.getElementById(name);
    if (stylesheet) stylesheet.parentNode.removeChild(stylesheet);
  }

  // --- Die Spielfläche: ein Canvas über der ganzen Seite ---------------
  this.gameContainer = document.createElement("div");
  this.gameContainer.className = "ASTEROIDSYEAH";
  document.body.appendChild(this.gameContainer);

  this.canvas = document.createElement("canvas");
  this.canvas.width = w;
  this.canvas.height = h;
  this.canvas.className = "ASTEROIDSYEAH";
  this.canvas.style.width = w + "px";
  this.canvas.style.height = h + "px";
  this.canvas.style.position = "fixed";
  this.canvas.style.top = "0px";
  this.canvas.style.left = "0px";
  this.canvas.style.bottom = "0px";
  this.canvas.style.right = "0px";
  this.canvas.style.zIndex = "10000";

  addEvent(this.canvas, "mousedown", function (event) {
    const message = document.createElement("span");
    message.style.position = "absolute";
    message.style.border = "1px solid #999";
    message.style.background = "white";
    message.style.color = "black";
    message.textContent = "Drücke ESC zum Beenden";
    document.body.appendChild(message);
    const x = event.pageX || (event.clientX + document.documentElement.scrollLeft);
    const y = event.pageY || (event.clientY + document.documentElement.scrollTop);
    message.style.left = x - message.offsetWidth / 2 + "px";
    message.style.top = y - message.offsetHeight / 2 + "px";
  });

  function eventResize() {
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    that.canvas.width = w;
    that.canvas.height = h;
  }
  addEvent(window, "resize", eventResize);

  this.gameContainer.appendChild(this.canvas);
  this.ctx = this.canvas.getContext("2d");
  this.ctx.fillStyle = "black";
  this.ctx.strokeStyle = "black";

  // --- Punkteanzeige unten rechts --------------------------------------
  if (!document.getElementById("ASTEROIDS-NAVIGATION")) {
    this.navigation = document.createElement("div");
    this.navigation.id = "ASTEROIDS-NAVIGATION";
    this.navigation.className = "ASTEROIDSYEAH";
    this.navigation.style.fontFamily = "Arial,sans-serif";
    this.navigation.style.position = "fixed";
    this.navigation.style.zIndex = "10001";
    this.navigation.style.bottom = "10px";
    this.navigation.style.right = "10px";
    this.navigation.style.textAlign = "right";
    this.navigation.textContent = "(drücke ESC zum beenden) ";
    this.gameContainer.appendChild(this.navigation);

    this.points = document.createElement("span");
    this.points.id = "ASTEROIDS-POINTS";
    this.points.style.font = "28pt Arial, sans-serif";
    this.points.style.fontWeight = "bold";
    this.points.className = "ASTEROIDSYEAH";
    this.navigation.appendChild(this.points);
  } else {
    this.navigation = document.getElementById("ASTEROIDS-NAVIGATION");
    this.points = document.getElementById("ASTEROIDS-POINTS");
  }
  setScore();

  // --- Tastatur ---------------------------------------------------------
  const usedKeys = [code("up"), code("down"), code("right"), code("left"),
    code(" "), code("B"), code("W"), code("A"), code("S"), code("D")];

  function eventKeydown(event) {
    const key = keyName(event);
    that.keysPressed[key] = true;
    if (key === code(" ")) that.firedAt = 1;
    if (indexOf(usedKeys, key) !== -1) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
  }
  addEvent(document, "keydown", eventKeydown);

  function eventKeyup(event) {
    const key = keyName(event);
    that.keysPressed[key] = false;
    if (indexOf(usedKeys, key) !== -1) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
  }
  addEvent(document, "keyup", eventKeyup);

  // --- Zeichnen ----------------------------------------------------------
  this.ctx.clear = function () {
    this.clearRect(0, 0, w, h);
  };
  this.ctx.clear();

  this.ctx.drawLine = function (xFrom, yFrom, xTo, yTo) {
    this.beginPath();
    this.moveTo(xFrom, yFrom);
    this.lineTo(xTo, yTo);
    this.lineTo(xTo + 1, yTo + 1);
    this.closePath();
    this.fill();
  };

  this.ctx.tracePoly = function (verts) {
    this.beginPath();
    this.moveTo(verts[0][0], verts[0][1]);
    for (let i = 1; i < verts.length; i++) this.lineTo(verts[i][0], verts[i][1]);
    this.closePath();
  };

  this.ctx.drawPlayer = function () {
    this.save();
    this.translate(that.pos.x, that.pos.y);
    this.rotate(that.dir.angle());
    this.tracePoly(playerVerts);
    this.fillStyle = "white";
    this.fill();
    this.tracePoly(playerVerts);
    this.stroke();
    this.restore();
  };

  const PI_SQ = Math.PI * 2;
  this.ctx.drawBullets = function (bullets) {
    for (let i = 0; i < bullets.length; i++) {
      this.beginPath();
      this.arc(bullets[i].pos.x, bullets[i].pos.y, bulletRadius, 0, PI_SQ, true);
      this.closePath();
      this.fill();
    }
  };

  function randomParticleColor() {
    return ["red", "yellow"][random(0, 1)];
  }

  this.ctx.drawParticles = function (particles) {
    const oldColor = this.fillStyle;
    for (let i = 0; i < particles.length; i++) {
      this.fillStyle = randomParticleColor();
      this.drawLine(particles[i].pos.x, particles[i].pos.y,
        particles[i].pos.x - particles[i].dir.x * 10,
        particles[i].pos.y - particles[i].dir.y * 10);
    }
    this.fillStyle = oldColor;
  };

  this.ctx.drawFlames = function (flame) {
    this.save();
    this.translate(that.pos.x, that.pos.y);
    this.rotate(that.dir.angle());
    const oldColor = this.strokeStyle;
    this.strokeStyle = "red";
    this.tracePoly(flame.r);
    this.stroke();
    this.strokeStyle = "yellow";
    this.tracePoly(flame.y);
    this.stroke();
    this.strokeStyle = oldColor;
    this.restore();
  };

  addParticles(this.pos);
  addClass(document.body, "ASTEROIDSYEAH");

  // --- Die Spielschleife --------------------------------------------------
  let lastUpdate = new Date().getTime();

  this.update = function () {
    let forceChange = false;
    const nowTime = new Date().getTime();
    const tDelta = (nowTime - lastUpdate) / 1000;
    lastUpdate = nowTime;
    let drawFlame = false;

    if (nowTime - this.updated.flame > 50) {
      createFlames();
      this.updated.flame = nowTime;
    }

    this.scrollPos.x = window.pageXOffset || document.documentElement.scrollLeft;
    this.scrollPos.y = window.pageYOffset || document.documentElement.scrollTop;

    if (this.keysPressed[code("up")] || this.keysPressed[code("W")]) {
      this.vel.add(this.dir.mulNew(acc * tDelta));
      drawFlame = true;
    } else {
      this.vel.mul(0.96);
    }
    if (this.keysPressed[code("left")] || this.keysPressed[code("A")]) {
      forceChange = true;
      this.dir.rotate(radians(rotSpeed * tDelta * -1));
    }
    if (this.keysPressed[code("right")] || this.keysPressed[code("D")]) {
      forceChange = true;
      this.dir.rotate(radians(rotSpeed * tDelta));
    }
    if (this.keysPressed[code(" ")] && nowTime - this.firedAt > timeBetweenFire) {
      this.bullets.unshift({
        dir: this.dir.cp(),
        pos: this.pos.cp(),
        startVel: this.vel.cp(),
        cameAlive: nowTime
      });
      this.firedAt = nowTime;
      if (this.bullets.length > maxBullets) this.bullets.pop();
    }
    if (this.keysPressed[code("B")]) {
      if (!this.updated.enemies) {
        updateEnemyIndex();
        this.updated.enemies = true;
      }
      forceChange = true;
      this.updated.blink.time += tDelta * 1000;
      if (this.updated.blink.time > timeBetweenBlink) {
        this.toggleBlinkStyle();
        this.updated.blink.time = 0;
      }
    } else {
      this.updated.enemies = false;
    }
    if (this.keysPressed[code("esc")]) {
      destroy.apply(this);
      return;
    }

    if (this.vel.len() > maxSpeed) this.vel.setLength(maxSpeed);

    this.pos.add(this.vel.mulNew(tDelta));

    if (this.pos.x > w) {
      window.scrollTo(this.scrollPos.x + 50, this.scrollPos.y);
      this.pos.x = 0;
    } else if (this.pos.x < 0) {
      window.scrollTo(this.scrollPos.x - 50, this.scrollPos.y);
      this.pos.x = w;
    }
    if (this.pos.y > h) {
      window.scrollTo(this.scrollPos.x, this.scrollPos.y + h * 0.75);
      this.pos.y = 0;
    } else if (this.pos.y < 0) {
      window.scrollTo(this.scrollPos.x, this.scrollPos.y - h * 0.75);
      this.pos.y = h;
    }

    for (let i = this.bullets.length - 1; i >= 0; i--) {
      if (nowTime - this.bullets[i].cameAlive > 2000) {
        this.bullets.splice(i, 1);
        forceChange = true;
        continue;
      }
      const bulletVel = this.bullets[i].dir.setLengthNew(bulletSpeed * tDelta)
        .add(this.bullets[i].startVel.mulNew(tDelta));
      this.bullets[i].pos.add(bulletVel);
      boundsCheck(this.bullets[i].pos);
      const murdered = getElementFromPoint(this.bullets[i].pos.x, this.bullets[i].pos.y);
      if (murdered && murdered.tagName &&
          indexOf(ignoredTypes, murdered.tagName.toUpperCase()) === -1 &&
          hasOnlyTextualChildren(murdered) &&
          murdered.className !== "ASTEROIDSYEAH") {
        addParticles(this.bullets[i].pos);
        this.dying.push(murdered);
        this.bullets.splice(i, 1);
        continue;
      }
    }

    if (this.dying.length) {
      for (let i = this.dying.length - 1; i >= 0; i--) {
        try {
          if (this.dying[i].parentNode) window.ASTEROIDS.enemiesKilled++;
          this.dying[i].parentNode.removeChild(this.dying[i]);
        } catch (e) {}
      }
      setScore();
      this.dying = [];
    }

    for (let i = this.particles.length - 1; i >= 0; i--) {
      this.particles[i].pos.add(
        this.particles[i].dir.mulNew(particleSpeed * tDelta * Math.random()));
      if (nowTime - this.particles[i].cameAlive > 1000) {
        this.particles.splice(i, 1);
        forceChange = true;
        continue;
      }
    }

    if (forceChange || this.bullets.length !== 0 || this.particles.length !== 0 ||
        !this.pos.is(this.lastPos) || this.vel.len() > 0) {
      this.ctx.clear();
      this.ctx.drawPlayer();
      if (drawFlame) this.ctx.drawFlames(that.flame);
      if (this.bullets.length) this.ctx.drawBullets(this.bullets);
      if (this.particles.length) this.ctx.drawParticles(this.particles);
    }

    this.lastPos = this.pos;
    setTimeout(updateFunc, 1000 / FPS);
  };

  function updateFunc() {
    that.update.call(that);
  }
  setTimeout(updateFunc, 1000 / FPS);

  // --- Aufräumen, wenn ESC gedrückt wird ---------------------------------
  function destroy() {
    removeEvent(document, "keydown", eventKeydown);
    removeEvent(document, "keyup", eventKeyup);
    removeEvent(window, "resize", eventResize);
    removeStylesheet("ASTEROIDSYEAHSTYLES");
    removeClass(document.body, "ASTEROIDSYEAH");
    this.gameContainer.parentNode.removeChild(this.gameContainer);
  }
}

function initAsteroids() {
  if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
  window.ASTEROIDSPLAYERS[window.ASTEROIDSPLAYERS.length] = new Asteroids();
}
document.getElementById("asteroids-start").addEventListener("click", function () {
  this.disabled = true;
  initAsteroids();
});
</script>
JavaScript von <a href="https://www.kostenlose-javascripts.de/javascripts/spiele/asteroids/">kostenlose-javascripts.de</a>
<!-- präsentiert von kostenlose-javascripts.de -->

Asteroids

So funktioniert das Script

Die Spielschleife

Bewegung und Physik

Der Rand des Bildschirms

Die Tastatursteuerung

Was ist getroffen?

Zeichnen auf dem Canvas

Was sich leicht ändern lässt

Script für die eigene Homepage

Mehr aus der Kategorie Spiele

ASCII Minesweeper

Ausweichen

Ballspiel

Bennys Quiz

Blackjack

Blu Mania

BreakOut

Buchstaben zählen

Buchstabenpuzzle

Checkbox Spiel

Concentration

Der längste Drücker

Die Türme von Hanoi

Einmaleins Trainer

Escape

Galgenmännchen

Galgenmännchen 2

Game Over Game

Glücks Klick

Glücksbuttons

Ich sehe was

Kniffel

Labyrinth

Liebesrechner

Lights Out

Lights Out 2

Mastermind

Minesweeper

Mühle