Bygg ditt eget OOP Connect 4 Game

OOP kan gjøre utviklingen raskere, og programmene dine går raskere. Under denne opplæringen demonstrerer jeg hvordan man bygger et ActionScript Connect 4-spill, ved hjelp av en organisert OOP-tilnærming.

La oss komme i gang!




Trinn 1: Start av

I kildefilene har jeg tatt med en connect4_start.fla-fil. Start fra denne filen; den inneholder alle filmklippene som trengs for å fullføre opplæringen. Den inneholder 4 filmklipp. En rødchip filmclip, en gulchip-filmklipp, et stykke stykke filmklipp og en vinnerdialogfilmclip.

Trinn 2: Opprett Connect4 Class-filen

Opprett en ny ActionScript-fil og lagre den med navnet Connect4. Legg deretter til følgende kode:

 pakke import flash.display.Sprite import flash.events.MouseEvent; importere flash.events.Event; importer flash.geom.Point; importere caurina.transitions.Tweener; offentlig klasse Connect4 utvider Sprite private var kolonner: uint; private var rader: uint; private varbrett: Array = new Array (); private var columnWidth: uint; privat var rowHeight: uint; privat var currentPlayer: uint = 1; privat var currentChip; offentlig funksjon Connect4 (kolonner: uint, rader: uint): void this.columns = kolonner this.rows = rader columnWidth = new BoardPiece (). width rowHeight = nytt BoardPiece (). height

I denne kodeblokken importerer vi klassene (jeg brukte også Tweener-klassen som du finner her eller i kildefilene mine). Vi definerer feltvariablene og vi lager konstruktøren. Konstruktøren har to argumenter, antall kolonner og rader du vil ha for spillet ditt. Vi legger disse verdiene i våre feltvariabler.

Endelig initierer vi kolonnen Width og rowHeight-variabelen. En kolonne har samme bredde som bredden på ett bordPiece (samme prinsipp for rowHeight).

Trinn 3: drawBoard-funksjon

Denne funksjonen tegner spillbrettet av spillet, avhengig av hvor mange kolonner og rader du vil ha. Legg til denne funksjonen til konstruktøren til Connect4-klassen:

 private funksjonstegn (): void for (var jeg: 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);   

Trinn 4: createBoardArray-funksjon

Her oppretter vi en 2-dimensjonal matrise som vil inneholde alle plasseringene av brettet.

Vi fyller matrisen med 0 er. Et null betyr at det ikke har vært en chip plassert på den posisjonen. Denne funksjonen må også legges til konstruktøren.

 privat funksjon createboardArray (): void for (var jeg: uint = 0; jeg < rows; i++)  board[i] = [] for(var j:uint=0; j < columns; j++)  board[i][j] = 0;   

Trinn 5: putChipReady-funksjon

I denne funksjonen identifiserer vi hvem den nåværende spilleren er og legger til den tilhørende brikken til visningslisten. Vi gir brikken en negativ y-verdi slik at den kommer opp over våre spillbrett. Nok en gang, legg til 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 beregner denne funksjonen kolonnen hvor nåværende brikke skal falle hvis du klikker i det øyeblikket. På den måten er det lettere for brukeren å gjøre et trekk. Funksjonen beregne Kolonne (forklart i neste trinn) returnerer kolonnen du svever.

Da beregner vi den nye x-stillingen på brikken. Derfor multipliserer vi nåværende kolonne med kolonnebredde. Fordi registreringspunktet til flisene er sentrert, må vi legge til kolonnebredden dividert med 2.

Til slutt tween vi den nåværende brikken til stillingen vi nettopp har beregnet.

 privat funksjon enterFrameHandler (e: Event): 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 til innrammingsbegivenhetslytteren til konstruktøren.

 this.addEventListener (Event.ENTER_FRAME, enterFrameHandler);

Trinn 7: Kalkuler Kolonnefunksjon

Denne hjelpfunksjonen får x-posisjonen til musen og returnerer hvilken kolonne som passer.

Hvis musen x-posisjonen er mindre enn null, returnerer vi den første kolonnen (0 fordi array er nullindeksert). Hvis musen x-posisjonen er mer enn bredden på brettet, returnerer vi den siste kolonnen. Hvis musen x-posisjonen er på tavlen, fordeler vi x-stillingen med bredden på en kolonne.

 Private funksjonen beregne Kolonne (mouseXPos): uint if (mouseXPos < 0)  return 0;  else if(mouseXPos > this.width) retur kolonner - 1;  ellers return mouseXPos / columnWidth; 

Trinn 8: BoardClick Funksjon

Denne funksjonen kontrollerer først hvilken kolonne du klikket på (ved å bruke beregne kolonnefunksjonen som jeg forklarte i forrige trinn).

