Projekt Web-Game-Apps Using HTML5, CSS3 and JavaScript ·

Bei diesem Projekt "Web-Game-Apps" geht es weniger nur um die Entwicklung EINER Web-App, sondern mehr um die Entwicklung einer selbst erstellten Web-Entwicklungsumgebung. Diese Web-Entwicklungsumgebung soll es ("halbautomatisch") ermöglichen, zahlreiche funktionstüchtige Web-Game-Apps zu generieren. Jede generierte "Web-Game-App" braucht Spielregeln. Auch werden für die Lösungswege Gewichtungsverfahren und Bewertungeverfahren benötigt. Auch werden Messverfahren für die benötigte Lösungszeit benötig.

Eine Stufen-Treppe zum Erfolg braucht in bekannter Umgebung viele kleine Schritte.
Natürlich gibt es bei Innovationen auch das pfadlose Neuland und unbekannte Lösungswege.
Jeder Schritt mag etwas offenbaren, das über Zielheit und Organisiertheit hinausgeht.


Einführung ( allgemein ) Das "Leben als Spiel"

Solange es Menschen gibt, gibt es das selbsterprobende "Erspielen" von Kindern und das "spielende Miteinander".

Es gibt den Spielbeginn, die Eröffnung, ein Mittelspiel und das Ende des Mitspielens. Es gibt höhere Figuren, die mehr Autorität ausstrahlen und doch innerhalb des Eigen und der eigenen Mannschaft gebunden/gefangen sein können. Das Zentrum des Spielraumes kann auch von niederen Akteueren dominiert werden, wie z.B. von "Bauern-Figuren" mit begrenzten Aktionsradien.

Auch heute kann in einem mythologisch angehauchten Bild das strukturell-abstrakt vereinfachende Miteinander als "Spiel des Lebens" betrachtet werden.

Alle Figuren sind in unterschiedlicher Stärke voneinander abhängig. Doch es sind abstrakte Regeln, nach denen die Figuren handeln können. Diese abstrakte Regeln sind den figurativen Akteueren bedingt verborgen, sie erfahren sich eher im eigenen Handeln oder "des anderen Tun". Durch diese abstrakten Regeln nimmt das "Spiel des Lebens" Gestalt an. Das Spiel wird nach mehr oder minder unbewußten Regeln gespielt.

Das vollständige Regelwerk ist nicht das Spiel selbst. Das vollständige Regelwerk beschreibt eine Spiel-Oberfläche ( "Design-Oberfläche" ) und mögliche Handlungsweisen der Akteure. Der letzte Sinn aller Handlungen verbirgt sich in bedingt bewußten Regeln, aus denen die Eigen-Interpretationen und Regelerfahrungen kommen. "Live an sich" gestaltet sich im Eigen-Erleben.

Was hat ein mythologisch angehauchten Bild mit der zu entwickelnden Entwicklungsumgebung zu tun, die ( halbautomatisch ) robuste, funktionstüchtige Web-Game-Apps generieren soll? Wodurch entwickelt und gestaltet sich das Spiel?

Randbemerkung: Eines der bekanntesten Gleichnisse der antiken Philosophie ( Platon ca. 300 v. Chr. ), spricht von der "Gefangenschaft im Raum des gefesselten Eigen", das keine Einsicht in den Bereich außerhalb der Höhle erlaubt. Siehe z.B. Höhlengleichnis ,    Plato's Allegory of the cave ( Jan Saenredam - British Museum )

Komponenten und Wechselwirkungen bei einem Spiel:

  • Es gibt Teilnehmer.
  • Es gibt Spiel-Erfahrungen.
  • Es gibt Regeln.
  • Es gibt Spielverläufe.
  • Es gibt Gewinner/Verlierer.
  • Es gibt Veränderungen bei den Teilnehmern.
  • Es gibt eigene Spiel-Erfahrungen ( einzeln, gesamt ).
  • Es gibt autoritäre Figuren, Regeln-Modifikationen.
  • Es gibt Erfolgsaussichten und Bewertungsgewichte.
  • Es gibt andere Spiel-Räume.


