Faire un jeu de blackjack dans Corona - Créer l'interface

Dans ce tutoriel, je vais vous montrer comment créer un jeu de blackjack pour iPad avec le SDK Corona. Commençons!

Vous voulez apprendre comment ce jeu a été conçu? Cette série de didacticiels est basée sur les travaux d’Andrei Marius, qui a initialement publié un didacticiel Illustrator détaillé montrant comment concevoir le jeu sur Vectortuts.+.


1. Nouveau projet

Ouvrez le simulateur Corona et choisissez "Nouveau projet".


Sur l'écran qui suit, choisissez les paramètres suivants..

Paramètres du projet

Appuyez sur la "Suivant"bouton, puis choisissez ouvert dans l'éditeur. Cela va ouvrir "Main.lua"dans votre éditeur de texte par défaut.


2. Configuration du projet

Ouvert "Config.lua"tout effacer et le changer comme suit.

 application = contenu = largeur = 768, hauteur = 1024, scale = "letterBox", fps = 30,

Ceci définit la largeur, la hauteur, l'échelle et le FPS par défaut du projet. Le "letterBox"paramètre d'échelle signifie que l'application sera mise à l'échelle dans les deux directions le plus uniformément possible, et si nécessaire affichera le jeu" Letter Boxed ", comme vous le voyez dans certains films DVD.


3. Masquer la barre d'état

Nous ne voulons pas que la barre d'état apparaisse dans notre application, alors entrez ce qui suit "Main.lua"

 display.setStatusBar (display.HiddenStatusBar);

4. Variables locales

Ajouter ce qui suit sous le code que vous avez entré à l'étape ci-dessus.

 local cardTable = display.newImage ("table.png", true); monnaie locale10; - les 10 dollars locaux en monnaie locale25; --La ​​monnaie locale de 25 dollars US50; --Le marché local à puce de 50,00 $; - les boutons de transaction hitBtn local; - le bouton d'accès local standBtn; - le bouton stand instructions localesText; - Donner des instructions et montrer au gagnant les costumes locaux = "h", "d", "c", "s"; - coeurs = h, diamants = d, massues = c, pont local de pique; - Le jeu de cartes localContainer; - un groupe qui détiendra les puces local dealerGroup; - nous plaçons les cartes donneurs dans ce groupe local playerGroup; - nous mettons les cartes de joueur dans ce groupe local dealTo = "player"; - qui est actuellement en train d'être distribué à local playerHand = ; - une table pour contenir les cartes des joueurs local dealerHand = ; - une table pour contenir les cartes de distributeurs locales allCards =  - une table pour contenir toutes les cartes locales betAmount = 0; - combien le joueur mise-t-il en monnaie locale totale? - combien d'argent le joueur a blackJack local = faux; - si le joueur ou le croupier a un blackjack local firstDealerCard = ""; - une référence à la première carte à laquelle le croupier se voit attribuer local playerYields = false; - si le joueur s'est tenu sur sa main locale ou non; - qui le gagnant du tour est un pari local = 0; - combien le joueur ajoute-t-il à betAmount variable local bankText; - montre aux joueurs l'argent local betText; - indique combien le joueur mise sur le dealerCardsY local = 120; - Position Y des cartes de croupier joueur localCartesY = 810; - Position Y des cartes de joueur

Ce sont toutes les variables que nous allons utiliser dans ce jeu. Lisez les commentaires pour comprendre à quoi ils servent.


5. Configuration ()

La fonction de configuration sera appelée lors du premier chargement de l'application. Entrez ce qui suit sous le code que vous avez entré à l'étape ci-dessus.

 fonction Setup () end

Appelez maintenant la fonction de configuration juste en dessous de l'endroit où vous l'avez déclarée..

 Installer()

6. SetupCoins ()

Ajouter ce qui suit ci-dessus où vous appelez Installer() dans l'étape ci-dessus.

 fonction setupCoins () money10 = display.newImage ("money10.png", 50 960); money10.betAmount = 10; money25 = display.newImage ("money25.png", 110 960); money25.betAmount = 25; money50 = display.newImage ("money50.png", 170 960); money50.betAmount = 50; fin

Ceci configure nos images d’argent et ajoute un montant clé.

Maintenant, appelez cette fonction à l'intérieur Installer().

 fonction Setup () setupCoins (); fin

7. Boutons d’installation ()

