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.

Create a Flash ball game with visual from above tutorial

Emanuele Feronato Flash

August 3rd update: 2nd part released
December 13th update: 3rd part released
January 16th update: 4th part released

This tutorial does not cover anything new (well, this first part of this tutorial) but shows you how to create a Flash ball game with a visual from above and some decent graphics.

Being a ball game, I suggest you all to read the basics for a ball game movement in this tutorial.

In this one, there is no gravity but the method is the same.

In this tutorial I’ll cover two types of gameplay: one with the ball that runs on a static stage, and one with a fixed ball with a scrolling stage. We’ll see the pros and cons of both type of games.

First of all, let’s start with the aim of the game: you have to take your ball to the exit of each level avoiding any kind of traps.

In this first part, there isn’t any exit nor traps, just walkable tiles. So, at the moment the game will sound like “try not to fall off the tiles”.

Game type 1: moving ball on a static stage

Does it look too long? I guess not, because you’ll see how easy it can be if you follow all the steps.

Line 1: Declaration of level, the array that contains level data. Levels in this game will be tile based. I wrote a tutorial about managing the creation of tile based levels here.

Line 2: Attaching the movie previoulsy created and linkaged as starz. The space scene you can see in the background. I made the scene with the Photoshop action to create an outer space scene.

Line 3: Creating a new empty movie clip (bricks) that will contain level tiles.

Lines 4-14: Defining the mapping of the level. In this case, the ones mean a walkable tile while the zeros a hole. You cannot walk over holes.

Lines 15-21: Scanning all the array and attaching movieclips previously linkaged as brick into the bricks movieclip (the one created at line 3). As said, refer to this tutorial for more information.

Line 22: Attaching the ball. I created the ball in the same way as in Creation of realistic spheres in Flash with textures and masking tutorial.

Line 23: Masking the ball texture as explained in the tutorial mentioned above. I strongly suggest you to read if you haven’t done it yet, you will learn how to create proper textures for a ball and map them to it with masking.

Lines 24-27: Defining power, speed and friction as explained in here. Being a game with the visual from above, there is no gravity, and at the moment there is no wind too.

Line 28: This is the main function, to be called at every frame.

Lines 29-40: Adjusting ball x and y speed according to the key the player presses, as seen here (maybe one day I’ll write an ebook and say “as seen in Chapter I” – cool).

Lines 41-42: Applying friction to x and y speed.

Lines 43-44: Adjusting ball position according to its speed.

Lines 45-58: Adjusting texture position to simulate the rolling effect as seen here.

Line 59: Determining, according to ball x position, on wich x-tile we are. I need to know the ball position inside the level array because in next tutorial I will introduce special tiles. In the formula I involved the ball radius (10) and tile size (40).

Line 60: Same thing with y position.

Lines 61-66: If the position of the ball in level array is different than 1 (solid tile) then start the death sequence: the ball is moved ad its starting position and both x and y speeds are set to zero.

That’s it! Wasn’t it easy?

This is the game

The second step is making the tiles bigger (otherwise the game may be frustrating) and have a larger, scrollable stage.

To have a scrollable background, the ball must remail fixed in the center of the stage, and the level must move, like in this tutorial.

Game type 2: static ball on a moving stage

Main changes are at lines 45-46 where I move the bricks movieclip instead of ball one, and 47-48 where I add a little parallax scrolling to background space scene.

Ball’s position on the level, at lines 63-64, is no long determined by ball position but by bricks position, since the ball is fixed.

And this is the game. I prefer this version.

And this is where this tutorial ends.

Next step will be to create different types of tiles, each with its way to affect ball movement, and a level editor.

Now I need your creativity: suggest me a type of tile I haven’t already planned and your name will be in the credits.

Planned tiles at the moment are:

Icy/Sand/etc tiles: Affect ball friction

Left/Right/Up/Down spinning tiles: Increasing left/right/up/down ball speed

Glass tiles: Disappear once the ball has rolled out of them

Crystal tiles: Disappear once the ball has rolled on them (so move fast!)

Tunnel tiles: You can’t see the ball because it’s under the tunnel…

Spinning tiles: Increase ball speed in the direction the ball rolled on them

Invert tiles: Ball controls are inverted while on these tiles

Teleport tiles: … need an explication?

Exit tile: …

Now it’s up to you.

Take the source codes and give me feedback.

