Kids programmieren 3D-Spiele mit JavaScript E-Book

Chris Strom

• Herausgeber: O'Reilly
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2014

Seitenzahl: 367

Beschreibung

Programmierenlernen ist wirklich nicht schwer. Du wirst erstaunt sein, wie einfach es ist, interaktive Welten und lustige Spiele zu entwickeln. Und du wirst garantiert viel Spaß dabei haben! Du lädst dir schnell den ICE Code Editor als Browsererweiterung herunter, mit dem du auch offline arbeiten kannst, und los geht's. Alles was du programmierst, siehst du direkt im Code Editor: animierte Figuren, deinen eigenen Avatar, der Radschlagen kann, oder dein eigenes Spiel mit Obstmonstern, Höhlenpuzzlen und Floßfahrten. Wenn du wissen willst, was es mit dem ganzen Code so auf sich hat, wird dir das ganz genau erklärt. Wenn du dich aber lieber auf die Praxis konzentrieren willst, kannst du die Theorie außen vor lassen. Warum 3D-Spiele? Weil das Programmierenlernen damit besonders großen Spaß macht, denn, Hand aufs Herz, wer spielt nicht gern Computerspiele? Und so macht das Lernen nicht nur riesigen Spaß, wir programmieren dabei auch jede Menge tolle Sachen: Du stellst coole Spielfiguren her und Welten, in denen du spielen kannst, du programmierst deinen eigenen Avatar, bastelst lila Monster und erzeugst Weltraumsimulationen. Warum mit JavaScript? JavaScript ist die Sprache des World Wide Web und die einzige Programmiersprache, die alle Webbrowser ohne zusätzliche Software verstehen. Wenn du gelernt hast, in JavaScript zu programmieren, kannst du nicht nur solche Spiele programmieren, wie du in diesem Buch kennenlernen wirst. Du kannst auch alle möglichen Websites programmieren. Außerdem zeigen wir dir, wie du anschließend deine Spiele mit deinen Freunden teilen und sie auf deiner eigenen Website einbinden kannst. Und dann erzählst du all deinen Freunden: "Das hab' ich gemacht!" An wen richtet sich dieses Buch? Obwohl für Kinder geschrieben, können auch Erwachsene hiermit das Programmieren erlernen. Es richtet sich an Programmieranfänger von 11 bis 99.

Leseprobe

Kids programmieren 3D-Spiele mit JavaScript

ChrisStrom

Danksagung

Ohne meine wunderbare Frau Robin bin ich nichts. Sie erträgt nicht nur, dass ich tagelang verschwinde, um zu schreiben. Sie hilft mir auch auf unzählige andere Arten. Sie hat die allerersten Fassungen dieses Buches gelesen und korrigiert. Sie hilft bei der Durchführung der Kid Hackathons, die zur Entwicklung dieses Buches beitrugen (okay, sie führt sie durch). Und ja – sie ist eine fantastische Ehefrau und Mutter.

Ein riesiges Dankeschön geht auch an meinen Sohn Luke, der das wichtigste Versuchskaninchen für die ersten Versionen dieses Buches war. Sein sachliches Feedback hat dazu beigetragen, dass es viel besser wurde. Danke auch an meine Tochter Elora, die mit ihren Einsichten nicht hinter dem Berg gehalten hat.

Und natürlich geht ein großer Dank auch an meine technischen Gutachter. Es ist nicht leicht, ein Buch aus Sicht eines Kindes zu bewerten, doch meine Gutachter waren dieser Aufgabe mehr als gewachsen. Danke, Alec M., Hana B., Dave S., Thad K., Maik Schmidt, Silvia Domenech und Mark Musante.

Ein besonderer Dank geht an Sophie H., die das Spiel inspiriert hat, aus dem schließlich Projekt: Obstjagd wurde.

Dieses Buch wäre ohne die großartige Arbeit von Ricardo Cabello Miguel, von allen liebevoll »Mr.doob« genannt, nicht entstanden. Ricardo ist der wichtigste Programmierer von Three.js, der 3D-JavaScript-Bibliothek, die wir in diesem Buch benutzen. Er schrieb außerdem die ursprüngliche Implementierung des ICE Code Editors, die wir hier verwenden. Ohne seine unglaublichen Fähigkeiten wäre dieses Buch nicht zu dem geworden, was es ist. Danke auch an Chandler Prall für seine Arbeit an der Physijs-Physik-Engine, die wir hier ausgiebig benutzen. Chandler hat auch die vielen, vielen Fragen beantwortet, die ich beim Lernen hatte.

Einleitung

Herzlich willkommen in der Welt der Programmierung!

