Ausblick: Ein Spiel

Das war‘s für heute! Wir hoffen der Workshop hat dir Spaß gemacht und du hast jetzt Lust auf mehr.

Wenn wir jetzt alles zusammennehmen, was wir bisher gemacht haben und noch ein bisschen was hinzufügen, kannst du Größeres schaffen. Wie wär‘s mit einem Spiel!? Zumindest hast du dir eine Runde Spielen verdient!

Spiel ein Spiel!

Ziel

Einfach ausprobieren und aufhören zu glauben, dass es irgendwie schwierig sein könnte, ein interaktives Spiel zu programmieren.

Anweisungen

Öffne das Spiel.

Spiel das Spiel. Denk dir „Ja, das wäre beeindruckend, wenn es 1970 wäre“.

Lies den Code und die Kommentare.

Erklärung

Mit einigen sehr einfachen Berechnungen kannst du ein interaktives Spiel schreiben, oder auch andere spannende Dinge machen wie z.B. Simulationen von physikalischem Verhalten. Ziemlich cool, oder?

Erweitere es

Ziel

Um das Invaders-Programm besser zu verstehen, versuchen wir es jetzt zu verändern und einige Funktionen hinzuzufügen.

Anweisungen

Setze alle der folgenden Anpassungen um und teste (in kleinen Schritten), ob alles noch wie erwartet funktioniert.

Du kannst die Seite jederzeit neu laden (Strg-R / Cmd-R), um zur ursprünglichen Version des Programms zurückzukehren. Um die letzten paar Änderungen zu widerrufen, kannst du auch die Tastenkombination Ctrl-Z / Cmd-Z (undo) im Text-Editor benutzen. Wenn du einen Stand deines Programms hast, zu dem du später vielleicht zurückkehren möchtest, kannst du den „Save“-Button oben auf der Seite benutzen, um zu speichern. Mit dem „Load“-Button kannst du die Version dann wiederherstellen (Achtung, damit überschreibst du dann das aktuelle Programm).

Wenn du nicht weiterkommst, grübel nicht zu lange. Du kannst die Coaches jederzeit und immer wieder fragen und dir helfen lassen.

Erklärung

Wenn du eigene Ideen für Verbesserungen des Spiel hast oder, für die abenteuerlustigen unter euch, für ein ganz eigenes Spiel, immer drauf los! Das Folgende sind nur Vorschläge.

a) Also, das Spiel ist wirklich simpel. Wie bei jedem ernstzunehmenden Spiel-Automaten wird die Schwierigkeit mit der Zeit immer größer. Füge einen „Level“-Zähler hinzu, der in der frame-Funktion gesetzt wird und der die Wahrscheinlichkeit erhöht, dass ein Invader in einem bestimmten Spielzug erscheint. Zeige das aktuelle Level irgendwo auf dem Bildschirm an, indem du die text-Funktion benutzt.

b) Eine weitere tolle Funktion wäre es, verschiedene Arten von Invaders zu haben. Ändere die newInvader-Funktion so, dass sie einem neu erzeugten Invader eine Eigenschaft type gibt, die zufällig gesetzt wird, z.B. so:

function newInvader() {
  var type = "normal";
  if (Math.random() < 0.4)
    type = "super";
  else if (Math.random() < 0.2)
    type = "superduper";
  ....
}

Als nächstes ändere die Funktion drawInvader so, dass sie verschiedene Typen bzw. Arten auch unterschiedlich darstellt (z.B. indem sie einfach eine andere Farbe bekommen) und verändere processBullets so, dass nicht-normale Invaders mit einer bestimmten Wahrscheinlichkeit (wieder mit Math.random) einen Treffer einer Kugel überleben.

c) Abschließend noch eine etwas größere Herausforderung: Du könntest die Invaders horizontal vor- und zurückbewegen während sie herabsinken.

Der schwierige Teil hier ist zu entscheiden, in welche Richtung die Invaders bewegt werden sollen. Wenn sie sich synchron im Zickzack bewegen sollen, wie im echten Space Invaders-Spiel, musst du für alle Invaders die gleiche Richtung angeben. Dafür könntest du eine Zähler-Variable benutzen, die bei jedem Zug erhöht wird. Sobald eine bestimmte Anzahl an Zügen erreicht ist (auch in einer Variable gespeichert), muss dann die Richtung geändert werden, wobei auch die Zähler-Variable auf Null zurückgesetzt wird und dann nach weiteren X Zügen die Richtung wieder geändert wird.