Das Streichholzspiel

Inhaltsverzeichnis 1 Die Spielregeln 2 Umsetzung mit LearningApps.org Game-Framework 2.1 Die Gestaltung 2.2 Spielablauf modellieren

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:

Eine ganz einfache HTML-Lösung mit Inline-CSS könnte so aussehen (auf übliches Markup für doctype, body usw. wurde hier verzichtet):

<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>

<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"> '; html += '<script type="text/javascript" src="http://LearningApps.org/GameFramework.js"> '; html += '<h1 style="text-align:center">Das Streichholzspiel'; 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 += ' </script></nowiki>