Quelltext der Seite Einen Sprite bewegen - Whac-A-Mole

===Die Idee===

Bei Whac-A-Mole handelt es sich um ein Spiel aus den frühen 70iger Jahren. Es geht dabei darum, einem armen Maulwurf, der aus einem seiner Löcher herausschaut, eins überzubraten. Dabei kann sich der Maulwurf nur auf seine Schnelligkeit verlassen. Er erscheint nämlich ständig an einem anderen Loch, an dem ihn sein Jäger zu erwischen versucht. Für das Smartphone soll das Spiel so umgesetzt werden, dass das Berühren des ständig woanders auftauchenden Maulwurfs das Punktekonto erhöht. Fehlversuche werden ebenfalls gezählt. Der Spieler hat 60 Sekunden Zeit um möglichst viele Treffer zu erzielen. Realisiert wird dies durch einen auf dem Display angezeigten Countdown. Zusätzlich enthält die Spieloberfläche drei Buttons für "Start", "Reset" und "Beenden".

===Das Design===

<u>Der Designentwurf</u>

<div style="margin-left:30px">[[Datei: Mole_design.JPG]]</div>


<table>
<tr><td style="width:200px; font-weight:bold; color:red; font-size:14px">Components</td><td style="width:380px; font-weight:bold; color:red; font-size:14px">Properties</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td style="padding-left:20px">Spielfeld</td><td>Width: Fill parent...; Height: 300px</td><td>Canvas</td></tr>
<tr><td style="padding-left:30px">ImageSprite</td><td>Picture:(Bilddatei)</td><td>Sprite mit beliebigem Maulwurfbild (lange Kante ca. 45px)</td></tr>
<tr><td style="padding-left:20px">LabelAbstand0</td><td>Width: Fill parent...; Height:20px</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:20px">HorizontalArrangement1</td><td>Width: Fill parent...</td><td>horizontale Anordnung der Labels für die Trefferanzeige</td></tr>
<tr><td style="padding-left:30px">Treffer</td><td>Text: Treffer:; Width:60px;</td><td>Label "Treffer:"</td></tr>
<tr><td style="padding-left:30px">TrefferAnzeige</td><td>Text: 0:; Width:30px;</td><td>Label für die erzielten Treffer</td></tr>
<tr><td style="padding-left:20px">LabelAbstand1</td><td>Width: Fill parent...; Height:20px</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:20px">HorizontalArrangement2</td><td>Width: Fill parent...</td><td>horizontale Anordnung der Labels für die Fehleranzeige</td></tr>
<tr><td style="padding-left:30px">Fehler</td><td>FontBold; Text: Fehler:; Width:60px;</td><td>Label "Fehler:"</td></tr>
<tr><td style="padding-left:30px">FehlerAnzeige</td><td>FontBold; Text: 0:; Width:30px;</td><td>Label für die Zahl der Fehlversuche</td></tr>
<tr><td style="padding-left:20px">LabelAbstand2</td><td>Width: Fill parent...; Height:20px</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:20px">HorizontalArrangement3</td><td>Width: Fill parent...;</td><td>horizontale Anordnung des Reset Buttons und des Countdowns</td></tr>
<tr><td style="padding-left:30px">ButtonReset</td><td>FontBold; Text:Reset; Width-60px; Height-40px</td><td>Reset Button</td></tr>
<tr><td style="padding-left:30px">LabelAbstand3</td><td>Width:50px;</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:30px">LabelCountdown</td><td>FontBold; Text: 60; Width:50px;</td><td>Label für die Anzeige des Countdowns</td></tr>
<tr><td style="padding-left:20px">LabelAbstand4</td><td>Height:20px;</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:20px">HorizontalArrangement4</td><td>Width: Fill parent...;</td><td>horizontale Anordnung von Start und Beenden Button</td></tr>
<tr><td style="padding-left:30px">ButtonStart</td><td>FontBold; Text: Start; Width:Fill parent...; Height:40px;</td><td>Start Button</td></tr>
<tr><td style="padding-left:30px">LabelAbstand5</td><td>Width:10px;</td><td>Abstandhalter</td></tr>
<tr><td style="padding-left:30px">ButtonBeenden</td><td>FontBold; Text: Beenden; Width:Fill parent...; Height:40px;</td><td>Beenden Button</td></tr>
<tr><td style="padding-left:20px">Clock1</td><td>TimerInterval:550;</td><td>Timer für die Bewegung des Maulwurfs</td></tr>
<tr><td style="padding-left:20px">Clock2</td><td>TimerInterval:1000;</td><td>Timer für den Countdown</td></tr>
<tr><td style="padding-left:20px"></td><td></td><td></td></tr>
<tr><td style="padding-left:20px"></td><td></td><td></td></tr>
<tr><td style="padding-left:20px"></td><td></td><td></td></tr>
</table>

