Share
În acest Premium Tutorial, vom construi un joc uimitor BlackJack de la zero folosind Flash și AS3.
Folosind instrumentele de desen Flash vom crea o interfață grafică foarte bună, care va fi alimentată de mai multe clase ActionScript 3.
Utilizatorul va putea paria impotriva procesorului si va juca pe baza cardurilor generate aleator.
Deschideți Flash și creați un document de 320 pixeli lățime, 480 pixeli înălțime. Setați rata cadrelor la 24fps.
Va fi afișată o interfață cu aspect frumos, care implică mai multe forme, butoane, imagini bitmap și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Va trebui să creați sau să obțineți formele cărților de poker pentru a crea cărțile, o modalitate ușoară de a face acest lucru este utilizarea unui font.
Accesați acest site web și copiați / inserați simbolurile din fișierul FLA. Puteți să le convertiți în MovieClips pentru a le trata cu ușurință.
Acesta este ecranul principal sau vizualizarea, acesta va fi primul grafic care apare în jocul nostru, continuați cu pasul următor pentru a începe crearea acestuia.
Creați un dreptunghi de 320x480px și completați-l cu următorul gradient radial: # 2c753d, # 3b9d52.
Folosind instrumentul dreptunghiular și formele de poker pe care le-am creat înainte, vom forma un model pentru a face ca fundalul să arate mai bine.
Duplicați modelul și aranjați-l pentru a acoperi gradientul de fond complet.
Puteți fie să vă transformați fundalul într-un singur Grafic și să îl centrați, fie să utilizați meniul de export Flash pentru a obține o imagine png feliată. Am folosit opțiunea png și am venit cu ceva de genul:
Transformați graficul final în MovieClip și denumiți-l bg.
În Vederea principală vom folosi un gradient negru pe fundalul respectiv, duplicarea gradientului verde, schimbarea culorii în negru și valorile alfa la (0, 70).
Selectați instrumentul Text (T), selectați un font bun pentru a scrie titlul jocului și aplicați acest gradient radial: # a08c66, # f6e7be.
Convertiți textul în MovieClip și aplicați următorul filtru:
De asemenea, puteți adăuga o formă de poker ca un detaliu:
Bara de instrumente va afișa utilizatorului o instrucțiune din Vizualizarea principală.
Creați un dreptunghi rotunjit de 84x23px și completați-l cu un gradient # 000000 până la # 333333, modificați raza de colț la 6.
Duplicați forma și răsturnați-o vertical, schimbați dimensiunea acesteia la 80x18 pixeli și centrați-o în ultima formă.
Utilizați Tool Polystar pentru a crea un triunghi și așezați-l în centrul fundului formei reale.
În cele din urmă, adăugați un TextField (T) și centrați-l.
Timpul pentru chips-uri.
Începeți cu un cerc negru simplu și utilizați instrumentul Linie (N) pentru a crea un cerc alb punctat în interior:
Utilizați instrumentul dreptunghi pentru a crea un simbol plus și utilizați-l pentru a decora cipul. De asemenea, puteți adăuga un logo sau orice alt grafic în centrul cipului.
Un cip alb va fi folosit, doar schimbați formele negre în alb și invers.
Butonul Informații va apela Despre vizualizare când a fost făcut clic.
Creați un cerc alb de 16x16 pixeli și modificați alfa-ul la 15%. Utilizați instrumentul text (T) pentru a scrie un text i.
Transformați formele în Button și denumiți-o infoButton.
Utilizați instrumentul Primitiv dreptunghi pentru a crea o formă 66x86px, # 858D8F și modificați raza de colț la 16.
Duplicați forma și reduceți dimensiunea acesteia cu 4 pixeli, aplicați acest gradient: #FFFDFC, #DCDDDF.
Transformați grafica în film și utilizați filtrul de umbră pe care l-am utilizat anterior în titlu.
Utilizați forma de poker corespunzătoare și centrați-o în carte.
Duplicați forma și utilizați instrumentul text (T) pentru a crea un câmp text static în colțul din stânga sus.
Repetați acest proces cu cardurile necesare și utilizați caracteristica Export Image în Flash pentru a crea cartele în format png. Salvați cardurile într-un dosar numit imagini.
Nu uitați să le oferiți un nume ușor și descriptiv pentru a facilita încărcarea. Am folosit două litere, prima literă a formei cărții și numărul.
Ecranul Despre va afișa creditele, anul și drepturile de autor ale jocului.
Va fi destul de simplu de creat deoarece deja avem toate elementele folosite în ea.
Aceasta este vizualizarea jocului, folosește fundalul original verde deschis și o bară de jos care arată pariurile și soldul.
Se utilizează două elemente dinamice de text, echilibru și pariu. Există, de asemenea, un buton numit stayButton, care va face jocul oprit și să efectueze testele cardului.
O grafică asemănătoare cu instrumentul va afișa scorul efectiv al jucătorului, în timp ce aceeași grafică va afișa a ? pe dealer.
Utilizați graficul de instrument pentru a crea o casetă de 30x24px, creați un câmp de text dinamic și denumiți-l n. Conversați-le în MovieClip și marcați caseta Export pentru ActionScript, setați numele clasei la CardCounter.
Panoul Bet va afișa informațiile despre pariuri.
Jucătorul poate paria în multipli de 100 și 500.
Iată numele instanțelor obiectelor interactive:
Accentsconagua
alb.negru.butonul OK.Conversia obiectelor la un singur filmClip și marcarea casetei Export pentru ActionScript, setați numele clasei la BetPanel.
Acest ecran va apărea când jocul a fost decis, eterul pe care îl câștigi, pierzi sau ajungi la joc (când jucătorul pierde toate jetoanele).
Un Dynamic TextField este utilizat în această vizualizare și va afișa starea în care se află jocul. Acest TextField este numit txt, și se află în cutia neagră numită messageBox.
Transformați grupul de elemente grafice într-un filmClip și marcați caseta Export pentru ActionScript; setați numele clasei la AlertScreen.
Aceasta termină partea grafică, lăsați StartScript-ul!
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Vom utiliza un motor tween diferit de cel implicit inclus în bliț, ceea ce va crește performanța și va fi mai ușor de utilizat.
Puteți descărca Tween Nano de pe site-ul său oficial.
Cuvântul cheie pentru pachete vă permite să vă organizați codul în grupuri care pot fi importate de alte scripturi, recomandându-le să le numiți începând cu o literă mică și să utilizați intercaps pentru următoarele cuvinte, de exemplu: myClasses. Este, de asemenea, obișnuit să le denumiți utilizând site-ul companiei: com.mycompany.classesType.myClass.
În acest exemplu, folosim o singură clasă, deci nu este necesar să creați un folder de clase.
pachet
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
Aici declarăm clasa utilizând clasă definirea cuvântului cheie urmat de numele pe care îl dorim pentru clasă, amintiți-vă că trebuie să salvați fișierul utilizând acest nume.
extinde cuvântul cheie definește o clasă care este o subclasă a unei alte clase. Subclasa moștenește toate metodele, proprietățile și funcțiile, astfel încât le putem folosi în clasa noastră.
clasa publica finala Main extinde Sprite
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.
priv var despreView: AboutView = new DespreView (); // O instanță a ecranului creat înainte de tipul var var: Vector.= Vector nou. (); // Conține tipul de formă al numărului de carduri private var: Vector. = Vector nou. (); // Contine numerele de card disponibile private var xPos: Vector. = Vector nou. (); // Stocheaza pozitiile X unde cardurile pot fi plasate privat var yPos: Vector. = Vector nou. (); private var betPanel: BetPanel = noul BetPanel (); // O instanță a panoului de pariuri priv var varBet: int = 0; // Valoarea pariului curent privat var cardGFX: Vector. = Vector nou. (); // Stochează toate cardurile încărcate private cardardBack: CardBack = CardBack nou (); // instanța spatelui unei cărți private var additionalCards: int = 0; // Cardurile de jucători încărcate după primele 2 private var dAdditionalCards: int = 0; private var dealerCounter: CardCounter = CardCounter nou (); // Afișează suma cardurilor dealerului private var playerCounter: CardCounter = new CardCounter (); privat var dScore: int = 0; // Stochează suma cardurilor dealerului private var pScore: int = 0; var vară privată: AlertScreen = new AlertScreen (); // O instanță a ecranului de alertă private var isNewGame: Boolean = false; // Folosit pentru a începe un joc nou dacă este adevărat
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau executați utilizând Clasa de documente.
Se numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică finală Principal (): void // Cod ...
În funcția constructor, am setat valorile vectorilor declarați anterior.
funcția publică finală Main (): void type.push ('c', 'd', 'h', 's'); numerele "2", "3", "4", "5", "6", "7", "8", "9", "10", " „); xPos.push (97, 158, 36, 219); yPos.push (30, 330); Mouse-ul ascultătorilor sunt adăugați la infoButton si mainView MovieClip, acești ascultători vor comuta între vizualizări.
funcția publică finală Main (): void type.push ('c', 'd', 'h', 's'); numerele "2", "3", "4", "5", "6", "7", "8", "9", "10", " „); xPos.push (97, 158, 36, 219); yPos.push (30, 330); / * Ascultători principali * / infoButton.addEventListener (MouseEvent.MOUSE_UP, addAboutView); mainView.addEventListener (MouseEvent.MOUSE_UP, tweenMainView); Această funcție elimină infoButton și tweens mainView folosind TweenNano; când animația se termină, se numește o funcție.
funcția finală privată tweenMainView (e: MouseEvent): void removeChild (infoButton); TweenNano.to (principalView, 0.4, y: -480, onComplete: removeMainView);
Următorul cod este folosit pentru a distruge mainView. De asemenea, el apelează funcția care va afișa panoul de pariuri.
funcția finală privată removeMainView (): void mainView.removeEventListener (MouseEvent.MOUSE_UP, removeMainView); removeChild (mainView); mainView = null; addBetPanel ();
Ecranul Despre va fi afișat când utilizatorul dă clic pe butonul info din ecranul principal. Următoarele linii se ocupă de aceasta.
funcția finală privată addAboutView (e: MouseEvent): void aboutView.x = 0; // Reinițializează poziția în cazul în care vizualizarea se numește din nou addChild (aboutView); TweenNano.from (despreVizualizare, 0.4, x: -320); despreView.addEventListener (MouseEvent.MOUSE_UP, hideAboutView); funcția finală privată hideAboutView (e: MouseEvent): void aboutView.removeEventListener (MouseEvent.MOUSE_UP, hideAboutView); TweenNano.to (despreVizualizare, 0.4, x: -320, onComplete: removeAboutView); funcția finală privată removeAboutView (): void removeChild (aboutView);
Acum, adăugați panoul de pariuri, acesta va fi folosit pentru a alege suma pariului înainte de începerea jocului.
funcția finală privată addBetPanel (): void / * Bet Panel * / betPanel.y = stage.stageHeight / 2; // Centru it betPanel.white.addEventListener (MouseEvent.MOUSE_UP, makeBet); // Ascultătorii mouse-ului betPanel.black.addEventListener (MouseEvent.MOUSE_UP, makeBet); addChild (betPanel); TweenNano.to (betPanel, 0,7, x: stage.stageWidth / 2, ușurință: Elastic.easeOut); / * Ok / Stay butoane ascunse / dezactivate implicit * / betPanel.okButton.visible = false; stayButton.visible = false;
makeBet () funcția se va ocupa atât de cipurile alb și negru.
Cipul alb va adăuga 100 la pariu, iar cel negru va adăuga 500.
funcția finală privată makeBet (e: MouseEvent): void var balanceInt: int = int (balance.text); // Convertiți textul balanței la int var betAmount: int = 0; // Stochează suma pe care trebuie să o adăugați la pariu / * Verificați ce cip a fost făcut clic pe * / e.target.name == 'alb'? betAmount = 100: betAmount = 500; / * Verificați dacă aveți echilibru suficient * / dacă (balanceInt> = betAmount) / * Activați butonul OK * / betPanel.okButton.visible = true; betPanel.okButton.addEventListener (MouseEvent.MOUSE_UP, init); curentBet + = betAmount * 2; balance.text = String (echilibru - betAmount); balanceLP.text = balance.text; / * Textul pariului curent * / bet.text = String (currentBet); betLP.text = String (actualBet);
Aceste linii vor elimina panoul de pariuri atunci când se utilizează pariurile.
incepe jocul() este numit în acest cod.
funcția finală privată 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, peComplete: removeBetPanel); stayButton.visible = true; funcția finală privată removeBetPanel (): void removeChild (betPanel); incepe jocul();
Acest bloc de cod începe toată acțiunea, folosește loadCard () pentru a încărca dinamic o cartelă aleatorie, apelează contorul de scoruri și adaugă ascultătorii de control al jocului.
funcția finală privată startGame (): void loadCard (xPos [0], yPos [0], true); cartea de încărcare (xPos [1], yPos [0], adevărată, adevărată); cartea de încărcare (xPos [0], yPos [1], falsă); cartea de încărcare (xPos [1], yPos [1], falsă); loadCounter (); ascultători ();
Una dintre funcțiile principale din această aplicație, aceasta efectuează toate acțiunile necesare pentru a încărca o cartelă din \ Imagini \ și plasați-o în scenă.
loadCard () funcția are patru parametri:
Această funcție transmite, de asemenea, valorile scorului cardului la variabilele corespunzătoare.
Funcția finală a funcției finale private (xp: int, yp: int, isDealer: Boolean, ascuns: Boolean = false): void var loader: Loader = new Loader; // A Loader pentru a stoca cardul încărcat cardGFX.push (încărcător); // Acest vector stochează toate cartelele încărcate var num: String = număr [Math.floor (Math.random () * 12)]; // Un numar aleatoriu al numerelor de card disponibile var urlLoader: URLRequest = URLRequest nou ('images /' + String) (tastati [Math.floor (Math.random () * 4)] + num) + '. ; // încărcă un card aleator loader.x = xp; loader.y = yp; loader.load (URLLoader); addChild (încărcător); dacă (ascuns) cardBack.x = xp + 2; cardBack.y = yp + 1; addChild (cardBack); / * Dacă num> 10 atunci j, q sau k este selectat, modificați valoarea lui la 10 * / dacă (int (num)> 10) num = '10'; / * Verifica daca cartile sunt pentru jucator sau dealer * / daca (isDealer) dScore + = int (num); dealerCounter.n.text = String (dScore); altceva pScore + = int (num); playerCounter.n.text = String (pScore); Desigur, ați putea face acest lucru mult mai complex și realist generând o matrice care conține valori pentru un întreg pachet de cărți (sau mai multe), "amestecându-le" și eliminându-le după cum este necesar, dar metoda simplă aleatoare pe care am utilizat-o aici este bine pentru scopurile noastre.
loadCounter () funcția va adăuga instanțele CardCounter și le va plasa în poziția corectă. Valorile sunt obținute din variabilele de scor.
funcția finală privată 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);
Jucătorul va putea cere un alt card făcând dublu clic pe fundal. Următorul cod se ocupă de această funcție.
funcția finală privată (e: MouseEvent): void loadCard (xPos [2 + cărți suplimentare], yPos [1], false); // încărcați o altă carte suplimentarăCărți ++; dacă additionalCards> = 2) bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, lovit); / * Verificați dacă scorul este peste 21 * / dacă (pScore> 21) blackjack ("pierdut"); Butonul Stay va rula acest cod atunci când se face clic. Acesta va dezvălui scorul dealerului și va apela funcția care va verifica ambele scoruri.
funcția privată finală (e: MouseEvent): void / * Scorul dealerului dezvălui * / dealerCounter.n.text = String (dScore); / * Verificați scorul jucătorului și dealerului / checkScore ();
Această funcție va compara scorurile jucătorului cu distribuitorul; în funcție de aceasta, vor fi adăugate mai multe cărți sau jocul va fi declarat câștigat sau pierdut.
funcția finală privată 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 (); Următoarea funcție se ocupă de cardurile care sunt adăugate la mâna dealerului.
funcția finală privată hitDealer (): void loadCard (xPos [2 + dAdditionalCards], yPos [0], adevărat); dAdditionalCards ++; / * Verificați dacă scorul este peste 21 * / dacă (dScore> 21) blackjack (); altceva checkScore ();
Elementele activate de mouse sunt folosite pentru a controla jocul. Următoarea funcție adaugă ascultătorii necesari pentru a gestiona acele comenzi.
Un parametru este folosit pentru a ști dacă ascultătorii vor fi adăugați sau eliminați.
(ce: String = 'adaugă'): void if (what == 'add') bg.doubleClickEnabled = true; bg.addEventListener (MouseEvent.DOUBLE_CLICK, lovit); stayButton.addEventListener (MouseEvent.MOUSE_UP, stați); altceva bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, lovit); stayButton.removeEventListener (MouseEvent.MOUSE_UP, stați);
Această funcție este executată când jucătorul câștigă sau pierde, parametrul implicit este victorie.
private blackjack funcția finală (e: String = 'win'): void / * Reveal dealer card hidden * / removeChild (cardBack); / * Scorul dealerului descoperit * / dealerCounter.n.text = String (dScore); / * Eliminați ascultătorii / ascultătorii ("eliminați"); / * Alert Screen * / dacă (e == 'pierdut') alert.messageBox.txt.text = 'Ai pierdut'; altceva alert.messageBox.txt.text = 'Câștigați!'; / * Adăugați pariul actual la balanța * / balance.text = String (int (balance.text) + int (bet.text)); balanceLP.text = balance.text; / * Verificați suma soldului * / dacă (int (balance.text)! = 0) alert.addEventListener (MouseEvent.MOUSE_UP, reporniți); altceva alert.messageBox.txt.text = 'Game Over'; isNewGame = adevărat; alert.addEventListener (MouseEvent.MOUSE_UP, reporniți); / * Șterge pariul actual * / bet.text = '0'; betLP.text = '0'; curentBet = 0; addChild (alertă); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ușurință: Elastic.easeOut); Dacă faceți clic pe ecranul Alertă, veți reseta variabilele, obiectele de afișare și alte valori pentru a reda o altă rundă.
În cazul în care isNewGame variabila este adevărată, echilibrul va fi, de asemenea, resetat.
restartarea finală a funcției finale (e: MouseEvent): void alert.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alertă); dScore = 0; pScore = 0; removeChild (dealerCounter); removeChild (playerCounter); var cardsLen: int = cardGFX.length; pentru (var i: 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();
Setați clasa de documente. Dacă nu știți cum să o utilizați sau sunteți puțin confuz, vă rugăm să citiți acest Sfat rapid.
Rezultatul final este un joc colorat și distractiv. Încercați să personalizați - cum rămâne cu un port pe un dispozitiv mobil?
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
