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()。我的困境是：当我在红色方块中移动时，怪物不会跟随我的角色。我不知道如何做到这一点，或者甚至可能做到这一点。

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

让它像你的小朋友一样追逐你：

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

您的碰撞检测也有问题。但我不会在这里讨论

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

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

1 个答案: