JavaScript/Tutorials/Spiele: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
K (-Drag & Drop)
K (akt + Cards)
Zeile 1: Zeile 1:
 
__NOTOC__
 
__NOTOC__
−
[[Datei:Games-Icon.svg|150px(削除) |right (削除ここまで)|alt=(削除) Spiele- (削除ここまで)Icon]]
+
[[Datei:Games-Icon.svg(追記) |right (追記ここまで)|150px|alt=(追記) Games (追記ここまで)Icon]]
 
In dieser Reihe stellen wir Ihnen vor, wie Sie '''mit JavaScript''' schnell '''kleine Browser-Spiele'''  programmieren können.
 
In dieser Reihe stellen wir Ihnen vor, wie Sie '''mit JavaScript''' schnell '''kleine Browser-Spiele'''  programmieren können.
 
{{clear}}
 
{{clear}}
−
{{(削除) nSpalten (削除ここまで)|(削除) 3 (削除ここまで)|(削除) min-width (削除ここまで)=(削除) 15em| (削除ここまで)
+
 
−
(削除) # [[ (削除ここまで)JavaScript/Tutorials/Spiele/Zahlenspiele|(削除) ''' (削除ここまで)Zahlenspiele(削除) ''']] (削除ここまで)
+
{{(追記) Cards (追記ここまで)|
−
(削除) # (削除ここまで)* (削除) Zufallszahlen (削除ここまで)
+
(追記)   {{Card (追記ここまで)|
−
(削除) # (削除ここまで)* (削除) [[ (削除ここまで)JavaScript/Tutorials/Spiele/(削除) Zahlenspiele#Zahlen (削除ここまで)-(削除) Raten (削除ここまで)|(削除) Zahlen (削除ここまで)-(削除) Raten]] (削除ここまで)
+
(追記)     link (追記ここまで)=JavaScript/Tutorials/Spiele/Zahlenspiele|
−
(削除) # (削除ここまで)* (削除) [[ (削除ここまで)JavaScript/Tutorials/Spiele/(削除) Zahlenspiele#Mathe (削除ここまで)-(削除) Quiz (削除ここまで)|(削除) Mathe-Quiz]] (削除ここまで)
+
(追記)     icon=| (追記ここまで)
−
(削除) # [[ (削除ここまで)JavaScript/Tutorials/Spiele/Tic-Tac-Toe|(削除) ''' (削除ここまで)Tic-Tac-Toe(削除) ''']] (削除ここまで)
+
(追記)     titel= (追記ここまで)Zahlenspiele(追記) |* Zufallsgenerator (追記ここまで)
−
(削除) # (削除ここまで)* Buttons auswerten
+
* (追記) Zahlen-Raten (追記ここまで)
−
(削除) # (削除ここまで)* Buttons mit CSS gestalten
+
* (追記) Mathe-Quiz (追記ここまで)
−
(削除) # [[JavaScript/Tutorials/Spiele/Sum-up (削除ここまで)|(削除) '''Sum-Up''']] (削除ここまで)
+
(追記)   }} (追記ここまで)
−
(削除) #* DOM-Manipulation (削除ここまで)
+
(追記)   {{Card| (追記ここまで)
−
(削除) #* Event-Delegation (削除ここまで)
+
(追記)     link= (追記ここまで)JavaScript/Tutorials/Spiele/(追記) Memo-Quiz| (追記ここまで)
−
(削除) #* CSS-Animation (削除ここまで)
+
(追記)     icon=Memo-icon.png| (追記ここまで)
−
(削除) # [[ (削除ここまで)JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz|(削除) ''' (削除ここまで)Multiple-Choice-Quiz(削除) ''']] (削除ここまで)
+
(追記)     titel=Memo (追記ここまで)-(追記) Quiz (追記ここまで)|(追記) * DOM (追記ここまで)-(追記) Manipulation (追記ここまで)
−
(削除) # [[ (削除ここまで)JavaScript/Tutorials/Spiele/(削除) Adventure (削除ここまで)|(削除) '''Adventure''']] (削除ここまで)
+
* (追記) Event-Delegation (追記ここまで)
−
(削除) #* Textabenteuer (削除ここまで)
+
(追記)   }}<!--- (追記ここまで)
−
(削除) #* Simulationen (削除ここまで)
+
(追記)   {{Card| (追記ここまで)
−
(削除) # [[JavaScript/Tutorials/Spiele/Arcade-Spiele (削除ここまで)|(削除) Arcade-Spiele]] (削除ここまで)
+
(追記)     link= (追記ここまで)JavaScript/Tutorials/Spiele/(追記) Suchspiel| (追記ここまで)
−
(削除) # (削除ここまで)* (削除) Zeichnen mit canvas (削除ここまで)
+
(追記)     icon=hasi.svg| (追記ここまで)
−
(削除) # (削除ここまで)* (削除) Sprites (削除ここまで)
+
(追記)     titel=Suchspiel| (追記ここまで)
−
(削除) #* Kollisionserkennung (削除ここまで)
+
(追記)   }}-- (追記ここまで)-(追記) > (追記ここまで)
  +
(追記)   {{Card (追記ここまで)|
  +
(追記)     link= (追記ここまで)JavaScript/Tutorials/Spiele/Tic-Tac-Toe|
  +
(追記)     icon=Tic-tac-toe-game.svg| (追記ここまで)
  +
(追記)     titel= (追記ここまで)Tic-Tac-Toe(追記) | (追記ここまで)* Buttons auswerten
  +
* Buttons mit CSS gestalten
  +
(追記)   }} (追記ここまで)
  +
(追記)   {{Card (追記ここまで)|
  +
(追記)     link= (追記ここまで)JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz|
  +
(追記)     icon=Multiple-choice-icon.svg| (追記ここまで)
  +
(追記)     titel= (追記ここまで)Multiple-Choice-Quiz(追記) | (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link= (追記ここまで)JavaScript/Tutorials/Spiele/(追記) Lotto (追記ここまで)|
  +
(追記)     icon=Lotto.png| (追記ここまで)
  +
(追記)     titel=Lotto (追記ここまで)|
  +
* (追記) Zahleneingabe (追記ここまで)
  +
* (追記) Ziehung (追記ここまで)
  +
(追記)   }} (追記ここまで)
 
}}
 
}}
   
 
== Einführung ==
 
== 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 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:
 
Das [[EVA-Prinzip]] ist überall gültig:
Zeile 32: Zeile 51:
 
# Verarbeitung der Daten
 
# Verarbeitung der Daten
 
# Ausgabe von Ergebnissen
 
# 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.
+
 
  +
Guten Code erkennt man daran, dass er immer wiederkehrende Prozesse in Funktionen gliedert, die man auch im nächsten Projekt wiederverwenden kann. Deshalb besteht (追記) diese Reihe (追記ここまで)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!
 
Und, bevor wir anfangen: In den Spielen gibt es mehr Formulare, als man anfänglich denkt!
Zeile 41: Zeile 61:
 
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.<ref>SELF-Forum: [https://forum.selfhtml.org/self/2019/jun/21/frage-zur-einbindung-von-online-games/1750885#m1750885 Frage zur Einbindung von Online-Games] vom 21.06.2019</ref>
 
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.<ref>SELF-Forum: [https://forum.selfhtml.org/self/2019/jun/21/frage-zur-einbindung-von-online-games/1750885#m1750885 Frage zur Einbindung von Online-Games] vom 21.06.2019</ref>
   
−
Im Forum gibt es öfter die Frage, wie man solche Spiele auf mehreren Rechnern spielen und Ereignisse, Interaktionen und Spielstände gegenseitig austauschen kann.<ref>SELF-Forum: [https://forum.selfhtml.org/self/2020/jan/13/variablen-auf-mehreren-pcs-verwenden/1762917#m1762917 Variablen auf mehreren Pcs verwenden] vom 13.01.2020</ref>
+
Im Forum gibt es öfter die Frage, wie man solche Spiele auf mehreren Rechnern spielen und Ereignisse, Interaktionen und Spielstände gegenseitig austauschen kann. <ref>SELF-Forum: [https://forum.selfhtml.org/self/2020/jan/13/variablen-auf-mehreren-pcs-verwenden/1762917#m1762917 Variablen auf mehreren Pcs verwenden] vom 13.01.2020</ref>
   
 
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.
 
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: [https://forum.selfhtml.org/self/2020/nov/12/dringend-hilfe-gesucht-zufalliger-bildwechsel-beim-aktualisieren-einer-seite/1777917#m1777917 Tabu-Spiel auf dem Server] von Rolf B. 13.11.2020 (削除ここまで)
 
   
 
{{Fortsetzung|
 
{{Fortsetzung|
Zeile 51: Zeile 69:
 
weiter=Zahlenspiele|weiterlink=JavaScript/Tutorials/Spiele/Zahlenspiele}}
 
weiter=Zahlenspiele|weiterlink=JavaScript/Tutorials/Spiele/Zahlenspiele}}
   
  +
(追記) == Siehe auch == (追記ここまで)
  +
(追記) {{Cards| (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link=JavaScript/Tutorials/Spiele/Adventure| (追記ここまで)
  +
(追記)     icon=| (追記ここまで)
  +
(追記)     titel=Adventure| (追記ここまで)
  +
(追記) * Textabenteuer (追記ここまで)
  +
(追記) * Simulationen (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link=JavaScript/Tutorials/Spiele/Arcade-Spiele| (追記ここまで)
  +
(追記)     icon=| (追記ここまで)
  +
(追記)     titel=Arcade-Spiele<br>Jump 'n Run| (追記ここまで)
  +
(追記) #* Zeichnen mit canvas (追記ここまで)
  +
(追記) #* Sprites (追記ここまで)
  +
(追記) #* Kollisionserkennung (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link=Vokabel-Trainer| (追記ここまで)
  +
(追記)     icon=| (追記ここまで)
  +
(追記)     titel=Vokabel-Trainer| (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記) }} (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) # [[JavaScript/Tutorials/Spiele/Sum-up|'''Sum-Up''']] (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) <!--- im Test-Wiki (追記ここまで)
  +
(追記) # [[JavaScript/Tutorials/Spiele/Würfelspiele|'''Würfel''']] (追記ここまで)
  +
(追記) #* Würfel auswählen oder erneut werfen (追記ここまで)
  +
(追記) #* Ergebnisauswertung (追記ここまで)
  +
(追記) #* 3D-Würfel (追記ここまで)
  +
(追記) # [[JavaScript/Tutorials/Spiele/Kartenspiele|'''Kartenspiele''']] (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) * [[JavaScript/Tutorials/Spiele/Gamification|Gamification]] (追記ここまで)
  +
(追記) ---> (追記ここまで)
 
== Weblinks ==
 
== Weblinks ==
 
''' Frameworks und Beispiele '''
 
''' Frameworks und Beispiele '''
−
* [https://www.felix-riesterer.de/main/seiten/rquiz.html R-Quiz - JavaScript-Framework für interaktive Lernaufgaben] (削除) – Felix Riesterer (削除ここまで)
+
* [https://www.felix-riesterer.de/main/seiten/rquiz.html R-Quiz - JavaScript-Framework für interaktive Lernaufgaben] - Felix Riesterer
−
(削除) * [https://www.felix-riesterer.de/self/maedn/ Browser (削除ここまで)-(削除) Game Mensch ärgere dich nicht!] ( (削除ここまで)Felix Riesterer(削除) ) (削除ここまで)
 
−
(削除) * [https://www.arndt-bruenner.de/scripts/viergewinnt.htm Browser-Game Vier gewinnt!] (Arndt Brünner) (削除ここまで)
 
−
(削除) * [http://selfhtml.apsel-mv.de/strasze/strasze2.html Straße] Würfelspiel von Matthias Apsel (削除ここまで)
 
 
* [https://www.j-berkemeier.de/Sudoku.html Sudoku] (Jürgen Berkemeier)
 
* [https://www.j-berkemeier.de/Sudoku.html Sudoku] (Jürgen Berkemeier)
−
(削除) (削除ここまで)
 
−
(削除) (削除ここまで)
 
 
* buzzwoo: [https://www.buzzwoo.de/blog/welches-framework-eignet-sich-am-besten-um-ein-html-game-zu-erstellen Welches Framework eignet sich am besten, um ein HTML Game zu erstellen?]
 
* buzzwoo: [https://www.buzzwoo.de/blog/welches-framework-eignet-sich-am-besten-um-ein-html-game-zu-erstellen Welches Framework eignet sich am besten, um ein HTML Game zu erstellen?]
 
* golem.de: [https://www.golem.de/news/microsoft-astroids-pong-und-weitere-atari-klassiker-in-html5-1208-94227.html Asteroids, Pong und weitere Atari-Klassiker in HTML5]<br>Schick animiert sind acht Arcade-Klassiker von Atari, die das Unternehmen zusammen mit Microsoft auf Basis von HTML5 neu aufgelegt hat.
 
* golem.de: [https://www.golem.de/news/microsoft-astroids-pong-und-weitere-atari-klassiker-in-html5-1208-94227.html Asteroids, Pong und weitere Atari-Klassiker in HTML5]<br>Schick animiert sind acht Arcade-Klassiker von Atari, die das Unternehmen zusammen mit Microsoft auf Basis von HTML5 neu aufgelegt hat.

Version vom 23. Dezember 2024, 06:52 Uhr

Games Icon

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

  • Zahlenspiele
    • Zufallsgenerator
    • Zahlen-Raten
    • Mathe-Quiz
  • Memo-Quiz
    • DOM-Manipulation
    • Event-Delegation
  • Tic-Tac-Toe
    • Buttons auswerten
    • Buttons mit CSS gestalten
  • Multiple-Choice-Quiz
  • Lotto
    • Zahleneingabe
    • Ziehung

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 diese Reihe 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.[1]

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

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.

Siehe auch

  • Adventure
    • Textabenteuer
    • Simulationen
  • Arcade-Spiele
    Jump 'n Run
      • Zeichnen mit canvas
      • Sprites
      • Kollisionserkennung
  • Vokabel-Trainer



  1. Sum-Up

Weblinks

Frameworks und Beispiele


Quellen

  1. ↑ SELF-Forum: Frage zur Einbindung von Online-Games vom 21.06.2019
  2. ↑ SELF-Forum: Variablen auf mehreren Pcs verwenden vom 13.01.2020

Abgerufen am 15.12.2025
von "http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele"