Problem with collisions detection on canvas platformer

by Charlie K   Last Updated July 13, 2019 01:13 AM

Having a lot of trouble with my collision detection in my platformer. If you go straight to the right the block will float. Also the corners let the block sink right through and the walls are sticky. It's a bit of a mess. I know for the floating my gravity is a big issue. If anyone could help me out i'd be so so happy.

Heres the collision code:


  const calculatedTileSize = 1.0 / mapTileSize;
  const nextX = guy.x + guy.velX;
  const nextY = guy.y + guy.velY;


  const currentMinX = (guy.x * calculatedTileSize) | 0;
  const currentMaxX = ((guy.x + guy.width) * calculatedTileSize) | 0;
  const currentMinY = (guy.y * calculatedTileSize) | 0;
  const currentMaxY = ((guy.y + guy.height) * calculatedTileSize) | 0;

  const nextMinX = (nextX * calculatedTileSize) | 0;
  const nextMaxX = ((nextX + guy.width) * calculatedTileSize) | 0;
  const nextMinY = (nextY * calculatedTileSize) | 0;
  const nextMaxY = ((nextY + guy.height) * calculatedTileSize) | 0;


  // X axis collision
  if (guy.velX !== 0.0) {
    for (let i = nextMinX; i <= nextMaxX; i++) {
      for (let j = currentMinY; j <= currentMaxY; j++) {
        if (map[j][i]) {
          guy.velX = 0.0;
          break;
        }
      }
    }
  }

  // Y axis collision
  if (guy.velY !== 0.0) {
    for (let j = nextMinY; j <= nextMaxY; j++) {
      for (let i = currentMinX; i <= currentMaxX; i++) {
        if (map[j][i]) {
          guy.velY = 0.0;
          physics.gravity = 0;
        } else {
          physics.gravity = 0.4;
        }
      }
    }
  }

The full game is in this codepen:

https://codepen.io/charlie1172/pen/OeGdvJ



Related Questions


Keep balls in the box and prevent intersection

Updated March 10, 2017 19:13 PM




Splice enemy array to destroy enemy (js game)

Updated September 26, 2018 14:13 PM