The basics of double jump concept in an endless runner game like Spring Ninja

Here we are talking about Spring Ninja prototype again.

What about adding a double jump feature to the final HTML5 prototype I showed you in this post.

First, let’s have a look at the result:

Click and hold to jump, and do the same thing while in the air to perform a double jump.

Let’s now have a look at the source code, with the new lines highlighted:

Since the game engine has been already built in the previous step, there are only a few new lines to see:

Line 17: defining jumps variable to keep track of consecutive jumps

Line 18: we’ll define another variable to make the script more universal: now you can decide how many extra jumps are allowed

Line 31: at the start of the game, jumps is set to zero

Line 60: we have to add another condition to let the player jump, that is we didn’t reach the extra jumps cap already

Line 61: now let’s increment jump by 1

Line 79: if we did not reach the maximum amount of extra jumps…

Line 80: … we add the listener to trigger mouse/touch input

Line 107: as soon as we touch the ground, re remove the listener

Line 114: if the player landed safely on the ground…

Line 115: reset jumps variable to zero

Line 116: add input listener once again

And we developed double jump. Download the full source code.

  • MC

    How do you create (efficiently) fixed levels (not random generated levels), like “Geometry Dash” levels?
    I think there are (at least) three ways:
    1- Generate the entire level (using tilemaps maybe) and actually move the player through the level
    2- Generate the level, but leave the player.x fixed and move the map to the left
    3- Generate the level obstacles on the fly but not randomly… (not sure how)

    In LONG levels like geometry dash, where precision AND performance are also neccesary,
    what would be the way to go, in your opinion?

    • Emanuele Feronato

      3. Absolutely 3.

      • MC

        But how can you achieve the accuracy needed as in geometry dash levels?…
        and how would you save/load/create the level objects?

        I would save the level obstacles in arrays, one element per tile X position, but not sure if this would be the best way… ?

        • Emanuele Feronato

          yeah, me too, but I am open to suggestions

  • Fritz FLA

    Hello Emmanuelle,

    I’ve buyed your Book, but since then, i don’t understand this piece of code:

    var play = function(game){}
    play.prototype = {

    What does it means precisely?

  • Steve

    Sorry. I was wrong. Your fix did indeed work, and this double jump is amazing. You are fantastic dude! Such good stuff on your site! Thanks for everything.