De til løkker gjennom alle rader og så snart som brett [rad] [columnclicked] == 0 Vi vet at brikken må plasseres på den plasseringen. Husk 0 i BOARD-arrayet betyr at plasseringen er tom.

Hvis vi finner stedet der brikken må falle, fyller vi den posisjonen i brettet med nummeret til gjeldende spiller (vi trenger disse tallene senere for å sjekke for vinneren) og vi plasserer den brikken med placeChip-funksjonen ( forklart i neste trinn).

Endelig skifter vi spilleren (forklart 2 trinn videre) og vi legger en ny chip klar. Returen sørger for at vi forlater til sløyfe.

 privat funksjonstavleClick (e: MouseEvent): void var columnclicked: uint = calculateColumn (e.currentTarget.mouseX); for (var rad: int = rader-1; rad> = 0; rad--) hvis (brett [rad] [columnclicked] == 0) brett [rad] [columnclicked] = currentPlayer; placeChip (nytt punkt (rad, columnclicked)) togglePlayer (); putChipReady (); komme tilbake   

Legg til klikkbegivenhetslytteren til konstruktøren.

 this.addEventListener (MouseEvent.CLICK, boardClick)

Trinn 9: placeChip-funksjon

Denne funksjonen får raden (posisjon.x) og kolonne (posisjon.y) der brikken må angis, og beregner deretter y- og x-avstanden.

avstand: du multipliserer raden du klikket med høyden på en rad. Fordi registreringspunktet til sjetongene er sentrert, må vi legge til radhøyden delt med 2.

distanceX bruker samme prinsipp.

Da bruker vi tweener til å tween den nåværende brikken til riktig posisjon.

 privat funksjon stedChip (posisjon: punkt): tomt var avstandY: int = position.x * rowHeight + rowHeight / 2; var distanceX: int = position.y * columnWidth + columnWidth / 2; Tweener.addTween (currentChip, x: distanceX, y: distanceY, time: 0.7, transition: "easeOutBounce"); 

Trinn 10: Bytt spiller Funksjon

Denne funksjonen er ganske rett frem. Hvis den gjeldende spilleren er 1 bryter til spiller 2, skift ellers tilbake til spiller 1.

 privat funksjon togglePlayer (): void if (currentPlayer == 1) currentPlayer = 2 else currentPlayer = 1

På dette punktet kan du allerede plassere sjetongene, men det er for øyeblikket ingen sjekk for å se om en spiller klarte å koble til 4 sjetonger. Det neste trinnet er å kode denne sjekken.

Trinn 11: CheckForWinner Funksjon

Denne funksjonen har 1 argument, posisjonen til den siste plasserte brikken og returnerer sann eller falsk. Funksjonen bruker 4 underfunksjoner som hver kontrollerer for en vinner.

Vi går gjennom stillingen for hver underfunksjon. Hvis en av de 4 returnerer sant, har vi en vinner.

 privat funksjon checkForWinner (posisjon: Point): Boolsk hvis (vertikalCheck (posisjon)) returner sann; hvis (horisontalCheck (posisjon)) returnere sann; hvis (leftUpDiagonalCheck (posisjon)) returnere sant; hvis (rightUpDiagonalCheck (posisjon)) returnere sant; returner falsk; 

Trinn 12: VertikalCheck

For å se etter vertikal tilkobling 4 må vi bare se på sjetongene under den nåværende brikken. (Det kan ikke være en brikke over den nåværende brikken på dette punktet).

Først sjekker vi om det er 3 steder under dagens chip. Hvis ikke, det er ingen måte du kan koble til 4 og vi returnerer falsk.

Hvis det er 3 eller flere steder under, starter vi en sløyfe som går gjennom de tre radene under. Hvis en av sjetongene er fra den andre spilleren, knytter vi ikke 4 sjetonger (returner falsk).
Hvis sløyfen kan bli ferdig vet vi at det er 4 tilkoblet (retur sant).

 funksjon vertikalCheck (posisjon: punkt): Boolsk var rad: uint = posisjon.x; var kolonne: uint = position.y; var spiller: uint = brett [rad] [kolonne]; hvis (rad> = rader - 3) return false;  for (var i: uint = rad + 1; i <= row + 3; i++)  if (board[i][column] != player)  return false;   return true; 

Trinn 13: HorisontalCheck

Det vi gjør her er først å sjekke sjetongene til venstre for dagens chip og deretter sjetongene på høyre side.

Derfor starter vi en teller med 1 (den sjetongen du nettopp har plassert er den første i raden). Så går vi til venstre til vi når en annen spiller, og i mellomtiden teller vi nåværende chips.

