javascript - 遇到div时是否可以停止动画对象？

我设法将这个简单的动画对象游戏拼凑在一起。我有一个名为guy的变量，在我的html中有一个称为#obstacle的div。

如果“ guy”遇到“障碍”会停止该功能，使“ guy”无法通过该功能吗？还是太简化了？我在想如果x的x，y等于#obstacle的x，y的话，请不要按下keydown。抱歉，如果我简化了这一点。

var guy = document.getElementById("guy");
var container = document.getElementById("container");
var guyLeft = 0;
var y = 0;
function anim(e) {
if (e.keyCode == 39) {
    guyLeft += 10; guy.style.left = guyLeft + "px";
        } else if (e.keyCode == 37) {
        guyLeft -= 10; guy.style.left = guyLeft + "px";
        } else if (e.keyCode == 40) {
        y += 10; guy.style.top = y + "px";
        } else if (e.keyCode == 38) {
        y -= 10; guy.style.top = y + "px";
        } else if (e.keyCode == 32) {
        y -= 134; guy.style.top = y + "px";
        x += 134; guy.style.right = x + "px";
        } switch (e.keyCode) {
            case 37:
            case 39:
                dx = 0;
                break;

            case 38:
            case 40:
                dy = 0;
                break;
        }
} document.onkeydown = anim;

#obstacle是一个非常简单的固定位置矩形：

#obstacle {
    position: fixed;
    bottom: 200px;
    right: 50px;
    width: 100px;
    height: 200px;
    background-color: black;
}

最佳答案

我的原则是存储障碍物的位置，并在每次调用anim（e）时检查新坐标是否与障碍物的坐标匹配。从那里开始，您可以创建另一个函数来处理碰撞事件或限制anim（e）的运动。

我会实现类似的功能

function checkCollision(a, b)
function collision()
//and so on and so forth

有关更多信息，请参见我的fiddle。

对于更复杂的情况，您将需要使用不同的方法进行更多的数学运算和更详细的检查。希望这能将您推向正确的方向。

这是我对网络背景的看法，如果您对制作实际游戏感兴趣，请尝试canvas或其他比javascript更好的工具。

关于javascript - 遇到div时是否可以停止动画对象？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37883881/