Das Streichholzspiel

Wiki-Quelltext dieser Seite.

== Die Spielregeln ==
Das Streichholzspiel ist ein Spiel für zwei oder mehr Personen. Es handelt sich dabei um eine Adaption des bekannten Nim-Spiels. Die Spielregeln lauten wie folgt:

 Auf dem Tisch liegen n Streichhölzer. Reihum müssen ein, zwei oder drei 
 Streichhölzer gezogen werden, bis kein Streichholz mehr auf dem Tisch liegt. 
 Der Spieler der das letzte Streichholz zieht gewinnt.

== Umsetzung mit LearningApps.org Game-Framework ==

=== Die Gestaltung ===
Zunächst sollten Mock-Ups zum Spiel erstellt werden. Anschließend kann dieser Entwurf in HTML-Code abgebildet werden. Der Schwerpunkt liegt in dieser Phase auf einer kreativen Gestaltung mit vorhandenen oder eigens erstellten Grafiken und deren Formatierung. Für ein Streichholz kann beispielsweise die folgende Grafik verwendet werden:

[[Bild:Admin_Holz.png|center]]

Eine ganz einfache HTML-Lösung mit Inline-CSS könnte so aussehen (auf übliches Markup für doctype, body usw. wurde hier verzichtet):
<pre><nowiki>
<script type="text/javascript" src="http://LearningApps.org/AppClient.js"></script> 
<script type="text/javascript" src="http://LearningApps.org/GameFramework.js"></script> 

<h1 style="text-align:center">Das Streichholzspiel</h1>

<div id="gamescreen" style="display:none; left:0px; top:0px; width:100%; height:100%; position:absolute; overflow:auto; background:white"> 
 <div id="holzbox" style="width:300px; margin:50px auto;border:2px solid gray">
  <!-- Hier kommen später die Streichhölzer hinein, die noch auf dem Tisch liegen -->
 </div>

 <div id="auswahl" style="width:300px; margin:10px auto;border:2px solid gray">
  Du musst ziehen: 
  <input type="button" value="1" onclick="zieh(1)"/>
  <input type="button" value="2" onclick="zieh(2)"/>
  <input type="button" value="3" onclick="zieh(3)"/>
 </div>
</div>
</nowiki>
</pre>

<html><nowiki>
<iframe id="theframe" src="" style="width:100%;height:500px"></iframe>
<script>
var frameWindow = document.getElementById("theframe").contentWindow;
var frameDocument = frameWindow.document;
var html = "";
html += '<script type="text/javascript" src="http://LearningApps.org/AppClient.js"></scri'+'pt> ';
html += '<script type="text/javascript" src="http://LearningApps.org/GameFramework.js"></scri'+'pt> ';
html += '<h1 style="text-align:center">Das Streichholzspiel</h1>';

html += '<div id="gamescreen" style="display:none; left:0px; top:0px; width:100%; height:100%; position:absolute; overflow:auto; background:white"> ';
html += ' <div id="holzbox" style="width:300px; margin:50px auto;border:2px solid gray">';
html += ' </div>';
html += ' <div id="auswahl" style="width:300px; margin:10px auto;border:2px solid gray">';
html += '  Du musst ziehen: ';
html += '  <input type="button" value="1" onclick="zieh(1)"/>';
html += '  <input type="button" value="2" onclick="zieh(2)"/>';
html += '  <input type="button" value="3" onclick="zieh(3)"/>';
html += ' </div>';
html += '</div>';
frameDocument.open();
frameDocument.write(html);
frameDocument.close(); 
</script>

</nowiki></html>

Die einzige etwas spezielle Definition ist das "div" gamescreen, welches zunächst mit "display:none" versteckt geladen wird. Das Game-Framework stellt uns beim Start Elemente zur Eingabe des Spielernames und Auswahl von Mitspielern bereit. Erst wenn ein Spiel startet, werden wir gamescreen einblenden. Dies lässt sich natürlich auch auf andere Weise lösen. 

=== Spielablauf modellieren ===
Die technischen Details der Client-Server-Kommunikation wollen wir an dieser stelle ganz bewusst ausblenden und dem Game-Framework überlassen. Dieses stellt uns die nötigen Routinen für den Nachrichtenversand und -empfang bereit. Ereignisorientiert wird über das Eintreffen neuer Nachrichten informiert. Die Aufgabe des Entwicklers besteht nun in der Behandlung von Ereignissen beim Eintreten verschiedener Spielsituationen wie Spielstart, Spielende, der aktuelle Spieler ist an der Reihe usw. Diese ereignisbasierte Denkweise kann durch geeignete was-passiert-wenn-Fragen zum Spielablauf gefördert werden. Diese lassen sich beispielsweise in Form von Skizzen oder Diagrammen an der Tafel erarbeiten.

