Spiele programmieren mit JavaScript für Kids (eBook)

Hans-Georg Schumann (Autor)

eBook Download: EPUB

2017 | 1. Auflage
336 Seiten
MITP Verlags GmbH & Co. KG
978-3-95845-579-5 (ISBN)

Infos

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

Hans-Georg Schumann war Informatik- und Mathematiklehrer an einer Gesamtschule. Er hat viele erfolgreiche Bücher in der mitp-Buchreihe »... für Kids« geschrieben.

Textauszug

Kapitel 2: HTML und Babylon

Nun hast du schon einmal in die Programmierung mit JavaScript und Babylon hineingeschnuppert und festgestellt, dass da eine ganze Menge an Programmzeilen steht, auch wenn es nur einige Anweisungen sind, die eine Kugel auf einem Spielfeld erzeugt haben.

Bis zu einem fertigen Spiel müssen wir wohl noch mit vielen Hundert zusätzlichen Zeilen rechnen. Kann man da nicht irgendwann doch mal den Überblick verlieren, wenn man sein Projekt immer nur im Babylon-Playground bearbeitet? Da wäre es gut, sich nach geeigneten Mitteln umzusehen, um auch größere Projekte übersichtlich bearbeiten zu können. Und das tun wir hier.

In diesem Kapitel lernst du

• etwas über HTML

• wie du die Babylon Engine in einem eigenen Ordner unterbringst

• wie du dir einen leistungsstarken Editor für deine Quelltexte holst

• etwas über den Umgang mit Notepad++

Get Zip

​Im Moment kann ich mein Projekt irgendwo im Internet speichern, muss mir aber dann die Seite merken und mich darauf verlassen, dass sie auch noch nach längerer Zeit vorhanden ist. Will ich auf Nummer sicher gehen und speichere meine Daten als zip-Datei auf meiner Festplatte, dann kann ich sie aber nicht einfach so wieder zurück in den Babylon-Editor holen, um sie weiter zu bearbeiten.

Warum finden wir nicht einen Weg, um gleich von vornherein alle Projekte auf der eigenen Festplatte (oder zum Beispiel einem USB-Stick) unterzubringen und auch dort zu bearbeiten? Dazu benötigen wir allerdings eigenes Werkzeug, denn irgendwo müssen wir ja unsere Quelltexte eintippen, und irgendwie wollen wir damit ein Programm zum Laufen bringen.

Du möchtest deine Projekte lieber weiter nur auf der Playground-Seite von Babylon erstellen? Für eine Zeit lang würde das auch ausreichen, doch wenn die Projekte immer größer werden, ist eine Bearbeitung außerhalb bedeutend besser möglich.

Für manche der Projekte, die du hier kennenlernen wirst, setzen wir zusätzliche Dateien ein, die sich im Playground dann so nicht mehr verwenden lassen.

Die folgenden Schritte sind unbequem, aber sie sind nötig, um dir die Arbeit an deinen Projekten später umso bequemer zu machen.

Wie du dennoch deine Projekte auch im Playground veröffentlichen kannst, erfährst du im Anhang.

Zuerst einmal bringen wir die aktuellen Projekt-Daten auf dem eigenen Computer unter.

• Speichere vom Babylon-Playground aus dein aktuelles Projekt über Get.zip.

• Suche die Datei sample.zip (die normalerweise im Download-Ordner liegen sollte) und klicke mit der rechten Maustaste auf das Symbol. Im Kontextmenü wählst du Alles extrahieren und folgst dann den Anweisungen.

Wenn du den Anweisungen folgst, bekommst du einen Ordner mit dem Namen sample und darin eine Datei, die index.html​ heißt. Und in die schauen wir jetzt einmal hinein, denn darin steckt ja offenbar alles, was unser Projekt ausmacht.

Wie das Dateisymbol für index.html aussieht, hängt davon ab, welcher Browser dein Standard-Browser ist. (Ich benutze außer Microsoft Edge auch Google Chrome und Mozilla Firefox.)

Bei einem Doppelklick auf das Dateisymbol wird dein Standard-Browser gestartet und dich erwartet ein Ergebnis, das bei mir so aussieht:

Nun weißt du schon einmal, dass index.html offenbar so etwas wie eine Start-Datei​ ist. Tatsächlich kann die Datei auch einen anderen Namen haben, aber es spricht nichts dagegen, bei diesem zu bleiben. Wichtig ist die Kennung html.

​Was heißt HTML? Das ist die Abkürzung von »HyperText Markup Language«, einer einfachen Programmiersprache, die im Allgemeinen zur Programmierung von Webseiten benutzt wird. Mit der haben wir es hier deshalb zu tun, weil man ohne sie kein Programm in einem Browser starten kann.

