Kategorien
Inspiration Tutorials

Minispiele mit Flash für die Website: Pärchenfinder – Teil 1

Kleine Spiele erhalten die Freundschaft und erzielen die Aufmerksamkeit des Benutzers. Warum sollen nur die Lotto-, Poker- und Wettanbieter Minigames in ihre Flashbanner einbauen. Für den fortgeschrittenen Flasher stellen die Kleinstspiele keine besondere Herausforderung dar. Allerdings ist es sinnvoll, sich vorher konzeptionell zu überlegen, wie man ein bestimmtes Problem lösen möchte, bevor man mit dem Coding startet.

Kleine Spiele erhalten die Freundschaft und erzielen die Aufmerksamkeit des Benutzers. Warum sollen nur die Lotto-, Poker- und Wettanbieter Minigames in ihre Flashbanner einbauen. Für den fortgeschrittenen Flasher stellen die Kleinstspiele keine besondere Herausforderung dar. Allerdings ist es sinnvoll, sich vorher konzeptionell zu überlegen, wie man ein bestimmtes Problem lösen möchte, bevor man mit dem Coding startet.

Mit diesem und den folgenden Workshops reichern Sie Ihre Website um kleine Spiele an, die Sie den Nutzern eventuell auch zum Einbau in eigene Seiten anbieten können.

Der Pärchenfinder ist ein Spiel nach Art des bekannten Ravensburger Memory. Es bietet ein schönes Beispiel. Es gibt tatsächlich ein, zwei kleinere Hindernisse, die es zu überwinden gilt. Eines davon ist der zeitliche Ablauf. Wir nutzen hierfür im folgenden Beispiel die Timeline eines MovieClips, wohl wissend, dass eine zeitliche Verzögerung auch programmierbar wäre. Aber die Nutzung der Timeline ist für die meisten Flasher transparenter und einfacher.

Screenshot
Das fertige Spiel besitzt einen Countdown und holt sich die Bildmotive dynamisch aus einem Ordner

Gleiches gilt auch für die Integrität des Spiels. Klickt der Nutzer zwei Mal auf ein Kärtchen, so darf beim zweiten Klick nichts passieren. Deckt er zwei verschiedene Kärtchen auf, so muss das Spiel ihm etwas Zeit lassen, sich vor allem das zweite aufgedeckte Kärtchen zu merken, sofern er kein Paar gefunden hat. Klickt er während dieser Übergangszeit noch ein Mal, darf wiederum gar nichts passieren.

Die Spannung im Spiel resultiert aus zwei Faktoren. Eine höhere Menge an Kärtchen mit sehr ähnlichen Motiven erschwert das Spiel. Eine Zeitbegrenzung erzeugt psychologischen Druck. Der Flasher kann dies entweder mit einer Uhr oder einem Countdown realisieren. Der Countdown wirkt spannender. Will man höchste Konzentration vom Spieler verlangen, dann verwendet man für das jeweils zweite aufgedeckte Kärtchen nur eine sehr kurze Aufdeckzeit.

Wir werden im ersten Schritt ein fertiges Spiel mit intern geladenen Bildmotiven realisieren. Das dynamische Laden von Bildmotiven folgt in einem zweiten Schritt.

Das Setup

Sie benötigen eine Reihe von Bildmotiven. Der Übersichtlichkeit halber bleibt dieser Workshop auf vier unterschiedliche Bilder beschränkt, doch das ist für ein spannendes Spiel nicht genug. So ab 16 Kärtchen, also acht Motiven, wird es allmählich interessant.

Besorgen Sie sich die Bilder, schneiden Sie sie im Bildbearbeitungsprogramm auf die gleiche, quadratische Größe zu (hier 150×150 Pixel) und importieren Sie die Bilder in Flash. Denken Sie auch an ein einheitliches Motiv für die Rückseite. Wenn es hier um den letzten Rest Speicherplatz geht, genügt auch eine einfache, in Flash erzeugte Farbfläche. In unserem Beispiel gibt es noch eine Hintergrundtapete (Quelle in unserem Beispiel: ungleich.info).

Legen Sie nun zunächst ein Kärtchen an. Darin müssen zwei kleine Codezeilen hinterlegt werden. Ist das Kärtchen fertig, wird es einfach nur noch dupliziert und ein einziger Parameter angepasst.

Legen Sie also das Bildchen für die Rückseite auf die Bühne und machen Sie ein MovieClip daraus. Klicken Sie doppelt auf das Clip und setzen Sie ein stop(); in den ersten Frame. Nun fügen Sie ein leeres Schlüsselbild im zweiten Frame ein.