Ich will nicht lügen – es ist manchmal eine frustrierende Welt (ich muss wenigstens einmal in der Woche weinen). Aber der ganze Frust lohnt sich. Du kannst diese Welt nach deinem Belieben gestalten. Du kannst deine Welt mit anderen teilen. Du kannst Dinge bauen, die wirklich etwas bewegen.

Dieses Buch, das du so eifrig zu lesen begonnen hast, ist eine großartige Möglichkeit, um mit dem Programmieren zu beginnen. Es ist vollgestopft mit klaren und verständlichen Erklärungen. Und das Beste ist, dass wir einige wirklich coole Spiele herstellen werden. Das wird richtig klasse!

Wie ich zu programmieren gelernt habe

Als Kind habe ich die Programme für Computerspiele aus Büchern kopiert. Das ist schon lange her. Ich kaufte Bücher, in denen nichts weiter als die Programme zu lesen waren, und tippte sie in den Computer ein.

Als ich damit begann, hatte ich keine Ahnung, was ich eigentlich tat. Schließlich fing ich an, bestimmte Dinge zu erkennen, die immer wieder vorkamen, und ich verstand sie auch schon ein bisschen.

Ich begann damit, Dinge zu ändern – zuerst nur Kleinigkeiten –, um zu sehen, was passierte. Danach kamen größere Änderungen. Schließlich wurde ich recht gut darin. Und irgendwann konnte ich meine eigenen Programme schreiben. Ich hoffe, dass dieses Buch auch dir dies ermöglicht, allerdings mit einem großen Unterschied: Ich erkläre, was hier passiert, sodass du nicht so viel raten musst.

Was du für dieses Buch brauchst

