Das Streichholzspiel. Das Spiel und die Regeln 1.Es liegen n Streichhölzer auf dem Tisch. 2.Reihum muss jeder Spieler entweder 1, 2 oder 3 Streichhölzer

Das Streichholzspiel

Das Spiel und die Regeln

1. Es liegen n Streichhölzer auf dem Tisch.

2. Reihum muss jeder Spieler entweder 1, 2 oder 3 Streichhölzer vom Tisch nehmen.

3. Kann ein Spieler kein Streichholz mehr ziehen, hat er verloren.

Spieler 1 Spieler 2 Spieler 3

Jeder Spieler sieht den virtuellen Spieltisch mit den Streichhölzern vor sich. Es wird reihum gespielt.

Mock-Up Streichholzspiel


Mock-Up - Spielverlauf


Ziehe: 1 2 3

Auswahldialog beim ersten Spieler einblenden, damit er 1, 2 oder 3 Streichhölzer ziehen kann.



Ziehe: 1 2 3

Spieler eins zieht 1 Streichholz.



Ziehe: 1 2 3

Ein Streichholz wird überall entfernt.



Ziehe: 1 2 3

Der zweite Spieler ist an der Reihe.



Ziehe: 1 2 3

Der zweite Spieler zieht 3.



Ziehe: 1 2 3

Es werden 3 Streichhölzer entfernt.



Ziehe: 1 2 3



Ziehe: 1 2 3



Ziehe: 1 2 3



Ziehe: 1 2 3

Spieler 1 ist wieder an der Reihe.



Spieler 1 verliertSpieler 1 verliert

Spieler 1 verliert

Spieler 1 hat kein Streichholz mehr und verliert.


Anforderungen• Alle Spieler sehen immer die gleiche, aktuelle Anzahl

Streichhölzer auf dem Spieltisch.

• Nur der Spieler, der an der Reihe ist, kann und muss den nächsten Spielzug vornehmen. Er nimmt 1,2 oder 3 Streichhölzer.

• Will ein Spieler mehr Streichhölzer wegnehmen als auf dem Spieltisch liegen wird eine Fehlermeldung angezeigt.

• Wenn kein Streichholz mehr auf dem Spieltisch liegt, verliert der Spieler der als nächstes an der Reihe ist. Das Spiel wird beendet.

Das Spiel auf einem einzelnen Computer (Webbrowser) umzusetzen wäre nicht so

schwierig.

Interessant ist jedoch die Umsetzung als Multiplayer-Game (verteilte Anwendung)

auf mehreren Webbrowsern.

Webbrowser auf verschiedenen Geräten miteinander koordinieren

Webbrowser Webbrowser Webbrowser


Ziehe: 1 2 3




Ziehe: 1 2 3

Mitteilung von Spieler1 an alle Spieler (Browser) schicken, dass 1 Streichholz entfernt wurde.



Ziehe: 1 2 3

Mitteilung von Spieler1 an alle Spieler (Browser) schicken, dass 1 Streichholz entfernt wurde.




Ziehe: 1 2 3

Wichtig: Mitteilung vom Spieler1 auch an Spieler1 schicken, damit alle Clients gleich behandelt werden können.





Ziehe: 1 2 3

-1 -1 -1




Ziehe: 1 2 3



Nachrichten verschicken ist heute zwar üblich, aber technisch nicht so einfach.

Wir verwenden das GameFramework von LearningApps.org

Webbrowser

Das GameFramework ermöglicht uns das Versenden von Nachrichten und stellt vordefinierte Nachrichten bereit.

HTML-Seite

AppClient.js

GameFramework.js

Spiellogik

AppClient

game

Server

onGameStart

onGameMessage

onGameEnd

Webbrowser

Webbrowser

HTML-Seite

HTML-Seite

GameFramework.js

Spiellogik

game

onGameStart

Einblenden des Spieltisches, Variablen rücksetzen, Zeichnen der Streichhölzer

onGameMessage

auf spezifische Nachrichten das Streichholzspiels reagieren

onGameEnd

Ausblenden des Spieltisches

Eintreffende Nachrichten lösen „Events“ aus.Wir müssen später sagen „was passiert wenn…“

…

<!DOCTYPE html><html><head><title>Streichholzspiel</title></head><body><script type="text/javascript" src="http://LearningApps.org/AppClient.js"></script> <script type="text/javascript" src="http://LearningApps.org/GameFramework.js"></script>

Konkrete Umsetzung des Streichholzspiels mit GameFramwork

Wir erstellen eine neue Datei mit einem Texteditor: index.html

Ab jetzt steht uns das GameFramework zur Verfügung.

Game Design<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="spieltisch" style="width:300px; margin:50px auto;border:2px solid gray">

</div>

<div id="auswahl" style="display:none; 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> HTML kann nach Belieben

gestaltet werden.

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



</div>


gestaltet werden.

Game Design

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



</div>


gestaltet werden.

Game Design

gamescreen

spieltisch

auswahl

Spiellogik in JavaScript umsetzen<script type="text/javascript">

// Das GameFramework stellt das Objekt game zur Verfügung.// Das game initialisieren: game.init();

// Einen Computergegner hinzufügengame.addComputerPlayer();