===Blocks===

Als erstes benötigen wir eine Prozedur (= Methode) mit der wir den Sprite bewegen können. Den entsprechenden Block finden wir im Built-In Block ''Procedures''. Wir nennen die Prozedur ''MaulwurfBewegen''. Eine selbst erstellte Prozedur können wir an beliebiger Stelle mit '''call''' ''NameDerMethode'' aufrufen.<br/>Im Rumpf nutzen wir die Methode '''.MoveTo''' aus dem Kontextmenü des Sprites. Diese Methode hat zwei Slots für die x- und die y-Koordinate der Zielposition. Diese zwei Werte sind Zufallszahlen, die eine Koordinate auf dem Spielfeld beschreiben, d.h. zwischen 0 und der Breite bzw. Höhe des Spielfeldes minus die Breite bzw. Höhe des Sprites. Den Block für die Zufallszahlen findet man im Built-In Block ''Math'', die Getter für die Spielfeld- bzw. Spritemaße im jeweiligen Kontextmenü. Es sei noch einmal daran erinnert, dass das Koordinatensystem eines Monitors oder Displays den Nullpunkt links oben hat.

<div style="margin-left:30px">[[Datei: Mole_1.JPG]]</div>

Als nächstes rufen wir mit '''when'''''Screen'''''.initialize do''' sozusagen den Konstruktor der ''Screen'' auf. Da in den ''Properties'' der Komponente nur Grundfarben verwendet werden können, wird hier die Hintergrundfarbe des Spielfeldes festgelegt. Im Slot des Setters für die Hintergrundfarbe des Spielfeldes verwenden wir die Methode '''make color''' aus dem Built-In Block ''colors'', der die Eingabe des RGB-Wertes einer Farbe ermöglicht. Zu einem späteren Zeitpunkt nehmen wir hier noch zwei weitere Initialisierungen vor.

<div style="margin-left:30px">[[Datei: Mole_2.JPG]]</div>

Die ''Clock1''-Komponente ist verantwortlich für die Bewegung des Sprites. Dazu verwenden wir den Block '''when'''''Clock1'''''.Timer do''' aus dem Kontextmenü der ''Clock1''. Im Rumpf rufen wir nun unsere oben erstellte Methode ''MaulwurfBewegen'' auf. Der Timer ruft diese Methode nach jedem Zeitintervall, das wir in den Properties auf 550 ms voreingestellt haben, neu auf, d.h. der Maulwurf erscheint alle 550 ms an einem anderen Ort des Spielfeldes.  

<div style="margin-left:30px">[[Datei: Mole_3.JPG]]</div>

Im nächsten Schritt wollen wir nun den Kern der Spielidee umsetzen - das Treffen des Maulwurfs. Genauer gesagt lautete die Idee: Wird der Maulwurf berührt, erhöhen wir die Trefferzahl um eins, andernfalls die Fehlerzahl. Wir benötigen zur Umsetzung also eine zweiseitige bedingte Anweisung. Den entsprechenden Block müssen wir uns zuerst zusammenbauen. Im Built-In Block ''Control'' finden wir an erster Stelle den Block für die einseitige bedingte Anweisung. Klicken wir nun links oben auf das blaue Icon, erscheint ein Kontextmenü. Hier ziehen wir den else-Block aus dem grauen Bereich nach rechts in den if-Block und erhalten dadurch die zweiseitige bedingte Anweisung, die wir im Rumpf des Event Handlers '''when''' ''Spielfeld'' '''.touched do''' aus dem Kontextmenü des ''Spielfeldes'' verwenden können.

