JavaScript 碰撞检测似乎不起作用?

标签 javascript animation canvas collision-detection

所以我正在尝试在我演绎的外星入侵者中设置碰撞检测。但它几乎不起作用。我的意思不是说我从来没有得到有效的命中,或者 true 返回。我什至尝试了很多不同的方法,但无论出于何种原因,我都无法得到正确的答案。

碰撞检测用于玩家向外星飞船发射子弹,如果它重要的话,只是为了澄清 :D。

这是碰撞检测代码:(我试图让它容易出错,希望能成功,尽管似乎没有任何方法有效)

var isCollidingWithAlien = function(shot){
    var alienImg = document.getElementById('alien');
    for(var i = 0; i < aliens.length; i++){
        return shot.x               < aliens[i].x + alienImg.width  && 
        shot.x + shot.img.width     > aliens[i].x                   &&
        shot.y                      < aliens[i].y + alienImg.height && 
        shot.y + shot.img.height    > aliens[i].y;
    }
};

这并不是代码没有被调用,也不是一些奇怪的技术错误。它永远不会返回 true。

此外,如果您想查看所有代码,这里有一个 JSFiddle

@更新: 一直在玩代码,它似乎正确地注册了第一个创建的外星人,如果你看一下 JSFiddle,它就会在左上角。虽然不知道为什么

最佳答案

问题是,您仅为列表中的第一个外星人返回碰撞。如果你对某些外星人为真,你应该返回真,或者在所有外星人没有发生碰撞之后返回假:

var isCollidingWithAlien = function(shot){
    var alienImg = document.getElementById('alien');
    for(var i = 0; i < aliens.length; i++){
        var result = shot.x         < aliens[i].x + alienImg.width  && 
        shot.x + shot.img.width     > aliens[i].x                   &&
        shot.y                      < aliens[i].y + alienImg.height && 
        shot.y + shot.img.height    > aliens[i].y;
        if(result)
            return true;
    }
    return false;
};

关于JavaScript 碰撞检测似乎不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22414472/

相关文章:

javascript - 获取对象类型的名称

javascript - Requirejs 出现媒体元素错误

javascript - 从数组中获取最大的 3 个数字?

javascript - window.onclick 在网站中使用两次

javascript - 如何实现jQuery动画排队?

c - GTK+ 上的 2D 老虎机类型动画

javascript - 进入和离开全屏时调整 Canvas 大小

android - 为形状的笔触宽度设置动画

HTML5 Canvas - 当 alpha < 1 时,相同的 RGBA 样式会产生不同的颜色

javascript - canvas context.drawImage 跨浏览器的差异?