// Maximale Spielerzahl festlegengame.maxPlayers = 4;

// aktuelle Anzahl der Streichhölzer auf dem Spieltischvar anzahlHoelzer;

Events – auf Ereignisse reagierenSpiel startet – onGameStart



onGameStart onGameStart onGameStart

Spielstart (onGameStart) und Spielende (onGameEnd)

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

// Nach der Anzahl der Spieler starten wir mit passender Anzahl // Streichhölzer auf dem Spieltisch anzahlHoelzer = game.Players.length * 9;

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

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

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

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

// Nach der Anzahl der Spieler starten wir mit passender Anzahl // Streichhölzer auf dem Spieltisch anzahlHoelzer = game.Players.length * 9;

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

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

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

Spieltisch mit Streichhölzern füllen

Spielstart (onGameStart) und Spielende (onGameEnd)

Die Funktion spieltischFuellen(anzahlHoelzer)

function spieltischFuellen(anzahlHoelzer){

var quelltextHolz = '<img src="holz.png" alt=""/>';

var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz;

document.getElementById("spieltisch").innerHTML = spieltischHTMLcode;}

Die Funktion spieltischFuellen(anzahlHoelzer)

function spieltischFuellen(anzahlHoelzer){

var quelltextHolz = '<img src="holz.png" alt=""/>';

var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz;

document.getElementById("spieltisch").innerHTML = spieltischHTMLcode;}

Das erzeugtes HTML dem Container spieltisch zuweisen.

HTML Vorschau

Events – auf Ereignisse reagierenSpiel geht in die erste (nächste) Runde – onNextPlayersTurn



onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn

Events – auf Ereignisse reagierenErster Spieler bekommt weiteres Event – onPlayersTurn




onPlayersTurn

Events – auf Ereignisse reagierenErster Spieler bekommt weiteres Event – onPlayersTurn




onPlayersTurn

Dieser Spieler ist an der Reihe

onNextPlayersTurn und onPlayersTurn

game.onNextPlayersTurn = function(player,lastPlayer){ // Prüfen ob keine Streichhölzer mehr auf dem // Spieltisch liegen. Sonst Spiel beenden. // Der vorherige Spieler hat gewonnen. if(anzahlHoelzer == 0) game.quitGame(lastPlayer.name,2000);}

game.onPlayersTurn = function(player,lastPlayer){ // aktueller Spieler ist an der Reihe // Auswahldialog einblenden document.getElementById('auswahl').style.display = 'block';}

Events – auf Ereignisse reagierenAuswahldialog eingeblendet




onPlayersTurn

Events – auf Ereignisse reagierenAuswahldialog eingeblendet und Button geklickt




onPlayersTurn

<input type="button" value="1" onclick="zieh(1)"/><input type="button" value="2" onclick="zieh(2)"/><input type="button" value="3" onclick="zieh(3)"/>

Auswahl Button angeklickt – die Funktion ziehNachrichten verschicken game.sendMessage

function zieh(anzahl){ // Prüfen ob genug Streichhölzer auf dem Spieltisch sind if(anzahlHoelzer < anzahl) { alert("Du kannst nicht so viele ziehen!"); } else { // Auswahl ausblenden, wir haben uns entschieden 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(); }}

Events – auf Ereignisse reagierenNachrichten empfangen – onGameMessage




onPlayersTurn

onGameMessage onGameMessage onGameMessageZIEH|1 ZIEH|1ZIEH|1

Auf eingehende Nachrichten reagieren game.onGameMessage

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

if(teile[0] == "ZIEH"){ // Gesamtzahl der Streichhölzer reduzieren anzahlHoelzer = anzahlHoelzer - teile[1]; // Anzeige aktualisieren spieltischFuellen(anzahlHoelzer); } }

Events – auf Ereignisse reagierenSpiel geht in die nächste Runde – onNextPlayersTurn




Events – auf Ereignisse reagierenZweiter Spieler bekommt Event – onPlayersTurn




onPlayersTurn

Events – auf Ereignisse reagierenSpielrunde wie zuvor, nun bei Spieler 2




onPlayersTurn

…

Das Spiel lokal testen




Events – auf Ereignisse reagierenSpiel gegen den Computer

onComputersTurn statt onPlayersTurn


Spieler 1 Spieler 2 Computer


onComputersTurn

Spiel gegen den Computer

game.onComputersTurn = function(computer,lastPlayer){ // Zug des Computers spielen var z; // Wenn mehr als 3 Streichhölzer auf dem Tisch liegen // zufällig 1,2 oder 3 ziehen if(anzahlHoelzer > 3) z = Math.ceil(Math.random()*3); if(anzahlHoelzer == 3) z = 3; if(anzahlHoelzer == 2) z = 2; if(anzahlHoelzer == 1) z = 1; // zieh Funktion aufrufen, als hätten man auf // einen der Buttons geklickt zieh(z);}

Spiel im Internet bereitstellenZIP-Archiv aus allen Dateien erstellen

Spiel im Internet bereitstellen

1

2






Documents

Das Streichholzspiel. Das Spiel und die Regeln 1.Es liegen n Streichhölzer auf dem Tisch. 2.Reihum muss jeder Spieler entweder 1, 2 oder 3 Streichhölzer