Willkommen zum Puzzle Tutorial. Hier wird auf sehr einfache Weise gezeigt, wie
du mit hitTests und if-Schleifen ein Puzzlespiel erstellen kannst.
Die Grundstuktur
Das Puzzlespiel besteht im Wesentichen aus drei Keyframes: Im ersten Keyframe
wird überprüft, ob jedes Puzzleteil an der richtigen Stelle liegt.
Ist dies der Fall, springt Flash zum dritten Keyframe und das Puzzle ist fertig.
Im dritten Frame ist auch eine Schaltfläche "nochmal spielen"
eingefügt. Wenn noch nicht alle Puzzleteile an der richtigen Stelle liegen,
springt Flash zum zweiten Keyframe und führt die dort stehende Anweisung
aus: "gotoAndPlay (1);". Diese Schleife wird so lange durchgeführt,
bis alle Puzzleteie an der richtigen Stelle liegen.
Die Überprüfung im ersten Keyframe, ob alle Puzzleteile an der richtigen
Stelle liegen:
Zu beachten ist hier, dass die If-Schleifen ineinander verschachtelt sind. Erst
wenn alle Bedingungen erfüllt sind, wird die entsprechende gotoAndStop-Anweisung
ausgeführt.
Die neun Puzzleteile
Jedes der neun Puzzleteile ist eine Filmsequenz bestehend aus zwei Ebenen: In
der ersten Ebene ist das Puzzlebild und in der zweiten Ebene ist eine Schaltfläche
( dragger ), wecher für das drag-and-drop der Puzzleteile zuständig
ist. Hier der Quelltext des draggers:
on (press) { startDrag (this, true);}
on (release) { stopDrag ();
Das Einrasten der Puzzleteile in das Gitternetz
Nachdem das Puzzleteil über dem Gitternetz losgelassen worden ist, erfolgt
eine hitTest Abfrage: Es wird überprüft, ob sich das Puzzleteil mit
einem kleinen grünen Quadrat ( ist normalerweise nicht sichtbar wg. Alphawert
= 0 % ) überschneidet. Ist dies der Fall, wird das Puzzleteil zentriert
in das Quadrat eingesetzt. Dies wird jeweils mit der Zeile "this._x= .
. ." erreicht. Die neun Puzzleteile habe ich pic_1, pic_2, usw. und die
kleinen Quadrate, die für den hitTest gebraucht werden, hit_1, hit_2 usw.
genannt. Man könnte anstatt von "this" auch jeweils immer den
Namen des jeweiligen Puzzleteiles "pic_1, pic_2, ect. " schreiben.
Die Verwendung von "this" hat hier den Vorteil, dass man den Quellcode
von dragger für jedes Puzzleteil verwenden kann.:
if ( this.hitTest(_root.hit_1)==true) {this._x=_root.puzzlex; this._y=_root.puzzley;}
if ( this.hitTest(_root.hit_2)==true) {this._x=_root.puzzlex+40; this._y=_root.puzzley;}
if ( this.hitTest(_root.hit_3)==true) {this._x=_root.puzzlex+80; this._y=_root.puzzley;}
if ( this.hitTest(_root.hit_4)==true) {this._x=_root.puzzlex; this._y=_root.puzzley+40;}
if ( this.hitTest(_root.hit_5)==true) {this._x=_root.puzzlex+40; this._y=_root.puzzley+40;}
if ( this.hitTest(_root.hit_6)==true) {this._x=_root.puzzlex+80; this._y=_root.puzzley+40;}
if ( this.hitTest(_root.hit_7)==true) {this._x=_root.puzzlex; this._y=_root.puzzley+80;}
if ( this.hitTest(_root.hit_8)==true) {this._x=_root.puzzlex+40; this._y=_root.puzzley+80;}
if ( this.hitTest(_root.hit_9)==true) {this._x=_root.puzzlex+80; this._y=_root.puzzley+80;} }
Wichtig hierbei ist, dass die hitTest-Abfragen jeweils in der Klammer der on(release)-Anweisung
stehen, damit die hitTests jedesmal stattfinden, wenn die Maustaste losgelassen
wird:
on (release) {
stopDrag ();
if ( this.hitTest(_root.hit_1 )==true) {this._x=_root.puzzlex; this._y=_root.puzzley;}
}
Zur Positionierung der Puzzleteile
Im ersten Keyframe wurden zwei Variablen definiert: puzzlex und puzzley. Diese
beschreiben die X- und Y- Position des linken oberen Puzzleteiles. Jedes Puzzleteil
hat die Maße 40 x 40 pixel. Wenn man nun die Variablen puzzlex und puzzley
definiert, kann man die jeweils anderen Puzzleteile mit +40 / +80 relativ dazu
verschieben ( siehe Quelltext dragger ). Ein weiterer Vorteil: Wenn man das Puzzlespiel
verschieben möchte, braucht man nur die Variablen puzzlex und puzzley zu
ändern..
