Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

GuessNext: complete Flash game with highscores

Emanuele Feronato Actionscript 2, Flash, Game design, Monetize

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


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


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


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:


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:


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!

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 41

  1. Frederik J

    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. Suely (Snakesue)

    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

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

  4. Flasher

    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.

  5. Pingback: Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List

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

  7. Pingback: simple card game with highscore - Extrachallenge

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

  9. Pingback: MagOrMin - an old php based game : Emanuele Feronato

  10. Pingback: Como criar jogos online (em flash)?

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

  12. Pingback: Creemos juegos en flash - Descargar Gratis

  13. Pingback: Criando jogos em Flash « ?

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

  15. nicolai

    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?

  16. Pingback: eagrapho » 20 Best Flash Game Tutorials to Create Your Own Flash Game

  17. Pingback: ?????20???Flash?? | ??????

  18. Pingback: 20 Best Flash Game Tutorials to Create Your Own Flash Game | Design Trip Blog

    1. Great

      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…

  19. gimme'some

    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 :)

  20. Pingback: 20 Best Flash Game Tutorials to Create Your Own Flash Game | | DzineBook

  21. Pingback: DOWNLOADS STUFF | Blog | create flash games Flash Games How to Create

  22. Pingback: Creating Flash games | EBOOKS OUYEAH!

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

  24. agenda

    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

  25. Pingback: 32 Best Action Script 3 Game Tutorials

  26. Pingback: ?????20???Flash????????????Flash?? » ?????

  27. Pingback: Como criar jogos online em flash | Diretorio 10

Leave a Reply

Your email address will not be published. Required fields are marked *