Share
In questo Tutorial Premium, costruiremo un fantastico gioco Blackjack partendo da zero utilizzando Flash e AS3.
Usando gli strumenti di disegno di Flash creeremo un'interfaccia grafica di bell'aspetto che sarà alimentata da diverse classi ActionScript 3.
L'utente sarà in grado di scommettere contro la CPU e giocare in base alle carte generate casualmente.
Apri Flash e crea un documento di 320 pixel di larghezza e 480 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
Verrà visualizzata un'interfaccia dall'aspetto colorato, che comprende più forme, pulsanti, bitmap e altro ancora.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Dovremo creare o ottenere le forme delle carte da poker per creare le carte, un modo semplice per farlo è usare un font.
Vai a questo sito Web e copia / incolla i simboli nel tuo file FLA. Puoi convertirli in MovieClip per gestirli facilmente.
Questa è la schermata principale o la vista, sarà la prima immagine che apparirà nel nostro gioco, continueremo con il prossimo passo per iniziare la sua creazione.
Crea un rettangolo 320x480px e riempilo con il seguente gradiente radiale: # 2c753d, # 3b9d52.
Usando lo strumento rettangolo e le forme di poker che abbiamo creato in precedenza, formeremo un modello per rendere migliore il nostro sfondo.
Duplica il motivo e disponilo per coprire il gradiente di sfondo completo.
Puoi convertire lo sfondo in una singola immagine e centrarlo oppure utilizzare il menu di esportazione di Flash per ottenere un'immagine png affettata. Ho usato l'opzione png e ho trovato qualcosa di simile a questo:
Converti l'immagine finale in MovieClip e assegnagli il nome bg.
Per la vista principale useremo un gradiente nero sopra questo sfondo, duplichiamo il gradiente verde, cambiamo il colore in nero e i valori alfa in (0, 70).
Seleziona lo strumento Testo (T), seleziona un font bello per scrivere il titolo del gioco e applica questo gradiente radiale: # a08c66, # f6e7be.
Converti il testo in MovieClip e applica il filtro successivo:
Puoi anche aggiungere una forma di poker come un dettaglio:
Il tooltip mostrerà all'utente un'istruzione nella vista principale.
Crea un rettangolo arrotondato di 84x23 px e riempilo con un gradiente # 000000 con # 333333, cambia il suo raggio d'angolo a 6.
Duplica la forma e ruotala verticalmente, modifica la sua dimensione a 80x18 px e centrala nell'ultima forma.
Usa lo Strumento Polystar per creare un triangolo e posizionarlo sul centro in basso della forma attuale.
Infine, aggiungi un campo di testo (T) e centralo.
Tempo per le patatine.
Inizia con un semplice cerchio nero e usa lo strumento Linea (N) per creare un cerchio bianco tratteggiato all'interno:
Usa lo strumento Rettangolo per creare un simbolo più e usarlo per decorare il chip. Puoi anche aggiungere un logo o qualsiasi altro elemento grafico al centro del chip.
Verrà utilizzato anche un chip bianco, basta cambiare le forme nere in bianco e viceversa.
Il pulsante Info chiamerà la vista Informazioni quando si fa clic.
Crea un cerchio bianco 16x16px e modifica l'alfa al 15%. Utilizzare lo strumento di testo (T) per scrivere un corsivo i.
Converti le forme in Button e nominalo infoButton.
Usa lo Strumento Rettangolo Primitivo per creare una forma 66x86px, # 858D8F e modificare il raggio dell'angolo a 16.
Duplica la forma e riduci le sue dimensioni di 4 pixel, applica questo gradiente: #FFFDFC, #DCDDDF.
Converti la grafica in MovieClip e usa il filtro ombra esterna che abbiamo usato prima nel titolo.
Usa la forma corrispondente del poker e centrala nella carta.
Duplica la forma e usa lo strumento Testo (T) per creare un campo di testo statico nell'angolo in alto a sinistra.
Ripeti questo processo con le carte necessarie e usa la funzione Esporta immagine in Flash per creare le carte in formato png. Salva le carte in una cartella chiamata immagini.
Ricordati di dare loro un nome facile e descrittivo per facilitare il caricamento. Ho usato due lettere, la prima lettera della forma della carta e il numero.
La schermata Informazioni mostrerà i crediti, l'anno e il copyright del gioco.
Sarà piuttosto semplice da creare poiché abbiamo già tutti gli elementi in esso utilizzati.
Questa è la vista di gioco, utilizza lo sfondo verde chiaro originale e una barra in basso che mostra le scommesse e l'equilibrio.
Vengono utilizzati due campi di testo dinamici, equilibrio e scommessa. C'è anche un pulsante chiamato stayButton, che farà fermare il gioco ed eseguire i test delle carte.
Una grafica simile a un tooltip mostrerà il punteggio reale del giocatore mentre lo stesso grafico mostrerà a ? sul rivenditore.
Usa la grafica del tooltip per creare una casella 30x24px, creare un campo di testo dinamico e nominarlo n. Convertirli in MovieClip e contrassegnare la casella Esporta per ActionScript, impostare il nome della classe su CardCounter.
Il pannello delle scommesse mostrerà le informazioni sulle scommesse.
Il giocatore può scommettere in multipli di 100 e 500.
Ecco i nomi di istanza degli oggetti interattivi:
Accentsconagua
bianca.nero.okButton.Converti gli oggetti in una singola MovieClip e contrassegna la casella Esporta per ActionScript, imposta il nome della classe su BetPanel.
Questa schermata apparirà quando il gioco è stato deciso, ether vinci, perdi o raggiungi game over (quando il giocatore perde tutte le chips).
In questa vista viene utilizzato un campo di testo dinamico che mostrerà lo stato in cui si trova il gioco. Questo campo di testo è chiamato testo, ed è all'interno della scatola nera chiamata casella dei messaggi.
Converti il gruppo di elementi grafici in una MovieClip e contrassegna la casella Esporta per ActionScript; imposta il nome della classe su AlertScreen.
Questo termina la parte grafica, lascia che sia avviato l'ActionScript!
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Useremo un motore di interpolazione diverso da quello predefinito incluso nel flash, questo aumenterà le prestazioni oltre ad essere più facile da usare.
È possibile scaricare Tween Nano dal suo sito Web ufficiale.
La parola chiave package consente di organizzare il codice in gruppi che possono essere importati da altri script, si consiglia di nominarli iniziando con una lettera minuscola e utilizzare gli intercapori per le parole successive, ad esempio: le mie classi. È anche comune denominarli utilizzando il sito Web della tua azienda: com.mycompany.classesType.myClass.
In questo esempio, stiamo usando una singola classe, quindi non c'è davvero bisogno di creare una cartella delle classi.
pacchetto
Queste sono le classi che dovremo importare affinché la nostra classe funzioni, il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
Qui dichiariamo la classe usando il classe definizione della parola chiave seguita dal nome che vogliamo per la classe, ricorda che devi salvare il file usando questo nome.
Il si estende keyword definisce una classe che è una sottoclasse di un'altra classe. La sottoclasse eredita tutti i metodi, le proprietà e le funzioni, in questo modo possiamo usarli nella nostra classe.
public final class Main estende Sprite
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
private var aboutView: AboutView = new AboutView (); // Un'istanza della schermata about creata prima del tipo var privato: Vector.= nuovo vettore. (); // Contiene il tipo di forma delle carte numero var privato: Vector. = nuovo vettore. (); // Contiene i numeri di carta disponibili private var xPos: Vector. = nuovo vettore. (); // Memorizza le posizioni X in cui possono essere posizionate le carte private var yPos: Vector. = nuovo vettore. (); private var betPanel: BetPanel = new BetPanel (); // Un'istanza del pannello delle scommesse private var currentBet: int = 0; // L'ammontare della scommessa attuale private var cardGFX: Vector. = nuovo vettore. (); // Memorizza tutte le carte caricate private var cardBack: CardBack = new CardBack (); // Istanza del retro di una scheda private var additionalCards: int = 0; // Le carte giocatore caricate dopo le 2 private var dAdditionalCards iniziali: int = 0; private var dealerCounter: CardCounter = new CardCounter (); // Visualizza la somma delle carte del banco private var playerCounter: CardCounter = new CardCounter (); private var dScore: int = 0; // Memorizza la somma delle carte del mazziere private var pScore: int = 0; avviso var privato: AlertScreen = new AlertScreen (); // Un'istanza della schermata di avviso var privataNewGame: Boolean = false; // Usato per iniziare un nuovo gioco se è vero
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguita utilizzando la classe documento.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica finale Main (): void // Code ...
Nella funzione di costruzione, impostiamo i valori dei vettori dichiarati in precedenza.
funzione public final Main (): void type.push ('c', 'd', 'h', 's'); number.push ('2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13 '); xPos.push (97, 158, 36, 219); yPos.push (30, 330); Gli ascoltatori del mouse sono aggiunti al infoButton e il MainView MovieClip, questi ascoltatori passeranno da una vista all'altra.
funzione public final Main (): void type.push ('c', 'd', 'h', 's'); number.push ('2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13 '); xPos.push (97, 158, 36, 219); yPos.push (30, 330); / * Listener di visualizzazione principale * / infoButton.addEventListener (MouseEvent.MOUSE_UP, addAboutView); mainView.addEventListener (MouseEvent.MOUSE_UP, tweenMainView); Questa funzione rimuove il infoButton e incita il MainView usando TweenNano; quando l'animazione è finita, viene chiamata una funzione.
funzione finale privata tweenMainView (e: MouseEvent): void removeChild (infoButton); TweenNano.to (mainView, 0.4, y: -480, onComplete: removeMainView);
Il prossimo codice è usato per distruggere il MainView. Chiama anche la funzione che mostrerà il pannello delle scommesse.
private final function removeMainView (): void mainView.removeEventListener (MouseEvent.MOUSE_UP, removeMainView); removeChild (MainView); mainView = null; addBetPanel ();
La vista Informazioni verrà visualizzata quando l'utente fa clic sul pulsante Info nella schermata principale. Le seguenti linee gestiscono questo.
funzione finale privata addAboutView (e: MouseEvent): void aboutView.x = 0; // Ripristina la posizione nel caso in cui la vista venga nuovamente chiamata addChild (aboutView); TweenNano.from (aboutView, 0.4, x: -320); aboutView.addEventListener (MouseEvent.MOUSE_UP, hideAboutView); private final function hideAboutView (e: MouseEvent): void aboutView.removeEventListener (MouseEvent.MOUSE_UP, hideAboutView); TweenNano.to (aboutView, 0.4, x: -320, onComplete: removeAboutView); private final function removeAboutView (): void removeChild (aboutView);
Ora aggiungiamo il pannello delle scommesse, questo sarà usato per scegliere l'ammontare della scommessa prima dell'inizio del gioco.
funzione finale privata addBetPanel (): void / * Bet Panel * / betPanel.y = stage.stageHeight / 2; // Center it betPanel.white.addEventListener (MouseEvent.MOUSE_UP, makeBet); // Mouse listener betPanel.black.addEventListener (MouseEvent.MOUSE_UP, makeBet); addChild (betPanel); TweenNano.to (betPanel, 0.7, x: stage.stageWidth / 2, facilità: Elastic.easeOut); / * Ok / Stay pulsanti nascosti / disattivati per impostazione predefinita * / betPanel.okButton.visible = false; stayButton.visible = false;
Il makeBet () la funzione gestirà sia i chip bianchi che quelli neri.
Il chip bianco aggiungerà 100 alla scommessa e il nero ne aggiungerà 500.
funzione finale privata makeBet (e: MouseEvent): void var balanceInt: int = int (balance.text); // Converti il testo del saldo in int var betAmount: int = 0; // Memorizza l'importo da aggiungere alla scommessa / * Controlla quale chip è stato cliccato * / e.target.name == 'white'? betAmount = 100: betAmount = 500; / * Verifica il saldo sufficiente * / if (balanceInt> = betAmount) / * Abilita pulsante OK * / betPanel.okButton.visible = true; betPanel.okButton.addEventListener (MouseEvent.MOUSE_UP, init); currentBet + = betAmount * 2; balance.text = String (balanceInt - betAmount); balanceLP.text = balance.text; / * Testo della scommessa corrente * / bet.text = String (currentBet); betLP.text = String (currentBet);
Questa linea rimuoverà il pannello delle scommesse quando l'uso è fatto scommettendo.
Il inizia il gioco() la funzione è chiamata in questo codice.
funzione finale privata 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; private final function removeBetPanel (): void removeChild (betPanel); inizia il gioco();
Questo blocco di codice avvia tutte le azioni, utilizza il loadCard () funzione per caricare dinamicamente una carta a caso, chiama il contatore dei punteggi e aggiunge gli ascoltatori dei controlli di gioco.
funzione finale privata startGame (): void loadCard (xPos [0], yPos [0], vero); loadCard (xPos [1], yPos [0], true, true); loadCard (xPos [0], yPos [1], falso); loadCard (xPos [1], yPos [1], false); loadCounter (); ascoltatori ();
Una delle funzioni principali di questa app, esegue tutte le azioni necessarie per caricare una carta dal \immagini\ cartella e posizionarlo sul palco.
Il loadCard () la funzione richiede quattro parametri:
Questa funzione passa anche i valori del punteggio della carta alle variabili corrispondenti.
funzione finale privata loadCard (xp: int, yp: int, isDealer: Boolean, hidden: Boolean = false): void var loader: Loader = new Loader (); // Un caricatore per memorizzare la scheda bitmap caricata cardGFX.push (loader); // Questo vettore memorizza tutte le schede caricate var num: String = number [Math.floor (Math.random () * 12)]; // Un numero selezionato casuale dei numeri di carte disponibili var urlLoader: URLRequest = new URLRequest ('images /' + String (tipo [Math.floor (Math.random () * 4)] + num) + '.png') ; // carica una scheda casuale loader.x = xp; loader.y = yp; Loader.load (URLLoader); addChild (loader); if (hidden) cardBack.x = xp + 2; cardBack.y = yp + 1; addChild (cardBack); / * Se num> 10 allora j, q ok è selezionato, cambia il suo valore in 10 * / if (int (num)> 10) num = '10'; / * Controlla se le carte sono per giocatore o commerciante * / se (isDealer) dScore + = int (num); dealerCounter.n.text = String (dScore); else pScore + = int (num); playerCounter.n.text = String (pScore); Ovviamente, potresti renderlo molto più complesso e realistico generando un array contenente valori per un intero mazzo di carte (o più), "mischiandoli" e distribuendoli come richiesto, ma il semplice metodo casuale che abbiamo usato qui è va bene per i nostri scopi.
Il loadCounter () la funzione aggiungerà le istanze di CardCounter e le posizionerà nella posizione corretta. I valori sono ottenuti dalle variabili del punteggio.
private final function 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);
Il giocatore sarà in grado di richiedere un'altra carta facendo doppio clic sullo sfondo. Il seguente codice gestisce quella funzione.
hit della funzione finale privata (e: MouseEvent): void loadCard (xPos [2 + additionalCards], yPos [1], false); // carica un'altra scheda additionalCards ++; if (additionalCards> = 2) bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); / * Verifica se il punteggio è superiore a 21 * / se (pScore> 21) blackjack ('lost'); Il pulsante Stay esegue questo codice quando viene fatto clic. Rivelerà il punteggio del dealer e chiamerà la funzione che controllerà entrambi i punteggi.
funzione finale privata stay (e: MouseEvent): void / * Mostra punteggio rivenditore * / dealerCounter.n.text = String (dScore); / * Controllare il punteggio giocatore / rivenditore * / checkScore ();
Questa funzione confronterà i punteggi del giocatore e del banco; a seconda di questo, verranno aggiunte più carte o il gioco sarà dichiarato vinto o perso.
private final function 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 (); La prossima funzione gestirà le carte che vengono aggiunte alla mano del banco.
funzione finale privata hitDealer (): void loadCard (xPos [2 + dAdditionalCards], yPos [0], true); dAdditionalCards ++; / * Verifica se il punteggio è superiore a 21 * / se (dScore> 21) blackjack (); else checkScore ();
Gli oggetti attivati dal mouse sono usati per controllare il gioco. La seguente funzione aggiunge gli ascoltatori necessari per gestire tali controlli.
Un parametro viene utilizzato per sapere se gli ascoltatori verranno aggiunti o rimossi.
ascoltatori di funzioni finali private (cosa: String = 'add'): void if (what == 'add') bg.doubleClickEnabled = true; bg.addEventListener (MouseEvent.DOUBLE_CLICK, hit); stayButton.addEventListener (MouseEvent.MOUSE_UP, stay); else bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); stayButton.removeEventListener (MouseEvent.MOUSE_UP, stay);
Questa funzione viene eseguita quando il giocatore vince o perde, il parametro predefinito è vincere.
blackjack funzione privata finale (e: String = 'win'): void / * Rivela carta nascosta dealer * / removeChild (cardBack); / * Rivela il punteggio del rivenditore * / dealerCounter.n.text = String (dScore); / * Remove Listeners * / listeners ('remove'); / * Alert Screen * / if (e == 'lost') alert.messageBox.txt.text = 'Hai perso'; else alert.messageBox.txt.text = 'Vinci!'; / * Aggiungi puntata corrente al saldo * / balance.text = String (int (balance.text) + int (bet.text)); balanceLP.text = balance.text; / * Controlla l'importo del saldo * / if (int (balance.text)! = 0) alert.addEventListener (MouseEvent.MOUSE_UP, restart); else alert.messageBox.txt.text = 'Game Over'; isNewGame = true; alert.addEventListener (MouseEvent.MOUSE_UP, restart); / * Cancella puntata corrente * / bet.text = '0'; betLP.text = '0'; currentBet = 0; addChild (allarme); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Elastic.easeOut); Cliccando sulla schermata di avviso si ripristineranno le variabili, gli oggetti di visualizzazione e altri valori per giocare un altro round.
Se la isNewGame variabile è vera, anche il saldo verrà resettato.
riavvio della funzione finale privata (e: MouseEvent): void alert.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (allarme); dScore = 0; pScore = 0; removeChild (dealerCounter); removeChild (playerCounter); var cardsLen: int = cardGFX.length; per (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();
Imposta la classe del documento. Se non sai come usarlo o sei un po 'confuso per favore leggi questo suggerimento rapido.
Il risultato finale è un gioco colorato e divertente. Prova a personalizzarlo, che dire di una porta su un dispositivo mobile?
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