Spieltheorie als Wissenschaft "Web als weltweites Gesellschaftsspiel"

Die Spieltheorie hat Anwendungen/Überschneidungen mit IT-Lehr- und Lern-Programmen, Computer-Annimationen, wissenschaftlichen Simulationen.

Die nichtkooperative Spieltheorie verwendet keine Aktionen/Strategien, um vorteilhafte Zustände anzustreben, siehe z.B. nichtkooperativen Spieltheorie ( allgemein ). Die kooperative Spieltheorie verwendet Aktionen/Strategien/Lösungskonzepte, um vorteilhafte Zustände anzustreben, siehe z.B. Kooperative Spieltheorie ( allgemein ). Die Spielwissenschaft für Computerspiele wird auch Ludologie ( lat. ludus=Spiel ) genannt.


Einfache Beispiele (Weblinks) "Web-Game-Apps"

Realitätsnahe räumliche Darstellungen und Simulationen verwenden z.B. 3D-Abbildungen und benötigen eine mathematisch/physikalische Basis und technologische Voraussetzungen. Es gibt aufwendige Anwendungen in Form von IT-Lehr- und Lern-Programmen, Computer-Annimationen und wissenschaftlichen Simulationen, die komplexe Sachverhalte "begreifbarer" machen möchten.

Einige einfache Wikipedia-Weblinks für Spiele: Tic-Tac-Toe , http://mathworld.wolfram.com/topics/MiscellaneousBoardGames.html

Ein einfaches Zweipersonen-Strategiespiel aus 12.Jh.v.Chr. ist Tic-Tac-Toe ( auch Drei gewinnt, auch Kreis und Kreuz, Dodelschach ). Siehe z.B. Tic-Tac-Toe , How to Win at Tic-Tac-Toe , und weitere, wie Kalaha , Bao (Mancala-Spiel), Hex ( auch genannt: Polygon, John oder Nash ), Käsekästchen mit NP-Schwierigkeit siehe z.B. DotsandBoxes ( mathworld.wolfram ), Teeko , Vier_gewinnt , Fünf_in_eine_Reihe , Sogo , Qubic .


Web as a Games Development Platform

Es gibt einfache/komplexe Spiele mit geringer/umfangreichen Hardware-Anforderungen. Es gibt Komponenten und zahlreiche Wechselwirkungen zwischen den Komponenten und den Spielern.

Wie können Spiele getestet werden? Siehe z.B. https://github.com/w3c/web-platform-tests/

Beispiel: Kästchen-Papier nach Web ( self-made ) Beispiel: Zählen

Die folgenden Anregungen gehen auf Hinweise von Dagmar zurück. Hier wird eine Umsetzung von Papier auf PC/Smartphon gemacht. Natürlich erlauben moderne Medien vielfältige Möglichkeiten der Spielgestaltung.

Das Spiel nennen wir "Zahlspiel".

Für einen vertieften Umgang mit Ordinalzahlen gibt es überlieferte "Kästchen-Papier-Spiele". Kinder tragen auf Kästchen-Papier die Zahlen 1, 2, 3, ...30 ein. Zum Eintragen der Zahlen gibt es vorgeschriebene Regeln. In einer "Kindergruppe" gibt es bei der Teilnahme am "Mathe-Spiel-Wettbewerb" viel Lob/wenig Tadel.

Das Web kann als Plattform für interaktive Spiele dienen( "Web as a Games Development Platform" ). Sicher ist es eine interessante, anspruchsvolle Aufgabe, eine "Generator-Web-Game-App" zu entwickeln, mit der dann "Web-Game-Apps am laufenden Band" erstellt werden können.

Bekanntlich gehen Innovationen über das Bisherige ("Erstarrte") hinaus. Zu Innovationen gehört ein Neuigkeitsgrad. Wie kann das "pfadlose Neuland" gefunden, betreten, betrachtet werden? Wie soll das gehen? Wie entwickelt man eine solche Generator-App, die Web-Game-Apps generieren kann?