Ajouter ce qui suit sous le setupCoins () fonction que vous avez déclarée à l'étape ci-dessus.

 function setupButtons () dealBtn = display.newImage ("deal_btn.png", 250,960); dealBtn.isVisible = false; hitBtn = display.newImage ("hit_btn.png", 400 960); hitBtn.isVisible = false; standBtn = display.newImage ("stand_btn.png", 550,960); standBtn.isVisible = false; fin

Cela configure nos boutons et les rend tous invisibles.

Appeler cette fonction à l'intérieur Installer().

 fonction Setup () setupCoins (); setupButtons (); fin

8. SetupTextFields ()

Ajouter ce qui suit sous le setupButtons () fonction que vous avez entrée à l'étape ci-dessus.

 function setupTextFields () instructionsText = display.newText ("Placez votre pari", 300, 300, native.systemFont, 30); instructionsText: setTextColor (0,0,0) bankText = display.newText ("Votre banque: $", 10,905, native.systemFont, 30); bankText: setTextColor (0,0,0) betText = display.newText ("", 650,906, native.systemFont, 30); betText: setTextColor (0,0,0); fin

Cela met en place le Champs de texte et définit la couleur du texte en noir.

Ajoutez ceci au Installer() une fonction.

 fonction Setup () setupCoins (); setupButtons (); setupTextFields () end

9. SetupGroups ()

Ajouter ce qui suit sous le setupTextFields () une fonction.

 function setupGroups () coinContainer = display.newGroup () coinContainer.x = 250; coinContainer.y = 600; dealerGroup = display.newGroup (); playerGroup = display.newGroup (); fin

Ceci configure les groupes qui seront utilisés pour conserver les cartes et l'argent que le joueur parie

Ajoutez ceci au Installer() fonctionne comme vous l'avez fait dans les étapes précédentes.


10. Vérifier l'avancement

Si vous testez l'application, l'interface devrait fonctionner correctement..

Interface de jeu

11. AddListeners ()

Ajouter ce qui suit sous le setupGroups () une fonction.

 fonction addListeners () money10: addEventListener ('touch', betHandler); money25: addEventListener ('touch', betHandler); money50: addEventListener ('touch', betHandler); dealBtn: addEventListener ('toucher', traiter); hitBtn: addEventListener ('touch', hit); standBtn: addEventListener ('touch', stand); fin

Cela ajoute des écouteurs tactiles à nos éléments d'interface afin que l'utilisateur puisse interagir avec eux. Nous devons créer les fonctions qui seront appelées lorsque l'utilisateur clique dessus.


12. BetHandler ()

Entrez ce qui suit sous le addListeners () une fonction.

 fonction betHandler (event) end

Cette fonction gérera le pari. Cela fera en sorte que l'utilisateur n'essaye pas de parier plus que ce qu'il a dans sa banque.


13. Deal ()

Entrez ce qui suit sous le code que vous avez entré à l'étape ci-dessus.

 fonction deal () end

Cette fonction est le cœur du jeu. Toute la logique du jeu sera traitée dans cette fonction.


14. Hit ()

Ajouter ce qui suit sous le traiter() une fonction.

 fonction hit (événement) fin

Cette fonction sera appelée lorsque l'utilisateur appuiera sur "frappé" bouton.


15. Stand ()

Entrez ce qui suit sous le code que vous avez entré à l'étape ci-dessus.

 fonction stand () end

Lorsque le joueur décide de rester, cette fonction sera appelée.


16. CreateDeck ()

Ajouter ce qui suit sous le createDeck () une fonction.

 function createDeck () deck = ; pour i = 1, 4 do pour j = 1, 13 do tempCard locale = convient à [i]… j; table.insert (deck, tempCard); fin fin fin

Cela réinitialise la table de pont et crée un nouveau pont. Il parcourt chaque valeur de la costume table et ajoute le numéro 1 à travers 13 pour eux. On met la variable tempCard égal au résultat, puis insérez-le dans le plate-forme table.

Maintenant, appelez cela dans le Installer() une fonction.

 fonction Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); createDeck (); fin

Nous allons obtenir des cartes aléatoires du jeu, alors assurez-vous que c'est vraiment aléatoire nous aurons besoin de semer le générateur aléatoire. Si nous ne le faisons pas, à chaque démarrage du jeu, le même caractère aléatoire sera généré. Ajouter ce qui suit createDeck ().

 fonction Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); math.randomseed (os.time ()); createDeck (); fin

Conclusion

Ceci termine la première partie de ce tutoriel. Dans la prochaine partie de la série, nous commencerons à intégrer le gameplay. Merci d'avoir lu. Restez à l'écoute pour la deuxième partie!