I am having problems with collision detection. I am trying to make a simple platformer but when the player is falling or moving too fast it sometimes detects the wrong collision side. I am getting the side of the collision by checking the distance between the player and the sides of a block that are exposed to the player. I also tried detecting collision one axis at a time but this glitch still occurs.
blockCollision: function(block) {
if(this.x + this.width > block.x && this.x < block.x + block.width && this.y + this.height > block.y && this.y < block.y + block.height) {
let distanceLeft = Math.abs(this.x + this.width - block.x)
let distanceRight = Math.abs(this.x - (block.x + block.width))
let distanceTop = Math.abs(this.y + this.height - block.y)
let distanceBottom = Math.abs(this.y - (block.y + block.height))
if(distanceLeft < distanceTop && distanceLeft < distanceBottom && !block.collisionSides.includes('L')){
this.velX = 0
this.x = block.x - this.width
}
if(distanceRight < distanceTop && distanceRight < distanceBottom && !block.collisionSides.includes('R')){
this.velX = 0
this.x = block.x + block.width
}
if(distanceTop < distanceLeft && distanceTop < distanceRight && !block.collisionSides.includes('T')){
this.jumping = false
this.velY = 0
this.y = block.y - this.height
}
if(distanceBottom < distanceLeft && distanceBottom < distanceRight && !block.collisionSides.includes('B')){
this.velY = 0
this.y = block.y + block.height
}
if(distanceLeft == distanceTop && !block.collisionSides.includes('LT')){
this.x = block.x - this.width
this.y = block.y - this.height
}
if(distanceLeft == distanceBottom && !block.collisionSides.includes('LB')){
this.x = block.x - this.width
this.y = block.y + block.height
}
if(distanceRight == distanceTop && !block.collisionSides.includes('RT')){
this.x = block.x + block.width
this.y = block.y - this.height
}
if(distanceRight == distanceBottom && !block.collisionSides.includes('RB')){
this.x = block.x + block.width
this.y = block.y + block.height
}
}
}
