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.

Designing the structure of a Flash game – AS3 version

Emanuele Feronato Actionscript 3, Flash, Game design

Abot a year ago I published Designing the structure of a Flash game with everything you needed to know to design the structure of a game.

Now it’s time to make the same thing with AS3, using classes.

With classes the whole thing seems less intuitive, but once mastered the base concept, you will use this example as a template for your games.

In this game, we have four screens: the splash screen, the info screen (how to play), the game itself and the game over screen… but you can easily add as many screens as you want.

First, let’s make a diagram of the game:

In the picture you can see the four game screens, and arrows indicate the possible transitions between a screen and another… so from the splash screen you can go to the info screen but you can’t go directly to the game over screen.

The main class is the_game (so our main file will be the_game.as) while all other objects and classes are listed in the library table. Refer to red numbers to see where I used the objects during the game.

Looking at the linkage column, it’s clear we’ll have four more actionscript files: game_over.as, how_to_play.as, splash.as and the_game_itself.as.

Let’s see them all:

the_game.as

This represents the whole game.

Lines 4-7: Declaring the game screens assigning them the proper class

Lines 8-10: This is the main function, that simply calls a function that will show the splash screen

Line 11: Here it is such function: show_splash

Line 12: The core of the function: I am assigning the splash_screen variable declared at line 4 a new splash object. Look at the this parameter: I am using it to “remember” who called the class, in this case this = the_game.

Line 13: Checking if I have the how_to_play_screen on stage. This could be possible because I can reach the splash screen from the info screen.

Line 14: If true, I will remove the screen from stage…

Line 15: … and unset the variable. This is very important because removeChild, as the name suggests, just removes the sprite from the stage, but it’s still active as variable.

Line 17: Finally, I put the splash screen on stage.

All remaining lines do quite the same, assigning variables, adding and removing sprites according to what they have to accomplish.

Now it’s time to see splash.as, the code for splash class

Line 6: Declaring a variable called main_class of the_game (the main class) type.

Line 7: Main function, look at the passed_class variable of the_game type passed as parameter: that’s where ends the paramter passed at line 12 in the_game.as.

Line 8: Remembering the class I came from

Lines 8-9 Adding a couple of listeners to the buttons to check when the player clicks on the “play” or “how to play” buttons.

Line 12: Function to be executed when the player clicks on the play button

Line 13: The core of this file: I call play_the_game function in the main class. I know what’s the main class thanks to main_class variable.

Then the function will act like the show_splash one explained before, adding and removing sprites and calling other classes.

The other classes work in the same way as splash, so they do not need comments.

how_to_play.as

the_game_itself.as

game_over.as

And that’s what you’ll get:

Download the source and enjoy. Feel free to add a leaderboard screen, a credit screen and so on. Send me and I’ll publish it.

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 25

  1. substence

    This is a good beginner method but I think the most efficient way of dealing with UI is some kind of ‘ScreenManager’ class.

    Where you can have a method like ‘changeUI(newUI)’ that will do all the work for you, including hiding the old screen and displaying a new one.

  2. sam

    Sorry if i’m being ridiculously stupid (new to AS3) but whereabouts did you set the location for the buttons in the code? I don’t see how that part was done…

    Other than that, cheers very much – your tutorials are very helpful!

  3. Nathan

    I tried making a game this way, but I see a problem, how do you make the keyboardEvent work if i say:

    addEventListener(KeyboardEvent.Key_DOWN, KeyDown);

    it doesn’t work

    if you say:

    stage.add…

    it works?

    help?!

  4. sam

    In re: to my comment:
    I’m a muppet, ignore it – didn’t think to see if the buttons had been placed within the screen movie clips… (e.g. Splash Screen, Game Over Screen)

  5. Pingback: Weekly Shared Items - 19. December, 2008 « toxin 2.0

  6. Tom

    Hi.

    Like above I’m trying to get the keyboardEvent work. If I use:

    addEventListener(KeyboardEvent.Key_DOWN, keyDownHandler);
    or
    this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

    the program runs but doesn’t respond to key presses.

    If I use:

    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

    I get TypeError: Error #1009:

    Can anyone help??

    Thanks, Tom

  7. Edward

    To make the keyboard class work from stage events, the game_itself class should most likely be a document class.

    When you use addChild() on the objects, they will be a part of the document class, and thus should receive keyboard events from the stage. It should work properly and you can use keyboard as well as mouse commands then.

    Simply modify your Flash document class, when you click the empty stage, it’ll be in the properties window (usually at the bottom). Type in your the name of your main class there.

  8. Arc

    Thanks for this diagram.

    at Pippo: :)

    I actually use Emanuele’s naming convention, in my opinion, I find it far more readable than that “oop naming convention” you pointed out.

  9. Pingback: Designing the structure of a Flash game - AS3 version - Part 2 : Emanuele Feronato

  10. Adam

    i keep getting errors saying the following because the word this keeps causing problems:

    1136: Incorrect number of arguments. Expected 0.

  11. Cesar The Brave

    Hi Emanuele,

    in the source code box above, the source for game_over.as is the same as the source for the_game_itself.as!

    Thanks for this tutorial

  12. chire

    I made an example of this, but with fresh files.

    im having a problem.

    when i play my project, i just see blank screen.
    how does the main flash file know that there has to be an instance of “the_game” main class?

  13. e

    “The other classes work in the same way as splash, so they do not need comments.” If they work in the same way, you should be using a base class and inheritance, not this sort of copy-and-paste hackery. This article doesn’t show much knowledge of programming or of structure.

  14. Pingback: Criando a estrutura de um jogo em flash – 1ª parte « Tentativa de Programação

  15. Pingback: creare gioco online - Forum di Tom's Hardware

Leave a Reply

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