Regeln für Zahleneintragen auf Kästchenpapier

Beispiel: Vorbetrachtungen zum "Zählspiel" App-Entwicklung

Zur Agenta gehören HTML5, CSS3 and ECMAScript. Entwickelt wird für PC/Smartphon Spiele. Wegen der begrezten Projektdauer wird verzichtet auf Supersets, Canvas bzw. SVG-Game-Bibliotheken, proprietäre Rich Web APIs, Blade, Caveats, Emscripten, JSIL, Google Web Toolkit, Script#, Dart, CoffeeScript, TypeScript, window.requestAnimationFrame, usw. Es werden keine Fremdbibliotheken benötigt.

Wie wird ein Kästchen-Spiel entwickelt?

Wie kann Kästchen-Papier im Web abgebildet werden? Kästchen gehören zu den einfachen Formen, die mit einer HTML5-Tabelle gebildet werden können.

Beispiel: 
Zu einer HTML-table gehören 

   5 Zeilen  ( rows = 5  mit r = 0, 1, 2, 3, 4 ) und 
   6 Spalten ( cols = 6  mit c = 0, 1, 2, 3, 4, 5 ).

Zum td-Node-"Array" gehören 5*6 = 30 Elemente mit 

   i = 0, 1, 2, 3, ..., 28, 29  und  
   i = r * cols + c.

So sieht ein 6x5-Test-Kästchen-Spielfeld aus:

000102030405
060708091011
121314151617
181920212223
242526272829

HTML5 - Quelltext-Grundgerüst für das 6x5-Test-Kästchen-Spielfeld: Die eingetragenen Zahlen entsprechen der td[i]-Idizierung mit i = 0, 1, 2, ..., 28, 29.

<table class="matrix">
   <colgroup><col><col><col><col><col><col>
   <tbody>
   <tr><td>00<td>01<td>02<td>03<td>04<td>05
   <tr><td>06<td>07<td>08<td>09<td>10<td>11
   <tr><td>12<td>13<td>14<td>15<td>16<td>17
   <tr><td>18<td>19<td>20<td>21<td>22<td>23
   <tr><td>24<td>25<td>26<td>27<td>28<td>29
</table>
Beispiel: Zugriff auf td-Nodes Wie?

Achtung! Unmoderne Art der Event-Programmierung. Ein moderner Ansatz ist in /esa/prakt-2017/auf-2-2017-start.htm enthalten.

Wie kann bei Klick auf ein td-Tag <td onclick="handle_click(this)"> ... die Spiellogik bedient werden? Dies kann in einem Funktionsaufruf handle_click(that) erfolgen.

  var table = that.parentNode.parentNode.parentNode;
  var td_arr = table.getElementsByTagName("td");
 
  alert(" TD=" + that.tagName
    + "\n TR=" + that.parentNode.tagName
    + "\n TBODY=" + that.parentNode.parentNode.tagName
    + "\n TABLE=" + that.parentNode.parentNode.parentNode.tagName
    + "\n td_arr.length=" + td_arr.length
    + "\n td_arr[5].dataset.str=" + td_arr[5].dataset.str)

Ein moderner Ansatz ist in auf-2-2017-start.htm enthalten.

Beispiel: Spielregeln erfassen Wie?

Welches sind die Spielregeln? Welche Realisierungen zur Spieletheorien sind machbar? Welche Spielfelder sind inaktiv ( Rahmenbedingungen )? Welche Spielzüge sind bei aktuellem Stand möglich?

 (r-2/c-2)   (r-2/c+0)   (r-2/c+2)     0 <= c < cols
 (r+0/c-2)  [[r+0/c+0]]  (r+0/c+2)     0 <= r < rows
 (r+2/c-2)   (r+2/c+0)   (r+2/c+2)     
 i = r*cols + c;  i aktiv

Projekt-Superpositionierung Modifikationen, Erweiterungen

Es gibt zum Kästchen-Papier-Spiel kybernetische Verallgemeinerung und innovative Ideen. Was fällt ein?

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Do 4.1.2018 12.00 Uhr