Skapa ett Blackjack-spel i Corona - Skapa gränssnittet

I den här handledningen visar jag dig hur du skapar ett Blackjack-spel för iPad med Corona SDK. Låt oss börja!

Vill du lära dig hur detta spel utformades? Denna tutorialserie bygger på arbetet med Andrei Marius, som ursprungligen publicerade en djupgående Illustratorhandledning som demonstrerar hur man utformar spelet på Vectortuts+.


1. Nytt projekt

Öppna Corona Simulator och välj "Nytt projekt".


På följande skärm väljer du följande inställningar.

Projektinställningar

Tryck på "Nästa"-knappen och välj sedan öppna i redaktör. Detta öppnas "Main.lua"i din standard textredigerare.


2. Projektkonfiguration

Öppna "Config.lua"ta bort allt och ändra det till följande.

 application = content = width = 768, height = 1024, scale = "letterbox", fps = 30,

Detta anger projektets standardbredd, höjd, skala och FPS. "brevlåda"Skalinställning betyder att appen ska skala upp i båda riktningarna så enhetligt som möjligt, och vid behov visa spelet" Letter Boxed ", som du ser i vissa DVD-filmer.


3. Göm statusfältet

Vi vill inte att statusfältet visas i vår app, så skriv in följande i "Main.lua"

 display.setStatusBar (display.HiddenStatusBar);

4. Lokala variabler

Lägg till följande under koden du angav i steget ovan.

 local cardTable = display.newImage ("table.png", true); lokala pengar10; - $ 10,00 lokala pengar25; - $ 25.00 chip lokala pengar50; - $ 50.00 chip lokala dealBtn; - Affärsknapparna lokala hitBtn; - träffknappen lokala standBtn; - Ställknappen lokala instruktionerText; - Ge instruktioner och visa vinnarens lokala drag = "h", "d", "c", "s"; - hjärtan = h, diamanter = d, klubbar = c, spader = s lokala däck; - Däcket av kort lokala coinContainer; - En grupp som kommer att hålla den lokala återförsäljaren Grupp - Vi lägger återförsäljarkorten i den här gruppen lokala spelareGroup; - vi lägger spelarkorten i den här gruppen lokala dealTo = "player"; - som för närvarande handlas till lokal spelareHand = ; - ett bord för att hålla spelarna kort lokala dealerHand = ; - ett bord för att hålla återförsäljarna kort lokala allaCards =  - ett bord för att hålla alla kort lokala betAmount = 0; - hur mycket spelaren satsar totalt lokala pengar; - hur mycket pengar spelaren har lokal blackJack = false; - om spelare eller återförsäljare har blackjack local firstDealerCard = ""; - En hänvisning till det första kortet som återförsäljaren har handlat lokal playerYields = false; - huruvida spelaren har stått på sin hand eller inte - vem vinnaren av rundan är lokal satsning = 0; - hur mycket spelaren lägger till betAmount variabel lokal bankText; - visar spelarna pengar lokalt betText; - visar hur mycket spelaren satsar på lokal dealerCardsY = 120; - Y-position för återförsäljarkort lokal spelareCardsY = 810; - Y-position för spelarkort

Det här är alla variabler vi ska använda i det här spelet. Läs kommentarerna för att förstå vad de är för.


5. Setup ()

Inställningsfunktionen kommer att ringas när appen laddas först. Ange följande under koden du angav i steget ovan.

 funktion Setup () slut

Ring nu till inställningsfunktionen precis nedanför där du deklarerade det.

 Inrätta()

6. SetupCoins ()

Lägg till följande ovan var du ringer Inrätta() i steget ovan.

 funktion 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; slutet

Detta ställer in våra pengar bilder och lägger till en betAmount nyckel-.

Ring nu den här funktionen inuti Inrätta().

 funktion Setup () setupCoins (); slutet

7. SetupButtons ()

Lägg till följande under setupCoins () funktion du deklarerade i steget ovan.

 funktion 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; slutet

Detta ställer in våra knappar och gör dem alla osynliga.

