Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

GuessNext: complete Flash game with highscores

Time to publish the complete tutorial about the making of GuessNext, a simple card game with highscores.

GuessNext

In order to make an highscore, you must register to Kongregate but you can play even if you don’t register.

It’s not meant to be a good or enjoyable game, it’s simply a programming exercise, so don’t expect the best game ever played before.

Anyway, it’s a good start for developing a complete and interesting card game.

The aim of the game is very simple: from a deck of 52 cards, you have to guess if each card is higher or lower than the previous one. That’s it.

Before we start talking about actionscript, a little information about the graphics.

This is the background

GuessNext

It was made with Photoshop selecting two green colors, one lighter than another, and using a clouds filter. Then, I give the result a light noise filter and the green background was done. The cards on the bottom left side are the same used in the game with a semi-transparent Soft Light blending.

The font is the Death Font you can find on dafont.com at this page.

Now, let’s go with the all-in-one-frame actionscript, just 172 lines to make a complete game

Line 1: This stop is necessary bacause the game actually is on the second frame. I had to reserve the first frame to MochiAds and MochiBot just in case some day I would decide to monetize the game.

Line 2: connecting to the Kongregate server

Lines 3-7: importing various Flash prebuilt libraries I will use into the game

Lines 8-9: Defining the filter that I will use for the cards and for the texts. I am using a shadow for the cards, and a glow for the texts. For more information about Flash filters, refer to Create a flash draw game like Line Rider or others – part 1

Line 10: Calling the show_splash function. This function will show the game splash screen

Line 11: Beginning of the show_splash function

Line 12: Attaching the splash movieclip. It’s this one

GuessNext

and has three transparent buttons in it: one on the “how to play”, one on the “play” and one on the url of my blog

Lines 13-15: Managing the click on the button over the url of my blog, and opening the blog on a new page with getURL

LInes 16-19: Managing the click on the play button, calling the play_the_game function that contains the game itself, then removing the splash movieclip

Lines 20-23: Managing the “how to play” button, calling the show_info function that contains the script for the game instructions, the removing the splash movieclip. This concept of managing game status is similar to the one I explained in the post Designing the structure of a Flash game

Line 25: Beginning of the show_info function

Line 26: Attaching the info movieclip. It’s this one:

GuessNext

and like the splash one has transparent buttons on the “play” and “back” texts

Lines 27-30: Managing the play button like in lines 16-19

Lines 31-34: Managing the back button calling again the show_splash function and removing the info movieclip

Line 36: Beginning of the play_game function, the core of the game

Line 37: Loading the card deck with BitmapData. More information about BitmapData in the post Shuffle an image with BitmapData

Lines 38-42: Attaching and creating all movieclips used in the game: the background (table), a movieclip where to publish all game elements (game), the buttons to bet on higher or lower cards (higher and lower) and the one to contain the cards (big_pic_obj)

Line 43: Attaching the bitmap as explained in the post Shuffle an image with BitmapData

Line 44: Hiding the movieclip with all cards

Line 45: Declaring the array that will store the sequence of cards that will be drawn during the game

Lines 46-53: Defining the prototype to shuffle the cards as explained in the post Shuffle an image with BitmapData

Line 54: Beginning of the loop that will cycle through all 52 cards

Line 55: Creating the empty movieclip that will host the card

Line 56: Assigning x to the x-th element in the sequence array. I need an ordered sequence (of cards) before I shuffle the deck

Line 57-59: Copying the pixels of each card into the appropriate movieclip as explained in the post Shuffle an image with BitmapData

Line 60: Making the card invisible

Line 61: Adding the shadow filter to the card

Line 62: Beginning of the actions to be executed for each card at every frame

Line 63: Switching among some defined actions the card may execute: come means the card is coming from the left side of the game to the centre of the screen, move means the card is moving from the centre to the right, and dissolve is when the card disappears from the game

Line 64: Beginning of the come case

Line 65: Moving the card to the right by 40 picels

Lines 66-68: If the card x position is greater than 210 (passed the orizontal center of the screen), then set its x position to 210 (place on the horizontal center the screen), set the card action to stay (that does not exist in the switch cases, it’s something like “do nothing”)

Lines 69-71: If the number of cards drawn is greater than 1 (if it’s not the first card, the one you start the game with) then make the ok_ko movieclip visible. The ok_ko movieclip is the movieclip with the green “ok” symbol and the red “wrong” one that will appear when you draw a card. The “ok” is on the first frame while the “wrong” on the second

