Question

我有一个基本的太空入侵者类型的游戏，我不能让它识别玩家的射击何时击中外星人。（我只检查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/

Answer 1

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

检查：2D Engines for Javascript

Answer 2

我做了类似的事情，我发现使用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();
}

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

2 个答案: