Share
In deze Premium-zelfstudie bouwen we een geweldige BlackJack-game vanaf nul met behulp van Flash en AS3.
Met behulp van de Flash-tekengereedschappen maken we een goed uitziende grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De gebruiker kan inzetten op de cpu en spelen op basis van de willekeurig gegenereerde kaarten.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er wordt een kleurrijke, mooi uitziende interface weergegeven, dit omvat meerdere vormen, knoppen, bitmaps en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
We moeten de vormen van de pokerkaarten maken of krijgen om de kaarten te maken, een eenvoudige manier om dit te doen is een lettertype gebruiken.
Ga naar deze website en kopieer en plak de symbolen in uw FLA-bestand. Je kunt ze converteren naar MovieClips om ze gemakkelijk te kunnen verwerken.
Dit is het hoofdscherm of scherm, het zal de eerste afbeelding zijn die in onze game verschijnt, ga verder met de volgende stap om te beginnen met het maken ervan.
Maak een rechthoek van 320x480 px en vul deze met de volgende radiale gradiënt: # 2c753d, # 3b9d52.
Met behulp van het gereedschap Rechthoek en de pokervormen die we eerder hebben gemaakt, vormen we een patroon om onze achtergrond er beter uit te laten zien.
Dupliceer het patroon en rangschik het om de volledige achtergrondgradiënt te dekken.
U kunt uw achtergrond converteren naar een enkele afbeelding en deze centreren of het Flash-exportmenu gebruiken om een gesegmenteerde png-afbeelding te krijgen. Ik gebruikte de png-optie en kwam met zoiets als dit:
Converteer de definitieve afbeelding naar MovieClip en noem deze bg.
Voor de hoofdweergave gebruiken we een zwart verloop bovenaan deze achtergrond, dupliceren het groene verloop, veranderen de kleur in zwart en de alpha-waarden in (0, 70).
Selecteer het Tekstgereedschap (T), selecteer een goed uitziend lettertype om de titel van je spel te schrijven en pas dit radiaal verloop toe: # a08c66, # f6e7be.
Converteer de tekst naar MovieClip en pas het volgende filter toe:
Je kunt ook een pokervorm als detail toevoegen:
De tooltip toont de gebruiker een instructie in de hoofdweergave.
Maak een 84x23px afgeronde rechthoek en vul deze met een verloop van # 000000 tot # 333333, verander de hoekradius naar 6.
Dupliceer de vorm en draai deze verticaal, verander de grootte naar 80x18px en centreer deze in de laatste vorm.
Gebruik het Polystar-gereedschap om een driehoek te maken en plaats deze onderaan in het midden van de werkelijke vorm.
Voeg ten slotte een TextField (T) toe en centreer het.
Tijd voor de chips.
Begin met een eenvoudige zwarte cirkel en gebruik het lijntool (N) om een witte cirkel met streepjes in de vorm te maken:
Gebruik het gereedschap Rechthoek om een plussymbool te maken en dit te gebruiken om de chip te versieren. U kunt ook een logo of een andere afbeelding toevoegen aan het midden van de chip.
Er zal ook een witte chip worden gebruikt, verander gewoon de zwarte vormen naar wit en omgekeerd.
De infoknop belt de About View wanneer erop wordt geklikt.
Maak een witte cirkel van 16x16px en wijzig de alpha in 15%. Gebruik de Teksttool (T) om een cursieve i te schrijven.
Converteer de vormen naar Knop en noem deze infoButton.
Gebruik het Primitive Tool Rechthoek om een 66x86px, # 858D8F vorm te maken en verander de hoekradius in 16.
Dupliceer de vorm en verklein de vorm met 4 pixels, pas dit verloop toe: #FFFDFC, #DCDDDF.
Converteer de afbeeldingen naar MovieClip en gebruik de slagschaduwfilter die we eerder in de titel gebruikten.
Gebruik de overeenkomstige pokervorm en centreer deze in de kaart.
Dupliceer de vorm en gebruik het tekstgereedschap (T) om een statisch tekstveld te maken in de linkerbovenhoek.
Herhaal dit proces met de benodigde kaarten en gebruik de functie Afbeelding exporteren in Flash om de kaarten in png-indeling te maken. Bewaar de kaarten in een map genaamd afbeeldingen.
Vergeet niet om ze een eenvoudige en beschrijvende naam te geven om het laden te vergemakkelijken. Ik heb twee letters gebruikt, de eerste letter van de kaartvorm en het nummer.
Het scherm Info toont de credits, het jaar en het copyright van het spel.
Het zal vrij eenvoudig zijn om te creëren omdat we al alle elementen erin hebben gebruikt.
Dit is de gameweergave, deze gebruikt de originele lichtgroene achtergrond en een onderste balk die de weddenschappen en balans toont.
Twee dynamische tekstvelden worden gebruikt, balans en inzet. Er is ook een knop met de naam stayButton, waardoor het spel stopt en de kaarttesten worden uitgevoerd.
Een tooltip-achtige afbeelding toont de werkelijke score van de speler terwijl dezelfde afbeelding een a laat zien ? op de dealer.
Gebruik de grafiekinfo om een vakje van 30x24px te maken, maak een dynamisch tekstveld en noem het n. Converteer ze naar MovieClip en markeer het vak Exporteren voor ActionScript, stel de klassenaam in op CardCounter.
Het inzetpaneel geeft de informatie over de weddenschappen weer.
De speler kan inzetten in veelvouden van 100 en 500.
Hier zijn de instantienamen van de interactieve objecten:
Accentsconagua
wit.zwart.okButton.Converteer de objecten naar een enkele MovieClip en markeer het vak Exporteren voor ActionScript, stel de klassenaam in BetPanel.
Dit scherm verschijnt wanneer het spel is beslist, of je wint, verliest of je bereikt het spel (wanneer de speler alle chips verliest).
Een dynamisch tekstveld wordt gebruikt in deze weergave om de status weer te geven waarin het spel zich bevindt. Dit TextField wordt genoemd tekst, en het is binnen de genoemde zwarte doos berichten box.
Converteer de grafische groep naar een MovieClip en markeer het vak Exporteren voor ActionScript; stel de klassenaam in AlertScreen.
Hiermee beëindigt u het grafische gedeelte, laat het ActionScript starten!
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in de flitser, dit vergroot de prestaties en is gemakkelijker te gebruiken.
Je kunt Tween Nano downloaden van de officiële website.
Met het sleutelwoord van het pakket kunt u uw code indelen in groepen die door andere scripts kunnen worden geïmporteerd. Het wordt aanbevolen deze een naam te geven, te beginnen met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: mijn lessen. Het is ook gebruikelijk om ze een naam te geven via de website van uw bedrijf: com.mycompany.classesType.myClass.
In dit voorbeeld gebruiken we een enkele klasse, dus het is niet echt nodig om een klassenmap te maken.
pakket
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
Hier verklaren we de klas met behulp van de klasse definitie sleutelwoord gevolgd door de naam die we voor de klas willen, onthoud dat je het bestand met deze naam moet opslaan.
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
publieke slotklasse Main breidt
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten.
private var aboutView: AboutView = new AboutView (); // Een exemplaar van het scherm ongeveer vóór privé vartype: Vector.= nieuwe Vector. (); // Bevat het vormtype van het privé-nummer van de kaarten: Vector. = nieuwe Vector. (); // Bevat de beschikbare kaartnummers private var xPos: Vector. = nieuwe Vector. (); // Slaat de X-posities op waar kaarten privé kunnen worden geplaatst. YPos: Vector. = nieuwe Vector. (); private var betPanel: BetPanel = nieuwe BetPanel (); // Een instantie van het bet panel private var currentBet: int = 0; // Het bedrag van de huidige weddenschap private var cardGFX: Vector. = nieuwe Vector. (); // Slaat alle kaarten op die zijn geladen private var cardTerug: CardBack = new CardBack (); // Exemplaar van de achterkant van een kaart private var additionalCards: int = 0; // De spelerskaarten die zijn geladen na de eerste 2 privévadditionalCards: int = 0; private var dealerCounter: CardCounter = nieuwe CardCounter (); // Geeft de som van de kaarten van de dealer weer private var playerCounter: CardCounter = new CardCounter (); privé var dScore: int = 0; // Slaat de som van de kaarten van de dealer op private var pScore: int = 0; privé var-waarschuwing: AlertScreen = nieuw AlertScreen (); // Een instantie van het waarschuwingsscherm private var isNewGame: Boolean = false; // Gebruikt om een nieuw spel te starten als het waar is
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void // Code ...
In de constructorfunctie stellen we de waarden in van de vectoren die eerder zijn gedeclareerd.
public final function 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); Muisluisteraars worden toegevoegd aan de infoButton en de hoofdaanzicht MovieClip, deze luisteraars schakelen tussen weergaven.
public final function 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); / * Hoofdweergave Luisteraars * / infoButton.addEventListener (MouseEvent.MOUSE_UP, addAboutView); mainView.addEventListener (MouseEvent.MOUSE_UP, tweenMainView); Deze functie verwijdert de infoButton en tweens de hoofdaanzicht op met behulp van TweenNano; wanneer de animatie voorbij is, wordt een functie gebeld.
private finale functie tweenMainView (e: MouseEvent): void removeChild (infoButton); TweenNano.to (mainView, 0.4, y: -480, onComplete: removeMainView);
De volgende code wordt gebruikt om het te vernietigen hoofdaanzicht. Het roept ook de functie aan die het inzetpaneel zal tonen.
private laatste functie removeMainView (): void mainView.removeEventListener (MouseEvent.MOUSE_UP, removeMainView); removeChild (MAINVIEW); mainView = null; addBetPanel ();
De weergave Info wordt weergegeven wanneer de gebruiker op de InfoButton op het hoofdscherm klikt. De volgende regels behandelen dat.
private finale functie addAboutView (e: MouseEvent): void aboutView.x = 0; // Herstelt de positie in het geval dat de weergave opnieuw wordt aangeroepen addChild (aboutView); TweenNano.from (overView, 0.4, x: -320); aboutView.addEventListener (MouseEvent.MOUSE_UP, hideAboutView); private laatste functie hideAboutView (e: MouseEvent): void aboutView.removeEventListener (MouseEvent.MOUSE_UP, hideAboutView); TweenNano.to (aboutView, 0.4, x: -320, onComplete: removeAboutView); private final-functie removeAboutView (): void removeChild (aboutView);
Laten we nu het inzetpaneel toevoegen, dit zal worden gebruikt om het inzetbedrag te kiezen voordat het spel begint.
private finale functie addBetPanel (): void / * Bet Panel * / betPanel.y = stage.stageHeight / 2; // Centre it betPanel.white.addEventListener (MouseEvent.MOUSE_UP, makeBet); // Muisluisteraars betPanel.black.addEventListener (MouseEvent.MOUSE_UP, makeBet); addChild (betPanel); TweenNano.to (betPanel, 0.7, x: stage.stageWidth / 2, ease: Elastic.easeOut); / * OK / Stay-knoppen standaard verborgen / uitgeschakeld * / betPanel.okButton.visible = false; stayButton.visible = false;
De makeBet () functie verwerkt zowel witte als zwarte chips.
De witte chip voegt 100 toe aan de inzet en de zwarte voegt er 500 aan toe.
private finale functie makeBet (e: MouseEvent): void var balanceInt: int = int (balance.text); // Converteer de saldotekst naar int var betAmount: int = 0; // Bewaart het bedrag dat aan de weddenschap moet worden toegevoegd / * Controleer op welke chip is geklikt * / e.target.name == 'wit'? betAmount = 100: betAmount = 500; / * Controleer of er voldoende saldo * / if is (balanceInt> = betAmount) / * OK-knop inschakelen * / betPanel.okButton.visible = true; betPanel.okButton.addEventListener (MouseEvent.MOUSE_UP, init); currentBet + = betAmount * 2; balance.text = String (balanceInt - betAmount); balanceLP.text = balance.text; / * Huidige wedtekst * / bet.text = String (currentBet); betLP.text = String (currentBet);
Deze regels zullen het inzetpaneel verwijderen wanneer het inzetten is gedaan.
De start het spel() functie wordt in deze code genoemd.
private finale functie 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; private finale functie removeBetPanel (): void removeChild (betPanel); start het spel();
Dit codeblok start alle actie, het gebruikt de loadCard () functie om een willekeurige kaart dynamisch te laden, roept de score-teller op en voegt de luisteraars van de spelbesturing toe.
private laatste functie startGame (): void loadCard (xPos [0], yPos [0], true); loadCard (xPos [1], yPos [0], true, true); loadCard (xPos [0], yPos [1], false); loadCard (xPos [1], yPos [1], false); loadCounter (); luisteraars ();
Een van de belangrijkste functies in deze app, deze voert alle vereiste acties uit om een kaart uit de. Te laden \afbeeldingen\ map en plaats deze in het werkgebied.
De loadCard () functie heeft vier parameters nodig:
Deze functie geeft ook de kaartscore-waarden door aan de overeenkomstige variabelen.
private laatste functie loadCard (xp: int, yp: int, isDealer: Boolean, hidden: Boolean = false): void var loader: Loader = new Loader (); // A Loader om de met bitmap geladen cardGFX.push (loader) op te slaan; // Deze vector slaat alle geladen kaarten op var num: String = number [Math.floor (Math.random () * 12)]; // Een willekeurig gekozen aantal beschikbare kaartnummers var urlLoader: URLRequest = nieuwe URLRequest ('images /' + String (type [Math.rand (Math.random () * 4)] + num) + '.png') ; // laadt een willekeurige kaart loader.x = xp; loader.y = yp; Loader.load (URLLoader); addChild (loader); if (verborgen) cardBack.x = xp + 2; cardBack.y = yp + 1; addChild (cardback); / * Als num> 10 dan j, q of k is geselecteerd, wijzigt u de waarde in 10 * / if (int (num)> 10) num = '10'; / * Controleer of kaarten voor speler of dealer * / if (isDealer) zijn dScore + = int (num); dealerCounter.n.text = String (dScore); else pScore + = int (num); playerCounter.n.text = String (pScore); Natuurlijk zou je dit veel complexer en realistischer kunnen maken door een array te genereren met waarden voor een heel pak kaarten (of meerdere), deze te "shuffelen" en ze uit te delen zoals vereist, maar de eenvoudige willekeurige methode die we hier gebruikten is prima voor onze doeleinden.
De loadCounter () functie voegt de CardCounter-instanties toe en plaatst deze in de juiste positie. De waarden worden verkregen uit de scorevariabelen.
private eindfunctie loadCounter (): void dealerCounter.x = 145; dealerCounter.y = 4; playerCounter.x = 145; playerCounter.y = 417; dealerCounter.n.text = '?'; playerCounter.n.text = String (pScore); addChild (dealerCounter); addChild (playerCounter);
De speler kan een andere kaart aanvragen door op de achtergrond te dubbelklikken. De volgende code verwerkt die functie.
private finale functietreffer (e: MouseEvent): void loadCard (xPos [2 + additionalCards], yPos [1], false); // laad een andere kaart additionalCards ++; if (additionalCards> = 2) bg.doubleClickEnabled = false; bg.removeEventListener (MouseEvent.DOUBLE_CLICK, hit); / * Controleer of score hoger is dan 21 * / if (pScore> 21) blackjack ('lost'); De knop Blijven voert deze code uit wanneer erop wordt geklikt. Het zal de score van de deler onthullen en de functie oproepen die beide scores zal controleren.
privé laatste functie verblijf (e: MouseEvent): void / * Onthul dealer score * / dealerCounter.n.text = String (dScore); / * Controleer op speler en dealer score * / checkScore ();
Deze functie vergelijkt de scores van de speler en de dealer; afhankelijk hiervan worden meer kaarten toegevoegd of wordt het spel gewonnen of verloren verklaard.
private final function 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 (); De volgende functie behandelt de kaarten die aan de hand van de dealer zijn toegevoegd.
private final function hitDealer (): void loadCard (xPos [2 + dAdditionalCards], yPos [0], true); dAdditionalCards ++; / * Controleer of de score hoger is dan 21 * / if (dScore> 21) blackjack (); else checkScore ();
Muisgestuurde objecten worden gebruikt om het spel te besturen. De volgende functie voegt de benodigde luisteraars toe om met deze besturingselementen om te gaan.
Een parameter wordt gebruikt om te weten of de luisteraars zullen worden toegevoegd of verwijderd.
prive-luisteraars in de finale functie (what: 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);
Deze functie wordt uitgevoerd wanneer de speler wint of verliest, de standaardparameter is winnen.
privé-finale functie blackjack (e: String = 'win'): void / * Onthul dealer verborgen kaart * / removeChild (cardBack); / * Onthul de score van de dealer * / dealerCounter.n.text = String (dScore); / * Luisteraars * / luisteraars verwijderen ('verwijderen'); / * Waarschuwingsscherm * / if (e == 'lost') alert.messageBox.txt.text = 'Je bent verloren'; else alert.messageBox.txt.text = 'Win u!'; / * Huidige weddenschap toevoegen aan saldo * / balance.text = String (int (balance.text) + int (bet.text)); balanceLP.text = balance.text; / * Controleer balansbedrag * / if (int (balance.text)! = 0) alert.addEventListener (MouseEvent.MOUSE_UP, restart); else alert.messageBox.txt.text = 'Game Over'; isNewGame = true; alert.addEventListener (MouseEvent.MOUSE_UP, restart); / * Huidige weddenschap wissen * / bet.text = '0'; betLP.text = '0'; currentBet = 0; addChild (alert); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Elastic.easeOut); Als u op het waarschuwingsscherm klikt, worden variabelen, weergaveobjecten en andere waarden opnieuw ingesteld om nog een ronde te spelen.
Als het isNewGame variabele is waar, de balans wordt ook gereset.
privé laatste functie opnieuw opstarten (e: MouseEvent): void alert.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alert); dScore = 0; pScore = 0; removeChild (dealerCounter); removeChild (playerCounter); var cardsLen: int = cardGFX.length; for (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();
Stel de documentklasse in. Als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan deze Snelle tip.
Het eindresultaat is een kleurrijk en vermakelijk spel. Probeer het aan te passen - hoe zit het met een poort naar een mobiel apparaat?
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
