I'm making an endless jumper as my first game and I'm running into some problems with the one-way collision detection.

Collisions are detected correctly most of the time but occasionally the player inexplicably falls through the platform.

I suspect that it is ghosting through the platforms but I can't see why and I'm too close to it to be able to identify the source of the problem.

My code:

This loop is located within the update method of the global platforms object. this._platforms refers to the array of Platform objects.

 for (i = 0, len = this._platforms.length; i < len; i++) {
            var p = this._platforms[i];

            p.proximity = Math.abs(p.x / 2 - player.x / 2) + Math.abs(p.y / 2 - player.y / 2);

            if (p.closest()) {
                if (p.collision()) {
                    player.onplatform = true;
                    player.y = p.y - player_s_right.height;
                } else {
                    player.onplatform = false;

It loops through the platform objects, running a collision test only if the platform is the closest one to the player.

Here are the closest() and collision() checks respectively:

// Return whether current platform is the closest to the player
Platform.prototype.closest = function() {

    var minprox = Math.min.apply(Math, platforms._platforms.map(function (obj) {
        return obj.proximity;

    return this.proximity === minprox;

// Collision detection
Platform.prototype.collision = function() {

    var px = player.direction > 0 ? player.x + 15 : player.x,
        px2 = player.direction > 0 ? player.x + player_s_right.width : player.x + player_s_right.width - 15,
        py = player.y + player_s_left.height,
        py2 = player.y + player_s_right.height + player.yvelocity,

        platx2 = this.x + platform_s.width,
        platy2 = this.y + platform_s.height;

    if (((px > this.x && px < platx2) || (px2 > this.x && px2 < platx2)) && (py2 >= this.y && py2 <= platy2) && py <= this.y) {
        return true;

If anyone can shed some light on this I'd really appreciate it.

  • \$\begingroup\$ Are you in a state where you could post a link to your game? Something like collision detection is difficult to debug with just a few code snippets as the current state of the game is required to find the problem. For example, if you are using frame-base animation, then you might be skipping frames past your intended platform. Disclaimer: I wrote that article. \$\endgroup\$ – Steven Lambert Mar 11 '16 at 0:47
  • \$\begingroup\$ If it helps here is a link to my Github repo. Great article by the way @Steven Lambert \$\endgroup\$ – AproposArmadillo Mar 11 '16 at 11:44

Your proximity calculation wasn't working correctly when two platforms were right next to one another. I'm not sure what type of proximity calculation you are trying to use, but I think using the distance between two points would give a more correct result. Changing the proximity to use that seems to make it work.

var px = player.direction > 0 ? player.x + 15 : player.x,
    pwidth = player_s_right.width - 15;
    a = (px + pwidth / 2) - (p.x + platform_s.width / 2);
    b = (player.y + player.sprite.height / 2) - (p.y + platform_s.height / 2)

p.proximity = Math.sqrt( a*a + b*b );

It seems your proximity algorithm only checks proximity of the top-left (?) corner of the platform. For example if we have scenario like:


where we have player P and platforms A and B. Here closest() would return B as the closest platform and then B.collision() would return false.

  • \$\begingroup\$ At the moment platforms are never close enough to each other for this to be an issue, and so I was satisfied with a very basic proximity check. I will take note of this moving forward, though, thank you. \$\endgroup\$ – AproposArmadillo Mar 11 '16 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.