Vi gjør det samme til høyre side. Så hvis telleren vår er 4 eller mer, har vi koblet 4 chips (retur sant).

 fungere horisontalt Kontroll (posisjon: punkt): Boolsk var rad: uint = posisjon.x; var kolonne: uint = position.y; var spiller: uint = brett [rad] [kolonne]; var-counter: uint = 1; for (var jeg: uint = kolonne-1; i> = 0; i--) hvis (brett [rad] [i]! = spiller) break;  counter ++;  for (var j: uint = kolonne + 1; j= 4) return true;  ellers return false; 

Trinn 14: leftUpDiagonalCheck

Disse funksjonene ligner den horisontale kontrollen. Den eneste forskjellen er at vi nå sjekker diagonalt.

Først går vi til venstre oppover: vi teller spenningen til den nåværende spilleren, og hvis vi kommer over en brikke fra den andre spilleren, bryter vi løkken. For å være sikker på at vi ikke går utenfor vårt brettargruppe samtidig som sløyfe må stoppe når vår rad eller kolonne er mindre enn 0.

Vi bruker samme prinsipp for å sjekke posisjonene helt nede.

 funksjon leftUpDiagonalCheck (posisjon: Point): Boolean var spiller: uint = brett [posisjon.x] [posisjon.y]; var rad: tall = posisjon.x - 1; var kolonne: tall = posisjon.y - 1; var-counter: uint = 1; mens (rad> = 0 && kolonne> = 0) hvis (brett [rad] [kolonne] == spiller) counter ++; rad--; kolonne--;  annet break;  rad = posisjon.x + 1; kolonne = posisjon.y + 1; mens (rad < rows && column < columns)  if (board[row][column] == player)  counter++; row++; column++;  else  break;   if(counter >= 4) return true;  ellers return false; 

Trinn 15: rightUpDiagonalCheck

Denne funksjonen er nesten identisk med den forrige funksjonen. Den eneste forskjellen er retningen til diagonalen vi sjekker.

 privat funksjon rightUpDiagonalCheck (posisjon: punkt): boolsk var spiller: uint = brett [posisjon.x] [posisjon.y]; var raden: tall = posisjon.x + 1; var kolonne: tall = posisjon.y - 1; var-counter: uint = 1; mens (rad < rows && column >= 0) hvis (brett [rad] [kolonne] == spiller) counter ++; rad ++; kolonne--;  annet break;  rad = posisjon.x - 1; kolonne = posisjon.y + 1; mens (rad> = 0 && kolonne < columns)  if (board[row][column] == player)  counter++; row--; column++;  else  break;   if(counter >= 4) return true;  ellers return false; 

Trinn 16: Oppdatere styretKlikk funksjon

Nå må vi implementere koden vi nettopp skrev. Etter at vi legger brikken, ser vi etter en vinner. Hvis vi har en vinner, fjerner vi EventListeners, slik at du ikke kan plassere en ny brikke, og vi viser hvem som er vant (forklart i neste trinn). Hvis vi ikke har en vinner, skifter vi spilleren og setter en ny chip klar.

 privat funksjonstavleClick (e: MouseEvent): void var columnclicked: uint = calculateColumn (e.currentTarget.mouseX); for (var rad: int = rader-1; rad> = 0; rad--) hvis (brett [rad] [columnclicked] == 0) brett [rad] [columnclicked] = currentPlayer; placeChip (nytt punkt (rad, columnclicked)) hvis (checkForWinner (nytt punkt (rad, columnclicked))) this.removeEventListener (Event.ENTER_FRAME, enterFrameHandler); this.removeEventListener (MouseEvent.CLICK, boardClick); showWinnerDialog ();  ellers togglePlayer (); putChipReady ();  komme tilbake   

Trinn 17: showWinnerDialog Funksjon

Denne funksjonen legger ganske enkelt til en ny forekomst av WinnerDialog som du finner i biblioteket. Hvis den nåværende spilleren er 1 rød vinner, vinner andre gule.

 privat funksjon showWinnerDialog (): void var dialog: WinnerDialog = new WinnerDialog (); var vinner: String = (currentPlayer == 1)? "rød": "gul" dialog.txtWinner.text = vinner + "vinner !!!"; dialog.x = (this.width - dialog.width) / 2; dialog.y = 100; this.addChild (dialog); 

Trinn 18: Opprett dokumentklassen

Opprett en ny ActionScript-fil og lagre den med navnet "Application".

I denne klassen legger vi til en forekomst av Connect4-klassen som vi skrev til visningslisten. Ikke glem konstruktørens argumenter.

 pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse Søknad utvider MovieClip offentlig funksjon Program (): 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); 

Endelig klikker du på scenen og setter dokumentklassen til "Application".

Konklusjon

Du har nettopp lært hvordan du lager et connect 4-spill, og hvordan flere dimensjoner kan gjøre livet enklere! Jeg håper du likte opplæringen og takk for å lese.