Question

我设法拼凑了这个简单的动画对象游戏。我有一个名为var的人，在我的html中我有一个名为#obstacle的div。

是否有可能做一些事情，如果“家伙”遇到“障碍”停止功能，以便“家伙”不能通过它？或者这太简单了？我正在考虑如果家伙的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;
}

Answer 1

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

我会实现像

这样的功能

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

有关详细信息，请参阅我的fiddle。

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

这是我对网络背景的看法，如果您对制作实际游戏感兴趣，请尝试canvas或更好的除了javascript以外的任何其他内容。

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

1 个答案: