Share
OOP kann die Entwicklung beschleunigen und Ihre Anwendungen laufen schneller. In diesem Lernprogramm werde ich demonstrieren, wie ein ActionScript Connect 4-Spiel mit einem organisierten OOP-Ansatz erstellt wird.
Lass uns anfangen!
In den Quelldateien habe ich eine connect4_start.fla-Datei eingefügt. Beginnen Sie mit dieser Datei. Es enthält alle Movieclips, die zum Beenden des Lernprogramms erforderlich sind. Es enthält 4 Movieclips. Ein Red Chip MovieClip, ein Yellow Chip MovieClip, ein Boardpiece MovieClip und ein Siegerdialog MovieClip.
Erstellen Sie eine neue ActionScript-Datei und speichern Sie sie unter dem Namen Connect4. Fügen Sie dann den folgenden Code hinzu:
package import flash.display.Sprite import flash.events.MouseEvent; import flash.events.Event; import flash.geom.Point; caurina.transitions.Tweener importieren; public class Connect4 erweitert Sprite private var column: uint; private var-Zeilen: uint; private var board: Array = neues Array (); private var columnWidth: uint; private var rowHöhe: uint; private var currentPlayer: uint = 1; private var currentChip; public function Connect4 (Spalten: uint, Zeilen: uint): void this.columns = Spalten this.rows = Zeilen columnWidth = new BoardPiece (). width rowHeight = new BoardPiece (). height
In diesem Codeblock importieren wir die Klassen (ich habe auch die Tweener-Klasse verwendet, die Sie hier oder in meinen Quelldateien finden). Wir definieren die Feldvariablen und erstellen den Konstruktor. Der Konstruktor hat zwei Argumente, die Anzahl der Spalten und Zeilen, die Sie für Ihr Spiel wünschen. Wir setzen diese Werte in unsere Feldvariablen ein.
Schließlich initialisieren wir die Variable columnWidth und rowHeight. Eine Spalte hat die gleiche Breite wie ein BoardPiece (gleiches Prinzip für rowHeight).
Diese Funktion zeichnet das Playboard des Spiels, je nachdem, wie viele Spalten und Zeilen Sie wünschen. Fügen Sie dem Konstruktor der Connect4-Klasse diese Funktion hinzu:
private Funktion drawboard (): void for (var i: uint = 0; i < rows; i++) for(var j:uint = 0; j < columns; j++) var boardpiece:BoardPiece = new BoardPiece(); boardpiece.x = j * boardpiece.width; boardpiece.y = i * boardpiece.height; this.addChild(boardpiece);
Hier erstellen wir ein zweidimensionales Array, das alle Positionen der Platine enthält.
Wir füllen das Array mit 0. Eine Null bedeutet, dass auf dieser Position kein Chip platziert wurde. Diese Funktion muss auch zum Konstruktor hinzugefügt werden.
private Funktion createboardArray (): void for (var i: uint = 0; i < rows; i++) board[i] = [] for(var j:uint=0; j < columns; j++) board[i][j] = 0;
In dieser Funktion identifizieren wir den aktuellen Spieler und fügen den passenden Chip zur Anzeigeliste hinzu. Wir geben dem Chip einen negativen y-Wert, damit er über unserem Spielbrett angezeigt wird. Fügen Sie diese Funktion erneut dem Konstruktor hinzu.
private Funktion putChipReady (): void if (currentPlayer == 1) currentChip = new RedChip (); else currentChip = new YellowChip (); currentChip.y = -50; this.addChildAt (currentChip, 0);
Bei jedem Frame berechnet diese Funktion die Spalte, in die der aktuelle Chip fallen soll, wenn Sie in diesem Moment klicken. Auf diese Weise ist es für den Benutzer einfacher, sich zu bewegen. Die Funktion berechneColumn (erklärt im nächsten Schritt) gibt die Spalte zurück, die Sie schweben.
Dann berechnen wir die neue x-Position des Chips. Deshalb multiplizieren wir die aktuelle Spalte mit der Spaltenbreite. Da der Registrierungspunkt der Chips zentriert ist, müssen Sie die Spaltenbreite durch 2 dividieren.
Schließlich tweenen wir den aktuellen Chip auf die gerade berechnete Position.
private Funktion enterFrameHandler (e: Event): void var currentcolumn: uint = berechneColumn (this.mouseX); var xPosChip: uint = currentcolumn * columnWidth + columnWidth / 2 Tweener.addTween (currentChip, x: xPosChip, Zeit: 0,3, Übergang: "lineair");
Fügen Sie dem Konstruktor den Ereignisrahmen "enter frame" hinzu.
this.addEventListener (Event.ENTER_FRAME, enterFrameHandler);
Diese Hilfefunktion ruft die x-Position der Maus ab und gibt die entsprechende Spalte zurück.
Wenn die x-Position Ihrer Maus kleiner als Null ist, wird die erste Spalte zurückgegeben (0, da das Array nullindexiert ist). Wenn Ihre Maus x-Position mehr als die Breite Ihres Boards ist, geben wir die letzte Spalte zurück. Wenn sich die x-Position Ihrer Maus auf der Tafel befindet, teilen wir die x-Position durch die Breite einer Spalte.
private Funktion berechneColumn (mouseXPos): uint if (mouseXPos < 0) return 0; else if(mouseXPos > this.width) Rückgabespalten - 1; else return mouseXPos / columnWidth;
Diese Funktion prüft zuerst, auf welche Spalte Sie geklickt haben (mithilfe der Funktion zum Berechnen von Spalten, die ich im vorherigen Schritt erläutert habe)..
Das zum durchläuft alle Reihen und sobald board [row] [columnclicked] == 0 Wir wissen, dass der Chip an diesem Ort platziert werden muss. Denken Sie an 0 im BOARD-Array, wenn der Speicherort leer ist.
Wenn wir den Ort finden, an dem der Chip fallen muss, füllen wir diese Position im Board-Array mit der Nummer des aktuellen Spielers (wir benötigen diese Nummern später, um nach dem Gewinner zu suchen) und platzieren diesen Chip mit der Funktion placeChip ( im nächsten Schritt erklärt).
Schließlich schalten wir den Spieler um (erklärt zwei Schritte weiter) und wir stellen einen weiteren Chip bereit. Die Rückkehr stellt sicher, dass wir das verlassen zum Schleife.
private function boardClick (e: MouseEvent): void var columnclicked: uint = berechneColumn (e.currentTarget.mouseX); for (var row: int = row-1; row> = 0; row--) if (board [row] [columnclicked] == 0) board [row] [columnclicked] = currentPlayer; placeChip (neuer Punkt (Zeile, Spalte geklickt)) togglePlayer (); putChipReady (); Rückkehr
Fügen Sie dem Konstruktor den Click-Event-Listener hinzu.
this.addEventListener (MouseEvent.CLICK, boardClick)
Diese Funktion ruft die Zeile (Position.x) und die Spalte (Position.y) ab, in die der Chip eintreten muss, und berechnet dann die y- und x-Entfernung.
distanceY: Sie multiplizieren die angeklickte Reihe mit der Höhe einer Reihe. Da der Registrierungspunkt der Chips zentriert ist, müssen Sie die Zeilenhöhe durch 2 dividieren.
distanceX verwendet das gleiche Prinzip.
Dann verwenden wir Tweener, um den aktuellen Chip an die richtige Position zu bringen.
private Funktion placeChip (Position: Punkt): void var distanceY: int = position.x * rowHeight + rowHeight / 2; var distanceX: int = position.y * columnWidth + columnWidth / 2; Tweener.addTween (currentChip, x: distanceX, y: distanceY, time: 0.7, Übergang: "easeOutBounce");
Diese Funktion ist ziemlich einfach. Wenn der aktuelle Spieler 1 ist, wechseln Sie zu Spieler 2, andernfalls kehren Sie zu Spieler 1 zurück.
private Funktion togglePlayer (): ungültig if (currentPlayer == 1) currentPlayer = 2 else currentPlayer = 1
Zu diesem Zeitpunkt können Sie die Chips bereits platzieren. Derzeit wird jedoch nicht geprüft, ob ein Spieler es geschafft hat, 4 Chips anzuschließen. Der nächste Schritt besteht darin, diese Prüfung zu codieren.
Diese Funktion hat 1 Argument, die Position des zuletzt platzierten Chips und gibt wahr oder falsch zurück. Die Funktion verwendet 4 Unterfunktionen, von denen jede auf einen Gewinner prüft.
Wir durchlaufen die Position für jede Unterfunktion. Wenn eine der 4 wahr ist, haben wir einen Gewinner.
private Funktion checkForWinner (position: Point): Boolean if (verticalCheck (position)) gibt true zurück; if (horizontalCheck (Position)) gibt true zurück; if (leftUpDiagonalCheck (Position)) gibt true zurück; if (rightUpDiagonalCheck (Position)) gibt true zurück; falsch zurückgeben;
Um zu prüfen, ob eine vertikale Verbindung 4 vorhanden ist, müssen wir nur die Chips unter dem aktuellen Chip betrachten. (Zu diesem Zeitpunkt kann sich kein Chip über dem aktuellen Chip befinden.).
Zuerst prüfen wir, ob sich 3 Positionen unterhalb des aktuellen Chips befinden. Wenn nicht, können Sie keine Verbindung zu 4 herstellen, und wir geben falsch zurück.
Wenn sich 3 oder mehr Orte darunter befinden, beginnen wir eine Schleife, die durch die 3 Reihen darunter verläuft. Wenn einer der darunter liegenden Chips vom anderen Spieler stammt, haben wir keine 4 Chips verbunden (return false).
Wenn die Schleife beendet werden kann, wissen wir, dass 4 verbunden sind (Rückgabe wahr)..
Funktion verticalCheck (position: Point): Boolean var Zeile: uint = position.x; var spalte: uint = position.y; var player: uint = board [Reihe] [Spalte]; if (zeile> = zeilen - 3) return false; für (var i: uint = Zeile + 1; i <= row + 3; i++) if (board[i][column] != player) return false; return true;
Was wir hier tun, ist zuerst die Chips auf der linken Seite des aktuellen Chips und dann die Chips auf der rechten Seite zu überprüfen.
Daher setzen wir einen Zähler mit 1 (der Chip, den Sie gerade platziert haben, ist der erste in der Reihe). Dann gehen wir nach links, bis wir den Chip eines anderen Spielers erreichen, und zählen in der Zwischenzeit die Chips des aktuellen Spielers.
Wir machen das Gleiche für die rechte Seite. Wenn also unser Zähler 4 oder mehr ist, haben wir 4 Chips verbunden (Rückgabe wahr).
Accentsconagua
