Spiele programmieren mit JavaScript für Kids

Hans-Georg Schumann

• Verlag: MITP Verlag
• Jahr: 2017
• ISBN drucken:
  9783958455771
• eBook-ISBN:
  9783958455795
• Thema: Computer Science
• Thema: Computer Science General

Programmieren lernen mit JavaScript und der Game-Engine Babylon Schritt für Schritt kleine Spiele selbst entwickeln Mit Fragen und Aufgaben am Ende jedes Kapitels Computerspiele zu spielen macht Spaß, aber Computerspiele selbst zu entwickeln, ist noch viel kreativer! Hier lernst du das Programmieren mit JavaScript und der leistungsstarken Babylon Engine, einem vollwertigen System für das Erstellen von 3D-Games. Damit lässt du Figuren durch Landschaften wandern und Abenteuer bestreiten. Bau dir zum Beispiel selbst ein Insekt oder einen Androiden, animiere deine Figuren, steuere sie durchs Spiel und sammle Dinge ein. Ganz nebenbei lernst du JavaScript und erlangst so grundlegende Kenntnisse in dieser Programmiersprache. Im Anhang gibt es noch zusätzliche Informationen, zum Beispiel über den Babylon-Playground, mit dem du deine Spiele mit Freunden teilst, und über die Besonderheiten von den verschiedenen Browsern. Viele Fragen und Aufgaben am Ende der Kapitel bringen Tüftel-Spaß und verfestigen das Gelernte im Nu. Alle Projektdateien und die Lösungen zu den Fragen und Aufgaben zum Download unter www.mitp.de/577

Kapitel 1: Das erste Projekt

Du möchtest natürlich gleich dein erstes Spiel erstellen. So schnell geht das leider nicht, aber mit dem Programmieren können wir sofort loslegen. Du brauchst dazu anfangs nur den Browser, mit dem du auch im Internet surfst. Dort benutzen wir eine »Spiel-Maschine« namens Babylon, mit der lassen sich jede Menge Spiele erstellen. Aber wir fangen erst mal mit etwas Einfachem an.

In diesem Kapitel lernst du

• wie man in Babylon einsteigt
• wie man Objekte in einem Projekt einsetzt
• etwas über 2D und 3D
• wie man die Position von Objekten ändert
• was Funktionen und Vektoren sind

In Babylon einsteigen

​Starte einen Browser deiner Wahl, das kann zum Beispiel Microsoft Edge, Google Chrome oder Mozilla Firefox sein. Dort gib in der Adresszeile diese Adresse ein:

http://www.babylonjs.com/

Nach einer Weile landest du auf der Homepage von Babylon JS​. Dort findest du eins der Werkzeuge, die wir für dieses Buch brauchen: ein komplettes System zum Erstellen von Spielen.

Probieren wir das gleich aus.

• Klicke auf die Schaltfläche Try, um in den sogenannten Playground​ umzuschalten.

Auf der rechten Seite siehst du eine Fläche und darüber eine Kugel. In diesem Bereich findet auch später dein Spiel statt.

Man nennt das Ganze auch Spielwelt​, denn natürlich lässt sich dieser Bereich später auf den ganzen Bildschirm vergrößern. Wie bei einem echten Spiel kann man dann auch nach rechts oder links weiterwandern. Das alles gehört zur Spielwelt (die mitunter sogar riesig sein kann).

Die Fläche unter der Kugel ist so etwas wie das Spielfeld​. Und die Kugel selbst ist dann die Spielfigur​. Und damit kennst du nun das, was mindestens zu einem Spiel gehört: eine Spielfigur und ein Spielfeld.

Auf der linken Seite deines Browsers befindet sich furchtbar viel Text. Alles, was da steht, ist in der Programmiersprache JavaScript​ geschrieben. Und das ist auch die Sprache, in der du hier vorwiegend programmieren wirst. (Und jetzt kannst du dir wohl denken, was das »JS« hinter »Babylon« bedeutet, oder?)

Es bleibt dir nicht erspart, sich näher mit dem »ganzen Kram« zu befassen, der da steht. Ein besserer Ausdruck dafür ist Quelltext​. Wir gehen das Ganze gleich langsam Zeile für Zeile durch. Genau genommen ist es gar nicht so viel, wie es zuerst aussieht.

