Question

我试图检测一个手里剑何时击中一个敌人，所以当它击中它时，敌人应该消失，分数应该增加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! */
        }
    });
});

以上情况很接近，但仍然无效。动画每帧不进1px，所以你可以从Shuriken的100px离开，101px的敌人在一帧离开Shuriken，在102px左边，敌人在99px离开下一个。他们会相互通过，但不会在同一时刻见面。因此，您需要将这些值舍入到最接近的10s，这样可以获得更大的容差。你sholud也比较垂直位置。

更新了小提琴：http://jsfiddle.net/Qfe6L/8/ （修正了敌人的垂直位置以便于测试）。

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

Answer 2

在您开始动画之后，直接运行点击检查功能一次。你需要做的是每帧运行它以查看相交。幸运的是，jQuery为此提供了一个回调处理程序：$.animate’s step option。如果您将第二个对象传递到$.animate，则可以指定持续时间和步长函数，如下所示：

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

当您每帧调用一次步进功能时，您首先需要在$('.Shuriken')，$('.Enemy')内缓存选择器：

$(window).keypress(function (e) {
  if (e.which == 32) {
    var shuriken, enemy;
    CreateChuriken();
    shuriken = $('.Shuriken');
    enemy = $('.Enemy');
    $("#Shuriken" + Shurikengid).animate({
      left: '+=300px'
    }, {
      duration: 'slow',
      step: function(){
        if (shuriken.css('left') == enemy.css('left')) {
          alert("Met");
        }
      }
    });
  }
});

检测jquery中两个图像之间的冲突

2 个答案: