Retro Style Platform Runner Game for mobile with EaselJS (Part 3) – adding movement & more collision

So this is going to be Part3 of my series on creating a retro style platform runner game for mobile devices. Originally I wanted to write about adding animations in this part, however I rethought the who whole part and find it more suitable to first add some movement and make the collision detection complete, as it is still just a very basic algorithm in the previous part.

So this is going to be the result of this part:

Refining the collision detection

Even though the collision detection works fine with one other object, there are some flaws that you will notice when adding more than one object the hero can collide with. So for example in the last part I described how we can prevent the hero from “ghosting through” an obstacle when he’s going really fast – and the described way to check this works fine, so I checked if the hero’s y-position changes to the other side of the obstacle without him detecting a collision – however what I forgot to check there was whether the hero was even  on the same x-position as the obstacle. I now created a new method for the utils-class called ‘calculateCollision’, that I will also use for calculating horizontal collisions later:

I won’t go much into detail about the method, as there is just one major change, beside the fix of “ghosting” that I mentioned above: The method now takes care of the ‘moveBy’ object, e.g.: If your hero wants to move by {x:0, y:15} and there is a collision detected at y=5, the method changes the move by to {x:0, y:5} so you allways automatically know how far you can move the hero until it collides.
This makes the hero’s tick-method a lot cleaner:


Adding movement is probably the most easiest thing to do here, just go to the initialize-method of the Hero-class and assign an x-value to the velocity property:

And because we already added the handling of the x-movement to the hero’s tick()-method, this is done. However if we look at the result, I guess it’s pretty obvious whats missing:

We need more platforms!

So we already added one platform in the initializeGame-method, to add some more platform we just need to create a loop:

Now that we’ve added all the platform, we can jump around, however our hero still keeps running out of the view, to follow the hero with the camera, we simply reposition the “world” every frame according to the hero’s position – add this to the main-tick-method:

Now we have: a few platforms, the “camera” following our hero, but the course is not infinite yet!
There are a quite a few ways to make the course infinite, I’m just going to describe one: Since the hero cannot walk to the left, everything to the left of the visible screen can be “thrown” away, since it won’t become visible again! – However we are not going to throw away the platform that move out of the screen, we are just going to reposition them at the end of the track:

So in the jumpy.js with every tick() we also execute this check:

and then we of course need to define the method “movePlatformToEnd()”:

As you can see – the platform will be positioned according to the “lastPlatform’s” position and then made the ‘lastPlatform’ itself – so when we first create all the platforms with ‘addPlatform()’ we also have to add this last line self.lastPlatform = platform;.

And that’s pretty much it – to round everything up, you can add a “reset()” method – to reset everything once the hero drops below a certain y-koordinate for example. Such a method should be rather trivial, so I’m not gonna go into detail here but I implemented such a method, so checkout the sources if you want to take a look at it.

Download the sources: here.