javascript - 如何让元素跟随动态移动元素？

Question

好的，我已经完成了大部分工作。这是代码:

function gi(a) {
    return document.getElementById(a)
}
gameworld = document.getElementById('GameWorld');
character = document.getElementById('character');
var oldvX = 30;
var oldvY = 30;

gameworld.addEventListener('click', function(e) {
    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    var element = e.target;
    character.style.left = offsetX + 'px';
    character.style.top = offsetY + 'px';
});


setInterval(function() {
    monster = gi('monster');
    oldvX += 10;
    oldvY += 10;
    gb = gameworld.getBoundingClientRect();
    cb = character.getBoundingClientRect();

    oldvX += cb.left / 10;
    oldvY += cb.top / 10;
    if (oldvX >= (cb.left)) {

        return
    }
    if (oldvY >= (cb.top)) {

        return
    }

    monster.style.left = oldvX + 'px';
    monster.style.top = oldvY + 'px';

}, 500);

这是 jsfiddle: https://jsfiddle.net/g43nxhcw/12/

如您所见，怪物正在通过玩家的 getBoundingClientRect() 向玩家移动。我的困境是:当我在红色方 block 周围移动时，怪物没有跟随我的 Angular 色。我不确定如何实现这一点，或者这是否可能。

Answer 1

您应该计算方向向量

vx = cb.left - parseInt(monster.style.left);
vy = cb.top - parseInt(monster.style.top);
vl = Math.sqrt(vx*vx+vy*vy);
vx = vx / vl
vy = vy / vl

它的长度始终为1，因此您可以乘以步长

vx = vx * 10
vy = vy * 10

让它像你的小 friend 一样追你:

monster.style.left=(parseInt(monster.style.left) + vx) +'px';
monster.style.top=(parseInt(monster.style.top) + vy)+'px';

• 您的碰撞检测也有问题。但我不会在这里介绍它

https://jsfiddle.net/g43nxhcw/13/