Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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.

Ähnliche Präsentationen


Präsentation zum Thema: "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."—  Präsentation transkript:

1 Das Streichholzspiel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Webbrowser Spieler 1Spieler 2Spieler 3 Ziehe:

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

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

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

22 Webbrowser Spieler 1Spieler 2Spieler 3 Ziehe: Wichtig: Mitteilung vom Spieler1 auch an Spieler1 schicken, damit alle Clients gleich behandelt werden können.

23 Webbrowser Spieler 1Spieler 2Spieler 3 Ziehe: Webbrowser auf verschiedenen Geräten miteinander koordinieren 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 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 HTML-Seite

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

27 Streichholzspiel Streichholzspiel 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.

28 Game Design Das Streichholzspiel Du musst ziehen: Das Streichholzspiel Du musst ziehen: HTML kann nach Belieben gestaltet werden.

29 Das Streichholzspiel Du musst ziehen: Das Streichholzspiel Du musst ziehen: HTML kann nach Belieben gestaltet werden. Game Design

30 Das Streichholzspiel Du musst ziehen: Das Streichholzspiel Du musst ziehen: HTML kann nach Belieben gestaltet werden. Game Design gamescreen spieltisch auswahl

31 Spiellogik in JavaScript umsetzen // 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 var anzahlHoelzer; // 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 var anzahlHoelzer;

32 Events – auf Ereignisse reagieren Spiel startet – onGameStart Webbrowser Spieler 1Spieler 2Spieler 3 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"; } 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 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 )

35 Die Funktion spieltischFuellen(anzahlHoelzer) function spieltischFuellen(anzahlHoelzer){ var quelltextHolz = ' '; var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz; document.getElementById("spieltisch").innerHTML = spieltischHTMLcode; } function spieltischFuellen(anzahlHoelzer){ var quelltextHolz = ' '; var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz; document.getElementById("spieltisch").innerHTML = spieltischHTMLcode; }

36 Die Funktion spieltischFuellen(anzahlHoelzer) function spieltischFuellen(anzahlHoelzer){ var quelltextHolz = ' '; var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz; document.getElementById("spieltisch").innerHTML = spieltischHTMLcode; } function spieltischFuellen(anzahlHoelzer){ var quelltextHolz = ' '; var spieltischHTMLcode = ""; for(var i = 0; i < anzahlHoelzer; i++) spieltischHTMLcode = spieltischHTMLcode + quelltextHolz; document.getElementById("spieltisch").innerHTML = spieltischHTMLcode; } Das erzeugtes HTML dem Container spieltisch zuweisen.

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

38 Events – auf Ereignisse reagieren Erster Spieler bekommt weiteres Event – onPlayersTurn Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn onPlayersTurn

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

40 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'; } 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 reagieren Auswahldialog eingeblendet Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn onPlayersTurn

42 Events – auf Ereignisse reagieren Auswahldialog eingeblendet und Button geklickt Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn onPlayersTurn

43 Auswahl Button angeklickt – die Funktion zieh Nachrichten 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(); } 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(); }

44 Events – auf Ereignisse reagieren Nachrichten empfangen – onGameMessage Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn onPlayersTurn onGameMessage 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 reagieren Spiel geht in die nächste Runde – onNextPlayersTurn Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn

47 Events – auf Ereignisse reagieren Zweiter Spieler bekommt Event – onPlayersTurn Webbrowser Spieler 1Spieler 2Spieler 3 onNextPlayersTurn onPlayersTurn

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

49 Das Spiel lokal testen

50

51

52

53 Events – auf Ereignisse reagieren Spiel gegen den Computer onComputersTurn statt onPlayersTurn Webbrowser Spieler 1Spieler 2Computer onNextPlayersTurn onComputersTurn

54 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); } 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); }

55 Spiel im Internet bereitstellen ZIP-Archiv aus allen Dateien erstellen

56 Spiel im Internet bereitstellen

57

58

59

60

61


Herunterladen ppt "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."

Ähnliche Präsentationen


Google-Anzeigen