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 artillery game – step 2

Emanuele Feronato Flash

Welcome to the 2nd part of this tutorial. I recommend you to read the 1st part if you haven’t done it yet and we are ready to start.

Fixing bullets amount

In the last example, when you shot a bullet, it “lives” forever. I mean, once the bullet movieclip is on the stage, there isn’t any routine to check if the bullet should exist or not.

Try to imagine thousands of bullets that continue falling down at increasing speed. Obviously, if you fire a large amount of bullets, the movieclip starts lagging.

We need to remove bullets when they are off the stage.

Lines 42-44: Check if the bullet if out of visible left, right and bottom area (I did not include the top because a bullet is supposed to fall down…) and if true, removes the bullet movieclip.

In this case, the only movieclips active are those visible on stage plus the ones falling from the upper edge of the stage.

Maximum bullets at the same time

Now we need to put a limit to the maximum bullets fired at the same time. It would be too easy if we let the player fire a large amount of bullets. So we are going to put a limit.

Line 3: Variable designed to count the bullets currently on stage

Line 4: Maximum firepower allowed. Changing this value you will change the maximum bullets allowed to be shot at the same time. Changing this value will affect gameplay.

Line 34: When the player wants to fire, I check if the bullets on stage are minor than the maximum bullets allowrd

Line 35: if true, increases the fired variable

Line 48: decreases the fired variable when a bullet is removed. If you look at line 46, you will see the control is performed only on bullets leaving the stage to the bottom. This will always happen even for bullets thare are leaving to left or right, since when they fall, sooner or later they will leave to the bottom. This will make the game a little bit harder, because if you fire a bullet out to the right, you will have to wait for it to leave the stage to the bottom to have the bullet reloaded.

Now it’s time to introduce the other great star in an artillery game

The ground

I created a new movieclip linkaged as ground that represents… well… the ground.

Lines 6-7: Tank and ground are placed on the stage as if the tank were on the ground (of course…)

Line 47: the test to remove the bullet is extended to its collision with the ground. At the moment, I do not care about explosions or accurate hit test

The enemy

In an artillery game, you are supposed to shot to an enemy… so I linkaged another movieclip as enemy… it should be that red square (you know, red squares are evil).

Line 5: call to a place_enemy function that will… uh… something like placing an enemy…

Line 55: here starts the function place_enemy

Line 56: Placing an enemy in the bottom left of the stage

Line 57: Init enemy yspeed at zero. It’s obvious that I won’t move the enemy with a motion guide but with pure actionscript, just in case tomorrow I would like to change the terrain. I am using some of the basics explained in the tutorial called Create a flash draw game like Line Rider or others – part 5 so give it a look if you haven’t done it yet.

Line 58: Function to be executed every time the enemy enters in a frame.

Lines 59-69: As said, these are lines already explained in the the tutorial called Create a flash draw game like Line Rider or others – part 5

Lines 70-73: When the enemy reaches the right border, I remove it and call the function again, creating another enemy.

And we have our walking enemy… want to hurt it?

The killable enemy

In this tutorial I won’t cover energy, health and so on, but I will during next tuts. At the moment, when a bullet hits an enemy, he/it dies and repops in the starting point.

Lines 52-57: if a bullet hits THE enemy (I will explain that bold “the” later), I remove both the bullet (decreasing the fired variable) and the enemy and place another enemy.

It’s very simple, but I wrote that “the” because I know that A bullet on the stage can hit only THE only enemy on the stage.

When we’ll have lots of bullet that can hit lots of targets, it gets a bit more complicated.

That’s what I’ll cover during next step, coming soon.