Nicht alle Webbrowser können die coolen 3D-Spielobjekte erzeugen, die wir in diesem Buch bauen werden. Um das meiste aus diesem Buch herauszuholen, solltest du auf deinem Computer den Webbrowser Google Chrome (https://www.google.com/chrome/) installieren. Andere Webbrowser funktionieren auch, allerdings greifen einige der Übungen in diesem Buch auf Eigenschaften und Funktionen zurück, die es nur in Google Chrome gibt. Ein Browser, der definitiv nicht für diese Übungen zu gebrauchen ist, ist der Microsoft Internet Explorer.

Für die meisten Beispiele in diesem Buch ist ein beliebiger Computer, auf dem Google Chrome installiert ist, ausreichend. Spätere Übungen, die interessante Lichter, Schatten und 3D-Materialien benutzen, erfordern einen Computer, der WebGL unterstützt. Du kannst die diesbezüglichen Fähigkeiten Deines Computers testen, indem du die Get-WebGL-Site (http://get.webgl.org/) besuchst. Mach dir aber keine allzu großen Sorgen um WebGL; du kannst immer noch eine Menge programmieren, auch wenn dein Computer nicht mit aufwendigeren 3D-Grafiken zurechtkommt.

Was ist JavaScript?

Es gibt viele, viele Programmiersprachen. Manche Programmierer führen gern lange Streitgespräche darüber, welche die beste ist, in Wahrheit aber bieten alle Sprachen einzigartige und nützliche Dinge.

Wir benutzen in diesem Buch die Programmiersprache JavaScript. Wir programmieren in JavaScript, weil es die Sprache des Webs ist. Es ist die einzige Programmiersprache, die alle Webbrowser ohne zusätzliche Software verstehen. Wenn du in JavaScript programmieren gelernt hast, kannst du nicht nur solche Spiele herstellen, die du in diesem Buch kennenlernen wirst, sondern kannst auch alle möglichen Websites programmieren.

Wir werden allerdings keine Experten in JavaScript.

Wir werden hier gerade so viel JavaScript behandeln, dass du in der Lage bist, die Spiele in diesem Buch zu programmieren. Das ist schon eine ganze Menge an JavaScript – ausreichend, um damit ohne größere Schwierigkeiten weiterlernen zu können.

Wie du dieses Buch lesen solltest

Du findest in diesem Buch zwei Arten von Kapiteln: Projektkapitel und Lernkapitel. Die Projektkapitel starten mit »Projekt«, wie etwa Kapitel 1. Alle anderen sind Lernkapitel.

Falls du das Programmieren genauso lernen möchtest wie ich, dann lies die Projektkapitel und führe alle Übungen durch. Du stellst coole Spielfiguren her sowie Welten, in denen du spielen kannst. Du erzeugst Weltraumsimulationen. Du bastelst lila Monster. Du produzierst alle möglichen tollen Sachen.

Solltest du dich aber fragen, warum die Spiele so geschrieben wurden, wie sie es sind, dann lies die Lernkapitel. Wir werden nicht alles über die Programmierung behandeln, aber es sollte ausreichend Stoff sein, um zu verstehen, warum wir Dinge so gemacht haben, wie sie sind. Das sind die Kapitel, die ich als Kind gern gehabt hätte.

Hinweise zur deutschen Fassung dieses Buches

Du beschäftigst dich bestimmt schon eine Weile mit Computern und dem Internet und weißt deshalb, dass du dabei an der englischen Sprache nicht vorbeikommst. Das ist beim Programmieren nicht anders. So gut wie alle Programmiersprachen basieren auf der englischen Sprache. Das gilt auch für JavaScript, das du in diesem Buch kennenlernst. Die Programmierplattform, die du benutzen wirst, um die hier gezeigten Beispiele auszuprobieren, verwendet englische Befehle. In den bereitgestellten Vorlagen für den Code, den sogenannten Templates, findest du englischsprachige Kommentare, Variablen und Funktionen, und auch die geladenen JavaScript-Bibliotheken sind auf Englisch.

Zur besseren Orientierung haben wir im vorderen Teil des Buches den englischen Kommentaren ihre deutschen Übersetzungen beigefügt, später haben wir dann darauf verzichtet, schließlich kennst du dich dann schon aus und es ist nicht mehr nötig. Wenn du irgendwann anfängst, eigene Programme zu entwickeln, kannst du dir eigene Namen für deine Variablen und Funktionen ausdenken. Ob diese auf Deutsch oder auf Englisch sind oder auf einem ganz geheimen Code beruhen, den du dir selbst ausgedacht hast, ist ganz dir überlassen (bzw. hängt davon ab, was du mit deinen Mitstreitern vereinbart hast). Am besten legst du dir beim Durcharbeiten dieses Buches ein Wörterbuch bereit, um Wörter, deren Bedeutung dir unklar ist, nachzuschlagen.

Du musst außerdem beachten, dass die Schreibweise von Dezimalzahlen anders ist als im deutschsprachigen Raum üblich: Anstelle eines Kommas zum Abtrennen wird ein Punkt benutzt. Denke daran, das ebenfalls zu tun, da du dir ansonsten Fehler einhandelst, deren Ursache möglicherweise schwer zu finden ist.

Legen wir los!

Jetzt reicht es mit der Einführung – stürzen wir uns in die Programmierung!

Kapitel 2. Mit der Konsole herumspielen und feststellen, was kaputt ist

WENN DU DIESES KAPITEL GELESEN HAST, DANN

kannst du die JavaScript-Konsole öffnen/schließen

weißt du, wie man in der JavaScript-Konsole nach Fehlern sucht

bist du in der Lage, Projekte zu reparieren, wenn der ICE blockiert

Beim Programmieren in einem Webbrowser ist es extrem nützlich, wenn man weiß, wie man die JavaScript-Konsole des Browsers benutzt. Die meisten modernen Browser besitzen eine JavaScript-Konsole, wir benutzen hier aber Google Chrome.

Das Programmieren kann einen überwältigen

Manchmal möchte man seinen Computer einfach aus dem Fenster werfen (lass es besser!). Behalte immer zwei Tatsachen im Hinterkopf, wenn du hier weitermachst:

Es wird immer Dinge geben, die du nicht weißt – das ist okay.

Deine Programme werden kaputtgehen – das ist okay.

Denke immer daran, dass es allen anderen auch so geht, und dann ist alles in Ordnung.

Leg los

Mach dich mit dem ICE Code Editor vertraut

Wir benutzen immer noch den ICE Code Editor aus Kapitel 1. Solltest du mit dem ICE bisher nicht begonnen haben, gehe zurück zu diesem Kapitel und mache dich mit ihm vertraut.

Starte ein neues Projekt

Alles, was du bereits im ICE gemacht hast, sollte automatisch gesichert worden sein, sodass wir gleich mit einem neuen Projekt einsteigen. Klicke auf den Menü-Button und wähle New aus dem Menü:

Abbildung 2.1 Leg ein neues Projekt an ...

Nennen wir das neue Projekt doch einfach Sachen kaputtmachen.

Abbildung 2.2 ... und gib ihm einen Namen.

Achte darauf, dass als Template weiterhin 3D starter project eingestellt ist.

Jetzt öffnen wir die JavaScript-Konsole des Browsers.

Die JavaScript-Konsole öffnen und schließen

Die JavaScript-Konsole in einem Browser ist die beste Freundin jedes Webprogrammierers. Sie verrät uns, wo wir Fehler gemacht haben.

Die JavaScript-Konsole öffnen und schließen

(gleichzeitig die -, die - und die -Taste drücken) öffnet und schließt die JavaScript-Konsole.