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


Bei diesem Projekt "Web-Game-Apps" geht es um die Entwicklung einer selbst erstellten Web-App, die auch zur Simulation und Spiel-Wettkampf verwendet werden kann ( Client-Server, jeder gegen jeden, Gruppen gegeneinander, usw. ). Jede generierte "Web-Game-App" braucht Spielregeln. Für unterschiedliche Schwierigkeitsgrade und Lösungswege werden Gewichtungsverfahren und Bewertungeverfahren benötigt.

Software-Entwicklungen haben vielschichtige Aspekte. Natürlich gibt es bei Innovationen auch das pfadlose Neuland und unbekannte Lösungswege. Jeder erfolgreiche und erfolglose Entwicklungsschritt kann neue Erkenntnisse bringen.


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

Zu dem Begriff "Spiel" gehören vielfältige Assoziationen. Es gibt z.B. wissenschaftliche Spieltheorien, komplexe Simulationen als Spiel und das "Web als weltweites Gesellschaftsspiel". Es gibt digitale Spiele, Gesellschaftsspiele, Denkspiele, Glücksspiele, wissenschaftliche Simulationen und Spieltheorien. Spieltheoretischen Modelle sind mathematische Modelle. Die Spieltheorie beschäftigt sich z.B. mit sozialwissenschaftlichen Sachverhalten.

Beim "Leben als Spiel" ist jeder ein teilnehmender Mitspieler und Zuschauer. Solange es Menschen gibt, gibt es das das "spielende Miteinander" und das selbsterprobende "Erspielen" wie bei Kindern.

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.

In einem etwas anderem Bild kann das strukturell-abstrakt vereinfachte Miteinander z.B. als "Schachspiel" verstanden werden. Es gibt ein Ziel, den Gegenspieler, verschiedenfarbige Akteure und Figuren die dem "Eigen entgegen stehen" und die es vernichtend zu besiegen gilt.

Dem Ziel, das Spiel zu gewinnen, dienen Opferungen von Dingen und Spielfiguren.

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 der eigenen Mannschaft gefangen sein können. Das Zentrum kann auch von niederen Akteueren (z.B. Bauern), deren Aktionsradien begrenzt sind, dominiert werden.

Wodurch entwickelt und gestaltet sich das Spiel? 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 verborgen, sie erfahren sich im eigenen Handeln oder des anderen Tun. Durch diese abstrakten Regeln nimmt das "Spiel des Lebens" Gestalt an.

Mythologisch betrachtet kann im strukturell-abstrakt vereinfachte Miteinander solches "SPIELEN in WIEDEHOLUNGSERFAHRUNGEN" als "Spiel des Lebens" interpretiert werden.

Das Spiel wird nach unbewußten Regeln gespielt, doch das vollständige Regelwerk ist nicht das Spiel und bleibt den sich auf der Brett-Oberfläche bewegenden Akteuren verborgen. Der letzte Sinn aller Handlungen verbirgt sich in unbewußten Regeln, aus denen die Eigen-Interpretationen und Regelerfahrungen kommen, die alles Leben gestalten. 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.

Johan Huizinga: Nahezu alles Abstrakte kann man leugnen: Recht, Schönheit, Wahrheit, Güte, Geist, Gott! Den Ernst kann man leugnen, das Spiel nicht.

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.

Mythologisch betrachtet kann im strukturell-abstrakt vereinfachte Miteinander solches "SPIELEN in WIEDEHOLUNGSERFAHRUNGEN" als "Spiel des Lebens" interpretiert werden.

Die Betrachtung des gegenwärtigen Spielstandes entspricht einem Versuch, das aktuellen Zustandsabbild der Wirklichkeit, die sichtbaren Fassetten des Gegenwärtigen in einem Standbild zu betrachten. Doch erst in unendlicher Vergrößerung alle Details offenbart eine Interpretation alle zukünftig möglichen Gestaltungen, Formen und Erwartungen.

Sepp Herberger (aus Rundbrief an die Fußball-Nationalspieler, 20.8.1954): Das nächste Spiel ist immer das schwerste Spiel!

Was hat ein mythologisch angehauchtes 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.

