Share
Dans ce didacticiel Premium, nous allons créer un superbe jeu BlackJack à partir de zéro en utilisant Flash et AS3..
À l'aide des outils de dessin de Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
L'utilisateur pourra parier contre le cpu et jouer en fonction des cartes générées aléatoirement.
Ouvrez Flash et créez un document de 320 pixels de large et 480 pixels de haut. Définir le taux de trame à 24fps.
Une belle interface colorée sera affichée, elle implique plusieurs formes, boutons, bitmaps et plus.
Passez aux étapes suivantes pour apprendre à créer cette interface graphique..
Nous devrons créer ou obtenir les formes des cartes de poker afin de créer les cartes, un moyen facile de le faire consiste à utiliser une police.
Allez sur ce site et copiez / collez les symboles dans votre fichier FLA. Vous pouvez les convertir en MovieClips pour les manipuler facilement.
Ceci est l'écran principal ou la vue, ce sera le premier graphique à apparaître dans notre jeu, continuez à l'étape suivante pour commencer sa création.
Créez un rectangle de 320x480px et remplissez-le avec le dégradé radial suivant: # 2c753d, # 3b9d52.
En utilisant l'outil Rectangle et les formes de poker que nous avons créées précédemment, nous allons former un motif pour améliorer l'aspect de notre arrière-plan..
Dupliquez le motif et arrangez-le afin de couvrir le dégradé de fond complet.
Vous pouvez convertir votre arrière-plan en un seul graphique et le centrer ou utiliser le menu d'exportation Flash pour obtenir une image png en tranches. J'ai utilisé l'option png et suis parvenu à quelque chose comme ceci:
Convertir le graphique final en MovieClip et le nommer bg.
Pour la vue principale, nous allons utiliser un dégradé noir au-dessus de cet arrière-plan, dupliquer le dégradé vert, changer la couleur en noir et les valeurs alpha en (0, 70)..
Sélectionnez l'outil Texte (T), choisissez une belle police pour écrire le titre de votre jeu et appliquez ce dégradé radial: # a08c66, # f6e7be.
Convertissez le texte en MovieClip et appliquez le filtre suivant:
Vous pouvez également ajouter une forme de poker en tant que détail:
L'info-bulle montrera à l'utilisateur une instruction dans la vue principale.
Créez un rectangle arrondi de 84 x 23 pixels et remplissez-le avec un dégradé # 000000 à # 333333, changez son rayon de coin en 6.
Dupliquez la forme et retournez-la verticalement, changez sa taille en 80x18px et centrez-la dans la dernière forme.
Utilisez l'outil Polystar pour créer un triangle et placez-le en bas au centre de la forme réelle..
Enfin, ajoutez un TextField (T) et centrez-le.
Temps pour les puces.
Commencez par un simple cercle noir et utilisez l'outil Ligne (N) pour créer un cercle blanc en pointillé à l'intérieur:
Utilisez l'outil Rectangle pour créer un symbole plus et utilisez-le pour décorer la puce. Vous pouvez également ajouter un logo ou tout autre graphique au centre de la puce..
Une puce blanche sera également utilisée, il suffit de changer les formes noires en blanc et inversement.
Le bouton info appelle la vue à propos lorsque vous cliquez dessus.
Créez un cercle blanc de 16 x 16 pixels et modifiez son alpha en 15%. Utilisez l'outil Texte (T) pour écrire en italique i.
Convertir les formes en bouton et nommez-le infoButton.
Utilisez l'outil Rectangle Primitive pour créer une forme 66x86px, # 858D8F et modifier le rayon de l'angle en 16..
Dupliquez la forme et réduisez sa taille de 4 pixels, appliquez ce dégradé: #FFFDFC, #DCDDDF.
Convertissez les graphiques en MovieClip et utilisez le filtre Ombre portée que nous utilisions auparavant dans le titre..
Utilisez la forme de poker correspondante et centrez-la dans la carte.
Dupliquez la forme et utilisez l'outil Texte (T) pour créer un champ de texte statique dans le coin supérieur gauche..
Répétez cette procédure avec les cartes nécessaires et utilisez la fonction Exporter une image de Flash pour créer les cartes au format png. Enregistrez les cartes dans un dossier appelé images.
N'oubliez pas de leur donner un nom facile et descriptif pour faciliter le chargement. J'ai utilisé deux lettres, la première lettre de la forme de la carte et le numéro.
L'écran À propos affichera le générique, l'année et le copyright du jeu..
Ce sera assez simple à créer car nous avons déjà tous les éléments qui y sont utilisés.
Ceci est la vue du jeu, il utilise le fond vert clair original et une barre inférieure qui montre les paris et la balance.
Deux champs de texte dynamiques sont utilisés, équilibre et pari. Il y a aussi un bouton nommé stayButton, qui fera arrêter le jeu et effectuer les tests de carte.
Un graphique semblable à une infobulle affichera le score actuel du joueur, tandis que le même graphique affichera un ? sur le revendeur.
Utilisez les graphiques de l’info-bulle pour créer une zone de 30 x 24 pixels, créez un champ de texte dynamique et nommez-le. n. Convertissez-les en MovieClip et cochez la case Exporter pour ActionScript, définissez le nom de la classe sur CardCounter.
Le panneau de paris affichera les informations sur les paris..
Le joueur peut parier en multiples de 100 et 500.
Voici les noms d'instance des objets interactifs:
Accentsconagua
blanc.noir.okButton.Convertissez les objets en un seul MovieClip et cochez la case Exporter pour ActionScript, définissez le nom de la classe sur BetPanel.
Cet écran apparaîtra lorsque le jeu aura été décidé, que vous gagniez, que vous perdiez ou que vous atteigniez la partie terminée (lorsque le joueur perd tous les jetons).
Un Dynamic TextField est utilisé dans cette vue, il affichera l'état dans lequel se trouve le jeu. Ce TextField s'appelle SMS, et c'est à l'intérieur de la boîte noire nommée messagerie.
Convertissez le groupe de graphiques en MovieClip et cochez la case Exporter pour ActionScript; définir le nom de la classe sur AlertScreen.
Ceci termine la partie graphique, laissez le code ActionScript démarrer!
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans le flash, ce qui augmentera les performances tout en étant plus facile à utiliser..
Vous pouvez télécharger Tween Nano depuis son site officiel.
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes. Il est également courant de les nommer sur le site Web de votre entreprise: com.mycompany.classesType.myClass.
Dans cet exemple, nous utilisons une seule classe. Il n'est donc pas nécessaire de créer un dossier de classes..
paquet
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenNano; importer com.greensock.easing.Elastic;
Ici, nous déclarons la classe en utilisant le classe mot-clé de définition suivi du nom que nous voulons pour la classe, rappelez-vous que vous devez enregistrer le fichier en utilisant ce nom.
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public final class Main étend Sprite
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus sur eux.
var privée aboutView: AboutView = new AboutView (); // Une instance de l'écran about créée avant le type var privé: Vector.= nouveau vecteur. (); // contient le type de forme du nombre var privé de cartes: Vector. = nouveau vecteur. (); // contient les numéros de carte disponibles private var xPos: Vector. = nouveau vecteur. (); // Stocke les positions X où les cartes peuvent être placées privé var yPos: Vector. = nouveau vecteur. (); var privée betPanel: BetPanel = new BetPanel (); // Une instance du panneau de paris private var var currentBet: int = 0; // Le montant de la mise actuelle privée var cardGFX: Vector. = nouveau vecteur. (); // Stocke toutes les cartes chargées var var privé CardBack: CardBack = new CardBack (); // Instance du verso d'une carte private var additionalCards: int = 0; // Les cartes de joueur chargées après les 2 premières variables privées privées dAdditionalCards: int = 0; private var dealerCounter: CardCounter = new CardCounter (); // Affiche la somme des cartes du donneur private var playerCounter: CardCounter = new CardCounter (); var privé dScore: int = 0; // Stocke la somme des cartes du donneur private var var pScore: int = 0; alerte var privée: AlertScreen = new AlertScreen (); // Une instance de la variable privée de l'écran d'alerte isNewGame: Boolean = false; // Utilisé pour démarrer un nouveau jeu si vrai
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void // Code…
Dans la fonction constructeur, on définit les valeurs des vecteurs déclarés avant.
fonction finale publique 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); Les écouteurs de souris sont ajoutés à la infoButton et le vue principale MovieClip, ces auditeurs basculeront entre les vues.
fonction finale publique 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); / * Auditeurs de la vue principale * / infoButton.addEventListener (MouseEvent.MOUSE_UP, addAboutView); mainView.addEventListener (MouseEvent.MOUSE_UP, tweenMainView); Cette fonction supprime le infoButton et tweens le vue principale en utilisant TweenNano; quand l'animation est terminée, une fonction est appelée.
fonction finale privée tweenMainView (e: MouseEvent): void removeChild (infoButton); TweenNano.to (mainView, 0.4, y: -480, onComplete: removeMainView);
Le code suivant est utilisé pour détruire le vue principale. Il appelle également la fonction qui montrera le panneau de pari.
fonction finale privée removeMainView (): void mainView.removeEventListener (MouseEvent.MOUSE_UP, removeMainView); removeChild (mainView); mainView = null; addBetPanel ();
La vue À propos sera affichée lorsque l'utilisateur cliquera sur l'info-bouton de l'écran principal. Les lignes suivantes gèrent ça.
fonction finale privée addAboutView (e: MouseEvent): void aboutView.x = 0; // Réinitialise la position dans le cas où la vue est appelée à nouveau addChild (aboutView); TweenNano.from (aboutView, 0.4, x: -320); aboutView.addEventListener (MouseEvent.MOUSE_UP, hideAboutView); fonction finale privée hideAboutView (e: MouseEvent): void aboutView.removeEventListener (MouseEvent.MOUSE_UP, hideAboutView); TweenNano.to (aboutView, 0.4, x: -320, onComplete: removeAboutView); fonction finale privée removeAboutView (): void removeChild (aboutView);
Ajoutons maintenant le panneau de pari, il sera utilisé pour choisir le montant du pari avant le début du jeu..
fonction finale privée addBetPanel (): void / * Panneau de mise * * / betPanel.y = stage.stageHeight / 2; // Centrez-le sur betPanel.white.addEventListener (MouseEvent.MOUSE_UP, makeBet); // Auditeurs de souris betPanel.black.addEventListener (MouseEvent.MOUSE_UP, makeBet); addChild (betPanel); TweenNano.to (betPanel, 0,7, x: stage.stageWidth / 2, facilité: Elastic.easeOut); / * Boutons Ok / Stay cachés / désactivés par défaut * / betPanel.okButton.visible = false; stayButton.visible = false;
le makeBet () la fonction gérera les puces blanches et noires.
Le jeton blanc ajoutera 100 au pari et le noir ajoutera 500.
fonction finale privée makeBet (e: MouseEvent): void var balanceInt: int = int (balance.text); // Convertit le texte de la balance en int var varAmount: int = 0; // Stocke le montant à ajouter au pari / * Vérifiez quel jeton a été cliqué * / e.target.name == 'white'? betAmount = 100: betAmount = 500; / * Vérifier si le solde est suffisant * / if (balanceInt> = betAmount) / * Activer le bouton OK * / betPanel.okButton.visible = true; betPanel.okButton.addEventListener (MouseEvent.MOUSE_UP, init); currentBet + = betAmount * 2; balance.text = String (balanceInt - betAmount); balanceLP.text = balance.text; / * Texte de la mise actuelle * / bet.text = String (currentBet); betLP.text = String (currentBet);
Ces lignes enlèveront le panneau de paris lorsque l'utilisation sera terminée.
le démarrer jeu() la fonction est appelée dans ce code.
fonction finale privée 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; fonction finale privée removeBetPanel (): void removeChild (betPanel); démarrer jeu();
Ce bloc de code commence toute l'action, il utilise le loadCard () fonction permettant de charger dynamiquement une carte aléatoire, appelle le compteur de score et ajoute les écouteurs des contrôles de jeu.
fonction finale privée startGame (): void loadCard (xPos [0], yPos [0], true); loadCard (xPos [1], yPos [0], vrai, vrai); loadCard (xPos [0], yPos [1], false); loadCard (xPos [1], yPos [1], false); loadCounter (); les auditeurs();
L’une des fonctions principales de cette application consiste à effectuer toutes les actions requises pour charger une carte à partir de la carte. \images\ dossier et placez-le dans la scène.
le loadCard () fonction prend quatre paramètres:
Cette fonction transmet également les valeurs du score de la carte aux variables correspondantes..
fonction finale privée loadCard (xp: int, yp: int, isDealer: Boolean, hidden: Boolean = false): void var loader: Loader = new Loader (); // Un chargeur pour stocker le bitmap chargé cardGFX.push (loader); // Ce vecteur stocke toutes les cartes chargées var num: String = number [Math.floor (Math.random () * 12)]; // Un nombre choisi au hasard parmi les numéros de carte disponibles var urlLoader: URLRequest = new URLRequest ('images /' + String (type [Math.floor (Math.random () * 4)] + num. + '.Png') ; // charge un chargeur de carte aléatoire.x = xp; loader.y = yp; loader.load (urlLoader); addChild (chargeur); si (caché) cardBack.x = xp + 2; cardBack.y = yp + 1; addChild (cardBack); / * Si num> 10 alors j, q ou k est sélectionné, change sa valeur en 10 * / if (int (num)> 10) num = '10'; / * Vérifiez si les cartes sont pour le joueur ou le croupier * / if (isDealer) dScore + = int (num); dealerCounter.n.text = String (dScore); else pScore + = int (num); playerCounter.n.text = Chaîne (pScore); Bien sûr, vous pourriez rendre cela beaucoup plus complexe et réaliste en générant un tableau contenant les valeurs de tout un jeu de cartes, en les "mélangeant" et en les distribuant si nécessaire, mais la méthode aléatoire simple que nous avons utilisée ici est bien pour nos besoins.
le loadCounter () fonction ajoutera les occurrences CardCounter et les placera à la position correcte. Les valeurs sont obtenues à partir des variables de score.
fonction finale privée loadCounter (): void dealerCounter.x = 145; dealerCounter.y = 4; playerCounter.x = 145; playerCounter.y = 417; dealerCounter.n.text = '?'; playerCounter.n.text = Chaîne (pScore); addChild (dealerCounter); addChild (playerCounter);
Le joueur pourra demander une autre carte en double-cliquant sur l'arrière-plan. Le code suivant gère cette fonction.
fonction finale privée hit (e: MouseEvent): void loadCard (xPos [2 + additionalCards], yPos [1], false); // charge une autre carte additionalCards ++; if (additionalCards> = 2) bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); / * Vérifier si le score est supérieur à 21 * / if (pScore> 21) blackjack ('lost'); Le bouton Stay va exécuter ce code lorsque vous cliquez dessus. Il révélera le score du concessionnaire et appellera la fonction qui vérifiera les deux scores.
Séjour de fonction finale privée (e: MouseEvent): void / * Score de révélation du revendeur * / dealerCounter.n.text = String (dScore); / * Vérifier le score du joueur et du donneur * / checkScore ();
Cette fonction compare les scores du joueur et du donneur. en fonction de cela, plus de cartes seront ajoutées ou le jeu sera déclaré gagnant ou perdu.
fonction finale privée 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 fonction suivante traitera les cartes ajoutées à la main du croupier.
fonction finale privée hitDealer (): void loadCard (xPos [2 + dAdditionalCards], yPos [0], true); dAdditionalCards ++; / * Vérifie si le score est supérieur à 21 * / if (dScore> 21) blackjack (); else checkScore ();
Les objets activés par la souris sont utilisés pour contrôler le jeu. La fonction suivante ajoute les écouteurs nécessaires pour gérer ces contrôles.
Un paramètre est utilisé pour savoir si les écouteurs seront ajoutés ou supprimés.
auditeurs de fonction finale privés (quoi: 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);
Cette fonction est exécutée lorsque le joueur gagne ou perd, le paramètre par défaut est gagner.
Blackjack privé de fonction finale (e: String = 'win'): void / * Révélez la carte cachée du revendeur * / removeChild (cardBack); / * Révéler le score du revendeur * / dealerCounter.n.text = String (dScore); / * Supprimer les auditeurs * / les auditeurs ('remove'); / * Écran d’alerte * / if (e == 'perdu') alert.messageBox.txt.text = 'Vous avez perdu'; else alert.messageBox.txt.text = 'Vous gagnez!'; / * Ajouter la mise actuelle à la balance * / balance.text = String (int (balance.text) + int (bet.text)); balanceLP.text = balance.text; / * Vérifier le montant du solde * / if (int (balance.text)! = 0) alert.addEventListener (MouseEvent.MOUSE_UP, restart); else alert.messageBox.txt.text = 'Jeu terminé'; isNewGame = true; alert.addEventListener (MouseEvent.MOUSE_UP, redémarrer); / * Effacer le pari en cours * / bet.text = '0'; betLP.text = '0'; currentBet = 0; addChild (alerte); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, eas: Elastic.easeOut); Un clic sur l'écran d'alerte réinitialisera les variables, les objets d'affichage et d'autres valeurs afin de jouer une autre partie..
Si la isNewGame Si la variable est true, le solde sera également réinitialisé..
redémarrage de la fonction finale privée (e: MouseEvent): void alert.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alerte); dScore = 0; pScore = 0; removeChild (dealerCounter); removeChild (playerCounter); var cardsLen: int = cardGFX.length; pour (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();
Définissez la classe de document. Si vous ne savez pas comment l'utiliser ou si vous êtes un peu confus, veuillez lire ce petit conseil..
Le résultat final est un jeu coloré et divertissant. Essayez de le personnaliser. Qu'en est-il d'un port sur un appareil mobile??
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
