Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

“Double Down” with an Awesome Flash BlackJack Game

by
Difficulty:IntermediateLength:LongLanguages:

In this Premium Tutorial, we'll be building an amazing BlackJack game from scratch using Flash and AS3.



Step 1: Brief Overview

Using the Flash drawing tools we'll create a good looking graphic interface that will be powered by several ActionScript 3 classes.

The user will be able to bet against the cpu and play based on the randomly generated cards.


Step 2: Document Settings

Open Flash and create a 320 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.



Step 3: Interface


A colorful nice looking interface will be displayed, this involves multiple shapes, buttons, bitmaps and more.

Continue to the next steps to learn how to create this GUI.


Step 4: Poker Shapes


We'll need to create or get the shapes of the poker cards in order to create the cards, an easy way to do it is using a font.

Go to this website and copy/paste the symbols in your FLA file. You can convert them to MovieClips to handle them easily.


Step 5: Main Screen


This is the Main Screen or view, it will be the first graphic to appear in our game, continue to the next step to begin its creation.


Step 6: Background

Create a 320x480px rectangle and fill it with the following radial gradient: #2c753d, #3b9d52.


Using the rectangle tool and the poker shapes we created before, we'll form a pattern to make our background look better.


Duplicate the pattern and arrange it in order to cover the full background gradient.


You can either convert your background to a single Graphic and center it or use the Flash export menu to get a sliced png image. I used the png option and came up with something like this:


Convert the final graphic to MovieClip and name it bg.

For the Main View we'll use a black gradient on top of this background, duplicate the green gradient, change the color to black and the alpha values to (0, 70).



Step 7: Title

Select the Text Tool (T), select a good looking font to write your game title and apply this radial gradient: #a08c66, #f6e7be.


Convert the text to MovieClip and apply the next filter:


You can also add a poker shape as a detail:



Step 8: Tooltip

The tooltip will show the user an instruction in the Main View.

Create a 84x23px rounded rectangle and fill it with a #000000 to #333333 gradient, change its corner radius to 6.


Duplicate the shape and flip it vertically, change its size to 80x18px and center it in the last shape.


Use the Polystar Tool to create a triangle and place it on the bottom center of the actual shape.


Lastly, add a TextField (T) and center it.



Step 9: Chips

Time for the Chips.

Start with a simple black circle and use the Line Tool (N) to create a dashed white circle inside:


Use the Rectangle Tool to create a plus symbol and use it to decorate the chip. You can also add a logo or any other graphic to the center of the chip.


A white chip will be used as well, just change the black shapes to white and vice versa.



Step 10: Info Button

The info button will call the About View when clicked.

Create a 16x16px white circle and change its alpha to 15%. Use the Text Tool (T) to write an italic i.


Convert the shapes to Button and name it infoButton.


Step 11: Cards cardback

Use the Rectangle Primitive Tool to create a 66x86px, #858D8F shape and change the corner radius to 16.


Duplicate the shape and reduce its size by 4 pixels, apply this gradient: #FFFDFC, #DCDDDF.


Convert the graphics to MovieClip and use the drop shadow filter we used before in the title.


Use the corresponding poker shape and center it in the card.


Duplicate the shape and use the Text Tool (T) to create a static textfield in the top-left corner.


Repeat this process with the cards needed, and use the Export Image feature in Flash to create the cards in png format. Save the cards in a folder called images.


Remember to give them an easy and descriptive name to facilitate the loading. I've used two letters, the first letter of the card shape and the number.


Step 12: About Screen

The About Screen will show the credits, year and copyright of the game.

It will be pretty simple to create as we already have all the elements used in it.



Step 13: Game Screen


This is the Game View, it uses the original light green background and a bottom bar that shows the bets and balance.

Two Dynamic TextFields are used, balance and bet. There is also a button named stayButton, which will make the game stop and perform the card tests.


Step 14: Card Counter

A tooltip-like graphic will display the actual score of the player while the same graphic will show a ? on the dealer.


Use the tooltip graphics to create a 30x24px box, create a dynamic textfield and name it n. Convert them to MovieClip and mark the Export for ActionScript box, set the class name to CardCounter.


Step 15: Bet Panel

The Bet Panel will display the information about the bets.

The player is able to bet in multiples of 100 and 500.


Here are the instance names of the interactive objects:

  • White Chip: white.
  • Black Chip: black.
  • Ok Button: okButton.