Die für das Streichholzspiel mindestens benötigten Fragen sind:
* Was passiert, wenn das Spiel startet?
* Was passiert, wenn der nächste Spielzug beginnt?
* Was passiert, wenn ich an der Reihe bin?
* Was passiert, wenn ich ein Streichholz ziehe?
* Was passiert, wenn ich eine Zieh-Nachricht erhalte?

Mit Hilfe von JavaScript können wir bei eintreffenden Ereignissen die HTML-Darstellung dynamisch verändern. Damit können wir Eingabemöglichkeiten für den Spieler zum richtigen Zeitpunkt ein- bzw. ausblenden und die verbleibende Anzahl Streichhölzer auf dem Tisch aktualisieren. Das Game-Framework stellt uns das Objekt '''game''' zur Verfügung was wir nun verwenden können:

<pre><nowiki>
<script type="text/javascript">

// Das game-Objekt initialisieren und die Elemente für Spielername und Start anzeigen 
game.init();

// Wir wollen die Möglichkeit gegen einen Computergegner zu spielen
game.addComputerPlayer(); 

// Wir spielen mit maximal 4 Spielern
game.maxPlayers = 4; 

// Unser Merker für die Anzahl der Streichhölzer auf dem Tisch
var anzahlHoelzer;

// Ereignis: Spiel beginnt
game.onGameStart = function(){
 // Das Spielfeld einblenden
 document.getElementById("gamescreen").style.display = "block";

 // Nach der Anzahl der Spieler starten wir mit passenden Anzahl
 // Hölzer auf dem Spielfeld
 anzahlHoelzer = game.Players.length * 9;

 // Den leeren Container mit Streichhölzern füllen 
 holzboxFuellen(anzahlHoelzer);

 // Der erste Spieler beginnt das Spiel
 game.nextPlayersTurn();
}

// Ereignis: Spiel wird beendet
game.onGameEnd = function(){
 // Das Spielfeld ausblenden
 document.getElementById("gamescreen").style.display = "none";
}

// Hilfsfunktion zur Anzeige von n Streichhölzern
function holzboxFuellen(n){
  var quelltextHolz = '<img src="holz.png" alt="" width="30px" height="100px"/>';
	
  var html = "";
  for(var i = 0; i < n; i++) 
      html = html + quelltextHolz;

  document.getElementById("holzbox").innerHTML = html;
}

// Ereignis: Nächster Spieler ist an der Reihe
game.onNextPlayersTurn = function(player,lastPlayer){
 document.getElementById('auswahl').style.display = 'none';

 // Spiel ist zu Ende, keine Hölzer mehr übrig
 if(anzahlHoelzer == 0) 
  game.quitGame(lastPlayer.name,2000);
}

// Ereignis: Der Spieler an diesem Gerät ist dran
game.onPlayersTurn = function(player,lastPlayer){
 // Die Auswahl mit Buttons einblenden
 document.getElementById('auswahl').style.display = 'block';
} 

// Einer der Buttons wurde vom Spieler angeklickt
function zieh(anzahl){
 // prüfen ob noch genug Hölzer vorhanden
 if(anzahl > anzahlHoelzer) {
  alert("Du kannst nicht mehr so viele Hölzer ziehen!");
  return;
 }
 // Auswahl ausblenden, damit wir nicht zweimal klicken
 document.getElementById('auswahl').style.display = 'none';
 // Nachricht an alle Spieler verschicken 
 game.sendMessage("ZIEH|" + anzahl);
 // Unser Zug ist fertig, an nächsten Spieler abgeben 
 game.nextPlayersTurn(500);
}

// Ereignis: Nachricht empfangen
game.onGameMessage = function(msg, from){
 // Ankommende Nachricht teilen am geraden Strich |
 var teile = msg.split("|");

 if(teile[0] == "ZIEH"){
   // Gesamtzahl der Hölzer reduzieren
   anzahlHoelzer = anzahlHoelzer - teile[1];
   // Anzeige aktualisieren
   holzboxFuellen(anzahlHoelzer);
 } 
}
</script>
</nowiki>
</pre>

Damit haben wir bereits das fertige Spiel erstellt und können es am lokalen Computer ausprobieren. Möchte man schließlich mit mehreren Endgeräten (mehreren Webbrowsern) spielen, wird ein zentraler Server für die Kommunikation benötigt. Hierfür wird das lokal entwickelte Spiel im letzten Schritt auf den LearningApps.org-Server im Internet geladen. Die HTML- Datei mit JavaScript-Code wird dazu zusammen mit allen Bildressourcen in ein ZIP- Archiv verpackt und über ein Webformular im Entwicklerbereich von LearningApps.org hochgeladen. Die Plattform stellt automatisch einen Weblink und einen QR-Code für den Aufruf des Spiels bereit. 

[[Bild:Gadgets.JPG|center|300px]]