Events und Digital Sensor Interfacing Cyber Physical Systems

Bei kleinen Leistungen können i.a. Sensoren und Aktoren miniaturisiert werden, siehe z.B. Sensoren-Übersicht ( für "raspberry-pi" ), Microcontroller für die Schule ( YouTube, Calliope mini & BBC Micro Bit )

w3.org Generic Sensor API ( W3C Candidate Recommendation, 20 March 2018 ), Progress Events ( W3C ), DOM-Events ( aktuelles, w3.org ), Events

Games Development Platform Web und Simulationen

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/



Spieltheorie als Wissenschaft "Web als weltweites Gesellschaftsspiel"

Die Spieltheorie hat Anwendungen/Überschneidungen mit IT-Lehr- und Lern-Programmen, Computer-Annimationen, wissenschaftlichen Simulationen. Das Web "an sich" wird als Ganzes zu einem weltweiten und undurchschaubaren Gesellschaftsspiel.

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 , Minimax-Algorithmus ( Bewertungsbaum ), Alpha-Beta-Suche ( Bewertungsbaum ), Nash-Gleichgewicht , 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 .


Hinweise: Kästchen-Papier nach Web ( self-made ) Beispiel: DAZAKA

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 "(Da)gmars (Za)hlen-(Ka)stchenspiel", kürzer:   DAZAKA  .

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

Hinweise: Vorbetrachtungen zu DAZAKA 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*6 = 30 Elemente:

   6 Zeilen  ( y = 0, 1, 2, 3, 4, 5 ) und 
   5 Spalten ( x = 0, 1, 2, 3, 4 ).

Beispiel: für eine optimale 
          Reihenfolge von 
          Klick-Positionen:
         ____________________
        |                    |
        | 25  13   3  24  12 |
        |                    |
        |  7  20  29   8  19 |
        |                    |
        |  2  23  11  16   4 |
        |                    |
        | 26  14   6  21  28 |
        |                    |
        | 10  17  30   9  18 |
        |                    |
        |  1  22  27  15   5 |
        |____________________|

Hinweise: Spielregeln Woher? Wie?

Beispiel:
Ist (last_x, last_y) die letzte gültige Klickposition, so ergibt check_rules(last_x, last_y, to_x, to_y) den Wert true zurück, wenn (to_x, to_y) eine zulässige neue Position ist.

 function check_rules(last_x, last_y, to_x, to_y) {
   if (last_x === to_x && last_y === to_y - 3) { return true; }
   if (last_x === to_x && last_y === to_y + 3) { return true; }
   if (last_x === to_x - 3 && last_y === to_y) { return true; }
   if (last_x === to_x + 3 && last_y === to_y) { return true; }

   if (last_x === to_x - 2 && last_y === to_y - 2) { return true; }
   if (last_x === to_x - 2 && last_y === to_y + 2) { return true; }
   if (last_x === to_x + 2 && last_y === to_y - 2) { return true; }
   if (last_x === to_x + 2 && last_y === to_y + 2) { return true; }
   return false;
 }

Hinweise: Kannst du doc.createDocumentFragment()? HTML-Quelltext nach ES-obj

Wie können HTML-Quelltext-Fragmente einfach in ECMAScript-Objekte gewandelt werden?