Ich habe alle Zeilen, die mit einem doppelten Schrägstrich beginnen, einmal entfernt, weil sie für das Funktionieren des Programms nicht nötig sind. Es handelt sich um sogenannte Kommentare​, in denen (auf Englisch) erläutert wird, was an der jeweiligen Stelle passiert (oder passieren soll). Solche Zeilen werden von Babylon einfach übersprungen.

Was übrig bleibt, sieht so aus:

var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera ("camera1", new BABYLON.Vector3(0,5,-10), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); var light = new BABYLON.HemisphericLight ("light1", new BABYLON.Vector3(0,1,0), scene); light.intensity = 0.7;  var sphere = BABYLON.Mesh.CreateSphere  ("sphere1", 16, 2, scene);  sphere.position.y = 1;  var ground = BABYLON.Mesh.CreateGround  ("ground1", 6, 6, 2, scene); return scene; }; 

In Wirklichkeit hat der Quelltext noch weniger Zeilen, ich musste nur einige sehr lange Exemplare auf zwei Buch-Zeilen verteilen.

Dieser Quelltext ist eine Ansammlung von Anweisungen​, die der Computer ausführen soll. Jede davon wird mit einem Semikolon​ (;) abgeschlossen. Alle Anweisungen zusammen bewirken das, was du rechts neben dem Text zu sehen bekommst.

Da taucht ständig dieses Wörtchen var​ auf. Das ist eine Abkürzung für Variable. Direkt dahinter steht ein Name und dann folgt ein sogenanntes Zuweisungszeichen (=), das wie ein Gleichheitszeichen aussieht.

Jedes Mal, wenn var erscheint, heißt das: Es gibt etwas Neues, das Programm oder Spiel wird um ein neues Element erweitert. Dabei ist die Variable ein Platzhalter oder eine Art Behälter, dessen Inhalt veränderbar ist.

Und die Zuweisung​ bedeutet, dass in den Behälter etwas »eingefüllt« wird. Hinter dem Zuweisungszeichen kann alles Mögliche stehen. Und wie du oben siehst, werden dem Spiel mithilfe von var Elemente hinzugefügt (wie Kamera, Licht, Kugel und Untergrund).

​Zu beachten ist, dass bei einigen var-Zuweisungen ein zusätzliches new nötig ist. Ich komme weiter unten darauf zurück.

Schauen wir jetzt mal noch genauer hin. Dabei beginnen wir nicht ganz oben. Das wäre noch zu kompliziert, dazu kommen wir also erst später. Beginnen wir mit den Zeilen, in denen wir selbst schon mal etwas »machen« können.

Ein Objekt positionieren

In den beiden Anweisungen, die ich meine, geht es zuerst um ein Objekt namens sphere​, zu Deutsch: Kugel. Diese Zeilenfolge sorgt dafür, dass nebenan im Fenster eine solche Kugel zu sehen ist:

var sphere = BABYLON.Mesh.CreateSphere ("sphere1", 16, 2, scene); sphere.position.y = 1; 

Mit CreateSphere()​ wird eine Kugel erzeugt. Und mit position wird diese Kugel auf der Unterlage positioniert und nicht »dazwischen«.

• Damit du verstehst, was ich damit meine, ändere die betreffende Zeile einmal so um:

  // sphere.position.y = 1; 

Durch die zwei vorgeschalteten Schrägstriche (//) wird das Ganze zu einem Kommentar. Es ist damit keine Anweisung mehr und wird nach dem Programmstart übersprungen.

• Klicke nun oben links auf Run, um das Programm neu zu starten.

Und schon sackt die Kugel in den Unt...

Inhaltsverzeichnis

• Impressum
• Vorwort
• Einleitung
• Kapitel 1: Das erste Projekt
• Kapitel 2: HTML und Babylon
• Kapitel 3: Projekt-Erweiterung
• Kapitel 4: Spiele-Physik
• Kapitel 5: Mit und ohne Grenzen
• Kapitel 6: Kleiner Krabbelkurs
• Kapitel 7: Wanzenjagd
• Kapitel 8: Sightseeing
• Kapitel 9: Landschaften
• Kapitel 10: Die vier Elemente
• Kapitel 11: Android selbst gemacht
• Kapitel 12: Animationen
• Kapitel 13: Kontakt-Spiele
• Anhang A
• Anhang B
• Anhang C
• Anhang D