Spiele programmieren mit JavaScript für Kids
Hans-Georg Schumann
Hans-Georg Schumann
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über <http://dnb.d-nb.de> abrufbar.
ISBN 978-3-95845-579-5
1. Auflage 2017
www.mitp.de
E-Mail: mitp-verlag@sigloch.de
Telefon: +49 7953 / 7189 - 079
Telefax: +49 7953 / 7189 - 082
© 2017 mitp Verlags GmbH & Co. KG
Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.
Lektorat: Katja Völpel
Sprachkorrektorat: Petra Heubach-Erdmann
Covergestaltung: Christian Kalkert
electronic publication: III-satz, Husby, www.drei-satz.de
Dieses Ebook verwendet das ePub-Format und ist optimiert für die Nutzung mit dem iBooks-reader auf dem iPad von Apple. Bei der Verwendung anderer Reader kann es zu Darstellungsproblemen kommen.
Der Verlag räumt Ihnen mit dem Kauf des ebooks das Recht ein, die Inhalte im Rahmen des geltenden Urheberrechts zu nutzen. Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheherrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und Einspeicherung und Verarbeitung in elektronischen Systemen.
Der Verlag schützt seine ebooks vor Missbrauch des Urheberrechts durch ein digitales Rechtemanagement. Bei Kauf im Webshop des Verlages werden die ebooks mit einem nicht sichtbaren digitalen Wasserzeichen individuell pro Nutzer signiert.
Bei Kauf in anderen ebook-Webshops erfolgt die Signatur durch die Shopbetreiber. Angaben zu diesem DRM finden Sie auf den Seiten der jeweiligen Anbieter.
Die Suche nach Fehlern kann einen manchmal fast wahnsinnig machen. Die schlimmsten sind meist so gut verborgen, dass man sie erst gar nicht findet. Deshalb ist es zum einen wichtig, die häufigsten Fehler zu kennen, zum anderen zu wissen, wo man sich Hilfe bei der Fehlersuche holen kann.
Etwas falsch zu machen, ist fast immer ärgerlich! Deshalb hier noch eine kleine Checkliste, die man sich hin und wieder einmal anschauen sollte:
Sind vielleicht scheinbare »Kleinigkeiten« wie zum Beispiel Komma, Punkt, Semikolon, Klammer vergessen worden?
Gibt es zu jeder öffnenden auch eine schließende Klammer?
Sind die Namen von Variablen und Funktionen richtig geschrieben?
Wurde Groß- und Kleinschreibung beachtet?
Ist jede Anweisung mit einem Semikolon abgeschlossen?
Sind alle Anweisungsblöcke (zum Beispiel hinter if oder for oder function) mit geschweiften Klammern versehen?
Sind Bedingungen (rund) geklammert, haben Funktionen ihre nachfolgenden runden Klammern – auch wenn die Parameterlisten leer sind?
Wurde vielleicht in einer Bedingung der Zuweisungsoperator (=) mit dem Gleichheitsoperator (==) verwechselt?
Können Bedingungen zum Beispiel hinter if überhaupt erfüllt werden?
Haben Dezimalzahlen einen Punkt (und nicht ein Komma)?
Zuerst möchte ich noch mal darauf hinweisen, dass die am meisten verbreiteten Browser die Taste F12 kennen. Damit aktiviert man den sogenannten Debug-Teil von Chrome oder Edge oder Firefox. Debugging heißt frei übersetzt »Fehler suchen und finden«.
Gibt es also Fehler in deinem JavaScript-Quelltext, dann kann ein Browser (über F12) darüber Informationen liefern. Nicht jeder der drei genannten Browser macht das gleich gut, am besten klappte es bei mir mit Google Chrome.
Aber es gibt weitere Möglichkeiten, sich bei der Fehlersuche helfen zu lassen. Schon erwähnt habe ich JSLint, dort kannst du deinen Quelltext einfügen und überprüfen lassen. Weitere Hilfe findest du auf der Esprima-Seite. Hier die beiden Zugangs-Adressen:
http://www.jslint.com/
http://esprima.org/
Darüber hinaus solltest du nicht die zahlreichen JavaScript-Foren vergessen, in denen man nachfragen und sich Hilfe holen kann. Nicht zuletzt ist ja auch noch das Forum für Babylon da:
http://www.html5gamedevs.com/forum/16-babylonjs/
Zum Ausführen eines Babylon-Projekts braucht man einen Browser, der HTML und JavaScript versteht. Dann genügt ein Doppelklick auf das Datei-Symbol von index.html, um ein Projekt zu starten. Meist wird einer dieser Browser benutzt:
Google Chrome
Microsoft Edge
Microsoft Internet Explorer
Mozilla Firefox
Dabei wird der Internet Explorer immer mehr vom neueren Edge abgelöst. In all diesen Browsern lassen sich unsere Projekte starten. Doch nicht alle Browser funktionieren gleich gut. Gar keine Probleme hatte ich mit Firefox. Chrome blockierte das Laden von Textur-Dateien. Und Edge ließ sich nicht aus Notepad++ heraus starten. Doch das kann man ändern.
Um zu erreichen, dass der Name »Microsoft Edge« im Ausführen-Menü des Editors Notepad++ auftaucht, muss in einer Datei namens shortcuts.xml etwas geändert werden.
Im Notepad++-Ordner befindet sich eine solche Datei, die wird aber offenbar nur bei der Installation benutzt. Wir müssen also etwas tiefer graben, und zwar auf diesem Pfad:
C:\Benutzer\Benutzername\Appdata\Roaming\Notepad++
Wobei für »Benutzername« dort der Name steht, den du auf deinem Computer benutzt.
Suche also auf Laufwerk C: den Ordner Benutzer und doppelklicke darauf. Wandere weiter in den Ordner mit deinem Benutzernamen. Dort doppelklicke auf AppData.
Im nächsten Ordner doppelklickst du auf Roaming. Nun musst du den Ordner für Notepad++ suchen und öffnen. Dort findest du dann eine Datei namens shortcuts.xml.
Die lässt sich im normalen Windows-Editor öffnen. (Auf keinen Fall aber in Notepad++, denn da wird diese Datei dann gerade benutzt! Und wir wollen sie ja ändern.)
Öffne also diese Datei und suche dort den Eintrag <UserDefinedCommands>. Schaffe dir direkt darunter ein paar Zeilen Platz.
Unter <UserDefinedCommands> stehen mehrere Anweisungen, hier auch Kommandos genannt (deswegen Command). Alle dienen dazu, andere Programme (meistens Browser) aufzurufen. Dort muss jetzt eine passende Anweisung für Microsoft Edge eingefügt werden.
Tippe diese Anweisung direkt unter <UserDefinedCommands> komplett ein:
<Command name="Launch in Edge" Ctrl="yes" Alt="yes" Shift="yes" Key="65">$(FULL_CURRENT_PATH) " ;microsoft-edge:// "</Command>
Danach speichere die Datei und schließe sie wieder.
Von nun an kannst du Notepad++ starten und bekommst unter anderem auch Microsoft Edge zum Ausführen angeboten.
Wenn man ein Babylon-Projekt mit Chrome startet, kann es passieren, dass man statt Texturen nur Schachbrettmuster (rot-schwarz) zu sehen bekommt, obwohl alle Texturen verfügbar sind.
Dann muss Google Chrome anders gestartet werden. Am besten legt man dazu eine Verknüpfung an.
Klicke also mit der rechten Maustaste auf den Windows-Desktop, wähle im Kontextmenü Neu und Verknüpfung.
Es öffnet sich ein Dialogfeld mit der Frage: »Für welches Element möchten Sie eine Verknüpfung erstellen?«
Dort gibst du im Feld unter Speicherort diese Zeile ein.
"C:\Program Files\Google\Chrome\Application\chrome.exe"
-allow-file-access-from-files
Mit einem Klick auf Weiter geht es weiter.
Wenn das nicht funktioniert und eine Fehlermeldung erscheint, dann musst du den Pfad ändern.
Statt Program Files könnte auch Programme oder Program Files (x86) passen. Am besten, du suchst den Ordner, in dem Google Chrome bei dir liegt, und überträgst den Pfad in die Verknüpfung. Wichtig ist, dass hinten noch -allow-file-access-from-files angehängt wird.
Zum Schluss wirst du gefragt, wie deine Verknüpfung heißen soll. Du kannst den Vorschlag so stehen lassen oder ihn ändern. Klicke abschließend auf Fertig stellen.
Wenn du nun aus einem Projekt-Ordner das Symbol für index.html auf das neue von Google Chrome ziehst, wird dein Projekt gestartet – diesmal mitsamt den passenden Texturen.
Die ersten Programmierversuche finden direkt im Browser deines Computers statt (Kapitel 1). Doch schon bald darauf verlassen wir den Editor von Babylon, den sogenannten Playground, um davon unabhängig zu sein, weil wir außerhalb mehr Freiheiten haben.
Doch wenn du eine Reihe von Projekten erstellt hast, sehnst du dich vielleicht auch mal wieder dorthin zurück. Wahrscheinlich einfach nur deshalb, weil du darüber eigene Projekte veröffentlichen kannst. Du musst dann zum Beispiel in Facebook oder über andere soziale Medien nur den Link mitteilen, unter dem man das Programm im Playground findet, und alle deine Freunde können sich deine Werke anschauen und sie ausprobieren.
Wie bekommt man ein eigenes Projekt in den Playground? Zunächst einmal solltest du alle eigenen Dateien bereithalten, die etwas mit dem Projekt zu tun haben (der Inhalt von babylon.js steht ja im Playground bereits zur Verfügung).
Starte nun deinen Browser und wechsle über diese Adresse zum Playground:
http://www.babylonjs-playground.com/
Klicke dort oben in der Leiste mit den Schaltflächen auf Clear.
Nun ist das Editorfeld völlig leer. Dorthin kommt jetzt dein Quelltext. Dazu öffnest du die Datei game.js.
Ich habe hier als Beispiel das Projekt Android1 (aus dem 11. Kapitel) genommen. Aber es kann natürlich auch ein beliebiges anderes Projekt sein.
Markiere dort nun alles, was zur Definition der Funktion createScene() gehört.
Alles andere drum herum ist bereits im Playground vorhanden und wird dort nur nicht angezeigt. Es geht also ausschließlich um den Inhalt von createScene().
Kopiere den markierten Text zum Beispiel mit Strg+C, wechsle zum Browser und füge ihn dort zum Beispiel mit Strg+V ein.
Nun brauchst du noch den Quelltext, in dem die aufgerufenen Funktionen stehen, die du selbst definiert hast. Die stehen in meinem Beispiel in project.js.
Öffne als Nächstes diese Datei und markiere diesmal den gesamten Quelltext, der darin steht.
Kopiere ihn wieder zum Beispiel mit Strg+C, wechsle zum Browser und füge ihn dort zum Beispiel mit Strg+V unter dem Text ein, der dort schon vorhanden ist.
Hast du noch mehr Dateien wie zum Beispiel android.js oder terrain.js, dann muss auch deren Inhalt in den Playground kopiert werden.
Probiere das Programm nun aus, indem du auf Run klickst.
Wenn alles klappt und das Programm funktioniert, klicke auf Save.
Und merke dir den Link, der oben in deinem Browser steht. Dort ist nämlich dein Projekt von nun an zu finden.
Bei mir waren das diese Adressen:
http://www.babylonjs-playground.com/#LRDD1
http://www.babylonjs-playground.com/#LRDD1#1
Warum zwei Links? Das Problem ist, dass man seine Texturen nicht so einfach in den Playground schicken kann. Man muss dort eine Adresse angeben, unter der die Textur-Datei zu finden ist (das kann auch zum Beispiel ein Ordner in Dropbox oder OneDrive sein). Oder man benutzt die prozeduralen Texturen, die Babylon »eingebaut« hat.
Du findest unter der ersten Adresse einen Androiden mit karierter Ersatz-Texturierung und unter der zweiten Adresse einen mit prozeduralen Babylon-Texturen.
Du kannst auch dein Projekt im Babylon-Forum anbieten, bei Interesse können die »Macher« von Babylon, die auch das Forum betreiben, dann dafür sorgen, dass alles zusammen (inklusive Texturen) in den Playground kommt.
Und solltest du eine eigene Homepage haben, so weißt du selber, wie man dort seine eigenen Projekte unterbringt.
Spiele programmieren? Das ist doch nur was für Kids? Obwohl die meistens lieber spielen als programmieren. Das Spielen macht doch auch mehr Spaß als das Erstellen, wobei das wieder vom passenden Werkzeug abhängt. Hier geht es um ein Paket namens Babylon (das mit dem Turm, wo war das noch mal?) und die Programmiersprache JavaScript, die jeder Browser versteht, mit dem auch Sie im Internet surfen.
Es spricht nichts dagegen, wenn Sie Ihren Kindern über die Schulter schauen, was die da so an Programmen aushecken. Vielleicht bringt es Sie dazu, auch selber mal mehr als einen Blick in die vielen Kapitel vor diesem Anhang zu werfen?
Wenn Sie meinen, noch überhaupt nichts »von diesem Zeug« zu verstehen, können Sie sich auch erst einmal ein Buch wie Computer für Kids vornehmen. Das macht Sie fit für den Umgang mit dem Computer und verhindert, dass Ihre Kids Ihnen zu schnell über den Kopf wachsen – was das Thema PC angeht.
Helfen können Sie Ihren Kindern auf jeden Fall bei Download und Installation der Werkzeuge, die sie zum Programmieren brauchen. Genauere Anleitungen dazu gibt es in Kapitel 2. Schaden kann es nicht, wenn man zu zweit versucht, alles auf dem Computer einzurichten. Und so bekommen Sie auch mit, was da auf der Festplatte an neuen Ordnern und Dateien auftaucht:
Das Standardverzeichnis für die Babylon-Projekte heißt bei mir D:\Projekte. Daneben gibt es auch hier weitere Unterverzeichnisse (beziehungsweise Ordner).
Sämtliche Programmbeispiele zum Buch gibt es ebenso wie die Lösungsprogramme zum Herunterladen von dieser Seite:
http://www.mitp.de/577
Auf jeden Fall lohnt sich ein Blick auf die Internetseite http://www.babylonjs.com, wo man viele Informationen und Tipps (auf Englisch) und nicht nur die jeweils neueste Version von Babylon finden kann.
Es ist nicht unbedingt nötig, dass Ihre Kinder einen USB-Stick oder eine SD-Card benutzen, auf der sie ihre Programmierversuche speichern. Sie können für sie auf der Festplatte selbst einen Ordner einrichten (zum Beispiel mit dem Namen D:\BABYLON\Projekte oder nur D:\Projekte). Dort haben alle Programmierversuche Platz. Es kann aber nicht schaden, alles noch mal zur Sicherheit auf einem anderen Speichermedium außerhalb des PC unterzubringen.
Will Ihr Kind seine Dateien speichern, ist es vielleicht nötig, dass Sie ihm dabei helfen. Im Buch gehe ich davon aus, dass mit C: und D: Festplatten gemeint sind.
Dieses Buch lässt sich natürlich auch für den Informatik-Unterricht verwenden. Dort setzt selbstverständlich jeder Lehrer seine eigenen Schwerpunkte. Aber wenn es zum Beispiel um eine Programmier-AG oder einen Informatikkurs mit Schwerpunkt Spieleprogrammierung geht, lässt sich dieses Buch in Ergänzung zu Ihrem Lehrmaterial gut einsetzen. Und mit Babylon steht Ihnen und Ihren Schülern eine interessante und leistungsfähige Game Engine zur Verfügung.
Was die Programmierung angeht, so wird hier die Sprache JavaScript genutzt, die der Programmiersprache Java recht ähnlich, aus meiner Sicht aber einfacher zu lernen ist. Außerdem versteht sie jeder Browser, und wenn man JavaScript beherrscht, dann hat man gute Voraussetzungen, um auch Web-Anwendungen zu programmieren. Zahlreiche Fragen und Aufgaben mit Lösungen helfen, Gelerntes zu festigen und zu vertiefen.
Vielleicht ist es Ihnen lieber, wenn Ihre Schüler die Projekte alle selbst erstellen. Dann lassen Sie die Download-Dateien einfach (erst einmal) weg.
Für den Informatik-Unterricht sollte jeder Schüler ein eigenes externes Speichermedium haben, um darauf seine Versuche zu sichern. So wird verhindert, dass sich auf der Festplatte des Schulcomputers mit der Zeit allerlei »Datenmüll« ansammelt. Außerdem dient der eigene Datenträger dem Datenschutz: Nur der betreffende Schüler kann seine Daten verändern.
Es kann nicht schaden, die Programmdateien, an denen gerade gearbeitet wird, etwa alle zehn Minuten zu speichern. Denn Computer pflegen gern gerade dann »abzustürzen«, wenn man seine Arbeit längere Zeit nicht gespeichert hat.