1 / 61

Das Streichholzspiel

Das Streichholzspiel. Das Spiel und die Regeln. Es liegen n Streichhölzer auf dem Tisch. Reihum muss jeder Spieler entweder 1 , 2 oder 3 Streichhölzer vom Tisch nehmen. Kann ein Spieler kein Streichholz mehr ziehen, hat er verloren. Mock- Up Streichholzspiel. Spieler 1. Spieler 2.

isaiah
Download Presentation

Das Streichholzspiel

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Das Streichholzspiel

  2. Das Spiel und die Regeln Es liegen n Streichhölzer auf dem Tisch. Reihum muss jeder Spieler entweder 1, 2 oder 3 Streichhölzer vom Tisch nehmen. Kann ein Spieler kein Streichholz mehr ziehen, hat er verloren.

  3. Mock-UpStreichholzspiel Spieler 1 Spieler 2 Spieler 3 Jeder Spieler sieht den virtuellen Spieltisch mit den Streichhölzern vor sich. Es wird reihum gespielt.

  4. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3

  5. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Auswahldialog beim ersten Spieler einblenden, damit er 1, 2 oder 3 Streichhölzer ziehen kann.

  6. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Spieler eins zieht 1 Streichholz.

  7. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Ein Streichholz wird überall entfernt.

  8. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Der zweite Spieler ist an der Reihe.

  9. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Der zweite Spieler zieht 3.

  10. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Es werden 3 Streichhölzer entfernt.

  11. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3

  12. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3

  13. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3

  14. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Ziehe: 1 2 3 Spieler 1 ist wieder an der Reihe.

  15. Mock-Up- Spielverlauf Spieler 1 Spieler 2 Spieler 3 Spieler 1 verliert Spieler 1 verliert Spieler 1 verliert Spieler 1 hat kein Streichholz mehr und verliert.

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

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

  18. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser Ziehe: 1 2 3

  19. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser Ziehe: 1 2 3 Mitteilung von Spieler1 an alle Spieler (Browser) schicken, dass 1 Streichholz entfernt wurde.

  20. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser Ziehe: 1 2 3 Mitteilung von Spieler1 an alle Spieler (Browser) schicken, dass 1 Streichholz entfernt wurde.

  21. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser Ziehe: 1 2 3 Wichtig: Mitteilung vom Spieler1 auch an Spieler1 schicken, damit alle Clients gleich behandelt werden können.

  22. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser -1 -1 -1 Ziehe: 1 2 3 Wichtig: Mitteilung vom Spieler1 auch an Spieler1 schicken, damit alle Clients gleich behandelt werden können.

  23. Webbrowser auf verschiedenen Geräten miteinander koordinieren Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser Ziehe: 1 2 3 Wichtig: Mitteilung vom Spieler1 auch an Spieler1 schicken, damit alle Clients gleich behandelt werden können.

  24. Nachrichten verschicken ist heute zwar üblich, aber technisch nicht so einfach. Wir verwenden das GameFramework von LearningApps.org

  25. Das GameFramework ermöglicht uns das Versenden von Nachrichten und stellt vordefinierte Nachrichten bereit. Webbrowser HTML-Seite Server AppClient.js AppClient GameFramework.js game Webbrowser HTML-Seite Spiellogik onGameStart onGameMessage Webbrowser onGameEnd HTML-Seite

  26. Eintreffende Nachrichten lösen „Events“ aus.Wir müssen später sagen „was passiert wenn…“ GameFramework.js game Spiellogik onGameStart Einblenden des Spieltisches, Variablen rücksetzen, Zeichnen der Streichhölzer onGameMessage auf spezifische Nachrichten das Streichholzspiels reagieren onGameEnd Ausblenden des Spieltisches …

  27. Konkrete Umsetzung des Streichholzspiels mit GameFramwork Wir erstellen eine neue Datei mit einem Texteditor: index.html <!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> Ab jetzt steht uns das GameFramework zur Verfügung.

  28. 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"> <divid="spieltisch" style="width:300px; margin:50px auto;border:2px solid gray"> </div> <divid="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.

  29. 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"> <divid="spieltisch" style="width:300px; margin:50px auto;border:2px solid gray"> </div> <divid="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.

  30. 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"> <divid="spieltisch" style="width:300px; margin:50px auto;border:2px solid gray"> </div> <divid="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> gamescreen spieltisch auswahl HTML kann nach Belieben gestaltet werden.

  31. 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ügen game.addComputerPlayer(); // Maximale Spielerzahl festlegen game.maxPlayers = 4; // aktuelle Anzahl der Streichhölzer auf dem Spieltisch varanzahlHoelzer;

  32. Events – auf Ereignisse reagierenSpiel startet – onGameStart Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onGameStart onGameStart onGameStart

  33. 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"; }

  34. 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"; } Spieltisch mit Streichhölzern füllen

  35. Die Funktion spieltischFuellen(anzahlHoelzer) functionspieltischFuellen(anzahlHoelzer){ var quelltextHolz = '<imgsrc="holz.png" alt=""/>'; varspieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode+ quelltextHolz; document.getElementById("spieltisch").innerHTML= spieltischHTMLcode; }

  36. Die Funktion spieltischFuellen(anzahlHoelzer) functionspieltischFuellen(anzahlHoelzer){ var quelltextHolz = '<imgsrc="holz.png" alt=""/>'; varspieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode+ quelltextHolz; document.getElementById("spieltisch").innerHTML= spieltischHTMLcode; } Das erzeugtes HTML dem Container spieltisch zuweisen. HTML Vorschau

  37. Events – auf Ereignisse reagierenSpiel geht in die erste (nächste) Runde – onNextPlayersTurn Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn

  38. Events – auf Ereignisse reagierenErster Spieler bekommt weiteres Event – onPlayersTurn Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn

  39. Events – auf Ereignisse reagierenErster Spieler bekommt weiteres Event – onPlayersTurn Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn Dieser Spieler ist an der Reihe

  40. onNextPlayersTurnund 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'; }

  41. Events – auf Ereignisse reagierenAuswahldialog eingeblendet Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn

  42. Events – auf Ereignisse reagierenAuswahldialog eingeblendet und Button geklickt Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn 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)"/>

  43. Auswahl Button angeklickt – die Funktion ziehNachrichten verschicken game.sendMessage functionzieh(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(); } }

  44. Events – auf Ereignisse reagierenNachrichten empfangen – onGameMessage Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn onGameMessage onGameMessage onGameMessage ZIEH|1 ZIEH|1 ZIEH|1

  45. 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); } }

  46. Events – auf Ereignisse reagierenSpiel geht in die nächste Runde – onNextPlayersTurn Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn

  47. Events – auf Ereignisse reagierenZweiter Spieler bekommt Event – onPlayersTurn Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn

  48. Events – auf Ereignisse reagierenSpielrunde wie zuvor, nun bei Spieler 2 Spieler 1 Spieler 2 Spieler 3 Webbrowser Webbrowser Webbrowser onNextPlayersTurn onNextPlayersTurn onNextPlayersTurn onPlayersTurn …

  49. Das Spiel lokal testen

  50. Das Spiel lokal testen

More Related