Du musst allerdings für die Projekte, die wir noch in diesem Buch erstellen wollen, kein besonderes Wissen in HTML haben. Wie du gesehen hast, bekommt man im Babylon-Playground von HTML überhaupt nichts zu sehen.

Wenn wir uns den Inhalt von index.html anschauen wollen, benötigen wir einen Editor. Das kann ein ganz einfacher Texteditor sein, denn in der Datei steht ausschließlich Text.

• Klicke mit der rechten Maustaste auf das Symbol für index.html. Suche im Kontextmenü nach Öffnen mit und im Zusatzmenü nach Editor. Klicke darauf. (Wenn der Eintrag nicht vorhanden ist, suche danach mit Andere App auswählen.)

Nachdem der Editor gestartet ist, zeigt er auch Text an, aber den versteht man nicht unbedingt sofort; es sei denn, man kennt sich in HTML aus. Für unsere Zwecke reicht ein wenig Grundwissen.

Es wird viel mit spitzen Klammern gearbeitet (die du später auch als Zeichen für »größer« und »kleiner« kennenlernen wirst). Darin eingeschlossen sind jeweils Wörter wie html, head und body. In der Abbildung habe ich versucht, knapp zu erklären, was sie bedeuten.

html umschließt das gesamte HTML-Programm. Alles, was im Kopf-Teil (head) steht, wird für alle Projekte so bleiben – bis auf eine Ausnahme, den Titel. Das meiste, was im Rumpf-Teil (body) steht, geht uns etwas an, denn da finden wir auch unser aktuelles JavaScript-Programm.

Wenn es dich interessiert, können wir uns alles noch etwas näher anschauen, aber nur das Wichtigste. Beginnen wir mit dem head-Teil:​​

Zuerst werden einige Eigenschaftsangaben zum HTML-Text gemacht​, über die du hier nichts weiter wissen musst (sogenannte Meta-Daten):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Dann kommt der Titel für die Anzeige im Browser:​

<title>My Project</title>

Es ist die einzige Stelle, an der du etwas ändern darfst. Das habe ich bereits getan (da stand vorher »Babylon.js sample code«).

Die nächste Zeile ist die wichtigste. Sie bindet die Babylon Engine (aus dem Internet) mit ein:​​

<script src="http://www.babylonjs.com/babylon.js"></script>

Möglicherweise stehen in deinem Quelltext gleich mehrere Zeilen untereinander, die mit script src= beginnen. Dennoch bleibt diese eine Zeile die wichtigste.

Und weil wir später dafür sorgen, dass wir allein damit auskommen, solltest du gleich alle anderen Zeilen entfernen. Das darf auch für diese Zeile gelten:​

<!-- Babylon.js -->

Hierbei handelt es sich nur um einen Kommentar. So wie in JavaScript zwei Schrägstriche (//) einen Kommentar einleiten, wird das in HTML mit einer Kombination aus Ausrufezeichen und zwei Strichen (!--) erledigt, die am Ende den Kommentar auch wieder abschließen.

Es folgen Angaben über das Aussehen (style) der Seite im Browser, die unter anderem die Darstellung im Browserfenster betreffen:​

<style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style>

Fassen wir bis hierhin mal die HTML-Wörter zusammen, die du bis jetzt kennst:

Anfangsmarke	Endmarke	Bedeutung

<html>

</html>

Kompletter HTML-Text

<head>

</head>

Kopf-Teil

<body>

</body>

Rumpf-Teil

<meta

/>

Zusatz-Daten

<title>

</title>

Titelanzeige im Browser

<script>

</script>

JavaScript-Quelltext

<src>

Datei einbinden

<style>

</style>

Aussehen im Browser

Abnabelung 1: babylon.js

Die Datei, die wir jetzt haben, lässt sich außerhalb eines Browsers und ohne Internet-Zugang bearbeiten und speichern. Anschließend kann sie über einen Browser gestartet werden. Und wenn JavaScript-Quelltext drinsteckt, werden die Anweisungen auch im Browser ausgeführt.

Das klingt doch schon mal gut. Aber es gibt noch einiges zu klären. So stört es mich, dass man die Babylon Engine immerzu aus dem Internet »herbeiholen« muss. Deshalb würde ich die folgende Zeile:​

<script src="http://www.babylonjs.com/babylon.js"></script>

gerne so ändern:

<script src="...

Produkt-Details

• Erscheint lt. Verlag: 15.5.2017
• Reihe/Serie: mitp für Kids
• Verlagsort: Frechen
• Sprache: deutsch
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Themenwelt: Informatik ► Web / Internet ► JavaScript
• Schlagworte: 3D • Babylon • Game Development • Games • JavaScript • Programmieren • Programmierung • Spiele entwickeln
• ISBN-10: 3-95845-579-4 / 3958455794
• ISBN-13: 978-3-95845-579-5 / 9783958455795