Erstellen eines Whack-a-Mole-Spiels mit AS3 in Flash

() translation by (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie Ihre eigene Version des klassischen Whack-a-Mole-Spiels erstellen. Nur unsere unglücklichen Kreaturen der Wahl sind Würmer. Sie können die Geschwindigkeit des Spiels und die Trefferfelder der Würmer ändern.

Schritt 1: Kurze Übersicht

Wir werden gängige ActionScript 3-Klassen verwenden, insbesondere Mausereignisse, um ein unterhaltsames Whack A Mole-ähnliches Spiel in Flash zu erstellen

Schritt 2: Flash-Dokumenteinstellungen

Öffnen Sie Flash und erstellen Sie ein Dokument mit einer Breite von 480 Pixel und einer Höhe von 320 Pixel. Stellen Sie die Bildrate auf 24 fps ein.

(Hinweis: Das obige Bild enthält einen Fehler. Breite und Höhe sind falsch herum. Vielen Dank an Roel Traa für diesen Hinweis.)

Schritt 3: Schnittstelle

Es wird eine einfache und benutzerfreundliche Oberfläche mit verschiedenen Formen, Schaltflächen und MovieClips verwendet. Fahren Sie mit den nächsten Schritten fort, um diese GUI zu erstellen.

Schritt 4: Hintergrund

Wählen Sie das Rechteck-Werkzeug (R) aus, um ein Rechteck mit 320 x 480 Pixel #CC9866, #BA7743 zu erstellen, und zentrieren Sie es in der Bühne.

Schritt 5: Titel

Verwenden Sie das Textwerkzeug (T), um einen Titel mit Ihrer Lieblingsschriftart hinzuzufügen. Sie können auch einige der Grafiken des Spiels verwenden, um es schöner zu machen. Die in diesem Tutorial verwendete Wurmgrafik wurde von hier unter einer Creative Commons-Lizenz heruntergeladen.

Schritt 6: Tasten

Verwenden Sie erneut das Textwerkzeug, um drei Schaltflächen zu erstellen, wie im obigen Bild gezeigt. Konvertieren Sie sie in Schaltflächen und geben Sie ihnen beschreibende Instanznamen, damit Sie sie später im Code problemlos verwenden können. Konvertieren Sie die Grafiken in der Phase in einen einzelnen MovieClip und nennen Sie ihn TitleView. Denken Sie daran, das ActionScript exportieren-Kontrollkästchen zu aktivieren.

Schritt 7: Optionen

Löschen Sie die letzte Ansicht mit Ausnahme des Hintergrunds und erstellen Sie eine Reihe von dynamischen Textfeldern, wie im Bild gezeigt, geben Sie ihnen beschreibende Instanznamen und konvertieren Sie sie in Schaltflächen. Verwenden Sie das Rechteck-Werkzeug (R), um eine Pfeilschaltfläche zu erstellen, mit der Sie zum Titelbildschirm zurückkehren können.

Schritt 8: Credits

Der Credits-Bildschirm wird vor dem Titel-Bildschirm angezeigt. Verwenden Sie die zuvor verwendeten Grafiken und Schriftarten, um ihn zu erstellen. Nennen Sie es CreditsView und denken Sie daran, das Für ActionScript exportieren-Kontrollkästchen zu aktivieren.

Schritt 9: Spielbildschirm

Auf dem Spiel-Bildschirm werden einfache Comicgrafiken verwendet. Es gibt nicht wirklich ein Verfahren zum Erstellen dieser Grafiken. Verwenden Sie einfach Ihre Fantasie und die Flash-Zeichenwerkzeuge, um so etwas wie das obige Bild zu erstellen. Jedes Loch im Spielbildschirm ist ein MovieClip, der eine Animation des herauskommenden Wurms enthält. Es handelt sich im Grunde genommen um eine einfache Einzelbildanimation. Überprüfen Sie die Quelle, um ein besseres Verständnis zu erhalten.

Schritt 10: Alarm

Eine Warnung wird angezeigt, wenn alle Würmer angezeigt wurden. Sie zeigt die endgültige Punktzahl an, die Sie erreicht haben. Verwenden Sie das Rechteck-Werkzeug, um es zu erstellen, und fügen Sie dem unteren TextField einen beschreibenden Namen hinzu, setzen Sie den Instanznamen auf AlertView und markieren Sie das Für ActionScript exportieren-Feld.

Schritt 11: TweenNano

Wir verwenden eine andere Tween-Engine als die in Flash enthaltene Standardeinstellung. Dies erhöht die Leistung und ist einfacher zu bedienen.

Sie können TweenNano von der offiziellen Website herunterladen.

Schritt 12: Soungle

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Den in diesem Beispiel verwendeten Sound finden Sie auf Soungle.com mit dem Schlüsselwort hit.

Schritt 13: Dokumentklasse festlegen

Wir machen unsere Anwendung interaktiv, indem wir eine externe Klasse verwenden. Fügen Sie ihren Namen dem Klasse-Feld im Abschnitt Veröffentlichen des Eigenschaften-Fensters hinzu, um die FLA der Hauptdokumentklasse zuzuordnen.

Schritt 14: Erstellen Sie eine neue ActionScript-Klasse

Erstellen Sie eine neue (Cmd + N) ActionScript 3.0-Klasse und speichern Sie sie als Main.as in Ihrem Klassenordner.

Schritt 15: Klassenstruktur

Erstellen Sie Ihre grundlegende Klassenstruktur, um mit dem Schreiben Ihres Codes zu beginnen.

 
package  
{ 
	import flash.display.Sprite; 
	 
	public class Main extends Sprite 
	{ 
		public function Main():void 
		{ 
			// constructor code 
		} 
	} 
}

Schritt 16: Erforderliche Klassen

Dies sind die Klassen, die wir importieren müssen, damit unsere Klasse funktioniert. Die import-Anweisung stellt Ihrem Code extern definierte Klassen und Pakete zur Verfügung.

 
import flash.display.Sprite; 
import flash.text.TextField; 
import flash.utils.Timer; 
import flash.events.TimerEvent; 
import flash.events.MouseEvent; 
import flash.net.navigateToURL; 
import flash.net.URLRequest; 
import com.greensock.TweenNano; 
import com.greensock.easing.Expo;

Schritt 17: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr über sie zu erfahren. Einige ihrer Namen sind selbsterklärend, sodass dort kein Kommentar vorhanden ist.

 
private var titleView:TitleView = new TitleView(); 
private var options:OptionsView; 
private var credits:CreditsView; 
private var lastSelected:TextField; //the last selected speed in the options screen 
private var lastSelected2:TextField; //the last selected hit area in the options screen 
private var hitSize:Number = 1; //hit size mask is at full scale at start 
private var timer:Timer = new Timer(1400); //default time for the worms to appear 
private var holes:Vector.<MovieClip> = new Vector.<MovieClip>(); //stores the 8 holes in stage 
private var currentWorms:int = 0; //worms already shown 
private var wormsHit:int = 0; 
private var totalWorms:String = '10';//total of worms to display

Schritt 18: Konstruktor

Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn ein Objekt aus einer Klasse erstellt wird. Dieser Code wird als erster ausgeführt, wenn Sie eine Instanz eines Objekts erstellen oder die Dokumentklasse verwenden.

Es ruft die notwendigen Funktionen auf, um das Spiel zu starten. Überprüfen Sie diese Funktionen in den nächsten Schritten.

 
public final function Main():void 
{ 
	addChild(titleView); 
	holes.push(h1,h2,h3,h4,h5,h6,h7,h8); 
	 
	startButtonListeners(); 
}

Schritt 19: Starten Sie die Button Listener

Wir beginnen mit dem Hinzufügen der Maus-Listener zu den Schaltflächen in der Titelansicht. Dadurch gelangen wir zum Bildschirm mit den Spielen, Optionen oder Credits.

 
private final function startButtonListeners(action:String = 'add'):void 
{ 
	if(action == 'add') 
	{ 
		titleView.creditsB.addEventListener(MouseEvent.MOUSE_UP, showCredits); 
		titleView.optionsB.addEventListener(MouseEvent.MOUSE_UP, addOptions); 
		titleView.playB.addEventListener(MouseEvent.MOUSE_UP, showGameView); 
	} 
	else 
	{ 
		titleView.creditsB.removeEventListener(MouseEvent.MOUSE_UP, showCredits); 
		titleView.optionsB.removeEventListener(MouseEvent.MOUSE_UP, addOptions); 
		titleView.playB.removeEventListener(MouseEvent.MOUSE_UP, showGameView); 
	} 
}

Schritt 20: Optionen hinzufügen

Der Optionsbildschirm wird zwischengeschaltet, wenn der Benutzer auf die Optionsschaltfläche klickt. Der Pfeiltaste wird ein Maus-Listener hinzugefügt, um sie zu entfernen, wenn Sie fertig sind.

 
private final function addOptions(e:MouseEvent):void 
{ 
	options = new OptionsView(); 
	addChild(options); 
	TweenNano.from(options, 0.3, {x:stage.stageWidth, onComplete:function():void{options.backBtn.addEventListener(MouseEvent.MOUSE_UP, hideOptions);}}); 
	 
	optionsListeners(); 
}

Schritt 21: Optionen Listener

Diese Listener werden hinzugefügt, wenn der angezeigte Options-Bildschirm die Schaltflächen auf der Bühne handhabt. Mehr von seinem Verhalten in den nächsten Schritten.

 
private final function optionsListeners(action:String = 'add'):void 
{ 
	if(action == 'add') 
	{ 
		options.slowBtn.addEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		options.mediumBtn.addEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		options.fastBtn.addEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		 
		options.smallBtn.addEventListener(MouseEvent.MOUSE_UP, selectHitArea); 
		options.mediumBtn1.addEventListener(MouseEvent.MOUSE_UP, selectHitArea); 
		options.bigBtn.addEventListener(MouseEvent.MOUSE_UP, selectHitArea);

Schritt 22: Standardoption festlegen

Die Standardoptionen werden durch diese Zeilen festgelegt. Sie legen die aktuell ausgewählten Schaltflächen fest, die langsam und groß sind.

1
2	lastSelected = options.slowBtn.slowTF;
3	lastSelected2 = options.bigBtn.bigTF;

Schritt 23: Entfernen Sie die Optionslistener

Ein Parameter bestimmt, ob die Listener hinzugefügt oder entfernt werden. Die nächsten Zeilen werden ausgeführt, wenn dieser Parameter nicht angibt, die Listener hinzuzufügen.

 
else 
	{ 
		options.slowBtn.removeEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		options.mediumBtn.removeEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		options.fastBtn.removeEventListener(MouseEvent.MOUSE_UP, changeSpeed); 
		 
		options.smallBtn.removeEventListener(MouseEvent.MOUSE_UP, selectHitArea); 
		options.mediumBtn1.removeEventListener(MouseEvent.MOUSE_UP, selectHitArea); 
		options.bigBtn.removeEventListener(MouseEvent.MOUSE_UP, selectHitArea); 
	} 
}

Schritt 24: Optionen ausblenden

Die Pfeilschaltfläche entfernt den Optionen-Bildschirm , wenn Sie darauf klicken.

 
private final function hideOptions(e:MouseEvent):void 
{ 
	TweenNano.to(options, 0.3, {x:stage.stageWidth, onComplete:function():void{options.removeEventListener(MouseEvent.MOUSE_UP, hideOptions); removeChild(options); options = null;}}); 
}

Schritt 25: Ändern Sie die Farbe von TextField

Diese Funktion wird ausgeführt, wenn die Geschwindigkeitstasten gedrückt werden. Der erste Teil ändert die Textfarbe der Tasten, ändert die aktuelle Option in Weiß und den neu ausgewählten Wert in Gelb.

 
private final function changeSpeed(e:MouseEvent):void 
{ 
	/* Change Target and last selected Color */ 
	 
	lastSelected.textColor = 0xFFFFFF; 
	e.target.textColor = 0xFF9966;

Schritt 26: Klicken Sie auf die angeklickte Schaltfläche

Dies ist der zweite Teil der Geschwindigkeitsfunktion. Er erkennt die angeklickte Taste und überprüft ihren Namen. Er erhöht/verringert den Timer entsprechend.

 
if(e.target.name == 'slowTF') 
	{ 
		timer = new Timer(1400); 
		lastSelected = e.target as TextField; 
	} 
	else if(e.target.name == 'mediumTF') 
	{ 
		timer = new Timer(1100); 
		lastSelected = e.target as TextField; 
	} 
	else if(e.target.name == 'fastTF') 
	{ 
		timer = new Timer(800); 
		lastSelected = e.target as TextField; 
	} 
}

Schritt 27: Wählen Sie Trefferbereich

Die nächste Funktion wird ausgeführt, wenn auf eine Schaltfläche in der Auswahl des Trefferbereichs geklickt wird. Es verhält sich genauso wie die letzte Funktion.

 
private final function selectHitArea(e:MouseEvent):void 
{ 
	/* Change Target and last selected Color */ 
	 
	lastSelected2.textColor = 0xFFFFFF; 
	e.target.textColor = 0xFF9966; 
	 
	/* Detect clicked button and change hit area accordingly */ 
	 
	if(e.target.name == 'smallTF') 
	{ 
		hitSize = 0; 
		lastSelected2 = e.target as TextField; 
	} 
	else if(e.target.name == 'mediumTF') 
	{ 
		hitSize = 0.5; 
		lastSelected2 = e.target as TextField; 
	} 
	else if(e.target.name == 'bigTF') 
	{ 
		hitSize = 1; 
		lastSelected2 = e.target as TextField; 
	} 
}

Schritt 28: Credits anzeigen

Der Credits-Bildschirm wird angezeigt, wenn der Benutzer auf die Credits-Schaltfläche klickt. Dem vollständigen MovieClip wird ein Maus-Listener hinzugefügt, um ihn zu entfernen.

 
private final function showCredits(e:MouseEvent):void 
{ 
	titleView.optionsB.visible = false; 
	titleView.creditsB.visible = false; 
	titleView.playB.visible = false; 
	credits = new CreditsView(); 
	addChild(credits); 
	TweenNano.from(credits, 0.3, {x:-credits.width, onComplete:function():void{credits.addEventListener(MouseEvent.MOUSE_UP, hideCredits);}}); 
}

Schritt 29: Credits ausblenden

Wenn Sie auf den Credits-Bildschirm klicken, wird dieser zurückgeschaltet und von der Bühne entfernt.

 
private final function hideCredits(e:MouseEvent):void 
{ 
	TweenNano.to(credits, 0.3, {x:-credits.width, onComplete:function():void{titleView.creditsB.visible = true; titleView.playB.visible = true; titleView.optionsB.visible = true; credits.removeEventListener(MouseEvent.MOUSE_UP, hideCredits); removeChild(credits); credits = null;}}); 
}

Lassen Sie uns hier anhalten, um einen kurzen Test durchzuführen und sicherzustellen, dass unser Spielcode funktioniert:

Beachten Sie, dass einige Zeilen kommentiert wurden, da einige Funktionen noch nicht erstellt wurden.

Denken Sie daran, dass die Meilensteine in den Quelldateien enthalten sind. Wenn Ihre Datei diese also aus irgendeinem Grund nicht nachahmt, sehen Sie sich die Quelle an, um festzustellen, was dies verursachen kann.

Schritt 30: Spielansicht anzeigen

Die folgenden Zeilen entfernen den Titel-Bildschirm und lassen den Spiel-Bildschirm sichtbar. Es ruft auch eine Funktion auf, um das zu spielende Spiel vorzubereiten.

 
private final function showGameView(e:MouseEvent):void 
{ 
	TweenNano.to(titleView, 0.3, {y:-titleView.height, onComplete:function():void{startButtonListeners('rmv');removeChild(titleView); titleView = null;}}); 
	prepareWorms(); 
}

Schritt 31: Worms Mouse Listener

Wir verwenden hier eine for-Anweisung, um jedem Hole MovieClip auf der Bühne einen Maus-Listener hinzuzufügen. Dadurch können die Würmer angeklickt werden.

 
private final function prepareWorms():void 
{			 
	for(var i:int = 0; i < 8; i++) 
	{ 
		/* Add Mouse Listeners */ 
		 
		holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);

Schritt 32: Löcher stoppen MovieClip

Da das Loch MovieClip mehr als ein Bild enthält, muss er gestoppt werden, damit nicht alle Würmer gleichzeitig angezeigt werden.

 
		 
		/* Stop Worms At Frame 1*/ 
		 
		holes[i].gotoAndStop(1); 
	} 
	 
	startTimer(); 
}

Schritt 33: Timer starten

Dieser Timer startet den Countdown und lässt Würmer zufällig auf der Bühne erscheinen.

 
private final function startTimer():void 
{ 
	timer.addEventListener(TimerEvent.TIMER, showWorm); 
	timer.start(); 
}

Schritt 35: Überprüfen Sie, ob es fertig ist

Dieser Code prüft, ob die angezeigten Würmer das Limit noch nicht überschritten haben, und ruft einen Alarm auf.

 
private final function showWorm(e:TimerEvent):void 
{ 
	if(currentWorms == int(totalWorms)) 
	{ 
		alert(); 
	} 
	else 
	{ 
		var randomHole:int = Math.floor(Math.random() * 8); // Used to calculate which worm will appear

Schritt 36: Ändern Sie die Größe des Trefferbereichs

Der ausgewählte Trefferbereich im Optionen-Bildschirm wird hier bei jedem Wurm mithilfe der Skalierungseigenschaften von AS3 geändert.

1
2	holes[randomHole].addFrameScript(1, function(){holes[randomHole].worm.hArea.scaleX = hitSize; holes[randomHole].worm.hArea.scaleY = hitSize;});

Schritt 37: Beenden Sie die Animation, wenn Sie fertig sind

Es vergehen einige Millisekunden, in denen der Wurm sichtbar ist. Wenn der MovieClip sein letztes Bild erreicht hat, stoppt er und kehrt zum ersten Bild zurück.

 
holes[randomHole].addFrameScript(holes[randomHole].totalFrames - 1, function(){holes[randomHole].gotoAndStop(1);}); 
		holes[randomHole].play(); 
	 
		currentWorms++; 
	} 
}

Schritt 38: Wurm treffen

Diese Funktion behandelt beim Klicken auf einen Wurm im Grunde genommen einen Ton, erhöht die Punktzahl und versteckt den Wurm wieder.

 
private final function wormHit(e:MouseEvent):void 
{ 
	if(e.target.name == 'hArea' || e.target.name == 'worm') 
	{ 
		var hit:Hit = new Hit(); 
		hit.play(); 
		wormsHit++; 
		e.target.parent.gotoAndPlay(18); 
		scoreTF.text = wormsHit + '/' + totalWorms; 
	}

Schritt 39: Überprüfen Sie den Würmer Hit

Sie können einen benutzerdefinierten Bonus hinzufügen, wenn alle Würmer getroffen wurden, indem Sie die nächsten Codezeilen ändern.

 
if(totalWorms == String(wormsHit)) 
	{ 
		alert(); 
	} 
}

Schritt 40: Alarm

Diese Funktion stoppt das Spiel und zeigt das Endergebnis an. Außerdem wird ein Maus-Listener hinzugefügt, um das Spiel beim Klicken zurückzusetzen.

 
private final function alert():void 
{ 
	timer.stop(); 
		 
	var alert:AlertView = new AlertView(); 
	 
	alert.x = stage.stageWidth * 0.5; 
	alert.y = stage.stageHeight * 0.5; 
	alert.scoreTF.text = scoreTF.text; 
	alert.addEventListener(MouseEvent.MOUSE_UP, restart); 
	 
	addChild(alert); 
	TweenNano.from(alert, 0.6, {scaleX: 0.2, scaleY: 0.2, ease:Expo.easeOut}); 
}

Schritt 41: Neustart

Die nächste Funktion lädt den SWF neu, startet alle Variablen und Methoden neu und kehrt zum Titelbildschirm zurück.

 
private final function restart(e:MouseEvent):void 
{ 
	navigateToURL(new URLRequest(stage.loaderInfo.url), '_level0'); 
}

Abschluss

Wie Sie sehen können, können viele der Spielvariablen/-parameter geändert und an Ihre Bedürfnisse angepasst werden. Versuchen Sie, Ihre eigene Version des Spiels zu erstellen!

Ich hoffe dir hat dieses Tutorial gefallen, danke fürs Lesen!