Line 74: Beginning of the move case

Line 75: Move the card to the right by 20 pixels

Lines 76-79: If the card x position is greater than 310, set the x position to 310 and set the card action to dissolve (it’s time to make the card disappear)

Line 81: Beginning of the dissolve case

Line 82: Decrease the alpha of the card by 4 units

Line 83: Decrease the alpha of the lap_score movieclip by 4 units. The lap_score movieclip is the score that will appear on the top left side of the game when you draw a card

Line 84: If the card alpha is less than zero (invisible)…

Line 85: Set the can_draw variable to true. The can_draw variable states if the player can draw the next card or not. I made this variable because I want the player to wait until the previous card disappears. It has only a design purpose, I don’t want the player to click randomly across the screen or click twice for an error

Line 86: Set the ok_ko movieclip to invisible

Lines 87-89: If the number of cards drawn is 52 (if the entire deck has been drawn), then call the endgame function

Line 90: Removing the card movieclip

Lines 96-98: Attaching the remaining movieclips being used in the game: ok_ko (the two symbols of right/wrong choice), score (the text with the current score and the cards left) and lap_score (the text with the partial score). This way:

GuessNext

Lines 99-100: Applying the glow filter to score and lap_score texts

Line 101: Shuffling the deck (sequence array)

Line 102: Set the number of cards drawn to zero

Line 103: Setting the points to zero

Line 104: Defining that the player at this time can draw the next card

Line 105: Calling the draw_card function. This function manages the next card to be drawn

Line 106: Beginning of the actions to be executed when the higher button has been released (the button with an up arrow)

Lines 107-111: If the player can draw, then set the can_draw variable to false (he must wait before drawing another card), set the higher variable to true (the variable that holds the choice of the player) and call the draw_card function

Lines 113-120: Same thing with the lower button, with the only difference in line 116 where higher variable is set to false

Line 121: Beginning of the draw_card function

Line 122: Move the ok_ko movieclip to frame 2

Line 123: Setting the lap score (the score for the current hand) to zero

Line 124: Checking if the player did the right choice. It happens when the player pressed higher and the current card is higher (or equal) than the previous one, or if the player pressed lower and the current card is lower (or equal) than the previous one. The %13 in the code is necessary because every suit (or seed) has 13 cards, so if an ace is the xth card, I know next ace will be the (x+13)th one. As you can see, if two cards are equals, the bet is always won, no matter the seeds of the cards.

Line 125: Moving the ok_ko movieclip to frame 1 (the “ok” symbol)

Line 126: Setting the text color of the lap score to a light green

Line 127: Determining if it’s not the first card drawn (the one you see when you start the game)

Lines 128-133: Determining the partial score. The game encourages bets again statistics so if you have a ten, you know you have four cards higher (10, J, Q, K) and nine lower (from 1 to 10). So the game will give nine points if you bet (and win) on higher, and four if your bet (and win) to lower

Line 136: Beginning of the code to be executed if you did not bet and win

Line 137: Setting the lap score to -5. If you don’t win, you always lose 5 points

Line 138: Setting the text color of the lap score to a dark red

Line 140: Writing the score of the last bet in the lap score text

Lines 141-143: Showing the lap score if the card drawn is not the first one (the one you see when you start the game)

Line 144: Adding the lap score to the total score

Lines 145-149: Assigning properties and actions to the cards involved in the last bet: the last one is placed to (0, 10), made visible and with the come action while the last one is set to move action

Line 150: Increasing the number of cards drawn

Line 151: Updating the score text with the total score and the number of cards left

Line 153: Beginning of the endgame function to be executed when the game ends

Line 154: Removing the game movieclip (with all cards, buttons, scores, and so on)

Line 155: Attaching the game_over movieclip. It’s a movieclip showing your score and the top 5 players

Lines 156-157: Applying the glow array to the gameovertext (the text with your final score) and fame (the text with the top five scores) texts

Line 158: Displaying your final score

Line 159: Submitting the score to Kongregate. You are submitting only the score, without your name, because highscores work only if you are a registered user. In that case, the name is the nickname you use in Kongregate.

Lines 160-167: Code to retrieve the top five players. It’s the standard code you may find on this page, I just changed line 164 to display the scores in my fame text and remove the trace lines. Notice that I am writing all scores and not just the top five, but the fame text will show only the top five.

