检测两个移动物体之间的碰撞

时间:2012-12-15 08:36:24

标签: javascript jquery web-applications

我有一个基本的太空入侵者类型的游戏,我不能让它识别玩家的射击何时击中外星人。 (我只检查Alien2 atm,左起一秒)。由于它们都在移动,我决定检查碰撞的唯一方法是使用基于范围的if语句(具有2个顶部坐标和一个左坐标),或者直接比较沿Y轴的位置和Jquery。

我目前正在使用基于范围的解决方案,但到目前为止它还没有奏效(不确定原因)。

到目前为止我的代码:

        if (key == "87"/*&& document.getElementById('BarrelOne').id=='BarrelOne'*/){
            var Invader2 = document.getElementById('Alien2');
            var Shot1 = document.getElementById('ShortShot');
            Shot1.style.webkitAnimationPlayState="running";
            setTimeout(function(){
                Shot1.style.webkitAnimationPlayState="paused";
            }, 1200);   

            if(document.elementFromPoint(625.5, 265.5) == Shot1){
                Invader2.style.visibility="hidden"; 
            }
        };

的jsfiddle:

http://jsfiddle.net/ZJxgT/2/

2 个答案:

答案 0 :(得分:0)

我建议您使用a real 2D game engine for Javascript切换(如果仍有可能,取决于您的截止时间)easy collision detection,而不是浪费时间重新发明轮子。

检查:2D Engines for Javascript

答案 1 :(得分:0)

我做了类似的事情,我发现使用gameQuery更容易实现。

测试碰撞:

var collided = $("#div1").collision("#div2");

您可以看到完整的工作示例here

编辑

如果您遇到问题check out the API。例如,要了解如何使用冲突,请检查this part of the API

collision按以下方式运作:

  

此方法返回与所选元素冲突的元素列表,但仅返回与作为参数给出的过滤器匹配的元素列表。它需要两个可选参数(它们的顺序并不重要)。过滤器是一个用于检测碰撞的字符串过滤元素,它应该包含函数应该搜索碰撞的所有元素。例如,如果您查找可能包含在组中的类'foo'的元素的冲突,您将使用过滤器“.group,.foo”。

所以,写下这样的东西:

$("#ShortShot").collision("#Alien2").hide();
// will return the alien if it collides with ShortShot

或者,隐藏它们:

if (($("#ShortShot").collision("#Alien2")).length) {
    $("#ShortShot").remove();
    $("#Alien2").remove();
}