检测对象位置相对于画布HTML5中的另一个对象

时间:2014-08-26 06:27:48

标签: javascript html canvas collision-detection

我正在HTML5javascript开发一款简单的游戏。游戏就像这样简单:

  • 游戏应该指示玩家将某些物品放入某些物体中 在画布上的地方,例如:把苹果放在盒子里面,或放入 盒子旁边的苹果。

  • 当玩家拖动对象并将其放入其中的任何位置时 画布

  • 游戏应该评估他的行动并决定他是否放置了 正确的对象在正确的地方。

    我的问题是:如何根据另一个对象测试用户放置对象的位置?即:我怎么知道用户把对象放在盒子旁边或盒子下面,甚至放在盒子里面?

我脑海中浮现的唯一想法是:

  • 在画布中绘制透明Image()并将其边界用作放置区域
  • 或在玩家将对象放入的位置创建<div>,当对象与此区域发生碰撞时,我应该测试用户的操作。但是,我无法在画布中创建<div>并且无法创建透明的Image()。任何想法?

2 个答案:

答案 0 :(得分:0)

使用每个对象的x,y,宽度和高度来检查它们是否重叠:

function getOverlapArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW, bX + bW) - Math.max(aX, bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

var apple = { x: 100, y: 100, width: 100, height: 100 };
var box = { x: 200, y: 200, width: 100, height: 100 };

var overlap = getOverlapArea(apple.x, apple.y, apple.width, apple.height, box.x, box.y, box.width, box.height);

if(overlap > 0) {
    // do something
}

答案 1 :(得分:0)

我使用了imcg的碰撞答案并对其进行了一些修改以覆盖onRight和onLeft案例如下:

var overlap = getOverlapArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
    if(overlap >0)
    {
        console.log("overlapping");
    }
    else {
    var toTheLeft = getOverlapToLeftArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
        if (toTheLeft > 0) {
        console.log("to the left");
        } 
        else {
                var toTheRight = getOverlapToRightArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
            if (toTheRight > 0) {
                console.log("to the right");
            }
            else
            {
                console.log("nothing");
            }

    }

在上面的第一个if语句中,我检查了重叠,就像imcg回答一样。

在下面的函数(getOverlapToLeftArea)中,我向x添加+20 px,假设如果shape1与shape2的距离超过20 px,那么它被认为太远,但如果shape1远离shape2 20px或更少,然后shape1位于shape2的左侧。

function getOverlapToLeftArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW + 20, bX + bW) - Math.max(aX + 20 , bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

同样的概念适用于getOverlapToLeftArea,除了我从x中减去-20 px如下:

function getOverlapToRightArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW - 20, bX + bW) - Math.max(aX - 20 , bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

对我来说就像魅力一样。 如果我想检查shape1是否 / shape2,我必须添加/减去{来自 y

的{1}}

谢谢你imcg :)我希望我的回答可以帮助你们所有人。