Javascript холст блок событие столкновения движение

Question

Чтобы определить, когда 1 изображение находится в пределах диапазона другого изображения на холсте я:

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

, который прекрасно работает, но у меня огромная проблема, выясняя, как не позволить игрок входит в здание/дерево/объект, но в то же время позволяет им отодвинуться от объекта.

я могу сделать игрок слайд через объект, перемещая их, касаясь, и блокировать их от возвращения из того, что 1 направлении, но я не могу блокировать движение со всех 4-х сторон ....

Основная проблема заключается в том, что он обнаруживает, что они перекрываются, но он не говорит вам, в каком направлении идет игрок. Простое отрицание направления движения игроков, когда они находятся внутри здания, не работало (если они нажимают правый и касающийся объект, идите налево, иначе, если они не касаются и не нажимают вправо, идите направо). Или, если они идут вверх и прикоснутся к зданию, отправьте DOWN. Разве это не работает ????

Единственное, что я могу придумать, это сделать 4 тонких прямоугольника/линий, представляющих каждую сторону периметра, а затем просто не позволять движению со стороны, с которой она обращена. Но должен быть какой-то более простой способ! Что это?

Сохранить предыдущее местоположение и сделать сравнение ?? Прямо сейчас на самом деле нет направления движения, если вы обнаружите UP в ключевом прослушивателе, он перемещает фоновое изображение и корректирует положение спрайтов игроков. Какие-нибудь советы?

Answer 1

Предположительно, этот код происходит во время перемещения или попытки перемещения игрока.

Определите центр обоих объектов. Если центр игрока пытается отойти от центра другого объекта, разрешите двигаться, даже если они пересекаются.

Если нет, остановите движение.

Иными словами, у вас есть центр игрока и центр объекта. Это делает строку1.

И у вас есть команда перемещения, которая создаст потенциально новое место для центра игрока (старое местоположение плюс некоторое направление). Рассчитайте это, чтобы получить строку2.

Теперь, если вторая строка длиннее первой строки, это означает, что игрок уходит от пересекающегося объекта и поэтому его следует разрешить. Возможно, они встанут против объекта справа, и они хотят двигаться вверх или влево. Оба они делают строку 2 длиннее строки1.

Его следует блокировать только в том случае, если игрок пытается сделать линию короче (перемещаясь непосредственно к объекту).

---

советы для линий

Пусть центр игрока был px, py и пусть центр объекта является ox, oy. Затем расстояние между ними:

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

Но здесь есть что-то смешное. На самом деле нам не нужно знать расстояние, нам просто нужно сравнить его с другим расстоянием.Это означает, что мы можем пропустить (потенциально медленный) вызов Math.sqrt и сравнить квадрат расстояния линии1 с квадратом расстояния линии2. Так вот line1:

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

И line2 мы должны знать, где игрок будет, если команда перемещения была успешной, мы называем это newpx, newpy.

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

Так что если line2 > line1, позвольте двигаться! В противном случае заблокируйте переход от события.

примечание что все это предполагает, что игрок может перемещаться только в одном направлении по краю (вверх, вниз, влево, вправо), а не вверх-вправо. Если это так, вам нужно быть немного осторожнее.