Erstellung eines Minigolfspieles mit ActionScript 3.0
German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)
In diesem Tutorial zeige ich Ihnen, wie Sie mit ActionScript 3.0 ein schönes Minigolfspiel erstellen. Wir werden mit Event-Handlern, Funktionen und auch dem Timer-Objekt arbeiten, was eine wirklich coole Funktion in AS3 ist.
Einführung
Sie werden feststellen, dass mit diesem Projekt viel gezeichnet ist. Wenn Sie das alles lieber nicht selbst tun möchten, laden Sie einfach die Datei programmeGolf.fla herunter und fahren Sie mit Schritt 19 fort, in dem der Programmierteil beginnt.
Schritt 1: Neue Datei
Beginnen wir mit dem Öffnen einer neuen ActionScript 3.0-Flash-Datei.


Schritt 2: Dokumenteinstellungen
Ändern Sie die Abmessungen im Eigenschaftenfenster (600x400 Pixel) und stellen Sie die Bildrate auf 30 fps ein.


Schritt 3: Erstellen des Hintergrunds
Jetzt bereiten wir einige Grafiken vor. Erstellen Sie ein Rechteck (600 x 400 Pixel) und platzieren Sie es auf den Koordinaten 0, 0. Füllen Sie das Rechteck mit einem Farbverlauf (#0066FF bis #FFFFFF).


Wählen Sie das Objekt aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "background".


Schritt 4: Hinzufügen von Wolken und Bäumen
Gehen Sie in das Hintergrundobjekt (doppelklicken Sie darauf) und fügen Sie einige Grafiken hinzu. Ich fügte Wolken und Bäume hinzu, indem ich einfach das Pinselwerkzeug auswählte und einige einfache Formen zeichnete. Tun Sie dies auf einer neuen Ebene, um die Dinge organisiert zu halten. Für die Wolken habe ich eine hellblaue Farbe (#8FBBE8) verwendet, für Bäume eine hellviolette Farbe (#8DA5C7). Schließlich habe ich die Wolken und Bäume auf meiner Bühne abgeschnitten.
Wolken


Bäume


Endergebnis


Schritt 5: Boden
Erstellen Sie in der Hauptszene ein Rechteck (600x50 Pixel) und platzieren Sie es auf den Koordinaten 0, 350. Füllen Sie das Rechteck mit einem Farbverlauf (#543201 bis #985B01).


Wählen Sie das Objekt aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "grou"nd. Ändern Sie die Registrierung nach links und exportieren Sie das Objekt für ActionScript. OK klicken.


Schritt 6: Gras
Gehen Sie in das Bodenobjekt (doppelklicken Sie darauf) und erstellen Sie eine neue Ebene. Wählen Sie das Rechteck-Grundwerkzeug (R), zeichnen Sie eine Form (10 x 20 Pixel) und platzieren Sie sie an den Koordinaten 0, -35. Stellen Sie den Eckenradius auf 4px ein.


Kopieren Sie diese Rechtecke über die gesamte Szenenlänge. Wählen Sie nun alle aus, bearbeiten Sie sie (Strg + B) und füllen Sie sie mit einem Farbverlauf (#009900 bis #35FD35).


Schritt 7: Loch
Jetzt erstellen wir eine Form, die unseren Boden und unser Gras maskiert. Farbe spielt also keine Rolle. Erstellen Sie ein Rechteck (900 x 70 Pixel) und platzieren Sie es an den Koordinaten -300, -40.


Erstellen Sie mit dem Oval und dem Rechteck-Werkzeug eine "hole" -Form (20 x 40 Pixel) und platzieren Sie sie an den Koordinaten 300, -40. Stellen Sie nun sicher, dass sich Ihre Lochform auf derselben Ebene befindet wie unser zuvor erstelltes blaues Rechteck. Wenn ja, wählen Sie es aus und löschen Sie es. Sie sollten die endgültige Form der Maske erhalten.


Drücken Sie F8 und konvertieren Sie es in einen Movieclip. Ändern Sie den Registrierungspunkt nach links und nennen Sie ihn "grassMask". Geben Sie Ihrem Movieclip nach dem Erstellen einen Instanznamen "grassMask".


Jetzt sollten wir die Maskierung einstellen. Doppelklicken Sie auf die Ebene, auf der sich Ihr Bodenobjekt befindet, und wählen Sie die Option "masked". Machen Sie dasselbe mit der Grasschicht. Wählen Sie in der Ebene, die Ihr "grassMask" -Objekt enthält, die Option "mask". Jetzt können Sie das "ground" -Objekt verlassen und zur Hauptbühne zurückkehren.


Schritt 8: Markieren
Wählen Sie das Pinselwerkzeug (B) und zeichnen Sie ein Einsatzobjekt (#C25C00). Wählen Sie nun das Rechteck-Werkzeug (R) und zeichnen Sie ein Flag-Objekt (#FFDCDC). Wählen Sie beide Objekte aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "flag". Ändern Sie den Registrierungspunkt und exportieren Sie ihn für ActionScript.


Schritt 9: Charakter
Jetzt beginnt der schlimmste Teil :) Zeichnen eines Charakters. Normalerweise zeichne ich etwas von Hand und zeichne es dann in Flash neu. Verwenden wir also mein handgezeichnetes gescanntes Bild. Laden Sie es hier herunter und importieren Sie es in die Bibliothek (Datei > Importieren > In Bibliothek importieren...). Erstellen Sie einen neuen Movieclip (Strg + F8) und nennen Sie ihn "bearMC". Ziehen Sie den Bären aus der Bibliothek auf die Bühne, sperren Sie die Ebene mit der Bitmap und erstellen Sie eine neue Ebene. Wir müssen Körperteile trennen, damit sich jedes Teil in einer anderen Schicht befindet.


Schritt 10: Körperteile
Beginnen wir mit einem Kopf. Wähle das Pinselwerkzeug (B). Wählen Sie die größte Kreisform und braune Farbe (#432801). Zeichnen Sie die Umrisse des Kopfes. Schließlich können Sie das Farbeimer-Werkzeug (K) auswählen und den Kopf mit Farben füllen. Gut, nicht wahr? :) Machen Sie dasselbe mit Armen, Körper, Beinen und Golfschläger. Vergessen Sie nicht, jedes Teil in separate Schichten zu legen.








Schritt 11: Einstellen der Körperteile
Jetzt sollten wir einige Änderungen vornehmen. Löschen Sie zunächst die Ebene mit Ihrer Bären-Bitmap (wir sollten auch die Bären-Bitmap aus der Bibliothek löschen). Wählen Sie nun den gesamten Charakter in allen Ebenen aus. Da wir das Zeichen mithilfe von ActionScript dynamisch laden, benötigen wir die richtige Skalierung. Wähle das freie Transformationswerkzeug (Q) und verkleinere den Bären (ca. 80 Pixel breit).


Schritt 12: Konvertieren von Körperteilen in Movieclips
Klicken Sie auf das erste Bild Ihrer Kopfebene. Der ganze Kopf sollte jetzt ausgewählt werden. Drücken Sie F8 und nennen Sie es "Kopf". Exportieren Sie es auch für ActionScript. Machen Sie genau das Gleiche mit Körper ("body"), Armen ("arms") und Stock ("stick").


Schritt 13: Anpassen der Drehpunkte
Jedes Objekt in Flash dreht sich um einen Drehpunkt, daher müssen wir die Drehpunkte unseres Sticks und unserer Arme anpassen. Verstecken Sie Ihre Kopf- und Körperschicht und wählen Sie die Stock- und Armschicht aus. Sie sollten die Drehpunkte unserer Objekte sehen.


Erstellen Sie eine Art Markierung auf einer separaten Ebene, auf der sich die Drehpunkte (zwischen den Schultern) befinden sollten, um eine ordnungsgemäße Drehung zu ermöglichen.


Nehmen Sie nun eines der Objekte und ziehen Sie es auf die Markierung (Drehpunkt sollte auf der Markierung liegen). Machen Sie dasselbe mit dem zweiten Objekt.


Blenden Sie nun alle Ebenen ein und löschen Sie die zuvor vorgenommene Markierung. Gehen Sie in das Waffenobjekt (doppelklicken Sie darauf), damit Sie die Arme in die richtige Position bringen können.


Lassen Sie das Armobjekt und machen Sie dasselbe mit dem Stock.


Schritt 14: Positionieren des Bären
Gehen Sie zur Hauptszene und erstellen Sie eine neue Ebene, nennen Sie sie "bear". Nehmen Sie "bearMC" aus der Bibliothek und ziehen Sie es auf die Hauptbühne. Drücken Sie bei ausgewähltem "bearMC" Strg + B. Jetzt können Sie "bearMC" aus der Bibliothek löschen.


Schritt 15: Apfel
Drücken Sie Strg + F8 und erstellen Sie einen neuen Movieclip. Nennen Sie es "apple" und exportieren Sie es für ActionScript. Verwende das Pinselwerkzeug (B) und zeichne eine Apfelform. Sie können auch Blatt und Stiel hinzufügen, wenn Sie möchten. Wählen Sie nun das gesamte Objekt aus und verkleinern Sie es mit dem Free Transform Tool(Q), das maximal 20 Pixel breit ist.


Schritt 16: Apfel Animation
Wählen Sie das gesamte Objekt erneut aus und drücken Sie F8. Nennen Sie es "appleFall". Der Registrierungspunkt sollte in der Mitte liegen. Geben Sie ihm im Eigenschaftenfenster den Instanznamen "appleFall".


Gehen Sie in das Objekt "appleFall" (doppelklicken Sie darauf). Erstellen Sie eine neue Ebene und nennen Sie sie "action". Gehen Sie zu Frame 7 und erstellen Sie einen neuen Keyframe (F6). Gehen Sie dann zum Aktionsfenster (F9) und geben Sie Folgendes ein:
1 |
stop(); |
Wählen Sie das erste Bild aus und machen Sie dasselbe.


Fügen Sie nun Keyframes (F6) in das zweite, vierte, sechste und siebte Frame der Ebene "apple" ein. Wählen Sie das zweite bis sechste Bild aus und erstellen Sie ein Bewegungs-Tween (Rechtsklick > Bewegungs-Tween erstellen).


Positionieren Sie nun die Äpfel in den Keyframes ungefähr an den im Bild unten gezeigten Positionen.


Wenn alles in Ordnung ist, können Sie zur Hauptszene zurückkehren und ein "apple"-Objekt aus der Bibliothek auf die Bühne ziehen.


Schritt 17: Textfeld
Erstellen Sie eine neue Ebene und nennen Sie sie "messages". Wählen Sie ein Textwerkzeug (T) und erstellen Sie ein neues Textfeld in der Mitte der Bühne (ich habe eine blaue Arial-Schriftart gewählt). Setzen Sie den Feldtyp auf Dynamischer Text und weisen Sie einen Instanznamen "myMessage" zu. Sie können die Ebene jetzt sperren.


Schritt 18: Score Counter
Erstellen Sie eine neue Ebene und nennen Sie sie "counter". Ziehen Sie erneut ein Apfelobjekt aus der Bibliothek auf die Bühne und positionieren Sie es bei 30, 30. Drücken Sie zweimal Strg + B (da zwei Filmclips zu brechen sind - apple und appleFall) und füllen Sie das Objekt mit einer weißen Farbe. Machen Sie fünf Instanzen und platzieren Sie sie in einer Zeile. Wählen Sie alle aus und drücken Sie F8. Nennen Sie es "counterBcg". Gehen Sie zum Eigenschaftenfenster und ändern Sie die Farbe bei 40% von "Keine" in "Alpha".


Ziehen Sie einen Apfel aus der Bibliothek auf die Bühne, positionieren Sie ihn auf 30, 30 und drücken Sie erneut zweimal Strg + B. Drücken Sie F8 und nennen Sie den Movieclip "counter". Gehen Sie zu diesem Objekt (doppelklicken Sie darauf) und fügen Sie einen weiteren Keyframe hinzu. In diesem Keyframe füllen Sie den Apfel mit einer blauen Farbe (dieser Apfel wird in der Theke angezeigt, wenn Sie das Loch verpassen).


Gehen Sie zum Aktionsbereich jedes Keyframes (F9) und geben Sie Folgendes ein:
1 |
stop(); |
Gehen Sie zur Hauptszene, erstellen Sie fünf Instanzen des Apfels und bilden Sie erneut eine Linie. Jeder Apfel hat einen Instanznamen ("a1", "a2", "a3" usw.).


Schritt 19: Vorbereiten der Programmierung
So hier sind wir. Der Zeichnungsteil ist vorbei. Nehmen Sie ein Stück Papier und notieren Sie die Koordinaten von Kopf, Armen, Körper, Stock, Apfel, Boden und Flagge, damit wir sie dynamisch anbringen können.


Jetzt können Sie sie aus der Szene löschen.


Hier ist eine kurze Aufschlüsselung unserer Vorgehensweise bei der Programmierung:
- Schritt 20 Objekte anbringen und positionieren Alle Objekte sind ordnungsgemäß angebracht und in der Szene positioniert.
- Schritt 21 Zähler Zähler.
- Schritt 22 Programmieren des Sticks Den Stick drehen lassen.
- Schritt 23 Apfel programmieren Der Apfel bewegt sich, wenn der Stock darauf trifft.
- Schritt 24 Treffer Wenn der Apfel nah genug ist, fällt er in das Loch.
- Schritt 25 Programmieren eines Zählers Wenn es ein erfolgreicher Treffer war, fügt der Zähler einen hinzu.
- Schritt 26 Erstellen des nächsten Versuchs Verwenden Sie das Timer-Objekt Sobald der Versuch beendet ist, können wir es nach zwei Sekunden erneut versuchen.
- Schritt 27 Hinzufügen von Textnachrichten Wir fügen einige Nachrichten für den Spieler hinzu.
- Schritt 28 Spiel vorbei Wenn das Spiel beendet ist, können wir wieder spielen.
Schritt 20: Objekte anbringen und positionieren
Die gesamte Programmierung wird im ersten Frame der Aktionsebene platziert. Erstellen wir also eine neue Ebene und nennen sie "actions". Zunächst fügen wir unserem Code drei Kommentarblöcke hinzu:
1 |
//Variables
|
2 |
|
3 |
//EventListeners
|
4 |
|
5 |
//Functions
|
Wenn die Kommentare fertig sind, können wir folgenden Code hinzufügen, der unsere Objekte aus der Bibliothek an die Bühne anfügt.
(Zusätzliche Zeilen 2-8, 13-23)
1 |
//Variables
|
2 |
var myHead = new head(); |
3 |
var myArms = new arms(); |
4 |
var myBody = new body(); |
5 |
var myStick = new stick(); |
6 |
var myGround = new ground(); |
7 |
var myFlag = new flag(); |
8 |
var myApple = new apple(); |
9 |
|
10 |
//EventListeners
|
11 |
|
12 |
//Functions
|
13 |
function resetScene():void { |
14 |
addChild(myHead); |
15 |
addChild(myArms); |
16 |
addChild(myBody); |
17 |
addChild(myStick); |
18 |
addChild(myGround); |
19 |
addChild(myFlag); |
20 |
addChild(myApple); |
21 |
}
|
22 |
|
23 |
resetScene(); |
Jetzt haben wir alle unsere Objekte in der Szene an den Koordinaten 0, 0. Objekte werden bei jedem Aufruf der Funktion resetScene an die Szene angehängt. Lassen Sie uns auf unser Blatt Papier zurückgreifen, in dem wir die Koordinaten notiert haben. Wir werden auch eine Zufallsfunktion verwenden, um die x-Position unseres Lochs und unserer Flagge zu generieren.
(Zusätzliche Zeilen 9, 22-39)
1 |
//Variables
|
2 |
var myHead = new head(); |
3 |
var myArms = new arms(); |
4 |
var myBody = new body(); |
5 |
var myStick = new stick(); |
6 |
var myGround = new ground(); |
7 |
var myFlag = new flag(); |
8 |
var myApple = new apple(); |
9 |
var grassMask:Number; |
10 |
|
11 |
//EventListeners
|
12 |
|
13 |
//Functions
|
14 |
function resetScene():void { |
15 |
addChild(myBody); |
16 |
addChild(myArms); |
17 |
addChild(myHead); |
18 |
addChild(myStick); |
19 |
addChild(myGround); |
20 |
addChild(myFlag); |
21 |
addChild(myApple); |
22 |
grassMask = (320 + Math.random()*260); |
23 |
myBody.x = 70; |
24 |
myBody.y = 296; |
25 |
myArms.x = 68; |
26 |
myArms.y = 276; |
27 |
myArms.rotation = 0; |
28 |
myHead.x = 70; |
29 |
myHead.y = 215; |
30 |
myStick.x = 68; |
31 |
myStick.y = 276; |
32 |
myStick.rotation = 0; |
33 |
myApple.x = 90; |
34 |
myApple.y = 331; |
35 |
myGround.x = 0; |
36 |
myGround.y = 375; |
37 |
myGround.grassMask.x = grassMask - 610; |
38 |
myFlag.x = grassMask; |
39 |
myFlag.y = 375; |
40 |
}
|
41 |
|
42 |
resetScene(); |
*grassMask: Variablenbeschreibung
- Unsere Bühne ist 600px lang
- Die Math.random-Funktion generiert Zahlen von 0 bis 1
- Wenn wir diesen Wert mit 260 multiplizieren, erhalten wir eine Zahl zwischen 0 und 260.
- Wenn wir dann 320 zu diesem Ergebnis hinzufügen, erhalten wir den Bereich, nach dem wir suchen:320 bis 580. Dies ist der Bereich entlang der x-Achse, in dem wir unser Loch und unsere Flagge platzieren können.
Schritt 21: Zähler
Alle Objekte sollten richtig positioniert sein und unsere Maske und Flagge sollten sich an einer zufälligen x-Position befinden. Fügen Sie die folgenden Zeilen unter der Funktion resetScene hinzu. Es wird die Äpfel verstecken, um unsere Punktzahl zu zählen.
(Zusätzliche Zeilen 6-15)
1 |
|
2 |
...
|
3 |
|
4 |
resetScene(); |
5 |
|
6 |
function invisibleApples():void { |
7 |
a1.visible = false; |
8 |
a2.visible = false; |
9 |
a3.visible = false; |
10 |
a4.visible = false; |
11 |
a5.visible = false; |
12 |
a6.visible = false; |
13 |
}
|
14 |
|
15 |
invisibleApples(); |
Schritt 22: Programmieren des Sticks
Jetzt fügen wir Listener für unsere Tastatur hinzu. Wenn wir eine Taste drücken, wird die Funktion onDown aufgerufen. Wenn wir dann eine Taste loslassen, wird die Funktion onUp aufgerufen. Wir müssen auch einen Enter-Frame-Listener hinzufügen.
Das Prinzip ist sehr einfach; Wenn Sie eine beliebige Taste drücken, enthält die Variablenprüfung den Wert 1. Wenn Sie die Taste loslassen, enthält der Variablenprüfer den Wert 0. Die Hit-Funktion, die in jedem Frame unseres Programms angezeigt wird (in unserem Fall 30 Mal pro Sekunde), wirkt sich auf diese Werte aus (positive oder negative Drehung). Die Variablen speedUp und speedDown sind nur Zahlen, die uns sagen, wie groß die Drehung sein wird. Die Variablen minPower und maxPower geben den minimalen und maximalen Grad der Stickdrehung an. Geben Sie folgende Zeilen ein:
(Zusätzliche Zeilen 12, 13, 18-37)
1 |
//EventListeners
|
2 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); |
3 |
stage.addEventListener(KeyboardEvent.KEY_UP, onUp); |
4 |
stage.addEventListener(Event.ENTER_FRAME, hit); |
5 |
|
6 |
//Functions
|
7 |
|
8 |
...
|
9 |
|
10 |
myFlag.x = grassMask; |
11 |
myFlag.y = 375; |
12 |
checker = 0; |
13 |
minPower = 0; |
14 |
}
|
15 |
|
16 |
resetScene(); |
17 |
|
18 |
function onDown(e:KeyboardEvent):void { |
19 |
checker = 1; |
20 |
minPower = -20; |
21 |
}
|
22 |
|
23 |
function onUp(e:KeyboardEvent):void { |
24 |
checker = 0; |
25 |
}
|
26 |
|
27 |
function hit(e:Event):void { |
28 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
29 |
myStick.rotation += speedUp; |
30 |
myArms.rotation += speedUp; |
31 |
} else { |
32 |
if(myStick.rotation > minPower) { |
33 |
myStick.rotation -= speedDown; |
34 |
myArms.rotation -= speedDown; |
35 |
}
|
36 |
}
|
37 |
}
|
Wir verwenden einige neue Variablen im Code, daher müssen wir sie initialisieren. Fügen Sie die folgenden Zeilen oben hinzu. Variablenprüfer und minPower werden in der Funktion resetScene deklariert, da sie während des Programms geändert werden und wir sie später zurücksetzen müssen.
(Zusätzliche Zeilen 7-17)
1 |
//Variables
|
2 |
|
3 |
...
|
4 |
|
5 |
var myApple = new apple(); |
6 |
var grassMask:Number; |
7 |
var speedUp:int = 2; |
8 |
var speedDown:int = speedUp * 8; |
9 |
var checker:int; |
10 |
var minPower:int; |
11 |
var maxPower:int = 110; |


Schritt 23: Programmieren eines Apfels
Wir werden die Methode hitTestObject verwenden, um Informationen über die Kollision zwischen unserem Stick und Apfel abzurufen. Bei einer Kollision wird die Schussfunktion aufgerufen.
(Zusätzliche Zeilen 7,8,16,30-32,36-40)
1 |
//Variables
|
2 |
|
3 |
...
|
4 |
|
5 |
var minPower:int; |
6 |
var maxPower:int = 110; |
7 |
var strength:Number; |
8 |
var applePower:Number; |
9 |
|
10 |
//Functions
|
11 |
|
12 |
...
|
13 |
|
14 |
function onUp(e:KeyboardEvent):void { |
15 |
checker = 0; |
16 |
applePower = (myApple.x + myStick.rotation) * 3.2; |
17 |
}
|
18 |
|
19 |
...
|
20 |
|
21 |
function hit(e:Event):void { |
22 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
23 |
myStick.rotation += speedUp; |
24 |
myArms.rotation += speedUp; |
25 |
} else { |
26 |
if(myStick.rotation > minPower) { |
27 |
myStick.rotation -= speedDown; |
28 |
myArms.rotation -= speedDown; |
29 |
}
|
30 |
if(myStick.hitTestObject(myApple)) { |
31 |
stage.addEventListener(Event.ENTER_FRAME, shot); |
32 |
}
|
33 |
}
|
34 |
}
|
35 |
|
36 |
function shot(e:Event):void { |
37 |
strength = (applePower - myApple.x); |
38 |
myApple.x += strength / 30; |
39 |
myApple.rotation += strength / 4; |
40 |
}
|
Schritt 24: Hit
Das Schießen sollte funktionieren. Lassen Sie uns jetzt einen Apfel codieren, der in das Loch fällt. Wir werden in unserer Schussfunktion testen, ob der Abstand zum Loch klein genug und die Stärke niedrig genug ist. Sollte dies der Fall sein, können wir unseren Clip dort abspielen, wo ein Apfel in das Loch fällt. Meine Regeln(Zahlenwerte) sind sehr streng. Sie können Ihre eigenen leichteren Regeln definieren, wenn Sie dies bevorzugen.
(Zusätzliche Zeilen 17,27-34,37,38)
1 |
//Variables
|
2 |
|
3 |
...
|
4 |
|
5 |
var strength:Number; |
6 |
var applePower:Number; |
7 |
var distance:Number; |
8 |
var target:int; |
9 |
|
10 |
//Functions
|
11 |
function resetScene():void { |
12 |
|
13 |
...
|
14 |
|
15 |
checker = 0; |
16 |
minPower = 0; |
17 |
target = 0; |
18 |
}
|
19 |
|
20 |
resetScene(); |
21 |
|
22 |
...
|
23 |
|
24 |
function shot(e:Event):void { |
25 |
strength = (applePower - myApple.x); |
26 |
distance = grassMask - myApple.x; |
27 |
if((Math.round(distance) <= 10) && (Math.round(distance) >= 3) && (strength <= 65)) { |
28 |
if(target == 0) { |
29 |
myApple.appleFall.play(); |
30 |
myApple.rotation = 0; |
31 |
target = 1; |
32 |
}
|
33 |
} else { |
34 |
if(strength > 5) { |
35 |
myApple.x += strength / 30; |
36 |
myApple.rotation += strength / 4; |
37 |
}
|
38 |
}
|
39 |
}
|
Hier ist eine Aufschlüsselung, wie die Aufnahmefunktion wirklich funktioniert. Es ist sehr einfach. Wir werden später einige Zeilen hinzufügen, aber dies ist der Kern.
Schussfunktionsschema
- Festigkeitsvariable einstellen
- Distanzvariable einstellen
Wenn Distanz und Stärke gering sind und das Ziel noch nicht getroffen wurde
- Clip abspielen, während der Apfel ins Loch fällt
- Stellen Sie die Apfelrotation auf Null
- Sagen Sie unserer Variablen, dass das Ziel getroffen wurde
Wenn Distanz und Stärke nicht unseren Werten entsprechen und wenn die Stärke immer noch groß genug ist - niedriger als 5 und der Apfel bleibt stehen
- Apfel bewegt sich weiter entlang der x-Achse
- Apfel dreht sich weiter
Schritt 25: Programmieren des Zählers
Jetzt machen wir einen Punktezähler. Zuerst müssen wir eine neue Variable namens tryShot initialisieren. Es zählt die verbleibenden Versuche, indem jedes Mal, wenn die Funktion resetScene aufgerufen wird, einer erhöht wird. Wenn wir das Loch treffen, erscheint ein Apfel. Wenn wir das Loch verpassen, erscheint auch ein Apfel, der jedoch zum zweiten Frame des Clips springt (mit einem blauen Apfel).
(Zusätzliche Zeilen 6,7,15,16,31,37-40)
1 |
//Variables
|
2 |
|
3 |
...
|
4 |
|
5 |
var distance:Number; |
6 |
var target:int; |
7 |
var tryShot:int = 0; |
8 |
|
9 |
//Functions
|
10 |
function resetScene():void { |
11 |
|
12 |
...
|
13 |
|
14 |
minPower = 3; |
15 |
target = 0; |
16 |
tryShot ++; |
17 |
}
|
18 |
|
19 |
resetScene(); |
20 |
|
21 |
...
|
22 |
|
23 |
function shot(e:Event):void { |
24 |
strength = (applePower - myApple.x); |
25 |
distance = grassMask - myApple.x; |
26 |
if((Math.round(distance) <= 10) && (Math.round(distance) >= 3) && (strength <= 65)) { |
27 |
if(target == 0) { |
28 |
myApple.appleFall.play(); |
29 |
myApple.rotation = 0; |
30 |
target = 1; |
31 |
this["a" + tryShot].visible = true; |
32 |
}
|
33 |
} else { |
34 |
if(strength > 5) { |
35 |
myApple.x += strength / 30; |
36 |
myApple.rotation += strength / 4; |
37 |
} else { |
38 |
this["a" + tryShot].visible = true; |
39 |
this["a" + tryShot].gotoAndStop(2); |
40 |
}
|
41 |
}
|
42 |
}
|
Schritt 26: Erstellen des nächsten Versuchs Verwenden Sie ein Timer-Objekt
Fügen Sie dem Code die folgenden Zeilen hinzu. Sie stellen sicher, dass die Countdown-Funktion (die die Szene zurücksetzt und den Hörer für die Aufnahmefunktion entfernt) zwei Sekunden nach dem Ende einer bestimmten Aufnahme aufgerufen wird (es spielt keine Rolle, ob das Loch getroffen wurde oder nicht). Wir müssen unserer Trefferfunktion auch eine Bedingung hinzufügen, die die Anzahl der Versuche auf sechs beschränkt.
(Zusätzliche Zeilen 7,13,22,30,44,55,64,69-72)
1 |
//Variables
|
2 |
|
3 |
...
|
4 |
|
5 |
var target:int; |
6 |
var tryShot:int = 0; |
7 |
var myTimer = new Timer(2000, 1); |
8 |
|
9 |
//EventListeners
|
10 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); |
11 |
stage.addEventListener(KeyboardEvent.KEY_UP, onUp); |
12 |
stage.addEventListener(Event.ENTER_FRAME, hit); |
13 |
myTimer.addEventListener(TimerEvent.TIMER, countDown); |
14 |
|
15 |
//Functions
|
16 |
function resetScene():void { |
17 |
;
|
18 |
...
|
19 |
|
20 |
target = 0; |
21 |
tryShot ++; |
22 |
myApple.appleFall.gotoAndStop(1); |
23 |
}
|
24 |
|
25 |
resetScene(); |
26 |
|
27 |
...
|
28 |
|
29 |
function hit(e:Event):void { |
30 |
if(tryShot < 7) { |
31 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
32 |
myStick.rotation += speedUp; |
33 |
myArms.rotation += speedUp; |
34 |
} else { |
35 |
if(myStick.rotation > minPower) { |
36 |
myStick.rotation -= speedDown; |
37 |
myArms.rotation -= speedDown; |
38 |
}
|
39 |
if(myStick.hitTestObject(myApple)) { |
40 |
stage.addEventListener(Event.ENTER_FRAME, shot); |
41 |
}
|
42 |
}
|
43 |
}
|
44 |
}
|
45 |
|
46 |
function shot(e:Event):void { |
47 |
strength = (applePower - myApple.x); |
48 |
distance = grassMask - myApple.x; |
49 |
if((Math.round(distance) <= 10) && (Math.round(distance) >= 3) && (strength <= 65)) { |
50 |
if(target == 0) { |
51 |
myApple.appleFall.play(); |
52 |
myApple.rotation = 0; |
53 |
target = 1; |
54 |
this["a" + tryShot].visible = true; |
55 |
myTimer.start(); |
56 |
}
|
57 |
} else { |
58 |
if(strength > 5) { |
59 |
myApple.x += strength / 30; |
60 |
myApple.rotation += strength / 4; |
61 |
} else { |
62 |
this["a" + tryShot].visible = true; |
63 |
this["a" + tryShot].gotoAndStop(2); |
64 |
myTimer.start(); |
65 |
}
|
66 |
}
|
67 |
}
|
68 |
|
69 |
function countDown(e:TimerEvent):void { |
70 |
resetScene(); |
71 |
stage.removeEventListener(Event.ENTER_FRAME, shot); |
72 |
}
|
Schritt 27: Hinzufügen von Textnachrichten
Jetzt sollten wir einige Textnachrichten erstellen, um den Spieler wissen zu lassen, was los ist.
(Zusätzliche Zeilen 8,29-31,43,53)
1 |
//Functions
|
2 |
function resetScene():void { |
3 |
|
4 |
...
|
5 |
|
6 |
tryShot ++; |
7 |
myApple.appleFall.gotoAndStop(1); |
8 |
myMessage.text = "Press any key!"; |
9 |
}
|
10 |
|
11 |
resetScene(); |
12 |
|
13 |
...
|
14 |
|
15 |
function hit(e:Event):void { |
16 |
if(tryShot < 7) { |
17 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
18 |
myStick.rotation += speedUp; |
19 |
myArms.rotation += speedUp; |
20 |
} else { |
21 |
if(myStick.rotation > minPower) { |
22 |
myStick.rotation -= speedDown; |
23 |
myArms.rotation -= speedDown; |
24 |
}
|
25 |
if(myStick.hitTestObject(myApple)) { |
26 |
stage.addEventListener(Event.ENTER_FRAME, shot); |
27 |
}
|
28 |
}
|
29 |
} else { |
30 |
myMessage.text = "Game Over"; |
31 |
}
|
32 |
}
|
33 |
|
34 |
function shot(e:Event):void { |
35 |
strength = (applePower - myApple.x); |
36 |
distance = grassMask - myApple.x; |
37 |
if((Math.round(distance) <= 10) && (Math.round(distance) >= 3) && (strength <= 65)) { |
38 |
if(target == 0) { |
39 |
myApple.appleFall.play(); |
40 |
myApple.rotation = 0; |
41 |
target = 1; |
42 |
this["a" + tryShot].visible = true; |
43 |
myMessage.text = "Cooool!"; |
44 |
myTimer.start(); |
45 |
}
|
46 |
} else { |
47 |
if(strength > 5) { |
48 |
myApple.x += strength / 30; |
49 |
myApple.rotation += strength / 4; |
50 |
} else { |
51 |
this["a" + tryShot].visible = true; |
52 |
this["a" + tryShot].gotoAndStop(2); |
53 |
myMessage.text = "Bad Luck!"; |
54 |
myTimer.start(); |
55 |
}
|
56 |
}
|
57 |
}
|
Schritt 28: Spiel vorbei
Da wir ein so großartiges Spiel entwickelt haben, besteht eine gute Chance, dass unser Spieler wieder spielen möchte :-) Also machen wir das möglich. Wenn der Spieler sechs Versuche erreicht (der Codeblock, in den wir "Game Over" schreiben), sollten wir unserer Bühne einen endgültigen Hörer hinzufügen. Es ist ein Maus-Listener und ruft eine Funktion auf, wenn Sie irgendwo klicken.
(Zusätzliche Zeilen 12-17,37,38,42,47)
1 |
//Functions
|
2 |
|
3 |
...
|
4 |
|
5 |
function invisibleApples():void { |
6 |
a1.visible = false; |
7 |
a2.visible = false; |
8 |
a3.visible = false; |
9 |
a4.visible = false; |
10 |
a5.visible = false; |
11 |
a6.visible = false; |
12 |
a1.gotoAndStop(1); |
13 |
a2.gotoAndStop(1); |
14 |
a3.gotoAndStop(1); |
15 |
a4.gotoAndStop(1); |
16 |
a5.gotoAndStop(1); |
17 |
a6.gotoAndStop(1); |
18 |
}
|
19 |
|
20 |
...
|
21 |
|
22 |
function hit(e:Event):void { |
23 |
if(tryShot < 7) { |
24 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
25 |
myStick.rotation += speedUp; |
26 |
myArms.rotation += speedUp; |
27 |
} else { |
28 |
if(myStick.rotation > minPower) { |
29 |
myStick.rotation -= speedDown; |
30 |
myArms.rotation -= speedDown; |
31 |
}
|
32 |
if(myStick.hitTestObject(myApple)) { |
33 |
stage.addEventListener(Event.ENTER_FRAME, shot); |
34 |
}
|
35 |
}
|
36 |
} else { |
37 |
myMessage.text = "Game Over\nClick to play again"; |
38 |
stage.addEventListener(MouseEvent.MOUSE_DOWN, playAgain); |
39 |
}
|
40 |
}
|
41 |
|
42 |
function playAgain(e:MouseEvent):void { |
43 |
resetScene(); |
44 |
invisibleApples(); |
45 |
tryShot = 1; |
46 |
stage.removeEventListener(MouseEvent.MOUSE_DOWN, playAgain); |
47 |
}
|
Endgültiger Code
1 |
//Variables
|
2 |
var myHead = new head(); |
3 |
var myArms = new arms(); |
4 |
var myBody = new body(); |
5 |
var myStick = new stick(); |
6 |
var myGround = new ground(); |
7 |
var myFlag = new flag(); |
8 |
var myApple = new apple(); |
9 |
var grassMask:Number; |
10 |
var speedUp:int = 2; |
11 |
var speedDown:int = speedUp * 8; |
12 |
var checker:int; |
13 |
var minPower:int; |
14 |
var maxPower:int = 110; |
15 |
var strength:Number; |
16 |
var applePower:Number; |
17 |
var distance:Number; |
18 |
var target:int; |
19 |
var tryShot:int = 0; |
20 |
var myTimer = new Timer(2000, 1); |
21 |
|
22 |
//EventListeners
|
23 |
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); |
24 |
stage.addEventListener(KeyboardEvent.KEY_UP, onUp); |
25 |
stage.addEventListener(Event.ENTER_FRAME, hit); |
26 |
myTimer.addEventListener(TimerEvent.TIMER, countDown); |
27 |
|
28 |
//Functions
|
29 |
function resetScene():void { |
30 |
addChild(myBody); |
31 |
addChild(myArms); |
32 |
addChild(myHead); |
33 |
addChild(myStick); |
34 |
addChild(myGround); |
35 |
addChild(myFlag); |
36 |
addChild(myApple); |
37 |
grassMask = (320 + Math.random()*260); |
38 |
myBody.x = 70; |
39 |
myBody.y = 296; |
40 |
myArms.x = 68; |
41 |
myArms.y = 276; |
42 |
myArms.rotation = 0; |
43 |
myHead.x = 70; |
44 |
myHead.y = 215; |
45 |
myStick.x = 68; |
46 |
myStick.y = 276; |
47 |
myStick.rotation = 0; |
48 |
myApple.x = 90; |
49 |
myApple.y = 331; |
50 |
myGround.x = 0; |
51 |
myGround.y = 375; |
52 |
myGround.grassMask.x = grassMask - 610; |
53 |
myFlag.x = grassMask; |
54 |
myFlag.y = 375; |
55 |
checker = 0; |
56 |
minPower = 0; |
57 |
target = 0; |
58 |
tryShot ++; |
59 |
myApple.appleFall.gotoAndStop(1); |
60 |
myMessage.text = "Press any key!"; |
61 |
}
|
62 |
|
63 |
resetScene(); |
64 |
|
65 |
function invisibleApples():void { |
66 |
a1.visible = false; |
67 |
a2.visible = false; |
68 |
a3.visible = false; |
69 |
a4.visible = false; |
70 |
a5.visible = false; |
71 |
a6.visible = false; |
72 |
a1.gotoAndStop(1); |
73 |
a2.gotoAndStop(1); |
74 |
a3.gotoAndStop(1); |
75 |
a4.gotoAndStop(1); |
76 |
a5.gotoAndStop(1); |
77 |
a6.gotoAndStop(1); |
78 |
}
|
79 |
|
80 |
invisibleApples(); |
81 |
|
82 |
function onDown(e:KeyboardEvent):void { |
83 |
checker = 1; |
84 |
minPower = -20; |
85 |
}
|
86 |
|
87 |
function onUp(e:KeyboardEvent):void { |
88 |
checker = 0; |
89 |
applePower = (myApple.x + myStick.rotation) * 3.2; |
90 |
}
|
91 |
|
92 |
function hit(e:Event):void { |
93 |
if(tryShot < 7) { |
94 |
if((checker == 1) && (myStick.rotation < maxPower)) { |
95 |
myStick.rotation += speedUp; |
96 |
myArms.rotation += speedUp; |
97 |
} else { |
98 |
if(myStick.rotation > minPower) { |
99 |
myStick.rotation -= speedDown; |
100 |
myArms.rotation -= speedDown; |
101 |
}
|
102 |
if(myStick.hitTestObject(myApple)) { |
103 |
stage.addEventListener(Event.ENTER_FRAME, shot); |
104 |
}
|
105 |
}
|
106 |
} else { |
107 |
myMessage.text = "Game Over\nClick to play again"; |
108 |
stage.addEventListener(MouseEvent.MOUSE_DOWN, playAgain); |
109 |
}
|
110 |
}
|
111 |
|
112 |
function playAgain(e:MouseEvent):void { |
113 |
resetScene(); |
114 |
invisibleApples(); |
115 |
tryShot = 1; |
116 |
stage.removeEventListener(MouseEvent.MOUSE_DOWN, playAgain); |
117 |
}
|
118 |
|
119 |
function shot(e:Event):void { |
120 |
strength = (applePower - myApple.x); |
121 |
distance = grassMask - myApple.x; |
122 |
if((Math.round(distance) <= 10) && (Math.round(distance) >= 3) && (strength <= 65)) { |
123 |
if(target == 0) { |
124 |
myApple.appleFall.play(); |
125 |
myApple.rotation = 0; |
126 |
target = 1; |
127 |
this["a" + tryShot].visible = true; |
128 |
myMessage.text = "Cooool!"; |
129 |
myTimer.start(); |
130 |
}
|
131 |
} else { |
132 |
if(strength > 5) { |
133 |
myApple.x += strength / 30; |
134 |
myApple.rotation += strength / 4; |
135 |
} else { |
136 |
this["a" + tryShot].visible = true; |
137 |
this["a" + tryShot].gotoAndStop(2); |
138 |
myMessage.text = "Bad Luck!"; |
139 |
myTimer.start(); |
140 |
}
|
141 |
}
|
142 |
}
|
143 |
|
144 |
function countDown(e:TimerEvent):void { |
145 |
resetScene(); |
146 |
stage.removeEventListener(Event.ENTER_FRAME, shot); |
147 |
}
|
Abschluss
Ziemlich einfach, nicht wahr? Jetzt können Sie mit allen möglichen Dingen herumalbern. Sie können andere Level und Terrains hinzufügen, den Charakter ändern, Cheats in das Spiel einfügen, ein Spielmenü oder ein Intro hinzufügen und so weiter. Es gibt unbegrenzte Möglichkeiten, also hoffe ich, dass Sie es nützlich fanden und danke fürs Lesen!