<div style="margin-left:80px">[[Datei: Mole_4a.JPG]]</div>

Als Bedingung verwenden wir den Getter von ''touchedSprite''. Ist die Bedingung erfüllt, erhöhen wir die Trefferanzeige um eins. Wir brauchen dazu den Setter des Labels ''TrefferAnzeige'', den Getter des Labels ''TrefferAnzeige'', den Block für die Addition aus dem Built-In Block ''Math'' und einen Block für die Zahl, die wir ebenfalls dort finden. Ist die Bedingung nicht erfüllt, erhöhen wir die Fehleranzeige um eins. Die Vorgehensweise bei der Kombination der Blocks ist analog.

<div style="margin-left:30px">[[Datei: Mole_4.JPG]]</div>

Damit hätten wir bereits ein funktionsfähiges Spiel. Doch einige Feinheiten fehlen noch. Das Spiel wird erst durch eine Zeitbeschränkung interessant. Zu diesem Zweck bauen wir nun einen Countdown ein. Wir beginnen wieder mit dem Block '''when'''''Clock2'''''.Timer do''' aus dem Kontextmenü der ''Clock2''. Das Zeitintervall ist auf 1000 ms voreingestellt, so dass wir den Timer als Sekundenzähler Nutzen können: Jedesmal wenn der Timer abgelaufen ist (nach 1 sec), soll der Wert des Countdown Labels um eins verringert werden. Hat er den Wert 0 erreicht, wird der Timer deaktiviert und der Sprite unsichtbar. Letzteres setzen wir in einer einseitigen bedingten Anweisung um. Die dort benötigten logischen Operationen bzw. booleschen Werte finden wir im Built-In Block ''Logic''.

<div style="margin-left:30px">[[Datei: Mole_5.JPG]]</div>

Nun müssen wir noch den Buttons entsprechendes Verhalten zuweisen. Wir verwenden dazu wieder die bekannten Event Handler. Wird der '''Start''' - Button gedrückt, soll der Timer von ''Clock2'' aktiviert werden, der Sprite sichtbar werden und die Countdown-Anzeige auf den Wert 60 gesetzt werden.

<div style="margin-left:30px">[[Datei: Mole_6.JPG]]</div>

Wird der '''Reset''' - Button gedrückt werden zusätzlich die Treffer- bzw. die Fehleranzeige auf 0 gesetzt.

<div style="margin-left:30px">[[Datei: Mole_7.JPG]]</div>

Nun ergänzen wir noch den Initialisierungsblock für die Screen. Wenn wir die App aufrufen, soll der Maulwurf unsichtbar sein und der Countdown deaktiviert sein. So kann der Spieler über den Start - Button den Beginn des Spiels selbst bestimmen.

<div style="margin-left:30px">[[Datei: Mole_8.JPG]]</div>

Als letztes weisen wir dem Event Handler des '''Beenden''' - Buttons noch das Schließen der Anwendung zu. Den entsprechenden Block finden wir im Built-In Block ''Control''.

<div style="margin-left:30px">[[Datei: Mole_9.JPG]]</div>

===Erweiterungsaufgaben===

* Das Spiel soll mit verschiedenen Levels gespielt werden, die durch verschiedene Zeitintervalle der ''Clock1'' bestimmt werden.

* Wird der Maulwurf getroffen, gibt er einen kurzen Schrei o.ä. von sich. Passende Sounddateien finden sich z.B. [http://www.salamisound.de/sounds-index hier]

* Ein weiterer Sprite (z.B. eine Blume) wird in das Spiel eingeführt und taucht in unregelmäßigen Abständen auf dem Spielfeld auf. Wird dieser Sprite versehentlich getroffen gibt es Strafpunkte oder das Spiel ist beendet.

* Die verschiedenen Levels kombinieren sich aus den obigen Aufgaben, d.h. zusätzlicher Sprite erst auf höherem Level. Treffer auf höherem Level ergeben mehr Punkte.