Question

To detect when 1 image is within range of another image on the canvas I do:

if (herohitboxX <= (villageMain.x + 200) && villageMain.x <= (herohitboxX) && herohitboxY <= (villageMain.y + 200) && villageMain.y <= (herohitboxY) ) { console.log('inside bldg') }

which works great but I’m having a huge problem figuring out how to not let the player walk into the building/tree/object, but while letting them still move away from the object.

I can make the player slide through the object by moving them while touching, and block them from coming back from that 1 direction, but I can’t block movement from all 4 sides….

The main problem is it only detects if they’re overlapping, but it doesn’t tell you what direction the player was coming from. Simply negating the players movement direction when they’re inside the building didn’t work(if they’re pressing right and touching object, go left, else if they’re not touching and pressing right, go right). Or if they were walking UP and touch the building, send DOWN. Shouldn’t that work????

The only thing I can think of is to do 4 thin rectangles/lines representing each side of the perimeter, then just not allowing movement from the direction it’s facing. But there has to be some easier way! What is it?

Store previous location and make a comparison?? Right now there isn’t really a movement direction to look to, if you UP is detected in key listener, it moves the background image and adjusts the players sprite position. Any tips?

Answer 1

Presumably this code happens during the player moving or trying to move.

Determine the center of both objects. If the player’s center is attempting to move away from the other object’s center, allow the move to take place even though they intersect.

If not, stop the move.

Put another way, you have player’s center and object’s center. This makes line1.

And you have a move command that would create a potential new place for the player’s center (the old location plus some direction). Calculate this to get line2.

Now if the second line is longer than the first line, that means the player is moving away from the intersecting object and so it should be allowed. Maybe they are up against an object on their right and they want to move up or left. Both of these make line2 longer than line1.

It should only be blocked if the player is attempting to make the line shorter (by moving directly towards the object).

---

tips for lines

Suppose the player’s center was px, py and suppose the object’s center is ox, oy. Then the distance between them is:

var dx = px - ox;
var dy = py - oy;
var dist = Math.sqrt(dx * dx + dy * dy);

But there’s something funny here. We don’t actually need to know the distance, we just need to compare it to another distance. This means we can skip the (potentially slow) Math.sqrt call, and compared the squared distance of line1 to the squared distance of line2. So here’s line1:

var dx = px - ox;
var dy = py - oy;
var line1 = dx * dx + dy * dy;

And for line2 we need to know where the player would be if the move command was successful, we call that newpx, newpy.

var dx2 = newpx - ox;
var dy2 = newpy - oy;
var line2 = dx2 * dx2 + dy2 * dy2;

So if line2 > line1, allow the move! Otherwise, block the move from occurring.

note that all of this assumes that the player can only move in one cardinal direction at a time (up, down, left, right) and not up-right. If that is the case you’ll have to be a little more careful.