Share
I denne Premium Tutorialen bygger vi et fantastisk BlackJack-spill fra bunnen av med Flash og AS3.
Ved hjelp av Flash-tegneverktøyene oppretter vi et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Brukeren vil kunne satse mot cpu og spille basert på tilfeldig genererte kort.
Åpne Flash og opprett et 320 piksler bredt 480 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Et fargerikt fint utseende grensesnitt vil bli vist, dette innebærer flere former, knapper, bitmaps og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Vi må opprette eller få formene til pokerkortene for å skape kortene, en enkel måte å gjøre det på, bruker en skrift.
Gå til dette nettstedet og kopier / lim inn symbolene i FLA-filen. Du kan konvertere dem til MovieClips for å håndtere dem enkelt.
Dette er hovedskjermbildet eller visningen, det vil være den første grafikken som skal vises i vårt spill, fortsett til neste trinn for å starte etableringen.
Lag et 320x480px rektangel og fyll det med følgende radiale gradient: # 2c753d, # 3b9d52.
Ved hjelp av rektangulærverktøyet og pokerformene vi opprettet før, danner vi et mønster for å gjøre vår bakgrunn bedre.
Dupliser mønsteret og ordne det for å dekke hele bakgrunnsgraden.
Du kan enten konvertere bakgrunnen til en enkelt grafikk og sentrere den eller bruke Flash-eksportmenyen til å få et skåret png-bilde. Jeg brukte png-alternativet og kom opp med noe slikt:
Konverter den endelige grafikken til MovieClip og gi den navnet bg.
For hovedvisningen bruker vi en svart gradient oven på denne bakgrunnen, dupliserer den grønne gradienten, endrer fargen til svart og alfaverdiene til (0, 70).
Velg tekstverktøyet (T), velg en skikkelig skrifttype for å skrive spilltittelen din og bruk denne radiale gradienten: # a08c66, # f6e7be.
Konverter teksten til MovieClip og bruk det neste filteret:
Du kan også legge til en pokerform som en detalj:
Verktøytipset viser brukeren en instruksjon i hovedvisningen.
Lag et 84x23px avrundet rektangel og fyll det med en # 000000 til # 333333 gradient, endre hjørneradiusen til 6.
Dupliser formen og vri den vertikalt, endre størrelsen til 80x18px og senter den i siste form.
Bruk Polystar Tool til å lage en trekant og legg den på bunnsenteret av den faktiske formen.
Til slutt legger du til en TextField (T) og senterer den.
Tid for Chips.
Begynn med en enkel svart sirkel, og bruk Linjeverktøyet (N) for å lage en prikkende hvit sirkel inni:
Bruk rektangulærverktøyet til å lage et plussymbol og bruk det til å dekorere brikken. Du kan også legge til en logo eller en annen grafikk til midten av brikken.
En hvitchip vil også bli brukt, bare endre de svarte fasongene til hvitt og omvendt.
Info-knappen vil ringe til Omvisning når du klikker.
Opprett en hvit sirkel på 16x16px og endre alfa til 15%. Bruk tekstverktøyet (T) til å skrive kursiv i.
Konverter formene til knappen og navnet på den infoButton.
Bruk Primitive Tool Rectangle til å lage en 66x86px, # 858D8F form og endre hjørneradiusen til 16.
Dupliser formen og reduser størrelsen med 4 piksler, bruk denne gradienten: #FFFDFC, #DCDDDF.
Konverter grafikken til MovieClip og bruk drop shadow filteret vi brukte før i tittelen.
Bruk den tilsvarende pokerformen og senter den i kortet.
Dupliser formen og bruk tekstverktøyet (T) til å lage en statisk tekstfelt øverst til venstre.
Gjenta denne prosessen med kortene som trengs, og bruk Export Image-funksjonen i Flash for å lage kortene i png-format. Lagre kortene i en mappe som heter Bilder.
Husk å gi dem et enkelt og beskrivende navn for å lette lastingen. Jeg har brukt to bokstaver, det første bokstaven i kortformen og tallet.
Om skjermen vil vise kreditter, år og opphavsrett til spillet.
Det vil være ganske enkelt å lage som vi allerede har alle elementene som brukes i den.
Dette er spillvisningen, den bruker den opprinnelige lysgrønne bakgrunnen og en nederste linje som viser innsatsene og balansen.
To dynamiske tekstfiler brukes, balansere og vedde. Det er også en knapp som heter stayButton, som vil få spillet til å stoppe og utføre korttester.
En verktøytipsaktig grafikk viser den faktiske poengsummen til spilleren mens samme grafikk viser en ? på forhandleren.
Bruk verktøytipsgrafikken til å lage en 30x24px-boks, opprett en dynamisk tekstfelt og gi den navnet n. Konverter dem til MovieClip og merk Eksporter for ActionScript-boksen, sett klassenavnet til CardCounter.
Innsatspanelet vil vise informasjonen om innsatsene.
Spilleren kan satse i multipler på 100 og 500.
Her er forekomstnavnene til de interaktive objektene:
Accentsconagua
hvit.svart.OK-knappen.Konverter objektene til en enkelt MovieClip og merk Eksporter for ActionScript-boksen, sett klassenavnet til BetPanel.
Dette skjermbildet vises når spillet er avgjort, eter du vinner, taper eller du når spillet over (når spilleren taper alle sjetongene).
En Dynamic TextField brukes i denne visningen vil det vise tilstanden der spillet er. Denne TextField kalles tekst, og den er inne i den sorte boksen som heter meldingsboks.
Konverter grafikkgruppen til en MovieClip og merk Eksporter for ActionScript-boksen; sett klassenavnet til AlertScreen.
Dette avslutter grafikkdelen, la ActionScript starte!
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Vi bruker en annen tween motor fra standard inkludert i flash, dette vil øke ytelsen, så vel som å være enklere å bruke.
Du kan laste ned Tween Nano fra sitt offisielle nettsted.
Pakkeordet gir deg mulighet til å organisere koden din i grupper som kan importeres av andre skript. Det anbefales å nevne dem med en liten bokstav og bruk sammenkoblinger for etterfølgende ord, for eksempel: timene mine. Det er også vanlig å navngi dem ved å bruke bedriftens nettsted: com.mycompany.classesType.myClass.
I dette eksemplet bruker vi en enkelt klasse, så det er egentlig ikke et behov for å lage en klassemappe.
pakke
Dette er klassene vi må importere for vår klasse for å jobbe, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.display.Loader; importere flash.net.URLRequest; importere flash.events.Event; importer flash.events.MouseEvent; importer com.greensock.TweenNano; importere com.greensock.easing.Elastic;
Her erklærer vi klassen ved hjelp av klasse definisjon søkeord etterfulgt av navnet vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
De strekker Søkeord definerer en klasse som er en underklasse av en annen klasse. Underklassen arver alle metodene, egenskapene og funksjonene, slik at vi kan bruke dem i vår klasse.
offentlig siste klasse Main utvider Sprite
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem.
private var aboutView: AboutView = ny OmView (); // En forekomst av om skjermbildet opprettet før privat var type: Vector.= Ny Vector. (); // Inneholder kortets formtype privat var nummer: Vector. = Ny Vector. (); // Inneholder de tilgjengelige kortnumrene private var xPos: Vector. = Ny Vector. (); // Lagrer X-posisjonene der kortene kan plasseres private var yPos: Vector. = Ny Vector. (); privat var betPanel: BetPanel = ny BetPanel (); // En forekomst av innsatsen panelet private var currentBet: int = 0; // Mengden av den nåværende innsatsen private var cardGFX: Vector. = Ny Vector. (); // Lagrer alle kortene som er lastet med privat var cardBack: CardBack = nytt CardBack (); // Instans på baksiden av et kort privat var additionalCards: int = 0; // Spillerkort lastet etter de første 2 private var dAdditionalCards: int = 0; privat var dealerCounter: CardCounter = ny CardCounter (); // Viser summen av dealerens kort private var playerCounter: CardCounter = new CardCounter (); privat var dScore: int = 0; // Lagrer summen av dealerens kort private var pScore: int = 0; privat var varsling: AlertScreen = ny AlertScreen (); // En forekomst av varselskjermen private var isNewGame: Boolean = false; // Brukes til å starte et nytt spill hvis det er sant
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av dokumentklassen.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
offentlig sluttfunksjon Hoved (): tomrom // kode ...
I konstruktørfunksjonen setter vi verdiene til vektorer som er erklært før.
offentlig sluttfunksjon Main (): void type.push ('c', 'd', 'h', 's'); number.push ('2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' '); xPos.push (97, 158, 36, 219); yPos.push (30, 330); Muselyttere legges til infoButton og mainView MovieClip, vil disse lytterne bytte mellom visninger.
offentlig sluttfunksjon Main (): void type.push ('c', 'd', 'h', 's'); number.push ('2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' '); xPos.push (97, 158, 36, 219); yPos.push (30, 330); / * Main View Lyttere * / infoButton.addEventListener (MouseEvent.MOUSE_UP, addAboutView); mainView.addEventListener (MouseEvent.MOUSE_UP, tweenMainView); Denne funksjonen fjerner infoButton og tweens the mainView opp med TweenNano; Når animasjonen er over, kalles en funksjon.
privat endelig funksjon tweenMainView (e: MouseEvent): void removeChild (infoButton); TweenNano.to (mainView, 0.4, y: -480, onComplete: removeMainView);
Den neste koden brukes til å ødelegge mainView. Det kaller også funksjonen som vil vise innsatspanelet.
privat endelig funksjon removeMainView (): void mainView.removeEventListener (MouseEvent.MOUSE_UP, removeMainView); removeChild (mainView); mainView = null; addBetPanel ();
Omvisningen vises, når brukeren klikker info-knappen på hovedskjermen. Følgende linjer håndterer det.
privat endelig funksjon addAboutView (e: MouseEvent): void aboutView.x = 0; // Tilbakestiller stillingen dersom visningen kalles igjen addChild (aboutView); TweenNano.from (ca.View, 0.4, x: -320); aboutView.addEventListener (MouseEvent.MOUSE_UP, hideAboutView); privat endelig funksjon hideAboutView (e: MouseEvent): void aboutView.removeEventListener (MouseEvent.MOUSE_UP, hideAboutView); TweenNano.to (ca.View, 0.4, x: -320, onComplete: removeAboutView); privat endelig funksjon removeAboutView (): void removeChild (aboutView);
La oss legge til innsatspanelet, dette vil bli brukt til å velge innsatsbeløpet før spillet starter.
privat endelig funksjon addBetPanel (): void / * Bet Panel * / betPanel.y = stadium.stageHeight / 2; // Senter det betPanel.white.addEventListener (MouseEvent.MOUSE_UP, makeBet); // Muselyttere betPanel.black.addEventListener (MouseEvent.MOUSE_UP, makeBet); addChild (betPanel); TweenNano.to (betPanel, 0.7, x: scene.stageWidth / 2, ease: Elastic.easeOut); / * Ok / Hold knapper gjemt / deaktivert som standard * / betPanel.okButton.visible = false; stayButton.visible = false;
De makeBet () funksjonen håndterer både hvite og svarte chips.
Den hvite brikken vil legge til 100 til innsatsen og den svarte vil legge til 500.
privat endelig funksjon makeBet (e: MouseEvent): void var balanceInt: int = int (balance.text); // Konverter balanse teksten til int var betAmount: int = 0; // Lagre beløpet som skal legges til budet / * Sjekk hvilken chip som ble klikket * / e.target.name == 'white'? betAmount = 100: betAmount = 500; / * Kontroller nok balanse * / hvis (balanceInt> = betAmount) / * Aktiver OK-knapp * / betPanel.okButton.visible = true; betPanel.okButton.addEventListener (MouseEvent.MOUSE_UP, init); currentBet + = betAmount * 2; balance.text = String (balanceInt - betAmount); balanceLP.text = balance.text; / * Gjeldende innsatstekst * / bet.text = String (currentBet); betLP.text = String (currentBet);
Denne linjen vil fjerne innsatspanelet når bruken er ferdig med å satse.
De start spill() funksjon kalles i denne koden.
privat endelig funksjon init (e: MouseEvent): void betPanel.white.removeEventListener (MouseEvent.MOUSE_UP, makeBet); betPanel.black.removeEventListener (MouseEvent.MOUSE_UP, makeBet); betPanel.okButton.removeEventListener (MouseEvent.MOUSE_UP, init); TweenNano.to (betPanel, 0.2, x: stage.stageWidth + betPanel.width / 2, onComplete: removeBetPanel); stayButton.visible = true; privat endelig funksjon removeBetPanel (): void removeChild (betPanel); start spill();
Denne koden av kode starter alle handlingene, den bruker loadCard () Fungerer for å dynamisk laste inn et tilfeldig kort, kaller poengtelleren og legger til spillkontrollens lyttere.
privat endelig funksjon startGame (): void loadCard (xPos [0], yPos [0], true); loadCard (xPos [1], yPos [0], true, true); loadCard (xPos [0], yPos [1], false); loadCard (xPos [1], yPos [1], false); loadCounter (); lytt ();
En av hovedfunksjonene i denne appen, utfører alle de nødvendige tiltakene for å laste inn et kort fra \Bilder\ mappe og plasser den i scenen.
De loadCard () funksjonen tar fire parametere:
Denne funksjonen passerer også kortpoengsverdiene til de tilsvarende variablene.
privat endelig funksjon loadCard (xp: int, yp: int, isDealer: Boolean, skjult: Boolsk = false): void var loader: Loader = new Loader (); // A Loader for å lagre bitmappen lastet cardGFX.push (loader); // Denne vektoren lagrer alle de lastede kortene var num: String = tall [Math.floor (Math.random () * 12)]; // Et tilfeldig valgt nummer av de tilgjengelige kortnumrene var urlLader: URLRequest = ny URLRequest ('images /' + String (type [Math.floor (Math.random () * 4)] + num) + '.png') ; // laster et tilfeldig kort loader.x = xp; loader.y = yp; loader.load (URLLoader); addChild (loader); hvis (skjult) cardBack.x = xp + 2; cardBack.y = yp + 1; addChild (cardBack); / * Hvis num> 10 velges j, q eller k, endrer du verdien til 10 * / hvis (int (num)> 10) num = '10'; / * Sjekk om kortene er til spiller eller forhandler * / hvis (isDealer) dScore + = int (num); dealerCounter.n.text = String (dScore); ellers pScore + = int (num); playerCounter.n.text = String (pScore); Selvfølgelig kan du gjøre dette mye mer komplekst og realistisk ved å generere en matrise som inneholder verdier for en hel kortstokk (eller flere), "shuffle" dem og håndtere dem etter behov, men den enkle tilfeldige metoden vi brukte her er bra for våre formål.
De loadCounter () funksjonen vil legge til CardCounter-forekomstene og plassere dem i riktig posisjon. Verdiene er hentet fra poengsvariablene.
privat endelig funksjon loadCounter (): void dealerCounter.x = 145; dealerCounter.y = 4; playerCounter.x = 145; playerCounter.y = 417; dealerCounter.n.text = '?'; playerCounter.n.text = String (pScore); addChild (dealerCounter); addChild (playerCounter);
Spilleren vil kunne be om et annet kort ved å dobbeltklikke på bakgrunnen. Følgende kode håndterer den funksjonen.
privat endelig funksjon treff (e: MouseEvent): void loadCard (xPos [2 + additionalCards], yPos [1], false); // laste et annet kort additionalCards ++; hvis (additionalCards> = 2) bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); / * Sjekk om poengsummen er over 21 * / hvis (pScore> 21) blackjack ('lost'); Knappen opphold vil kjøre denne koden når den klikkes. Det vil avsløre dealerens poengsum og ringe funksjonen som vil sjekke begge poengene.
privat endelig funksjon opphold (e: MouseEvent): void / * Gi forhandler score * / dealerCounter.n.text = String (dScore); / * Sjekk etter spiller og forhandler score * / checkScore ();
Denne funksjonen vil sammenligne scoreene til spilleren og forhandleren; Avhengig av dette vil flere kort bli lagt til eller spillet vil bli erklært vunnet eller tapt.
privat endelig funksjon checkScore (): void if (pScore < dScore) blackjack('lost'); else if(pScore > dScore && dScore < 21) hitDealer(); else if(pScore == dScore && dScore < 21 && dScore != 21) hitDealer(); else if(pScore == 21 && dScore == 21) blackjack('lost'); else if(pScore > dScore) blackjack (); Den neste funksjonen håndterer kortene som legges til forhandlerens hånd.
privat endelig funksjon hitDealer (): void loadCard (xPos [2 + dAdditionalCards], yPos [0], true); dAdditionalCards ++; / * Sjekk om poengsummen er over 21 * / hvis (dScore> 21) blackjack (); ellers checkScore ();
Musaktiverte objekter brukes til å styre spillet. Følgende funksjon legger til de nødvendige lytterne til å håndtere disse kontrollene.
En parameter brukes til å vite om lytterne vil bli lagt til eller fjernet.
private endelige funksjonslyttere (hva: String = 'add'): void if (what == 'add') bg.doubleClickEnabled = true; bg.addEventListener (MouseEvent.DOUBLE_CLICK, hit); stayButton.addEventListener (MouseEvent.MOUSE_UP, opphold); else bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); stayButton.removeEventListener (MouseEvent.MOUSE_UP, opphold);
Denne funksjonen utføres når spilleren vinner eller taper, standardparameteren er vinne.
privat endelig funksjon blackjack (e: String = 'win'): void / * Gi forhandler skjult kort * / removeChild (cardBack); / * Avslør forhandlerscore * / dealerCounter.n.text = String (dScore); / * Fjern lyttere * / lyttere ('fjern'); / * Alert Screen * / if (e == 'lost') alert.messageBox.txt.text = 'Du mistet'; else alert.messageBox.txt.text = 'Du vinn!'; / * Legg gjeldende innsats for å balansere * / balance.text = String (int (balance.text) + int (bet.text)); balanceLP.text = balance.text; / * Kontroller balansenummer * / hvis (int (balance.text)! = 0) alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); else alert.messageBox.txt.text = 'Spill over'; isNewGame = true; alert.addEventListener (MouseEvent.MOUSE_UP, start på nytt); / * Fjern nåværende innsats * / bet.text = '0'; betLP.text = '0'; currentBet = 0; addChild (varsling); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Elastic.easeOut); Ved å klikke på Alert-skjermen vil du nullstille variabler, vise objekter og andre verdier for å spille en annen runde.
Hvis isNewGame variabel er sant, vil balansen også bli tilbakestilt.
privat endelig funksjonstart (e: MouseEvent): void alert.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (varsling); dScore = 0; pScore = 0; removeChild (dealerCounter); removeChild (playerCounter); var cardsLen: int = cardGFX.length; for (var jeg: int = 0; i < cardsLen; i++) removeChild(cardGFX[i]); cardGFX.length = 0; additionalCards = 0; dAdditionalCards = 0; /* Check for new game */ if(isNewGame) balance.text = '1000'; balanceLP.text = '1000'; isNewGame = false; addBetPanel();
Sett dokumentklassen. Hvis du ikke vet hvordan du bruker det eller er litt forvirret, vennligst les denne Quick Tip.
Det endelige resultatet er et fargerikt og underholdende spill. Prøv å tilpasse det - hva med en port til en mobilenhet?
Jeg håper du likte denne opplæringen, takk for å lese!
