Sie sind hier
E-Book

Spiele programmieren mit JavaScript für Kids

AutorHans-Georg Schumann
Verlagmitp Verlags GmbH & Co. KG
Erscheinungsjahr2017
Seitenanzahl336 Seiten
ISBN9783958455795
FormatePUB
Kopierschutzkein Kopierschutz
GerätePC/MAC/eReader/Tablet
Preis10,00 EUR
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.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

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="...
Blick ins Buch

Weitere E-Books zum Thema: Programmiersprachen - Softwareentwicklung

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

Programmieren lernen in PHP 5

E-Book Programmieren lernen in PHP 5
Format: PDF

Mit der Version 5 erreicht PHP einen bemerkenswerten Reifegrad, der PHP zu einer festen Größe in der Welt der Webprogrammierung macht. Gerade die leichte Erlernbarkeit macht PHP zur idealen…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Weitere Zeitschriften

AUTOCAD & Inventor Magazin

AUTOCAD & Inventor Magazin

FÜHREND - Das AUTOCAD & Inventor Magazin berichtet seinen Lesern seit 30 Jahren ausführlich über die Lösungsvielfalt der SoftwareLösungen des Herstellers Autodesk. Die Produkte gehören zu ...

Bibel für heute

Bibel für heute

BIBEL FÜR HEUTE ist die Bibellese für alle, die die tägliche Routine durchbrechen wollen: Um sich intensiver mit einem Bibeltext zu beschäftigen. Um beim Bibel lesen Einblicke in Gottes ...

Card Forum International

Card Forum International

Card Forum International, Magazine for Card Technologies and Applications, is a leading source for information in the field of card-based payment systems, related technologies, and required reading ...

Card-Forum

Card-Forum

Card-Forum ist das marktführende Magazin im Themenbereich der kartengestützten Systeme für Zahlung und Identifikation, Telekommunikation und Kundenbindung sowie der damit verwandten und ...

Das Grundeigentum

Das Grundeigentum

Das Grundeigentum - Zeitschrift für die gesamte Grundstücks-, Haus- und Wohnungswirtschaft. Für jeden, der sich gründlich und aktuell informieren will. Zu allen Fragen rund um die Immobilie. Mit ...

DGIP-intern

DGIP-intern

Mitteilungen der Deutschen Gesellschaft für Individualpsychologie e.V. (DGIP) für ihre Mitglieder Die Mitglieder der DGIP erhalten viermal jährlich das Mitteilungsblatt „DGIP-intern“ ...

ea evangelische aspekte

ea evangelische aspekte

evangelische Beiträge zum Leben in Kirche und Gesellschaft Die Evangelische Akademikerschaft in Deutschland ist Herausgeberin der Zeitschrift evangelische aspekte Sie erscheint viermal im Jahr. In ...

VideoMarkt

VideoMarkt

VideoMarkt – besser unterhalten. VideoMarkt deckt die gesamte Videobranche ab: Videoverkauf, Videoverleih und digitale Distribution. Das komplette Serviceangebot von VideoMarkt unterstützt die ...

Evangelische Theologie

Evangelische Theologie

Über »Evangelische Theologie« In interdisziplinären Themenheften gibt die Evangelische Theologie entscheidende Impulse, die komplexe Einheit der Theologie wahrzunehmen. Neben den Themenheften ...