javascript - 像素碰撞检测不起作用

Question

这是我的游戏 plnkr .

(编辑:另一个 plnkr 有一个静态怪物而不是多个动态怪物)

输入或按钮将重新启动游戏。

谁能告诉我为什么碰撞检测算法取自 here不管用？它似乎无法准确地检测到命中(太广泛)。他们网站上的演示效果很好，但我不确定我做错了什么。

最相关的代码段(更新函数内部):

// Are they touching?


if (heroImage.width) {
    var heroImageData = ctx.getImageData(heroImage.x, heroImage.y, heroImage.width, heroImage.height);
    var monsterImageData;
    for (var i = 0; i < monsters.length; i++) {
        var monster = monsters[i];

        monster.x += monster.directionVector.x;
        monster.y += monster.directionVector.y;

        monsterImageData = ctx.getImageData(monster.monsterImage.x, monster.monsterImage.y, monster.monsterImage.width, monster.monsterImage.height);
        if (isPixelCollision(heroImageData, hero.x, hero.y, monsterImageData, monster.x, monster.y)) {
            stop();
        }
    }
}

Answer 1

正如 @GameAlchemist 指出的，您正在从 Canvas 背景中获取怪物和英雄的 ImageData ，该 Canvas 背景已经绘制了背景图像。因此 alpha 值始终为 255(不透明)。

碰撞函数中正在检查哪些内容

if (
    ( pixels [((pixelX - x ) + (pixelY - y ) * w ) * 4 + 3 /*RGBA, alpha @ 4*/] !== 0/*alpha zero expected*/ ) &&
    ( pixels2[((pixelX - x2) + (pixelY - y2) * w2) * 4 + 3 /*RGBA, alpha @ 4*/] !== 0/*alpha zero expected*/ )
) {
    return true;
}

相反，这两个 ImageData 都应该通过将这些图像绘制到没有任何绘制的 Canvas 上来生成。即使在完成该碰撞算法之后，似乎也不太有效。

我创建了两个变量 monsterImageData 和 heroImageData 来保存 imageData，这些变量仅加载一次。

HTML 文件 id=testCanvas 中有一个新 Canvas 。用于获取怪物和英雄的图像数据值。

这是plunker link修改后的代码。