Een Blackjack-spel maken in Corona - De interface maken

In deze zelfstudie laat ik je zien hoe je een Blackjack-game voor de iPad kunt maken met behulp van de Corona SDK. Laten we beginnen!

Wilt u weten hoe deze game is ontworpen? Deze tutorialserie is gebaseerd op het werk van Andrei Marius, die oorspronkelijk een diepgaande Illustrator-tutorial publiceerde die demonstreerde hoe het spel op Vectortuts moest worden ontworpen+.


1. Nieuw project

Open de Corona Simulator en kies "Nieuw project".


Kies de volgende instellingen op het volgende scherm.

Project instellingen

Druk de "volgende"knop, kies dan open in de editor. Dit wordt geopend "Main.lua"in je standaard teksteditor.


2. Projectconfiguratie

Open "Config.lua"verwijder alles en verander het naar het volgende.

 toepassing = content = width = 768, height = 1024, scale = "letterBox", fps = 30,

Hiermee worden de standaardbreedte, hoogte, schaal en FPS van het project ingesteld. De "brievenbus"Schaalinstelling betekent dat de app in beide richtingen zo gelijkmatig mogelijk schaalt, en indien nodig het spel" Letter Boxed "laat zien, zoals je in sommige dvd-films ziet.


3. De statusbalk verbergen

We willen niet dat de statusbalk wordt weergegeven in onze app, dus voer het volgende in "Main.lua"

 display.setStatusBar (display.HiddenStatusBar);

4. Lokale variabelen

Voeg het volgende toe onder de code die u in de bovenstaande stap hebt ingevoerd.

 local cardTable = display.newImage ("table.png", true); lokaal geld10; - Het lokale geld van $ 10,0025; - Het lokale geld van $ 25,00 chip50; - De lokale deal van $ 50,00 voor chipBtn; - de dealknoppen lokale hitBtn; - de hitknop local standBtn; - de stand-button local instructionsText; - Geef instructies en laat de lokale kleuren van de winnaar zien = "h", "d", "c", "s"; - harten = h, ruiten = d, klaveren = c, schoppen = s lokaal dek; - The deck of Cards local coinContainer; - een groep die de chips lokaal dealerbedrijf zal houden; - we plaatsen de dealer kaarten in deze groep local playerGroup; - we plaatsen de spelerskaarten in deze groep local dealTo = "player"; - die momenteel wordt gedeeld met lokale spelerHand = ; - een tafel om de spelerskaarten te houden local dealerHand = ; - een tabel om de dealers kaarten lokaal te houden allCards =  - een tabel om alle kaarten lokaal te houden betAmount = 0; - hoeveel de speler gokt Totaal lokaal geld; - hoeveel geld heeft de speler lokale BlackJack = false; - of speler of dealer blackjack local firstDealerCard = "" heeft; - een verwijzing naar de eerste kaart die de dealer is gedeeld. lokale spelerOpmerkingen = onwaar; - of de speler lokaal op zijn hand heeft gestaan; - wie de winnaar van de ronde is lokale weddenschap = 0; - hoeveel de speler toevoegt aan betAmount variabele local bankText; - toont de spelers geld lokale betText; - laat zien hoeveel de speler op lokale dealerCardsY = 120 gokt; - Y-positie van dealer kaarten lokale spelerCardsY = 810; - Y-positie van spelerskaarten

Dit zijn alle variabelen die we in deze game zullen gebruiken. Lees de opmerkingen om te begrijpen waarvoor ze zijn bedoeld.


5. Setup ()

De setup-functie wordt aangeroepen wanneer de app voor het eerst wordt geladen. Voer het volgende in onder de code die u in de bovenstaande stap hebt ingevoerd.

 functie Setup () einde

Bel nu de setup-functie precies onder waar je het hebt gedeclareerd.

 Opstelling()

6. SetupCoins ()

Voeg het volgende hierboven toe waar u belt Opstelling() in de stap hierboven.

 function 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; einde

Dit stelt onze geldafbeeldingen op en voegt er een toe betAmount sleutel.

Roep deze functie nu naar binnen Opstelling().

 function Setup () setupCoins (); einde

7. Setupknoppen ()

