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

时间:2013-07-25 08:05:31

标签: javascript jquery

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

2 个答案:

答案 0 :(得分: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建议的那样,最好将所有这些移出动画功能并创建游戏循环和场景图。场景图将跟踪元素的位置,并在游戏循环中检查碰撞,然后调用渲染函数,该函数将根据场景图在屏幕上绘制元素。

答案 1 :(得分: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");
        }
      }
    });
  }
});

当您每帧调用一次步进功能时,您首先需要在$('.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");
        }
      }
    });
  }
});