Erstellen eines Blackjack-Spiels in Corona - Erstellen der Benutzeroberfläche

In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Corona SDK ein Blackjack-Spiel für das iPad erstellen. Lass uns anfangen!

Möchten Sie erfahren, wie dieses Spiel entworfen wurde? Diese Tutorial-Serie basiert auf der Arbeit von Andrei Marius, der ursprünglich ein ausführliches Illustrator-Tutorial veröffentlicht hat, in dem gezeigt wird, wie das Spiel auf Vectortuts entworfen wird+.


1. Neues Projekt

Öffnen Sie den Corona Simulator und wählen Sie "Neues Projekt".


Wählen Sie auf dem folgenden Bildschirm die folgenden Einstellungen.

Projekt Einstellungen

Drücken Sie die "Nächster", dann wählen Sie im Editor öffnen. Das wird sich öffnen "Main.lua"in Ihrem Standardtexteditor.


2. Projektkonfiguration

Öffnen "Config.lua"Alles löschen und in folgendes ändern.

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

Hiermit werden die Standardbreite, -höhe, -skala und -FPS des Projekts festgelegt. Das "letterBox"Skalierungseinstellung" bedeutet, dass die App in beide Richtungen so einheitlich wie möglich skaliert wird und wenn nötig das Spiel "Letter Boxed" zeigt, wie Sie es in einigen DVD-Filmen sehen.


3. Statusleiste ausblenden

Wir möchten nicht, dass die Statusleiste in unserer App angezeigt wird. Geben Sie daher Folgendes in "Main.lua"

 display.setStatusBar (display.HiddenStatusBar);

4. Lokale Variablen

Fügen Sie unter dem Code, den Sie oben eingegeben haben, Folgendes hinzu.

 local cardTable = display.newImage ("table.png", true); lokales Geld10; - das lokale Geld von 10,00 $; --Der 25-Dollar-Chip für lokales Geld50; --Der lokale Deal mit einem Preis von 50,00 US-Dollar; - die Deal-Buttons local hitBtn; - der hit button local standBtn; - die lokalen Anweisungen des StandknopfesText; - Anweisungen geben und lokale Anzüge des Gewinners anzeigen = "h", "d", "c", "s"; - Herzen = h, Diamanten = d, Keulen = c, Spaten = lokales Deck; - Das Kartenspiel mit dem lokalen Münzcontainer; - eine Gruppe, die die lokale Händlergruppe der Chips hält; - wir legen die Dealer Cards in diese Gruppe local playerGroup; - Wir legen die Spielerkarten in diese Gruppe local dealTo = "player"; - wer gerade an den lokalen Spieler gehandhabt wird Hand = ; - eine Tabelle, in der die Spielerkarten local dealerHand =  gehalten werden - einen Tisch für die Dealer Cards local allCards =  - einen Tisch für alle Karten local betAmount = 0; - wie viel der Spieler insgesamt lokales Geld setzt; - Wie viel Geld hat der Spieler lokaler BlackJack = false? - ob der Spieler oder Händler einen Blackjack-Spieler hat, der die erste firstDealerCard = "" hat; - ein Verweis auf die erste Karte, an die der Dealer einen lokalen Spieler erhältYields = false; - ob der Spieler lokal auf seiner Hand gestanden hat oder nicht; - wer der Gewinner der Runde ist Local Bet = 0; - wie viel der Spieler zur BetAmount-Variablen local bankText hinzufügt; - Zeigt das lokale Geld des Spielers an. - zeigt, wie viel der Spieler auf den lokalen DealerCardsY = 120 setzt; - Y-Position der Dealer Cards local playerCardsY = 810; - Y-Position der Spielerkarten

Dies sind alle Variablen, die wir in diesem Spiel verwenden werden. Lesen Sie die Kommentare, um zu verstehen, wozu sie bestimmt sind.


5. Setup ()

Die Setup-Funktion wird beim ersten Laden der App aufgerufen. Geben Sie unter dem Code, den Sie oben eingegeben haben, Folgendes ein.

 Funktion Setup () Ende

Rufen Sie nun die Setup-Funktion auf, wo Sie sie deklariert haben.

 Konfiguration()

6. SetupCoins ()

Fügen Sie oben Folgendes hinzu, wo Sie anrufen Konfiguration() im obigen Schritt.

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

Dies stellt unsere Geldbilder ein und fügt eine hinzu betAmount Schlüssel.

Rufen Sie jetzt diese Funktion auf Konfiguration().

 Funktion Setup () SetupCoins (); Ende

7. SetupButtons ()