Auf einer neuen Ebene im Kärtchen-Clip, die Sie unter die erste ziehen, legen, platzieren Sie eines Ihrer Bildmotive an die gleiche Position. Wandeln Sie dieses Bild um in ein Movieclip mit Namen „motiv1″ und geben Sie diesem Clip den Instanznamen „motiv“. Erzeugen Sie dann ein zweites Schlüsselbild in derselben Ebene und fügen Sie folgende beiden Codezeilen ein:

_root.m4 = _root.m4 + 1;
_root.offen = _root.offen +1;

Die erste Variable überwacht, ob zwei Kärtchen des gleichen Motivs aufgedeckt wurden. Die zweite Variable überwacht, wie viele Karten insgesamt offen sind.

Sie benötigen von jedem Motiv nur ein Kärtchen, werden davon aber zwei Instanzen mit unterschiedlichen Instanznamen auf der Bühne platzieren. Die Instanznamen auf Szene 1 lauten „bild1″ bis „bild8″. Jeweils die benachbarten bilden ein Paar, also 1+2, 3+4 et cetera.

Nun duplizieren Sie das erste MovieClip per Rechtsklick in der Bibliothek so häufig, wie Sie Kartenpaare im Spiel haben wollen. Öffnen Sie den Film-Explorer und klicken Sie sich von Clip zu Clip, jeweils in den zweiten Frame. Dort ändern Sie einfach die Ordnungszahl hinter den beiden „m“. In unserem Beispiel sind es also vier MovieClips und die schreiben die Variablen „m1″ bis „m4″.

Zum Schluss tauschen Sie noch in den Duplikaten die MovieClips der Motive gegen die anderen Motive aus. Dieser Schritt ist nicht nötig, wenn Sie die Bilder dynamisch in den Film laden, wie es ganz am Schluss beschrieben wird.

Die Interaktion

Kommen wir zum Kärtchendrehen. Das realisieren wir, wie so häufig im ersten Frame der Szene 1. Zunächst gilt es, alle benötigten Variablen zu initialisieren. Sie benötigen so viele „m“, wie Sie Pärchen anlegen:

var m1 = 0;

var m2 = 0;

var m3 = 0;

var m4 = 0;

var offen = 0;

var weg = 0;

var MC_name;

Nun schreiben wir eine Variable, die als dynamisches Textfeld auf der Bühne angezeigt wird und als Dialogausgabe dient.

var Meldung = „Viel Erfolg“;

Achten Sie darauf, die Schriftartkonturen einzubetten („Eigenschaftsinspektor“ zum dynamischen Textfeld), damit nicht plötzlich ein leerer Bildschirm erscheint.

_root.onMouseDown = function (){

for (i=1;i<9;i++){

MC_name=“bild“+i;

eval(MC_name).onPress = function(){

this.gotoAndStop(2);

}

eval(MC_name).onRelease = function(){

if(_root.offen>1){

_root.steuerung.play();

}

}

}

}

Die Klickfunktion wird nur dann ausgelöst, wenn der Flash-Film irgendwo auf der Bühne ein MouseDown bemerkt. Das ist wichtig, damit die For-Schleife nicht permanent (onEnterFrame) im Kreis läuft und die CPU des Nutzerrechners zum Glühen bringt.

Diese For-Schleife prüft alle Instanznamen durch. Der Reihe nach werden die Instanznamen in die Variable „MC_name“ geschrieben und von dort als Ziel des Befehls „onPress“ abgerufen. Ist dieser Druckzustand erfüllt, springt das jeweils geklickte MovieClip in den nächsten Frame, zeigt das Bild und schreibt somit die von uns vorhin definierten Variablen. Ein illegaler Doppelklick ist nicht möglich, weil das Kärtchen ja schon nach dem ersten Klick in Frame 2 angekommen ist und ein erneuter Klick das nicht mehr ändert.

Mit ganz leichtem zeitlichen Versatz, nämlich dann, wenn der Nutzer die Maustaste wieder loslässt, prüft der Film, ob mehr als ein Kärtchen offen ist. Ist das der Fall, startet er ein MovieClip namens „steuerung“, das dankenswerterweise für die gesamte Auswertung zuständig ist. Die Auswertung erfolgt später in einem zweiten Teil. ™

Von Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

2 Antworten auf „Minispiele mit Flash für die Website: Pärchenfinder – Teil 1“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.