Collision detection in complex platformer game - Javascript

[pro0grammer]

Question: I’m working on a platformer game and I can’t figure out how to add a collision detection to the game since it’s a complex circle-rectangle collision. I want the ball to stop when it touches a tile and before it can cross tiles. I also don’t want it to go beyond my screen, I can do it myself too so not main issue.

I’ve tried:

1. Several basic collision detection codes and altered them to fit my need but I’m unable to think of a way to do it.
2. I have created a simplified array, where body A represents red circle ball and B represents all the tiles.
3. I’ve also tried codes from several repls and tried creating some myself.

Collision detection is at the end of the code. My code may be complex to understand and hence you may need to fork my repl to debug it. Thanks in advance !!

Repl link: https://replit.com/@pro0grammer/Perfectly-Physics#script.js

function collide(arr,y){
  const A = {x:100, y: y, width:100, height: 100, radius:50};

  for (let i=0;i<arr.length;i++) {
    
    const B = {x:arr[i][0], y: arr[i][1], width:arr[i][2], height: arr[i][3]};
    if(/*check collision*/){
      //Detect collisions
    }
  }
  return pos;
}

[IanAtCSTeach]

Hi @pro0grammer how are you getting on with this issue? I’ve had a look and unfortunately I have nothing to add at this time.

[MattDESTROYER]

Just quickly looked this up on Stackoverflow.

function RectCircleCollision(rect, circle) {
	const distX = Math.abs(circle.x - rect.x - rect.width / 2);
	const distY = Math.abs(circle.y - rect.y - rect.height / 2);
	
	if (distX > (rect.width / 2 + circle.radius) || distY > (rect.height / 2 + circle.radius)) {
		return false;
	}
	if (distX <= (rect.width / 2) || distY <= (rect.height / 2)) {
		return true;
	}
	
	const dx = distX - rect.width / 2;
	const dy = distY - rect.height / 2;
	
	return (dx * dx + dy * dy <= (circle.radius * circle.radius));
}

Or another version from a good website (I translated it to JS):

function RectCircleCollision(rect, circle) {
	let testX = circle.x;
	let testY = circle.y;
	
	if (circle.x < rect.x) {
		testX = rect.x;
	} else if (circle.x > rect.x + rect.width) {
		testX = rect.x + rect.width;
	}
	if (circle.y < rect.y) {
		testY = rect.y;
	} else if (circle.y > rect.y + rect.height) {
		testY = rect.y + rect.height;
	}
	
	const distX = circle.x - testX;
	const distY = circle.y - testY;
	
	return (distX * distX + distY * distY) ** 0.5 < circle.radius;
}

[pro0grammer]

I was unable to do anything, so i changed my strategy. I’m trying to add collision detection whenever you try to move forward.

[pro0grammer]

I’ve already tried that as I mentioned in what I’ve tried, thanks for trying to help me

[MattDESTROYER]

I’m not sure what the issue is, but I made a simple demo of a circle-rectangle collision function here (and here’s a demo of that collision detection in action). (I often prototype/test basic stuff on KhanAcademy.) Does this help?

[didisoftwares]

can use javascript physics to colisions. ammo.js
this allow implement more things like frictiong, gravity, aceleration, bounce… etc

[pro0grammer]

@MarioX, how can I use friction, gravity to detect collisions? Though I don’t need to use any libraries I found another way around, I am going to detect collision whenever character moves, hope it works.

[pro0grammer]

In my case, it won’t since it’s an actual physics system, I think ball must fall even if it’s half inside block so I’m still trying it.

[MattDESTROYER]

Are you asking for something like this?

[pro0grammer]

Your code looks great, just my implementation of it is different. I’ll mark this as answer as soon as I am able to manipulate it successfully. I may reach out to you again if I need help regarding same, Thanks for help