Convert the objects to a single MovieClip and mark the Export for ActionScript box, set the class name to BetPanel.


Step 16: Alert Screen

This screen will appear when the game has been decided, ether you win, lose or you reach game over (when the player loses all the chips).

A Dynamic TextField is used in this view it will display the state in which the game is. This TextField is called txt, and it is inside the black box named messageBox.


Convert the group of graphics to a MovieClip and mark the Export for ActionScript box; set the class name to AlertScreen.

This ends the graphics part, let the ActionScript start!


Step 17: New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.



Step 18: Tween Nano


We'll use a different tween engine from the default included in flash, this will increase performace as well as being easier to use.

You can download Tween Nano from its official website.


Step 19: Package

The package keyword allows you to organize your code into groups that can be imported by other scripts, its recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses. It's also common to name them using your company's website: com.mycompany.classesType.myClass.

In this example, we're using a single class, so there isn't really a need to create a classes folder.


Step 20: Import Directive

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.


Step 21: Class Declaration

Here we declare the class using the class definition keyword followed by the name that we want for the class, remember that you have to save the file using this name.

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.


Step 22: Variables

These are the variables we'll use, read the comments in the code to know more about them.


Step 23: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

It calls the necessary functions to start the game. Check those functions in the next steps.


Step 24: Set Vectors Value

In the constructor function, we set the values of the vectors declared before.

  • Type: Stores the initials of the deck type, c for clubs, d for diamonds and so on.
  • Number: Stores the card number. It uses 11, 12, and 13 as J, Q, and K.
  • xPos, yPos: Stores the X and Y positions where cards can be placed

Step 25: Main View Listeners

Mouse listeners are added to the infoButton and the mainView MovieClip, these listeners will switch between views.


Step 26: Tween Main View

This function removes the infoButton and tweens the mainView up using TweenNano; when the animation is over, a function is called.


Step 27: Remove Main View

The next code is used to destroy the mainView. It also calls the function that will show the bet panel.


Step 28: About View

The About view will be displayed when the user clicks the infoButton on the main screen. The following lines handle that.


Step 29: Add Bet Panel

Let's now add the bet panel, this will be used to choose the bet amount before the game starts.


Step 30: Make Bet

The makeBet() function will handle both white and black chips.

The white chip will add 100 to the bet and the black one will add 500.


Step 31: Remove Bet Panel

This lines will remove the bet panel when the use is done betting.

The startGame() function is called in this code.


Step 32: Start Game

This block of code starts all the action, it uses the loadCard() function to dynamically load a random card, calls the score counter and adds the game controls' listeners.


Step 33: Load Card Function

One of the main functions in this app, this performs all the required actions to load a card from the \images\ folder and place it in the stage.

The loadCard() function takes four parameters:

  • xp: The x position of the loaded card
  • yp: The y position of the loaded card
  • isDealer: True if the card loaded is used by the dealer
  • hidden: True if the loaded card will be covered by the cardBack MovieClip

This function also passes the card score values to the corresponding variables.

Of course, you could make this much more complex and realistic by generating an array containing values for an entire deck of cards (or several), "shuffling" them, and dealing them out as required, but the simple random method we used here is fine for our purposes.


Step 34: Card Counter

The loadCounter() function will add the CardCounter instances and place them in the correct position. The values are obtained from the score variables.


Step 35: Hit Me!

The player will be able to request another card by double-clicking the background. The following code handles that function.


Step 36: Stay

The Stay button will run this code when clicked. It will reveal the dealer's score and call the function that will check both scores.


Step 37: Check Score

This function will compare the scores of the player and the dealer; depending on this, more cards will be added or the game will be declared won or lost.


Step 38: Hit Dealer

The next function will handle the cards that are added to the dealer's hand.


Step 39: Game Listeners

Mouse activated objects are used to control the game. The following function adds the necessary listeners to handle those controls.

A parameter is used to know if the listeners will be added or removed.


Step 40: Blackjack Function

This function is executed when the player wins or loses, the default parameter is win.


Step 41: Restart

Clicking on the Alert screen will reset variables, display objects and other values in order to play another round.

If the isNewGame variable is true, the balance will also be reset.


Step 42: Document Class


Set the document class. If you don't know how to use it or are a bit confused please read this Quick Tip.


Conclusion

The final result is a colorful and entertaining game. Try customizing it -- what about a port to a mobile device?

I hope you liked this tutorial, thank you for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.