Build din egen 4 Spill OOP Connect
en
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
OOP kan gjøre utviklingen raskere, og programmene kjører raskere. I denne opplæringen vil jeg vise hvordan å bygge en Action Connect 4 spill, ved hjelp av en organisert OOP tilnærming.
La oss komme i gang!
Trinn 1: Start Off
I kildefilene jeg har tatt med en connect4_start.fla fil. Start fra denne filen; det inneholder alle movieclips trengs for å fullføre opplæringen. Den inneholder 4 movieclips. En rød chip MovieClip, en gul chip MovieClip, en boardpiece MovieClip og en dialog vinner MovieClip
Trinn 2:. Lag den Connect4 Class File
Opprett en ny Actionscript-fil og lagre den med navnet Connect4. Deretter legger du til følgende kode:
pakke {import flash.display.Sprite import flash.events.MouseEvent; import flash.events.Event; import flash.geom.Point; import caurina.transitions.Tweener; public class Connect4 strekker Sprite {private Var kolonner: UINT; private Var rekker: UINT; private Var bord: Array = new Array (); private Var columnWidth: UINT; private Var rowHeight: UINT; private Var currentPlayer: uint = 1; private Var currentChip; offentlig funksjon Connect4 (kolonner: UINT, p: uint): void {this.columns = kolonner this.rows = rader columnWidth = new BoardPiece () bredde rowHeight = new BoardPiece () høyde..}}}
I denne koden blokken vi importere klasser (jeg brukte også Tweener klassen som du kan finne her eller i mine kildefilene). Vi definerer feltvariabler og vi skaper konstruktøren. Konstruktøren har to argumenter, antall kolonner og rader du ønsker å spille. Vi setter disse verdiene i våre feltvariabler.
Til slutt init vi columnWidth og rowHeight variabel. En kolonne har samme bredde som bredden på ett boardPiece (samme prinsipp for rowHeight)
Trinn 3:. DrawBoard Funksjon
Denne funksjonen vil trekke Playboard av spillet avhengig av hvor mange kolonner og rader du vil. Legg denne funksjonen til konstruktøren av Connect4 Klasse:
privat funksjon drawboard (): void {for (var i: uint = 0; i < p; i ++) {for (var j: uint = 0; j < kolonner; j ++) {var boardpiece: BoardPiece = new BoardPiece (); boardpiece.x = j * boardpiece.width; boardpiece.y = i * boardpiece.height; this.addChild (boardpiece); }}}
Trinn 4:. CreateBoardArray Funksjon
Her skaper vi en to-dimensjonal array som vil inneholde alle de stedene i styret
Vi fyller tabellen med 0-tallet. En null betyr at det ikke har vært en brikke plasseres på den posisjonen. Denne funksjonen må også legges til konstruktøren
privat funksjon createboardArray (): void {for (var i: uint = 0; i < p; i ++). {Bord [i] = [] for (var j : uint = 0; j < kolonner; j ++) {bord [i] [j] = 0; }}}
Trinn 5: putChipReady Funksjon
I denne funksjonen identifiserer vi som den nåværende spilleren er og legge den matchende chip til visningslisten. Vi gir brikken en negativ y-verdi, så det dukker opp over vår Playboard. Igjen, legge denne funksjonen til konstruktøren
privat funksjon putChipReady (). Void {if (currentPlayer == 1) {currentChip = new RedChip (); } Else {currentChip = new YellowChip (); } CurrentChip.y = -50; this.addChildAt (currentChip, 0);}
Trinn 6: enterFrameHander
På hver ramme denne funksjonen beregner kolonnen der dagens chip skulle falle hvis du klikker på det aktuelle tidspunktet. På den måten er det lettere for brukeren å gjøre et trekk. Funksjonen calculateColumn (forklart i neste trinn) returnerer kolonne du svever.
Så vi beregne ny x plasseringen av chip. Derfor multipliserer vi currentColumn med kolonnebredden. Fordi registreringspunktet av sjetongene i sentrert vi må legge til kolonnebredden delt på 2.
Til slutt tween vi dagens chip til posisjon vi bare beregnet
privat funksjon enterFrameHandler. (E: Hendelses) : void {var currentcolumn: uint = calculateColumn (this.mouseX); Var xPosChip: uint = currentcolumn * columnWidth + columnWidth /2 Tweener.addTween (currentChip, {x: xPosChip, tid: 0,3, overgang: "Lineair"}); <}
Legg enter ramme arrangementet lytteren til konstruktøren. br> this.addEventListener (Event.ENTER_FRAME, enterFrameHandler);
Trinn 7:. calculateColumn Funksjon
Dette helpfunction får x posisjonen til musen og returnerer hvilken kolonne kamper
Hvis din muse x posisjon er mindre enn null så vi tilbake den første kolonnen (0 fordi matrisen er null-indeksert). Hvis musen x posisjon er mer enn bredden på brettet vi tilbake den siste kolonnen. Hvis musen x posisjon er på brettet vi devide x posisjon ved bredden av en kolonne
privat funksjon calculateColumn (mouseXPos):. Uint {if (mouseXPos < 0) {return 0; } Else if (mouseXPos > this.width) {return kolonner - 1; } Else {return mouseXPos /columnWidth; }}
Trinn 8:. boardClick Funksjon
Denne funksjonen sjekker først hvilken kolonne du klikket (av funksjon beregne kolonne som jeg forklarte i forrige trinn bruker)
for Hvis vi finner stedet der brikken har å falle, fyller vi at posisjon i styret array med antall gjeldende spiller (vi trenger disse tallene senere for å se etter vinneren), og vi legger den brikken med placeChip funksjon (forklart i neste trinn). Til slutt veksle vi spilleren (forklart 2 skritt videre), og vi satt en annen brikke klar. . Avkastningen gjør at vi avslutter for Legg den klikker hendelsen lytteren til konstruktøren Denne funksjonen blir raden (posisjon x) og kolonne (position.y) hvor brikken har å gå inn, beregner deretter y- og x avstand distanceY. du multipliserer raden du klikket med høyden på en rad. Fordi registreringspunktet av sjetongene er sentrert må vi legge raden høyde delt på 2. distanceX bruker det samme prinsippet. Så vi bruker tweener til tween gjeldende chip til høyre . posisjon Denne funksjonen er ganske rett fram. Hvis den gjeldende spilleren er en bryter til spiller 2, annet bytte tilbake til spiller 1. På dette punktet kan du allerede plassere chips, men det er foreløpig ingen sjekk for å se om en spiller klarte å koble 4 chips. Det neste trinnet er å kode denne sjekken Denne funksjonen har en argument, posisjonen til siste lagt chip og returnere sant eller usant. Funksjonen bruker 4 underfunksjoner som hver sjekker for en vinner. Vi passerer gjennom posisjon for hver underfunksjon. . Hvis en av de 4 returnerer sant vi har en vinner For å se etter en vertikal koble fire vi bare nødt til å se på chips under den nåværende chip. (Det kan ikke være en chip over gjeldende chip på dette punktet). Først sjekker vi om det er 3 steder under dagens chip. Hvis ikke, er det ingen måte du kan koble til fire, og vi return false. Hvis det er 3 eller flere steder under, starter vi en løkke som går gjennom 3 rader under. Hvis en av chips under er fra den andre spilleren vi ikke koble til 4 chips (return false) Det vi gjør her er først sjekke brikkene til venstre på dagens chip og deretter chips på høyre side Derfor init vi en teller med en (chip du bare plassert er den første i rekken). Så går vi til venstre til vi når en chip av en annen spiller, og imens vi telle chips av den aktuelle spilleren. Vi gjør det samme for høyre side. Så hvis vår teller er 4 eller mer vi har koblet 4 chips (return true) Dette fungerer ligner på den horisontale sjekk. Den eneste forskjellen er at vi nå sjekker diagonalt Først vi gå til venstre oppover. Vi telle chips av den aktuelle spilleren, og hvis vi kommer over en chip av den andre spilleren vi bryte sløyfen. Å sikre at vi ikke går utenfor vårt styre rekke mens Vi bruker det samme prinsippet for å sjekke posisjonene rett nedover Denne funksjonen er nesten identisk med den forrige funksjonen. Den eneste forskjellen er i regi av diagonalen vi sjekke Nå må vi implementere koden vi nettopp skrev. Etter at vi plasserer brikken vi se etter en vinner. Hvis vi har en vinner vi fjerne våre EventListeners så du kan ikke plassere en ny chip og vi viser hvem som vant (forklart i neste trinn). . Hvis vi ikke har en vinner vi togglePlayer og sette en ny chip klar Denne funksjonen legger rett og slett en ny forekomst av WinnerDialog som du finner i biblioteket. . Hvis gjeldende spilleren er 1 røde vinner, Else gule vinner Opprett en ny Actionscript-fil og lagre den med navnet "Application" I denne klassen vi legger en forekomst av Connect4 Class vi skrev til visningslisten. Ikke glem konstruktøren argumentene Til slutt klikker du på scenen og sett Document klasse til "Søknad". Du har akkurat lært hvordan du oppretter en koble fire spill, og hvordan flere dimensjoner kan gjøre livet mye enklere! Jeg håper du likte den opplæringen og takk for at du leser.
looper gjennom alle radene og så snart board [rad] [columnclicked] == 0
vi vet brikken må plasseres på det stedet. Husk 0 i BOARD matrisen betyr at plasseringen er tom.
sløyfe
privat funksjon boardClick (e: MouseEvent): void {var columnclicked: uint = calculateColumn (e.currentTarget.mouseX); for (var rad: int = p-1; p > = 0; row--) {if (board [rad] [columnclicked] == 0) {bord [rad] [columnclicked] = currentPlayer; placeChip (ny Point (rad, columnclicked)) togglePlayer (); putChipReady (); tilbake}}}
this.addEventListener (MouseEvent.CLICK, boardClick)
Trinn 9:. placeChip Funksjon
privat funksjon placeChip (posisjoner: Point): void {var distanceY: int = position.x * rowHeight + rowHeight /2; Var distanceX: int = position.y * columnWidth + columnWidth /2; Tweener.addTween (currentChip, {x: distanceX, y: distanceY, tid: 0,7, overgang: "easeOutBounce"});}
Trinn 10: togglePlayer Funksjon
privat funksjon togglePlayer (): void {if (currentPlayer == 1) {currentPlayer = 2} else {currentPlayer = 1}}
Trinn 11:. CheckForWinner Funksjon
privat funksjon checkForWinner (posisjoner: Point): Boolean {if (verticalCheck (posisjon)) return true; if (horizontalCheck (posisjon)) return true; if (leftUpDiagonalCheck (posisjon)) return true; if (rightUpDiagonalCheck (posisjon)) return true; return false;}
Trinn 12: verticalCheck
hvis loopen kan bli ferdig vi vet det finnes fire koblet (return true)
funksjon verticalCheck (posisjon..: Point): Boolean {var rad: uint = position.x; Var kolonne: uint = position.y; Var spiller: uint = board [rad] [kolonne]; if (p > = rader - 3) {return false; } For (var i: uint = rad + 1; i < = p + 3; i ++) {if (! Board [i] [kolonne] = spiller) {return false; }} Return true;}
Trinn 13:. HorizontalCheck
funksjon horizontalCheck (posisjoner: Point): boolsk {var rad. Uint = position.x; Var kolonne: uint = position.y; Var spiller: uint = board [rad] [kolonne]; Var teller: uint = 1; for (var i: uint = column-1; i > = 0; I--) {if (! board [rad] [i] = spiller) {break; } Teller ++; } For (var j: uint = kolonne + 1; j < kolonner; j ++) {if (! Board [rad] [j] = spiller) {break; } Teller ++; } If (teller > = 4) {return true; } Else {return false; }}
Trinn 14: leftUpDiagonalCheck
sløyfe må stoppe når vår rad eller vår kolonne er mindre enn 0.
funksjon leftUpDiagonalCheck (posisjoner: Point): Boolean {var spiller. uint = board [position.x] [position.y]; Var rad: Number = position.x - 1; Var kolonne: Number = position.y - 1; Var teller: uint = 1; while (rad > = 0 & & kolonne > = 0) {if (board [rad] [kolonne] == spiller) {teller ++; rad--; søyle--; } Else {break; }} P = position.x + 1; column = position.y + 1; mens (rad < p & & kolonne < kolonner) {if (board [rad] [kolonne] == spiller) {teller ++; rad ++; kolonne ++; } Else {break; }} If (teller > = 4) {return true; } Else {return false; }}
Trinn 15: rightUpDiagonalCheck
privat funksjon rightUpDiagonalCheck (posisjoner: Point): Boolean {var spiller. Uint = board [position.x] [position.y]; Var rad: Number = position.x + 1; Var kolonne: Number = position.y - 1; Var teller: uint = 1; while (rad < p & & kolonne > = 0) {if (board [rad] [kolonne] == spiller) {teller ++; rad ++; søyle--; } Else {break; }} P = position.x - 1; column = position.y + 1; while (rad > = 0 & & kolonnen < kolonner) {if (board [rad] [kolonne] == spiller) {teller ++; rad--; kolonne ++; } Else {break; }} If (teller > = 4) {return true; } Else {return false; }}
Trinn 16: Oppdatere boardClick Function
privat funksjon boardClick (e: MouseEvent): void {var columnclicked: uint = calculateColumn (e.currentTarget.mouseX); for (var rad: int = p-1; p > = 0; row--) {if (board [rad] [columnclicked] == 0) {bord [rad] [columnclicked] = currentPlayer; placeChip (ny Point (rad, columnclicked)) if (checkForWinner (ny Point (rad, columnclicked))) {this.removeEventListener (Event.ENTER_FRAME, enterFrameHandler); this.removeEventListener (MouseEvent.CLICK, boardClick); showWinnerDialog (); } Else {togglePlayer (); putChipReady (); } Avkastning}}}
Trinn 17: showWinnerDialog Funksjon
privat funksjon showWinnerDialog (): void {dialogen var: WinnerDialog = new WinnerDialog (); Var vinneren: String = (currentPlayer == 1)? "rød": "gul" dialog.txtWinner.text = vinneren + "vinner !!!"; dialog.x = (this.width - dialog.width) /2; dialog.y = 100; this.addChild (dialog);}
Trinn 18:. opprette dokumentet Class
pakke {import flash.display.MovieClip.; import flash.events.Event; public class Søknad strekker MovieClip {offentlig funksjon Application (): void {var Connect4: Connect4 = new Connect4 (7,6); connect4.x = (stage.stageWidth - connect4.width) /2; connect4.y = (stage.stageHeight - connect4.height) /2 + 50; this.addChild (Connect4); }}}
Konklusjon