javascript - jquery中检测两个图像之间的碰撞

Question

我有这个游戏:http://jsfiddle.net/Qfe6L/5/

我正在尝试检测手里剑何时击中敌人，因此当它击中敌人时，敌人应该消失，并且分数应该增加 1 我搜索的是我应该计算两个图像的位置以检查它们是否是一次碰撞，但我似乎无法做到这一点，你们有什么帮助吗？

 $(window).keypress(function (e) {
            if (e.which == 32) {
                CreateChuriken();
                $("#Shuriken" + Shurikengid).animate({ left: '+=300px' }, 'slow');

                if ($(".Shuriken").css('left') == $(".Enemy").css('left'))
                { alert("Met"); }
            }
        });

Answer 1

您需要检查每个动画步骤中的碰撞情况。幸运的是，jQuery .animate() 有一个 progress 选项，您可以传递一个在每帧调用的函数。

$("#Shuriken" + Shurikengid).animate(
    { left: '+=300px' }, 
    { duration : 'slow', 
      progress: function(){
                    /* collision detection here */
                }
    }
);

请记住

if ($(".Shuriken").css('left') == $(".Enemy").css('left'))

只会比较第一个射弹和第一个敌人的位置，而屏幕上有更多的敌人。您需要迭代每个射弹并将其力量与每个敌人进行比较以找到碰撞对，例如:

$('.Shuriken').each( function(){
    var sOffset = $(this).offset();
    $('.Enemy').each( function(){
        var eOffset = $(this).offset();
        if( sOffset.left == eOffset.left ){
            /* boom! */
        }
    });
});

上面的内容很接近，但仍然不起作用。动画不会每帧进展 1 像素，因此您可以从一帧中的手里剑左侧 100 像素和敌人左侧 101 像素转到下一帧中的手里剑左侧 102 像素和左侧 99 像素的敌人。他们会擦肩而过，但不会在同一点相遇。因此，您需要将这些值四舍五入到最接近的 10，这将为您提供更大的容差。您还应该比较垂直位置。

更新 fiddle :http://jsfiddle.net/Qfe6L/8/(修复了敌人的垂直位置以便于测试)。

编辑:正如 @Kasyx 所建议的，最好将所有这些移出动画功能并创建游戏循环和场景图。场景图将跟踪元素的位置，并在游戏循环中检查碰撞，然后调用渲染函数，该函数将根据场景图在屏幕上绘制元素。