Lawrence am 22. Oktober 2015 um 19:44 Uhr

2015-10-22T19:44:14Z

← Nächstältere Version		Version vom 22. Oktober 2015, 19:44 Uhr
Zeile 14:		Zeile 14:
	Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.		Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.

	Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher""-Klasse und die fertige Hauptdatei.		Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher"-Klasse und die fertige Hauptdatei.
	Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.		Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.

	Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind.		Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind.
	Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.		Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.


	===Model===		===Model===
Zeile 25:		Zeile 26:

	'''Tipp:''' Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.		'''Tipp:''' Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.


	====Slot====		====Slot====
Zeile 41:		Zeile 43:
	- Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation.		- Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation.
	- Nutzen Sie <code>Math.random()</code> um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.		- Nutzen Sie <code>Math.random()</code> um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.


	Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:		Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:
Zeile 54:		Zeile 57:
	slot.spin();		slot.spin();
	</source>		</source>


	====SlotMachine====		====SlotMachine====
Zeile 59:		Zeile 63:
	"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese.		"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese.
	Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.		Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.

	Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern.		Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern.
	Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.		Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.

	Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis.		Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis.
	Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis.		Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis.
Zeile 77:		Zeile 83:
	slotMachine.spin();		slotMachine.spin();
	</source>		</source>


	===View===		===View===
Zeile 83:		Zeile 90:
	Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen.		Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen.
	Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".		Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".


	====SlotSVGView====		====SlotSVGView====

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 8= ==Model-View-Controller== ===Ziel=== Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem [http://glossar.hs-augsburg.de/Mode…“

2015-10-01T21:14:13Z

Die Seite wurde neu angelegt: „=Praktikumsaufgabe 8= ==Model-View-Controller== ===Ziel=== Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem [http://glossar.hs-augsburg.de/Mode…“

Neue Seite

=Praktikumsaufgabe 8=

==Model-View-Controller==

===Ziel===

Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem
[http://glossar.hs-augsburg.de/Model-View-Controller-Paradigma Model-View-Controller-Paradigma] zu programmieren.

===Vorbereitung===

Erzeugen Sie einen neuen Ordner namens "aufgabe8" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.

Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher""-Klasse und die fertige Hauptdatei.
Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.

Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind.
Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.

===Model===

Das Modell des einarmigen Banditen setzt sich aus den beiden Komponenten "Slot" und "SlotMachine" zusammen.

'''Tipp:''' Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.

====Slot====

"Slot" repräsentiert ein Feld welches eine Menge an möglichen Werten vorhält und stets einen dieser Werte annimmt.
Die Menge an möglichen Werten wird bei der Erzeugung eines Felds als Argument an den Konstruktor übergeben.

Mithilfe der Funktion "spin()" wird das Feld '''asynchron''' zufällig oft gedreht und nimmt immer wieder einen zufälligen Wert an.
Nutzen Sie einen JavaScript-Timer (z.B. <code>setTimeout</code>) um das wiederholte asynchrone Drehen zu implementieren.

Bei jeder Drehung des Felds wird das Ereignis "spin" erzeugt.
Wenn das Feld aufhört sich zu drehen wird das Ereignis "stop" erzeugt.
Als Daten für die beiden Ereignisse wird der jeweils aktuell angenommene Wert des Feldes mit übergeben.

'''Anmerkungen:'''
- Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation.
- Nutzen Sie <code>Math.random()</code> um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.

Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
slot.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neuer Wert: ' + event.detail);
});
slot.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finaler Wert: ' + event.detail);
});
slot.spin();
</source>

====SlotMachine====

"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese.
Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.
Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern.
Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.
Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis.
Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis.
Die beiden Ereignisse übergeben als Daten jeweils alle aktuellen Werte der enthaltenen Felder als Liste.

Folgender Code sollte drei Felder erzeugen und für jede Drehung jedes Felds und einmal abschließend alle Werte ausgeben.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
slotMachine.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neue Werte: ' + event.detail);
});
slotMachine.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finale Werte: ' + event.detail);
});
slotMachine.spin();
</source>

===View===

Es wird empfohlen, dass Sie in den folgenden Abschnitten die SVG-API nutzen um die Views zu implementieren.
Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen.
Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".

====SlotSVGView====

Eine "SlotSVGView" erzeugt für ein Feld ein rechteckige Repräsentation welche bei jedem neu angenommenen Wert die Farbe wechselt.
Das bedeutet, dass solch eine View die beiden Ereignisse "spin" und "stop" verarbeiten und entsprechend anzeigen muss.

Folgender Code sollte für ein Feld ein Rectheck erzeugen welches beim Drehen des Felds zufällig oft seine Farbe wechselt.

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
var slotView = new SlotSVGView(slot);
document.querySelector('body').appendChild(slotView);
slot.spin();
</source>

'''Tipp:''' Nutzen Sie Namen von Farben wie zum Beispiel "black" als mögliche Werte für Felder um das Rendering zu vereinfachen.

====SlotMachineSVGView====

Eine "SlotMachineSVGView" ist das View-Gegenstück zu einer "SlotMachine", d.h. sie visualisiert eine Sammlung von Feldern.
Bei der Erzeugung einer solchen View wird für jedes darzustellende Feld eine eigene "SlotMachineSVGView" erzeugt.

Folgender Code sollte für eine Sammlung von drei Feldern drei Rechtecke darstellen, welche Ihre Farbe wechseln.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
var slotMachineView = new SlotMachineSVGView(slotMachine);
document.querySelector('body').appendChild(slotView);
slotMachine.spin();
</source>

===Controller===

Der Controller-Teil besteht aus der Komponente "SlotMachineController", welche lediglich das Model kennen muss.

Bei einem "click"-Ereignis auf dem Button mit der ID "spin-button" wird "spin()" auf der "SlotMachine" aufgerufen.
Mithilfe von <code>setAttribute()</code> wird dem Attribut "disabled" auf dem Button der Wert "disabled" zugewiesen.
Auf diese Weise wird der Button deaktiviert und kann nicht nochmal gedrückt werden, solange sich die Felder drehen.
Außerdem wird dem Attribut "innerHTML" auf dem Element mit der ID "result-text" der Text "Drehen..." zugewiesen.

Sobald die "SlotMachine" das "stop"-Ereignis erzeugt, überprüft der Controller ob der Spieler das Spiel gewonnen hat.
Sind alle Felder wertegleich wird dem "innerHTML" des Elements mit der ID "result-text" der Wert "Gewonnen!" zugewiesen.
Ist dies nicht der Fall wird der Wert "Verloren!" zugewiesen, um zu signalisieren, dass der Spieler verloren hat.

===Spiel testen===

Wurde alles korrekt implementiert, können Sie nun den einarmigen Banditen benutzen.

MMProg:WiSe2015:Praktikum:Aufgabe 8 - Versionsgeschichte

Lawrence am 22. Oktober 2015 um 19:44 Uhr

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 8= ==Model-View-Controller== ===Ziel=== Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem [http://glossar.hs-augsburg.de/Mode…“