Ring denna funktion inuti Inrätta().

 funktion Setup () setupCoins (); setupButtons (); slutet

8. SetupTextFields ()

Lägg till följande under setupButtons () funktion du skrev in i steget ovan.

 funktion setupTextFields () instructionsText = display.newText ("Placera din satsning", 300, 300, native.systemFont, 30); instructionsText: setTextColor (0,0,0) bankText = display.newText ("Din bank: $", 10,905, native.systemFont, 30); bankText: setTextColor (0,0,0) betText = display.newText ("", 650.906, native.systemFont, 30); betText: setTextColor (0,0,0); slutet

Detta ställer in Textfält och ställer in textfärgen till svart.

Lägg till det här i Inrätta() fungera.

 funktion Setup () setupCoins (); setupButtons (); setupTextFields () slutet

9. SetupGroups ()

Lägg till följande under setupTextFields () fungera.

 funktion setupGroups () coinContainer = display.newGroup () coinContainer.x = 250; coinContainer.y = 600; dealerGroup = display.newGroup (); playerGroup = display.newGroup (); slutet

Detta ställer upp de grupper som kommer att användas för att hålla korten och pengarna spelaren satsar

Lägg till det här i Inrätta() fungerar precis som du har gjort i tidigare steg.


10. Kontrollera framsteg

Om du testar appen bör du se gränssnittet köra ordentligt.

Spelgränssnitt

11. AddListeners ()

Lägg till följande under setupGroups () fungera.

 funktion addListeners () money10: addEventListener ('touch', betHandler); money25: addeventlistener ( 'touch', betHandler); money50: addeventlistener ( 'touch', betHandler); dealBtn: addeventlistener ( 'touch', affär); hitBtn: addeventlistener ( 'touch', slog); standBtn: addeventlistener ( 'touch', stå); slutet

Detta lägger till lyssnarna på våra gränssnittselement så att användaren kan interagera med dem. Vi måste skapa de funktioner som kommer att ringas när användaren klickar på dem.


12. BetHandler ()

Ange följande under addListeners () fungera.

 funktion betHandler (händelse) slut

Denna funktion kommer att hantera vadslagningen. Det kommer att se till att användaren inte försöker satsa mer än han har i sin bank.


13. Deal ()

Ange följande under koden du angav i steget ovan.

 funktion deal () slutet

Denna funktion är där hjärtat av spelet ligger. Alla logik i spelet kommer att hanteras i denna funktion.


14. Hit ()

Lägg till följande under handla() fungera.

 funktion träff (händelse) slut

Denna funktion kommer att ringas när användaren trycker på "träffa" knapp.


15. Stativ ()

Ange följande under koden du angav i steget ovan.

 funktionstangent () slut

När spelaren bestämmer sig för att stå, kommer denna funktion att ringas.


16. SkapaDeck ()

Lägg till följande under createDeck () fungera.

 funktion createDeck () deck = ; för i = 1, 4 gör för j = 1, 13 gör lokalt tempCard = passar [i] ... j; table.insert (däck, tempCard); ändänden

Detta återställer däckbordet och skapar ett nytt däck. Det går igenom varje värde i kostymer bord och lägger till numret 1 genom 13 till dem. Vi ställer in variabeln tempCard lika med resultatet, sätt sedan in det i däck tabell.

Ring nu här i Inrätta() fungera.

 funktion Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); createDeck (); slutet

Vi kommer att få några slumpmässiga kort från däcket, så se till att det är verkligen slumpmässigt vi kommer att behöva fröna slumpgeneratorn. Om vi ​​inte gör det, kommer varje gång spelet börjar, generera samma slumpmässighet. Lägg till följande createDeck ().

 funktion Setup () setupCoins (); setupButtons (); setupTextFields (); setupGroups (); math.randomseed (os.time ()); createDeck (); slutet

Slutsats

Detta leder till en del av den här handledningen. I nästa del av serien kommer vi att börja integrera spelet. Tack för att du läser. Håll dig klar för del två!