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

Tags :