<script> // ACHTUNG! fehlerhafter Code!
var menu_html_str = '<div style="display:inline-block;width:99%;background-image:url(..\/kern\/favicon.gif);opacity:0.5;">'
+ '<br \/><br \/><img width="100%" src="..\/kern\/favicon.gif" alt="Mein-Logo" \/>'
+ '<br \/><br \/><br \/><br \/><br \/><br \/>'
+ '<a class="pfeil" target="_self" href="..\/kern\/willkommen.htm"> Willkommen <\/a>'
+ '<br \/><a class="pfeil" target="_self" href="..\/kern\/impressum.htm"> Impressum <\/a>'
+ '<br \/><a class="pfeil" target="_self" href="..\/kern\/copyright.htm"> Copyright <\/a>'
+ '<br \/><a class="pfeil" target="_self" href="..\/kern\/danksagung.htm"> Danksagung <\/a>'
+ '<\/div>';
//===============================================================================
var nav = (function (win) { "use strict"; var doc = win.document,
dst = "intern", 
bin = ["01100001011100100110010101110110"], 
pwtxt = "Passwort für den internen Bereich";

function menu_erstellen_in(dst_str, htmlStr) { "use strict"; var ziel, par, 
frag = doc.createDocumentFragment(),
temp = doc.createElement('div'); 
temp.innerHTML = htmlStr;
while (temp.firstChild) { frag.appendChild(temp.firstChild); }// return frag;

ziel = doc.querySelectorAll(dst_str); if (ziel.length >= 1) { ziel = ziel[0]; }
ziel.insertBefore(frag, ziel.childNodes[0]); //oder: ziel.appendChild( frag );
}

function menu(a, b) {
var c = [], i, p, q;
a = a || dst + "\/index.htm"; 
b = b || bin;
if (a && b) {
  p = win.prompt(pwtxt, "").replace(/\s/g, '');
  for (i = p.length - 1; i >= 0; i -= 1) {
      q = p.charCodeAt(i).toString(2);
      c.push(('00000000' + q).slice(-8));
  } c = c.join("");
} 
for (i = 0; i < b.length; i += 1) {
  if (b[i] === c) { try { win.location.href = a; } catch (e) { } return false; }
} win.alert('Falsches Passwort!'); return false;
}
return { 
  menu: menu, 
  menu_erstellen_in: menu_erstellen_in 
};
} (window));
window.addEventListener("load", function () { 
 nav.menu_erstellen_in('div.menu_bereich', menu_html_str); }, true);
</script>

Hinweise: Kannst du click-Handler? Wichtig!

Aufbau für click-Handler mit init-Parametern:

 function create_click_handler(x, y) {
    return function (event) {
           // verwende closure, 
           // innere und globale Daten
    };
 }
  function my_init_func(event) {
    // verwende innere und globale Daten  und 
    // ele.addEventListener("click", create_click_handler(x, y), false);
  }

Hinweise: Kannst du Top-Game-Creator? Self-Made-Spiel-Entwickler

2 Experimente als Einstieg: Experimente ( verwendet table, tr, td ),
Projekt-Start ( verwendet nur div's ). Für CSS-Klassen können optische DOM-class="..."-Modifikationen gemacht werden.
Beispiele:

 if (td.classList.contains("valid"))    { td.classList.remove("valid"); }
 if (td.classList.contains("possible")) { td.classList.remove("possible"); }
 if (td.classList.contains("last"))     { td.classList.remove("last"); }
 if (help) {                              td.classList.add("possible"); }

Hinweise: Kannst du AJAX? entfernte Spielteilnehmer

Im ersten Entwurf sind vermischt:
die Formular-Daten
die Daten zu den Einzelfeldern und die Ergebnisdaten.
Wie können die Client-Server-Daten und die Formular-Daten
und pseudo-globale Spiel-Daten entkoppelt werden?

Verwende pseudo-globales Objekt "global" g = { }
Verwende pseudo-globales Objekt "formwerte" fw = { }
etwa var g = { h:0, w:0, help: true, counter: 0, rule: 0, x: [], y: [], z: [] }; mit z[i] = td[i].innerHTML.trim();

var g = { h:0, w:0,  help: true, counter: 0, rule: 0, 
          x: [], // x-Positionen in Klickfolge
          y: [], // y-Positionen in Klickfolge
          z: []  // Ziffern 1,2,3,... in Klickfolge z[i] = td[i].innerHTML.trim() 
        }; 

Wandle alle benötigten Werte aus Formular in fw-Objekt und verwende stets das fw-Objekt:

function get_alle_form_werte() { 
  fw.rule = $("rules").selectedIndex || 0;
  fw.help = $("show_hints").checked;
  fw.h = $("rows").value; if (fw.h > $("rows").max) { fw.h = 6; }
  fw.w = $("cols").value; if (fw.w > $("cols").max) { fw.w = 5; }
  return fw;   
}

Hinweis: Projekt-Superpositionierung Modifikationen, Erweiterungen

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


Hinweis: Verständnisfragen Modifikationen, Erweiterungen

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Abgabetermin in der Veranstaltung.