Read part 2

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 78

  1. Dean

    Nice tutorial. I always find your work helpful, and it has inspired me to start developing my own game. Thanks a million!! How about a trampoline tile that bounces you across a gap to another tile, or picking up a bonus that puts rails around the maze for a period of time. Great job as usual & thanks for the tutorials!

  2. Post
  3. Fairlyn

    how about a “switch” tile that activates a few other tiles for a few seconds

    moving tiles (you didn’t have these right ?)

    slippery tile (the ball continues in the specified direction and don’t react to input (is this what you meant by ice tiles ?))

    “tutorial” tiles (displays a message when rolled over)

    seems interesting so far

  4. Post
  5. Fairlyn

    windmill (pushes the player away from it when hre is in one of the adjacent tiles)

    inviciple tiles (reflections show where they are every x seconds)

    “plasma”/ghost tiles (cav only be passed when visible)

    how about unlockable balls ?

    helium ball(beach ball ?) (can be off cource for x second before being game over) or (stays afloat after being pushed away by the windmill(could be useful for secret/bonus areas)) should not make the glass tiles break

    iron ball (is immune to the windmill, but can’t pass the glass tile due to heawy weight)

    “enemy” balls trying to push you off ?
    cannon/laser shooting at you trying to force you off the tiles
    laser blockades that have to be shut off ?

  6. Hamly

    ““plasma”/ghost tiles (cav only be passed when visible)”
    Sorry didn’t refresh my page before posting.

  7. djmashedman

    He made a tutorial on how to make a ball look like that.

    As for tiles –

    bouncy tile – basically bounces your ball and makes it go all over the place.
    speed tile – speeds up/slows down your tile
    extra lives tile – in a hard to reach place, the end of a very windy and small bit.
    ‘bigger tile’/smaller ball tile – again, in a hard to reach place.

    The latter could also be a tile that either –
    makes your ball smaller or tiles bigger
    makes your ball bigger or tiles smaller.

    But it could be random, and sometimes compulsory.

    And you could always have smaller tile tiles just before a tricky bit, just to be mean.

  8. Post
    Emanuele Feronato

    At this time I coded the following tiles:

    Direction spin tiles: tiles that spins the ball in one of the four directions

    Spin tile: Spins the ball in the direction the ball already has

    Vanishing tile: When the ball rolls over, the tile starts vanishing until it disappears

    Passive tile: The ball does not react to input and there is no friction

    Beam tiles: Every 3 seconds they are letal for the ball for 1 second

    I think I’ll publish the tut very soon, just let me add about 10 more tile types…

  9. eblup

    i made a pokeball! it is amasing. o and ideas for tiles ummm…

    moveing: the tiles move side to side…

    spining: the tiles Spin around…

    moveing and spining: the tiles spin and move side to side…

  10. amorphis

    Could you just pleaseeeeeee upload some of the new types of tiles you have coded in order to see how do you place them among the normal ones and how do you make the ball interact with them because I am building a project for school and I am really short of time, and believe me very very very desperate :(((((((! So, if you could just give one example how to create the “weird” tile, how to place it among the other normal ones and how to make the ball interact with it I would be very very very grateful!!!!!!!

    Thank you very much in front!

    P.S. You are a live savior if you do me this favor!

  11. Pingback: I HAD to do it… at Emanuele Feronato

  12. flaming

    how about a tile that changes its properties every few seceonds?
    or a tile that changes your ball to a bowling ball or soemthing

  13. Rick

    Looks great but I’m also unable to extract the zip file with the source. Could you check and upload the source again in case the file was corrupted or something? thanks
    (and great tutorial as usual ;)

  14. Jake

    how about a button block that you have to go down a long passage to push then go back and you can pass a laser block or something, so the buton disables the laser

  15. Jake

    or a checkpoint block so peopl edont get too frusterated playing this game, because these types of games can get very frusterating if someone keeps dying in the same spot or a pickup that once the person dies it will place them back in the center of the block they died on and they are completely stopped

  16. Pingback: Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato

  17. Thomas

    I think a good think would to have a sort of “falling off” animation, so it doesn’t just immediately go back to the start.

  18. jamie

    how about a jump tile that acts as a draw bridge. when the tile is up(one ends visualy larger) you can jump a gap to another set of tiles.
    _ _ /| _ _ _
    |_|_| |= jump up, |_|_|_|= jump down.

  19. jamie

    illistration error. but you get the basic idea

    ._ _ /|……….. _ _ _………….
    |_|_| |= jump up, |_|_|_|= jump down.

  20. Dieter Galea

    hey, thanks for the tutorial, how can i make a function, that when the ball goes on the last tile, a new ‘map’ of bricks will come? kind of lvl 2

  21. James

    nice man i love ur other one the tunnel thingy anyways how bout
    death tile: kills u when u roll on it
    triangle tiles:half a square
    hexagon tiles:hexagon tiles
    wall tiles:tile with a wall on any sides
    gift/item tiles:give u a random/fixed powerup!

    Shield:Protects u from a death tile
    Slow:slows u down for a while
    Fast:speeds u up for a while
    Invert:reverses ur directions
    wind:wind pushes you in a direction

  22. tommy

    hey i got a quistion how do u make it to where the ball rolles like that when u roll its like ur relly rolling a ball how to i do that with just basic onClipEvent stuff

    oh and i got an idea for a tile
    you should make a level where theres a big gap
    in the maze and there 1 tile that moves from the right side teh the gap letting u go ferther in the maze and then u have to go on it win its on ur side to go across but the right side of the gap tile should be doing somthing that will make the ball die so u have to waint on time to go on the moving tile
    im just guessin things

    but anyways i would really like to know how to make the ball roll like its a rolling ball

  23. Pingback: Experiment: monetizing a Flash game - Part 6 : Emanuele Feronato - italian geek and PROgrammer

  24. Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers

  25. Pingback: Create a Flash ball game with visual from above tutorial part 4 : Emanuele Feronato - italian geek and PROgrammer

  26. Orava

    Is it possible to plant buttons to this?
    i’m doing a RPG guide for a game and i just need to make it somehow moveable (20 classes and no space for them all in single Non-moving screen)
    i got a movieclip and only a movieclip moving…
    the buttons just stayed there…

    (and if possible without the array thing, i don’t get it at all ;S)
    thanks for help.

  27. Rick


    (Hello there, great tut btw)

    If I use the code;

    place_brick = bricks.attachMovie(“brick”, “brick_”+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});

    to place tile movieclips, Im successful in placing the tiles…

    but, what name do I use afterwards for each tile if I want to affect the movieclip, such as changing the alpha of a specific tile or use a .gotoAndPlay to start an animation inside that clip?

  28. Owais

    Vaaaaaaaaaaaaaaaallllllllllleeeeeeeeeentttttttt…….. Goooooooooooooooddddddddddddddd…

    I have no words……………

  29. Pingback: Closing the blog : Emanuele Feronato - italian geek and PROgrammer

  30. Scott D. Purdie

    Hi Really nice tutorial but i had a question about the code. The line

    brick_x = Math.floor((bricks._x-200)/80)*-1;

    I was wondering how do you know to use those values, 200, 80 and -1? Sorry if its a silly question.


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

  32. gregory

    i want to create a ball game bacause in my life ive expierienced many ball games and i liked them all like the two versions of hamster bal, gyroball, metal ball, and across the line ball

  33. Pingback: 35+ Flash Game Development Tutorials & FLA Files | Showcases |

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

  35. Ryan

    Here is my list of ideas you could make:

    how about an explosion tile that explodes you or a upgrade/downgrade tile that when you roll over it it makes you bigger or smaller, or a mystery tile that does something random, or a time bomb tile that when you roll over it it lays a time bomb on all the tiles you hit for ten seconds then explodes, or an invisible tile that makes you invisible for 3 seconds, or a trap tile that when you roll over it guns start firing at you

  36. Pingback: Create a Flash ball game with visual from above | Tutorial Collection

  37. Pingback: Roller – jQuery based game | YABIBO.COM - YOUR WEB WORLD

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

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

  40. Pingback: ?????20???Flash?? | ??????

  41. Pingback: Flash Game Development Tutorials & FLA Files

  42. Pingback: Como criar jogos online em flash | NR Host Blog

  43. Pingback: 8 bài h??ng d?n chuy?n PSD sang HTML | Blog thi?t k? Website

  44. leonardo

    level = new Array();
    _root.attachMovie(“starz”, “starz”, 1, {_x:-20, _y:-20});
    _root.createEmptyMovieClip(“bricks”, 2);
    level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
    level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
    level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
    level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
    level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
    level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
    level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
    level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
    level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
    level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
    level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
    for (y=0; y<=10; y++) {
    for (x=0; x53) {
    this.texture._x -= 63;
    if (this.texture._x53) {
    this.texture._y -= 63;
    if (this.texture._y<-53) {
    this.texture._y += 63;
    brick_x = Math.floor((bricks._x-200)/80)*-1;
    brick_y = Math.floor((bricks._y-180)/80)*-1;
    if (level[brick_y][brick_x] != 1) {
    bricks._x = 240;
    bricks._y = 220;
    starz._x = -20;
    starz._y = -20;
    xspeed = 0;
    yspeed = 0;

  45. Matt

    Great tutorial, it was very useful. An idea I got for a tile is a spike tile, similar to the lava tile, but it happens more quickly so you have to move fast. Another idea I got is that you could make enemies on some tiles and you have to shoot them down to get past them. Maybe you could even make some enemies to shoot you.

  46. Jer

    Great tutorial, easy to understand and use. As for ideas… A checkpoint tile?
    Maybe even a seperate path that leads to a shop tile, when rolled on a screen will pop up, where you can buy upgrades, like decrease the balls speed, or something like that. As to get money for the shop… i dont know.

  47. Pingback: 20 Frash Flash Game Tutorials For Flash Designer | 1step web design: Best for developer and designer

  48. Pavan

    My set of new types of tiles for this game
    wormhole teleports you randomly to any non empty tile
    fake tile looks like a real tile but is an empty tile in disguise
    moving tile moves in a defined path while stepped on
    invisible tile the name explains it

  49. Pingback: Top 10 Game Tuts | Geeks Desk

  50. Pingback: 32 Best Action Script 3 Game Tutorials

  51. Pingback: ?????20???Flash????????????Flash?? » ?????

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

  53. hi

    I know this is old but I was wondering, if anyone would know how to do an end code using this part? I wanna use this tutorial for a game but I need a new frame when you get to the end?

Leave a Reply

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