JavaScript/Tutorials/Spiele

In dieser Reihe stellen wir Ihnen vor, wie Sie mit JavaScript schnell kleine Browser-Spiele programmieren können.

1. Zahlenspiele
   • Zufallszahlen
   • Zahlen-Raten
   • Mathe-Quiz
2. Tic-Tac-Toe
   • Buttons auswerten
   • Buttons mit CSS gestalten
3. Sum-Up
   • DOM-Manipulation
   • Event-Delegation
   • CSS-Animation
4. Multiple-Choice-Quiz
5. Adventure
   • Textabenteuer
   • Simulationen
6. Arcade-Spiele
   • Zeichnen mit canvas
   • Sprites
   • Kollisionserkennung

Einführung

Das Web wird immer mehr zur Verkaufsplattform – auch im SELF-Forum geht es mittlerweile vorwiegend um Formulare und die Anpassung von Web-Shops. Trotzdem sollte der Spaß nicht zu kurz kommen. Allerdings werden Sie schnell merken, dass Business und Spiel mehr gemeinsam haben als man denkt:

Das EVA-Prinzip ist überall gültig:

1. Benutzereingaben auswerten
2. Verarbeitung der Daten
3. Ausgabe von Ergebnissen

Guten Code erkennt man daran, dass er immer wiederkehrende Prozesse in Funktionen gliedert, die man auch im nächsten Projekt wiederverwenden kann. Deshalb besteht dieser Kurs zwar aus Kapiteln, die aufeinander aufbauen; einzelne Kapitel können aber auch für sich bearbeitet werden.

Und, bevor wir anfangen: In den Spielen gibt es mehr Formulare, als man anfänglich denkt!

-- Matthias Scharwies (Diskussion) 16:55, 4. Nov. 2020 (CET)

Browsergame vs Multiplayer

Browser-Spiele sind eigentlich selbständige Webseiten, die einmal vom Server geladen werden und dann selbständig laufen. Wenn überhaupt werden Daten nur im Browser gespeichert.

Im Forum gibt es öfter die Frage, wie man solche Spiele auf mehreren Rechnern spielen und Ereignisse, Interaktionen und Spielstände gegenseitig austauschen kann.

Dies ist nicht so ohne weiteres möglich. Um mit mehreren Spielern gleichzeitig zu spielen, muss der Kontakt zum Server bestehen bleiben. Dort werden Daten wie Benutzer, Spielzüge und -stände immer wieder gespeichert und sofort an die anderen Spieler weitergegeben. Dies ist zwar auch mit JavaScript wie Node.js möglich, wird aber meist mit PHP und SQL realisiert.

• SELF-Forum: Tabu-Spiel auf dem Server von Rolf B. 13.11.2020

• Spiele mit JavaScript
  (Übersicht)
• Zahlenspiele

Weblinks

Frameworks und Beispiele

• R-Quiz - JavaScript-Framework für interaktive Lernaufgaben – Felix Riesterer
• Browser-Game Mensch ärgere dich nicht! (Felix Riesterer)
• Browser-Game Vier gewinnt! (Arndt Brünner)
• Straße Würfelspiel von Matthias Apsel
• Sudoku (Jürgen Berkemeier)

• buzzwoo: Welches Framework eignet sich am besten, um ein HTML Game zu erstellen?
• golem.de: Asteroids, Pong und weitere Atari-Klassiker in HTML5
  Schick animiert sind acht Arcade-Klassiker von Atari, die das Unternehmen zusammen mit Microsoft auf Basis von HTML5 neu aufgelegt hat.

• medium.freecodecamp.com I built a role playing game in JavaScript. You can, too. Here’s how.