Fügen Sie Folgendes unter dem hinzu setupCoins () Funktion, die Sie im obigen Schritt erklärt haben.

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

Dadurch werden unsere Knöpfe eingerichtet und alle werden unsichtbar.

Rufen Sie diese Funktion im Inneren auf Konfiguration().

 Funktion Setup () SetupCoins (); setupButtons (); Ende

8. SetupTextFields ()

Fügen Sie Folgendes unter dem hinzu setupButtons () Funktion, die Sie im obigen Schritt eingegeben haben.

 function setupTextFields () instructionsText = display.newText ("Platzieren Sie Ihre Wette", 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); Ende

Dies stellt die TextFields und setzt die Textfarbe auf Schwarz.

Fügen Sie dies dem hinzu Konfiguration() Funktion.

 Funktion Setup () SetupCoins (); setupButtons (); setupTextFields () Ende

9. SetupGroups ()

Fügen Sie Folgendes unter dem hinzu setupTextFields () Funktion.

 Funktion setupGroups () coinContainer = display.newGroup () coinContainer.x = 250; coinContainer.y = 600; dealerGroup = display.newGroup (); playerGroup = display.newGroup (); Ende

Dadurch werden die Gruppen festgelegt, in denen die Karten aufbewahrt werden, sowie das Geld, auf das der Spieler setzt

Fügen Sie dies dem hinzu Konfiguration() funktionieren genau wie Sie es in den vorherigen Schritten getan haben.


10. Überprüfen Sie den Fortschritt

Wenn Sie die App testen, sollte die Benutzeroberfläche ordnungsgemäß ausgeführt werden.

Spieloberfläche

11. AddListeners ()

Fügen Sie Folgendes unter dem hinzu setupGroups () Funktion.

 function 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); Ende

Dadurch werden unseren Oberflächenelementen Touch-Listener hinzugefügt, sodass der Benutzer mit ihnen interagieren kann. Wir müssen die Funktionen erstellen, die aufgerufen werden, wenn der Benutzer sie anklickt.


12. BetHandler ()

Geben Sie unter dem folgenden ein addListeners () Funktion.

 Funktion betHandler (Ereignis) Ende

Diese Funktion behandelt das Wetten. Dadurch wird sichergestellt, dass der Benutzer nicht mehr setzt, als er in seiner Bank hat.


13. Deal ()

Geben Sie unter dem Code, den Sie oben eingegeben haben, Folgendes ein.

 function deal () ende

Bei dieser Funktion liegt das Herz des Spiels. Die gesamte Logik des Spiels wird in dieser Funktion behandelt.


14. Hit ()

Fügen Sie Folgendes unter dem hinzu Deal() Funktion.

 Funktionstreff (Ereignis) Ende

Diese Funktion wird aufgerufen, wenn der Benutzer dieschlagen" Taste.


15. Stand ()

Geben Sie unter dem Code, den Sie oben eingegeben haben, Folgendes ein.

 Funktionsstand () Ende

Wenn der Spieler sich entscheidet zu stehen, wird diese Funktion aufgerufen.


16. CreateDeck ()

Fügen Sie Folgendes unter dem hinzu createDeck () Funktion.

 function createDeck () deck = ; für i = 1, 4 do für j = 1, 13 do local tempCard = Anzüge [i]… j; table.insert (Deck, TempCard); Ende Ende Ende

Dadurch wird der Decktisch zurückgesetzt und ein neues Deck erstellt. Es läuft durch jeden Wert in der Anzüge Tabelle und hängt die Nummer an 1 durch 13 zu ihnen. Wir setzen die Variable TempCard gleich dem Ergebnis, dann legen Sie es in die Deck Tabelle.

Nennen Sie das jetzt im Konfiguration() Funktion.

 Funktion Setup () SetupCoins (); setupButtons (); setupTextFields (); setupGroups (); createDeck (); Ende

Wir werden einige zufällige Karten vom Stapel bekommen, also stellen Sie sicher, dass es wirklich zufällig ist, dass wir den Zufallsgenerator säen. Wenn wir das nicht tun, wird jedes Mal, wenn das Spiel beginnt, dieselbe Zufälligkeit erzeugt. Fügen Sie folgendes hinzu createDeck ().

 Funktion Setup () SetupCoins (); setupButtons (); setupTextFields (); setupGroups (); math.randomseed (os.time ()); createDeck (); Ende

Fazit

Damit ist Teil 1 dieses Tutorials zu Ende. Im nächsten Teil der Serie werden wir das Gameplay integrieren. Danke fürs Lesen. Bleiben Sie dran für den zweiten Teil!