HTML5 prototype of an endless runner game like Spring Ninja

Are you playing Spring Ninja? It’s a cute iOS game you can play in about 20 seconds, just like Flappy Bird, so I am going to show you how you can do it using Phaser.

Have a look at what we are going to build:

Press and hold mouse key to jump, land on the poles, close to the middle of them, or you will fall down. That easy, but addicting.

Also, the source code is really similar to the one used in the creation of Flappy Bird, as it features Arcade Physics and class extensions. I am leaving it uncommented at the moment because I am going to improve it then publish a complete tutorial:

Dont’ forget to download the whole project and tell me your best score.

  • jason

    I got 48 :)

    This is great! do you mind if I make my own version? I plan to make the poles move up and down so its harder

    • Emanuele Feronato

      Sure! I was thinking about it too, as well as giving a time limit to stay on the same pole. Show me the result when it’s done

    • bugz

      YES because this game needs to be harder :))))

    • Chill man, harder? I’m struggling to play this!

  • There is a bug!!! guys doesnt jump right anymore. gif link below. The platforms are visible, gif grabber didnt get it thats all. :D

    http://www.gfycat.com/LikelyThickAtlasmoth

    Nice game and tutorial tho.

    • Emanuele Feronato

      Checking….

      • bubamara

        Think it’s this case : apply full force and jump. If you are lucky enough and you manage to land on pole, you can’t jump anymore.

        • Emanuele Feronato

          Can’t reproduce it…

          • And also there is this case where the guy will get on the platforms and then jump off. Not sure wht that happens.

    • Jonathan

      Saw that as well.. happened twice to me.. although not sure how it happened. weird

      • Emanuele Feronato

        Got it. And solved. Will publish the update this evening (GMT+1).

        • Steve

          Did you ever post the fix to this problem? Great tutroials btw. Thank you!

          • Steve

            I see you did attempt a fix on March 20th of 2015, unfortunately I don’t think it solved the problem. :(

  • Jonathan

    Any idea why it lags? first few jumps, it is ok, then suddenly, it will lag.. tried it on ff, chrome on desktop and also on chrome for mobile

  • Pingback: HTML5 Spring Ninja game update: bug fix | Emanuele Feronato()

  • Pingback: Play “A Jumping Block”, an HTML5 minimalist game based on Spring Ninja tutorial | Emanuele Feronato()

  • Pingback: Quick tip: how to scale your HTML5 endless runner game to play it on mobile devices | Emanuele Feronato()

  • Pingback: Create a game like Spring Ninja with Unity – step 1 | Emanuele Feronato()

  • Mauricio

    How can I change the background to an image? I tried changing the “game.stage.backgroundColor=”#xxxx” ” to “…backgroundImage = “image.png” ” but the image I link doesn’t show and instead the screen goes all black.

    • Emanuele Feronato

      You can’t place a BG image that way, just add an image big enough. If it’s the first image you add to the game, it will remain in the background

  • ryzhak

    128! Just 4 long jump )

  • Kad

    I landed platform successfully but jumps off down?! There are collision detection problem or something.

    • Emanuele Feronato

      I make the ninja jump off is you land too close to platform edge