O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Kids programmieren 3D-Spiele mit JavaScript

Book Description

Dieses Buch richtet sich an Programmieranfänger von 11 bis 99. Obwohl für Kinder geschrieben, können auch Erwachsene hiermit das Programmieren erlernen. Das Buch beginnt in medias res mit dem Schreiben der ersten Codezeilen in einem eigens entwickelten Code Editor, den man sich einfach als Browsererweiterung für Chrome herunterlädt, die dann auch offline verwendet werden kann. Im Code Editor nehmen die selbstprogrammierten Figuren auch sofort Formen an. Das macht Riesenspaß und Lust auf mehr. So kann man kaum erwarten, was man im nächsten Kapitel programmieren wird. In Exkursen werden Hintergründe der JavaScript-Programmierung erklärt, doch wer sich auf die Praxis konzentrieren will, kann die Theorie zunächst außen vor lassen. Auf diese Weise entstehen erste Formen, Figuren und Avatare, die anschließend in kleinen Spielen zum Leben erweckt werden. So macht das Programmierenlernen richtig Spaß!

Table of Contents

  1. Danksagung
  2. Einleitung
    1. Wie ich zu programmieren gelernt habe
    2. Was du für dieses Buch brauchst
    3. Was ist JavaScript?
    4. Wie du dieses Buch lesen solltest
    5. Hinweise zur deutschen Fassung dieses Buches
    6. Legen wir los!
  3. 1. Projekt: Einfache Formen Herstellen
    1. Programmieren mit dem ICE Code Editor
    2. Formen mit JavaScript herstellen
      1. Kugeln herstellen
        1. Größe: SphereGeometry(100)
        2. Nicht klobig: SphereGeometry(100, 20, 15)
      2. Mit der Würfelform Kisten herstellen
        1. Größe: CubeGeometry(300, 100, 20)
      3. Zylinder für alle möglichen Formen
        1. Größe: CylinderGeometry(20, 20, 100)
        2. Pyramiden: CylinderGeometry(1, 100, 100, 4)
      4. Mit Ebenen flache Oberflächen bauen
        1. PlaneGeometry(100, 100)
      5. Mit einem Ring einen Donut zeichnen (leider nicht essbar)
        1. TorusGeometry(100, 25)
        2. TorusGeometry(100, 25, 8, 25)
        3. TorusGeometry(100, 25, 8, 25, 3.14)
    3. Die Formen animieren
    4. Der Code bisher
    5. Wie es weitergeht
  4. 2. Mit der Konsole herumspielen und feststellen, was kaputt ist
    1. Leg los
      1. Starte ein neues Projekt
    2. Die JavaScript-Konsole öffnen und schließen
    3. Fehlersuche im ICE: Das Rote X
    4. Fehlersuche im ICE: Das Gelbe Dreieck
    5. Fehlersuche in der Konsole
      1. Mögliche Fehlermeldung – Undefined Is Not a Function
      2. Mögliche Fehlermeldung – Three Is Not Defined
      3. Mögliche Fehlermeldung – Undefined: No Method
    6. Was tun, wenn der ICE kaputt ist?
    7. Wie es weitergeht
  5. 3. Projekt: Einen Avatar herstellen
    1. Leg los
    2. Ein Ganzes aus Teilen herstellen
    3. Das Ganze auseinandernehmen
    4. Füße zum Gehen hinzufügen
    5. Herausforderung: Stell einen ganz eigenen Avatar her
    6. Räder schlagen
    7. Der Code bisher
    8. Wie es weitergeht
  6. 4. Projekt: Avatare bewegen
    1. Leg los
    2. Mit Tastaturereignissen interaktive Systeme bauen
    3. Tastaturereignisse in Avatar-Bewegungen verwandeln
    4. Herausforderung: Animation starten/stoppen
    5. Mit Funktionen einen Wald bauen
      1. Das Ganze auseinandernehmen
    6. Die Kamera mit dem Avatar bewegen
    7. Der Code bisher
    8. Wie es weitergeht
  7. 5. Funktionen: Immer und immer wieder benutzen
    1. Leg los
    2. Einfache Funktionen verstehen
    3. Wenn etwas schiefgeht
      1. Unerwartete Fehler
      2. Herausforderung
    4. Bizarre Tricks mit Funktionen
      1. Rekursion
    5. Der Code bisher
    6. Wie es weitergeht
  8. 6. Projekt: Hände und Füße bewegen
    1. Leg los
    2. Eine Hand bewegen
    3. Hände und Füße zusammen schwingen lassen
    4. Gehen beim Bewegen
    5. Der Code bisher
    6. Wie es weitergeht
  9. 7. Die Grundlagen von JavaScript näher untersucht
    1. Leg los
    2. Eine Sache in JavaScript beschreiben
      1. Wieso var?
      2. Kommentare
    3. Dinge ändern
      1. Zahlen
        1. Geometrie
      2. Strings
      3. Boolesche Werte
    4. Code mit while und if wiederholen und überspringen
      1. While
      2. Code nur ausführen, wenn etwas wahr ist
    5. Dinge auflisten
    6. Was JavaScript anders macht
    7. Wie es weitergeht
  10. 8. Projekt: Unseren Avatar umdrehen
    1. Leg los
    2. In die richtige Richtung schauen
    3. Das Ganze auseinandernehmen
      1. Warum rotation.y?
      2. Vergiss avatar.rotation nicht!
    4. Die Drehung animieren
    5. Der Code bisher
    6. Wie es weitergeht
  11. 9. Was ist das alles für ein Code?
    1. Leg los
    2. Eine kurze Einführung in HTML
    3. Die Szene einrichten
    4. Die Szene mit Kameras erfassen
    5. Mit einem Renderer projizieren, was die Kamera sieht
    6. Unterschiedliche Kameras und Renderer untersuchen
      1. Der WebGLRenderer vorgestellt
      2. Ein schneller Blick auf eine Kamera mit einem seltsamen Namen
    7. Wie es weitergeht
  12. 10. Projekt: Kollisionen
    1. Leg los
    2. Strahlen und Überschneidungen
    3. Der Code bisher
    4. Wie es weitergeht
  13. 11. Projekt: Obstjagd
    1. Leg los
    2. Eine Punktetafel bei null starten
    3. Die Bäume ein bisschen wackeln lassen
    4. Für Punkte springen
    5. Unsere Spiele noch besser machen
      1. Animation und Ton hinzufügen
      2. Was können wir noch hinzufügen?
    6. Der Code bisher
    7. Wie es weitergeht
  14. 12. Mit Licht und Material arbeiten
    1. Leg los
    2. Die Farbe ändern
      1. MeshBasicMaterial
    3. Realismus: Glanz
      1. Strahlend
      2. Spiegelnd
    4. Schatten
    5. Animieren wir!
    6. Der Code bisher
    7. Wie es weitergeht
  15. 13. Projekt: Baue dein eigenes Sonnensystem
    1. Leg los
    2. Sonne, Erde und Mars
    3. Earth-Cam!
    4. Der Code bisher
    5. Wie es weitergeht
  16. 14. Projekt: Die Mondphasen
    1. Leg los
    2. Den Mars in den Mond verwandeln
    3. Der coolste Trick: Das Bezugssystem
    4. Herausforderung: Stell ein Bezugs-system für den Erdorbit her
    5. Die Simulation anhalten
    6. Die Phasen verstehen
    7. Der Code bisher
    8. Wie es weitergeht
  17. 15. Projekt: Das Lila Obst-monster-Spiel
    1. Leg los
    2. Machen wir Physik!
    3. Das Konzept für das Spiel
      1. Boden für das Spiel hinzufügen
      2. Einen einfachen Avatar bauen
      3. Die Punktezählung hinzufügen
      4. Die Szene animieren
      5. Spielelemente herstellen
      6. Steuerelemente für den Avatar herstellen
      7. Einfache Grafiken hinzufügen
      8. Herausforderung: Das Spiel zurücksetzen
    4. Der Code bisher
    5. Wie es weitergeht
  18. 16. Projekt: Balancierbrett
    1. Leg los
    2. Schwerkraft und andere Vorbereitungen
    3. Das Konzept für das Spiel
      1. Lichter hinzufügen
      2. Den Spielball hinzufügen
      3. Das Spielbrett hinzufügen
      4. Animation ermöglichen
      5. Spielsteuerungen hinzufügen
      6. Das Ziel hinzufügen
      7. Einen Hintergrund hinzufügen
      8. Die Spiellogik
      9. Das war‘s!
    4. Der Code bisher
    5. Wie es weitergeht
  19. 17. Projekt: JavaScript-Objekte kennenlernen
    1. Leg los
    2. Einfache Objekte
    3. Objekte kopieren
    4. Neue Objekte konstruieren
    5. Der Code bisher
    6. Wie es weitergeht
  20. 18. Projekt: Ein Höhlenpuzzle
    1. Leg los
    2. Die Grenzen des Spiels einstellen
      1. Beginne mit einem einfachen Avatar
    3. Ein zufälliges, unerreichbares Ziel bauen
    4. Verschiebbare Rampen bauen
    5. Das Spiel gewinnen
    6. Der Code bisher
    7. Wie es weitergeht
  21. 19. Projekt: Ein Spiel mit mehreren Levels
    1. Leg los
    2. Level herstellen
    3. Letzte Hand an das Spiel anlegen
    4. Der Code bisher
    5. Wie es weitergeht
  22. 20. Projekt: Rafting auf dem Fluss
    1. Leg los
    2. Code organisieren
      1. Sonnenlicht hinzufügen
      2. Punkte zählen
    3. Formen verzerren, um einmalige Dinge herzustellen
      1. An den Ecken ziehen
      2. Das Auge austricksen
    4. Ein Floß für das Rennen bauen
      1. Das Spiel zurücksetzen
    5. Die Ziellinie einrichten
      1. Punkte nach Entfernung sammeln
      2. Extrapunkte
    6. Der Code bisher
    7. Wie es weitergeht
  23. 21. Code in das Web bekommen
    1. Der mächtige mächtige Browser
    2. Kostenlose Websites
    3. Deinen Code auf eine andere Site legen
    4. Wie es weitergeht
  24. A. Der Projektcode
    1. Code: Einfache Formen herstellen
    2. Code: Mit der Konsole herumspielen und feststellen, was kaputt ist
    3. Code: Einen Avatar herstellen
    4. Code: Avatare bewegen
    5. Code: Funktionen: Immer und immer wieder benutzen
    6. Code: Hände und Füße bewegen
    7. Code: Die Grundlagen von JavaScript näher untersucht
    8. Code: Unseren Avatar umdrehen
    9. Code: Was ist das alles für ein Code?
    10. Code: Kollisionen
    11. Code: Obstjagd
    12. Code: Mit Licht und Material arbeiten
    13. Code: Bau dein eigenes Sonnensystem
    14. Code: Die Mondphasen
    15. Code: Das Lila-Obstmonster-Spiel
    16. Code: Balancierbrett
    17. Code: JavaScript-Objekte kennenlernen
    18. Code: Ein Höhlenpuzzle
    19. Code: Ein Spiel mit mehreren Levels
    20. Code: Rafting auf dem Fluss
  25. B. In diesem Buch benutzte JavaScript-Bibliotheken
    1. Three.js
    2. Physijs
    3. Tween.js
    4. Scoreboard.js
      1. Scoreboard-Nachrichten
      2. Hilfe
      3. Punktezählung
      4. Timer
      5. Countdown
    5. Sounds.js
  26. Stichwortverzeichnis
  27. Copyright