Meanwhile, download the sources 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 56

  1. Pingback: Create a flash artillery game - step 1 at Emanuele Feronato

  2. Callum

    Wow, thats pretty good. Im making a Game where one of my teachers is throwing geography books at you and you have to shoot the geog books and at the end kill him xD

    Im using 2 of your tutorials and when Im finished ill show you the final thing xD

  3. David

    love yout tuts i was wondering how could you instead of using mouse click to fire you press space bar? plz someone tell me how thx


  4. person

    I can only shoot one bullet at a time and when I shoot the enemy suddenly disappears, does anyone know how to fix this? thanks

  5. sammo

    Hey great tutes it’s really hard to find good ones with good English and not too much detail. Look forward to more.

  6. X-99

    I’m making a game at the moment,
    so when your player touches the mighty and powerfull enemy
    you would go back to frame 1.
    Please help ME!!!!!!!!!!

  7. Marnix Pop

    Nice tutorial you go there! Everything works, but it’s pretty hard to make the turret itself work correctly. Could you maybe make a defense game tutorial? Lots of people are asking for one, and I bet you can make one. ^^,

  8. Ozzy

    please help me,
    i’m making a game like this, and when the cannonball hits the enemy the enemy explodes.

    the actionscript:
    if (enemy.hitTest(this._x, this._y, true)) {
    _root.scoretext.text = deaths+ “Deaths!”;

    but the game still acts like the enemy is on stage, how do i remove him after the frames are played??

  9. zee

    Great tut very helpfull i added a score variable wich worked fine
    then i drew a death sequence in enemy and i wrote this code in the hit test


    if (enemy.hitTest(this._x, this._y, true)) {
    score ++; this.removeMovieClip();

  10. Ruby

    Heya, I’m making a shooter game that allows the player to shoot 10 times. If he shot 10 times I want the game to end. I tried it with your tut but it did not work. In your tut you can have 3 shots at the stage max. But when they are gone you can shoot another 3 times.

    So my question is:
    How can flash make my player shoot 10 times max., with only one bullet on screen at the time?

    Thank you so much,

  11. Aaron

    Hey, I know you probably get a lot of emails, and messages, but. I’ve looked all over and can’t figure out a way to do what I’m trying to do. I’m making a side scrolling shooter, where the character is in the center of the screen and as you move around you can traverse a map. I’m going to figure out all that later, but for now I need to find a way to have it so that my character’s arm and selected gun stay attached to the character but point toward the cursor location. I’ve tried dozens of methods and nothing works right. Thanks in advance.

  12. Maniac

    =/ How do you combine the bouncing with getting rid of bullets that aren’t on the screen? No matter what I do to try and combine the two, I get an error.

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

  14. fahad mohammad

    hi, please help.
    i added a dynamic score box edited the ground everything added clouds and all.
    and it worked. but when i added the kongregate highscore api ,everything went wrong, now the score doesnt work it jus says _level0 or somtimes NaN please help.

  15. Sam

    This works well! But I see that the hit test in the cannon ball relies on there being one definite enemy instance with a known name.

    How do you have it so there can be numerous enemies AND numerous cannonballs – where any enemy can collide with any cannonball?

    Would you need to create an array on which you place each instance – then loop through it?

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

  17. Pingback: Create a flash artillery game – step 2 | Tutorial Collection

  18. Paanchow

    por lo que entendi me gusto muchho el tutorial. lastima que no lo puedo completa por que no entiendo mucho ingl├ęs.

  19. NewbieProgrammer

    Hey I have a (newbie) Question. What Program Do you use because I have “Macromedia Flash MX 2004″
    And I Cannot find where to Add any Script. And I would be VERY interested in Game Programming But I do not no What Program to use, There is so Many of them. Thanks For your Help


  20. NewbieProgrammer

    I need help tho when i test the cannon does not change angle and the cannon ball always goes left AND It goes for 50 Pixels the dissapears and i cannot shoot more than one the first one dissapears,

  21. chris

    hey plz help me, i am making a similar kind of game and i really need help on making more enemies that come out of different directions at different speeds :S

    pls tell me asap when part 3 is ready or email the instuctions

    all help is greatly appreciated :D

  22. Bc Nobel

    First off, I think you’re a great tutor, and these tutorials you write are real helpful for someone who doesn’t know sh*t about action scripting. I learned a great deal from a lot of your tutorials.

    Now to the point, I’m currently working on a turn based MMO artillery game. I made the server in Visual Basic 6.0, and the client, of course is made in flash..

    It’s all working great, except for one thing missing, and that thing is Voxtel-Mapping (FYI: voxtel mapping is the technology used to create the holes in the ground where the bomb exploded). I Know it’s possible, because I’ve seen it, but I can’t seem to get it to work, because I just don’t know enough about bitmapping in flash.

    Is there any way that you might look into that for me (I hope so)? Might be a fun project for yourself to work on too..

    If you decide to look into it, pliz send me an email at


  23. Some Guy

    How do you test the flash game? I’ve been wondering if mine is working and I can’t seem to be able to test it out.

  24. arik

    hey man how do i make more enemies in different locations? so its sort of like an all out attack on the tank? thanks man great tut

  25. Joey

    hello. i have followed this tut and i am haveing troble with killing the enemy.
    all of my symbols the same as yours(and there instince names) but the code doesnt work for me. i have
    if (enemy.hitTest(this._x, this._y, true)) {

    and i have been trying to figure it out for a hour. it seems to me like it is ignoring the hitTest. some one please help

  26. Pingback: Flash Game Tutorial Roundup Part 2 | VapvaruN | Wp Experts

  27. Pingback: Flash Game Tutorials.. « cneriportfolio

  28. Nick

    Btw i really loved your efforts you put to write this useful tutorial, Can you also give some knowledge about strategy games development on flash As2.0 or AS3, AS3 will be better and i will be very thankful to you for that.

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

Leave a Reply

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