Voeg het volgende toe onder de setupCoins () functie die u in de bovenstaande stap hebt opgegeven.

 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; einde

Dit stelt onze knoppen in en maakt ze allemaal onzichtbaar.

Roep deze functie naar binnen Opstelling().

 function Setup () setupCoins (); setupButtons (); einde

8. SetupTextFields ()

Voeg het volgende toe onder de setupButtons () functie die u in de bovenstaande stap hebt ingevoerd.

 function setupTextFields () instructionsText = display.newText ("Place Your Bet", 300, 300, native.systemFont, 30); instructionsText: setTextColor (0,0,0) bankText = display.newText ("Your Bank: $", 10.905, native.systemFont, 30); bankText: setTextColor (0,0,0) betText = display.newText ("", 650.906, native.systemFont, 30); betText: SetTextColor (0,0,0); einde

Hiermee stelt u de TextFields en stelt de tekstkleur in op zwart.

Voeg dit toe aan de Opstelling() functie.

 function Setup () setupCoins (); setupButtons (); setupTextFields () einde

9. SetupGroups ()

Voeg het volgende toe onder de setupTextFields () functie.

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

Dit stelt de groepen in die gebruikt zullen worden om de kaarten te houden en het geld dat de speler inzet

Voeg dit toe aan de Opstelling() functioneren zoals je in de vorige stappen hebt gedaan.


10. Controleer de voortgang

Als u de app test, ziet u dat de interface correct werkt.

Spelinterface

11. AddListeners ()

Voeg het volgende toe onder de setupGroups () functie.

 functie addListeners () money10: addEventListener ('touch', betHandler); money25: addEventListener ( 'touch', betHandler); money50: addEventListener ( 'touch', betHandler); dealBtn: addEventListener ( 'touch', deal); hitBtn: addEventListener ( 'touch', hit); standBtn: addEventListener ( 'touch', stand); einde

Dit voegt touch listeners toe aan onze interface-elementen, zodat de gebruiker ermee kan communiceren. We moeten de functies maken die worden aangeroepen wanneer de gebruiker erop klikt.


12. BetHandler ()

Voer het volgende in onder addListeners () functie.

 functie betHandler (event) einde

Deze functie zal het gokken afhandelen. Het zorgt ervoor dat de gebruiker niet meer probeert te gokken dan hij in zijn bank heeft gedaan.


13. Deal ()

Voer het volgende in onder de code die u in de bovenstaande stap hebt ingevoerd.

 functie deal () einde

Deze functie is waar het hart van het spel ligt. Alle logica van het spel zal in deze functie worden behandeld.


14. Hit ()

Voeg het volgende toe onder de deal () functie.

 functietreffer (gebeurtenis) einde

Deze functie wordt gebeld wanneer de gebruiker op de "raken"knop.


15. Stand ()

Voer het volgende in onder de code die u in de bovenstaande stap hebt ingevoerd.

 function stand () einde

Wanneer de speler beslist te gaan staan, wordt deze functie gebeld.


16. CreateDeck ()

Voeg het volgende toe onder de createDeck () functie.

 functie createDeck () deck = ; voor i = 1, 4 doen voor j = 1, 13 doen lokale tempCard = kleuren [i] ... j; table.insert (dek, tempCard); einde einde

Hiermee wordt de deck-tabel gereset en wordt een nieuw deck gemaakt. Het loopt door elke waarde in de pakken tabel en voegt het nummer toe 1 door 13 naar hen. We hebben de variabele ingesteld tempCard gelijk aan het resultaat, plaats het dan in de dek tafel.

Noem dit nu in de Opstelling() functie.

 function Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); createDeck (); einde

We krijgen een paar willekeurige kaarten van het kaartspel, dus zorg ervoor dat het echt willekeurig is, we zullen de willekeurige generator moeten zaaien. Als we dit niet doen, zal elke keer dat het spel start dezelfde willekeur worden gegenereerd. Voeg het volgende toe createDeck ().

 function Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); math.randomseed (os.time ()); createDeck (); einde

Conclusie

Dit brengt deel een van deze tutorial tot een einde. In het volgende deel van de serie zullen we beginnen met het integreren van de gameplay. Bedankt voor het lezen. Blijf op de hoogte voor deel twee!