1

我有这个游戏：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"); }
            }
        });
4

2 回答 2

1

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

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

请记住，

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

只会比较第一个弹丸和第一个敌人的位置，而屏幕上的数量更多。您需要遍历每个射弹并将其 powition 与每个敌人进行比较以找到碰撞对，例如：

$('.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，这会给您带来更大的容差。您还应该比较垂直位置。

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

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

于 2013-07-25T09:34:01.410 回答
0

在您开始动画之后，您正在运行一次命中检查功能。您需要做的是每帧运行它以查看相交。幸运的是，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");
        }
      }
    });
  }
});

当您每帧调用一次 step 函数时，您首先需要将选择器缓存在 ( $('.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");
        }
      }
    });
  }
});
于 2013-07-25T09:36:27.170 回答