Lines 168-172: Managing the play button you can find in the game over screen: it’s the same concept as seen in lines 16-19

And that’s it!! Hope this will inspire you in a card game creation.

Download the source code and all the Photoshop files and give me feedback!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (31 votes, average: 5.00 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 39 comments

  1. Frederik J

    on December 30, 2007 at 9:09 pm

    Good exercize, and good tutorial. It explains deeply where needed. The game itself is okay.

    If we aren’t talking about the game engine, the design and the menu is perfectly made. The game design is really really up to the best, and is making me want to try it, over and over again. Make you can tell us, if you’re dealing with what name and how the game shall look look like. I have often problems calling my games names..

    Thanks Emanuele. :-)

  2. Jack Hopkisn

    on December 30, 2007 at 11:43 pm

    Well done mate!

    Its a fun game with great design.
    A good engine in few lines of code too!

  3. xXRobbyXx

    on December 31, 2007 at 5:56 pm

    I love the menu :) the graphics of this game are pretty sweet.

  4. shiv

    on December 31, 2007 at 6:23 pm

    gr8!
    Happy New Year, Emanuele!

  5. wildwobby

    on December 31, 2007 at 7:08 pm

    Hey,
    Awesome tutorial once again! I just made my first flash game thanks a lot to a bunch of your tutorials.

    http://www.kongregate.com/games/wildwobby/wobble-dodge

  6. Suely (Snakesue)

    on January 1, 2008 at 8:07 pm

    Happy New Year, Emanuele!
    Feliz Ano Novo, com todo respeito e admiração pelo que você faz por todos nós. Um dos melhores sites sobre aprendizado em Flash.
    Snakesue/Rio de Janeiro/Brasil

  7. free tutorials for flash game development - the coolest tutorials in web to create your own flash game- The Design Superhero

    on January 26, 2008 at 12:57 pm

    […] 4.Guess Next […]

  8. Flasher

    on February 8, 2008 at 9:15 pm

    I was able to get the ace as the highest card by editing the image. My cardz graphic now runs from 2 to ace, rather than from ace to king. A mathematical solution would only really be needed for blackjack.

    Thanks for the tutorial, Emanuele.

  9. Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List

    on May 13, 2008 at 7:31 pm

    […] http://www.emanueleferonato.com/2007/12/30/guessnext-complete-flash-game-with-highscores/ […]

  10. lucassou10

    on October 2, 2008 at 9:26 pm

    quero este jogo

  11. The Design Superhero » Blog Archive » free tutorials for flash game development - the coolest tutorials in web to create your own flash game

    on October 4, 2008 at 6:09 am

    […] 4.Guess Next […]

  12. simple card game with highscore - Extrachallenge

    on October 21, 2008 at 2:26 pm

    […] page. Now, let’s go with the all-in-one-frame actionscript, just 172 lines to make a complete game PLAIN TEXT […]

  13. Инструкция по монетизации флэш игр | terbooter

    on October 29, 2008 at 7:03 pm

    […] об этих играх, прочтите посты:Circle Сhain, Christmas Couples, TileBall, GuessNext, Glomb, BallBalance, Bees n’Flowers, Jamag, Summer Couples и […]

  14. MagOrMin - an old php based game : Emanuele Feronato

    on March 19, 2009 at 2:17 pm

    […] number will be higher or slower than the current one” concept, the same that I applied to GuessNext last […]

  15. Como criar jogos online (em flash)?

    on April 5, 2009 at 10:31 pm

    […] 9. Jogo de Cartas […]

  16. Cómo crear juegos en Flash, 20 formas de hacerlo | portafolio blog

    on June 11, 2009 at 9:51 pm

    […] 1. Como hacer un juego de carreras en Flsh. 2. Como hacer un juego de disparo a globos en Flash. 3. Como hacer un juego de cartas en Flash. 4. Como hacer un juego de naves espaciales en Flash. 5. Como hacer un juego de coaliciones de […]

  17. Hei

    on October 13, 2009 at 8:50 am

    Thank you, learned a lot from it. Could i use this game on my website.

  18. Creemos juegos en flash - Descargar Gratis

    on October 23, 2009 at 9:10 pm

    […] 1. Como hacer un juego de carreras en Flsh. 2. Como hacer un juego de disparo a globos en Flash. 3. Como hacer un juego de cartas en Flash. 4. Como hacer un juego de naves espaciales en Flash. 5. Como hacer un juego de coaliciones de […]

  19. Criando jogos em Flash « ?

    on November 15, 2009 at 12:05 am

    […] Tutorial do Jogo de Adivinhação […]

  20. 20 Best Flash Game Tutorials to Create Your Own Flash Game | Dzine Blog

    on December 28, 2009 at 8:47 pm

    […] 10. )Guessnext […]

  21. nicolai

    on January 9, 2010 at 8:17 pm

    hi im making a flash game and ive bumpt into a problem. what code do you use to show the cards and could i use it to make the card show like im pulling from a deck sequentialy?

  22. eagrapho » 20 Best Flash Game Tutorials to Create Your Own Flash Game

    on January 11, 2010 at 3:10 pm

    […] 10. )Guessnext […]

  23. ?????20???Flash?? | ??????

    on January 20, 2010 at 9:02 pm

    […] 10. )Guessnext […]

  24. 20 Best Flash Game Tutorials to Create Your Own Flash Game | Design Trip Blog

    on March 6, 2010 at 6:25 pm

    […] 10. )Guessnext […]

  25. Moonstar

    on March 8, 2010 at 1:13 am

    Only one word, I can say about this game and tutorial: “Perfect!”

  26. gimme'some

    on May 18, 2010 at 8:51 am

    i would really love to learn how to make my own games but i can’t open the source code that i downloaded from this site, using Macromedia flash MX professional 2004.
    what version of Flash MX are you guys using?
    and where could i download one for free?

    thanks in advance :)

  27. Great

    on May 19, 2010 at 6:11 am

    what flash version are you guys using?

  28. Great

    on June 3, 2010 at 11:55 am

    dude, i’d really love to try programming, but excuse for me being dumb_> cuz i dont know what prog. language version are you guys using. could you tell me? please…

  29. 20 Best Flash Game Tutorials to Create Your Own Flash Game | dzinebook.com | DzineBook

    on June 4, 2010 at 7:19 pm

    […] 10.) Guessnext […]

  30. Rizkyman

    on January 18, 2011 at 4:53 am

    I wanna create an online flash playing card games, where i can easy get lesson, tutorial, or resource?
    Thanks…

  31. DOWNLOADS STUFF | Blog | create flash games Flash Games How to Create

    on May 29, 2011 at 8:25 am

    […] http://www.layoutgalaxy.com/html/htmnewletter47-page1.htm How to make a card game in Flash. http://www.emanueleferonato.com/2007/12/30/guessnext-complete-flash-game-with-highscores/ How to make a game of spaceships in Flash. […]

  32. Creating Flash games | EBOOKS OUYEAH!

    on June 21, 2011 at 2:07 am

    […] http://www.layoutgalaxy.com/html/htmnewletter47-page1.htm How to make a card game in Flash. http://www.emanueleferonato.com/2007/12/30/guessnext-complete-flash-game-with-highscores/ How to make a game of spaceships in Flash. […]

  33. Making a game with HTML + jQuery Mobile and publishing it to Apple App Store - Emanuele Feronato

    on June 30, 2011 at 1:29 pm

    […] of MagOrMin – an old php based game, whose concept have been applied for the creation of GuessNext Flash […]

  34. agenda

    on July 1, 2011 at 7:10 pm

    can you give me sample this tutorial at AS3 Please????? fro my first job because I am beginner for Flash. when I try your tutorial using AS3 many error for example :_root, Loadbitmapdata,… etc thx alot

  35. 32 Best Action Script 3 Game Tutorials

    on June 16, 2012 at 10:47 am

    […] 10.Guessnext […]

  36. Pablo Soares

    on November 21, 2012 at 12:12 am

    ola gostaria de montar um site com jogos de carta on line alguem pode me ajudar ? gostaria de realizar torneios e etc..

  37. Pablo Soares

    on November 21, 2012 at 4:26 am

    ola, gostaria de criar um site de jogo de cartas online, com torneio e premiação vc pode me ajudar ?

  38. ?????20???Flash????????????Flash?? » ?????

    on November 26, 2012 at 5:21 pm

    […] 10. )Guessnext […]

  39. Jogos jogos

    on March 27, 2014 at 4:55 pm

    Great tutorial, I would love to develop some online games of my own and this is of great help, thanks!

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×