冲突检测不工作（Javascript）

我正试图建立一个简单的游戏和有困难的时间与碰撞检测。我希望在英雄感染病毒时弹出警报，下面是我的js代码。我不确定我的碰撞检测逻辑是否也错了。病毒是随机移动的，我使用CSS转换让它们逐渐移动

var henryLocation = {
    top: 700,
    left: 700
}

document.onkeydown = function (evt) {
    // console.log(evt)
    if (evt.keyCode === 38 && henryLocation.top > 10) {
        henryLocation.top = henryLocation.top - 25
    } else if (evt.keyCode === 40 && henryLocation.top < 700) {
        henryLocation.top = henryLocation.top + 25
    } else if (evt.keyCode === 37 && henryLocation.left > 10) {
        henryLocation.left = henryLocation.left - 25
    } else if (evt.keyCode === 39 && henryLocation.left < 1360) {
        henryLocation.left = henryLocation.left + 25
    }
    moveHenry()
}

function moveHenry () {
    document.getElementById('henry').style.top = henryLocation.top + 'px'
    document.getElementById('henry').style.left = henryLocation.left + 'px'
}

const startBtn = document.getElementById('btn-start')
startBtn.addEventListener("click", theGame)

function theGame () {
    const startGame = setInterval(moveCorona, 1300)
    
    function moveCorona () {
    const theCorona = document.getElementById('corona')
    const theCorona1 = document.getElementById('corona1')
    const theCorona2 = document.getElementById('corona2')
    const w = 1300, h = 600

    theCorona.style.top = Math.floor(Math.random() * h) + 'px'
    theCorona.style.left = Math.floor(Math.random() * w) + 'px'
    theCorona1.style.top = Math.floor(Math.random() * h) + 'px'
    theCorona1.style.left = Math.floor(Math.random() * w) + 'px'
    theCorona2.style.top = Math.floor(Math.random() * h) + 'px'
    theCorona2.style.left = Math.floor(Math.random() * w) + 'px'
    

    function collisionDetect () {
        var theHenry = henry.getBoundingClientRect();
        var theCorona = corona.getBoundingClientRect();
        
        if ((theCorona.top > theHenry.top && theCorona.top < theHenry.bottom) || (theCorona.bottom > theHenry.top && theCorona.bottom < theHenry.bottom)) {
            let verticalCollision = true
        } else {
            let verticalCollision = false
        }

        if ((theCorona.right > theHenry.left && theCorona.right < theHenry.right) || (theCorona.left < theHenry.right && theCorona.left > theHenry.left)) {
            let horizontalCollision = true
        } else {
            let horizontalCollision = false
        }

        if (verticalCollision && horizontalCollision) {
            alert('collision detected')
        } else {
            console.log('Game goes on')
        }
    }
    // collisionDetect()
}
}


function gameLoop () {
    setTimeout(gameLoop, 1000)
}

gameLoop()

var-henryLocation={
前700名，
左：700
}
document.onkeydown=函数（evt）{
//控制台日志（evt）
如果（evt.keyCode==38&&henryLocation.top>10）{
henryLocation.top=henryLocation.top-25
}else if（evt.keyCode==40&&henryLocation.top<700）{
henryLocation.top=henryLocation.top+25
}else if（evt.keyCode==37&&henryLocation.left>10）{
henryLocation.left=henryLocation.left-25
}else if（evt.keyCode==39&&henryLocation.left<1360）{
henryLocation.left=henryLocation.left+25
}
莫维亨利（）
}
函数（）{
document.getElementById（'henry'）.style.top=henryLocation.top+'px'
document.getElementById（'henry'）.style.left=henryLocation.left+'px'
}
const startBtn=document.getElementById（'btn-start'）
startBtn.addEventListener（“点击”，游戏）
游戏功能（）{
常数startGame=setInterval（移动电晕，1300）
函数（）{
const theCorona=document.getElementById（'corona'）
const theCorona1=document.getElementById（'corona1'）
const theCorona2=document.getElementById（'corona2'）
常数w=1300，h=600
theCorona.style.top=Math.floor（Math.random（）*h）+'px'
theCorona.style.left=Math.floor（Math.random（）*w）+'px'
theCorona1.style.top=Math.floor（Math.random（）*h）+'px'
theCorona1.style.left=Math.floor（Math.random（）*w）+'px'
theCorona2.style.top=Math.floor（Math.random（）*h）+'px'
theCorona2.style.left=Math.floor（Math.random（）*w）+'px'
函数冲突检测（）{
var theHenry=henry.getBoundingClientRect（）；
var theCorona=corona.getBoundingClientRect（）；
if（（theCorona.top>theHenry.top和theCorona.toptheHenry.top和theCorona.bottomtheHenry.left&&theCorona.righttheHenry.left））{
设水平碰撞=真
}否则{
设水平碰撞=false
}
if（垂直碰撞和水平碰撞）{
警报（'检测到碰撞'）
}否则{
console.log（'游戏继续'）
}
}
//碰撞检测（）
}
}
函数gameLoop（）{
设置超时（gameLoop，1000）
}
gameLoop（）

这一情况看起来可疑。看起来你正在做一个“矩形并集”，其中包括“交集”。应该是一个条件，如果是这样的话，从算法上来说，任何方法在设计中都似乎是一个错误，因为它有自己的子函数范围。在全球范围内，这应该是它自己的范围。或者，创建一个对象并将其声明为方法。无论如何，我都会投票表决，好问题。您在

if

语句中声明了

verticalCollision

和

horizontalclision

，这两个语句都是块作用域，因此都不能从外部访问……我看不出这段代码实际上是如何执行任何操作的。我假设传递给

setTimeout

内部

gameLoop

的函数必须是实际代码中的

game

，而不是

gameLoop

本身。[事实上，它不能——或者至少不应该——是这样，否则

moveCorona

上的

setInterval

将不断被调用。]通过颠倒逻辑确定它们没有碰撞，然后颠倒逻辑，可以简化实际的碰撞检测。请看此视频：但基本上，如果您在至少一个基本方向上完全超出范围，则不会发生碰撞。这种情况或条件看起来可疑。看起来你正在做一个“矩形并集”，其中包括“交集”。应该是一个条件，如果是这样的话，从算法上来说，任何方法在设计中都似乎是一个错误，因为它有自己的子函数范围。在全球范围内，这应该是它自己的范围。或者，创建一个对象并将其声明为方法。无论如何，我都会投票表决，好问题。您在

if

语句中声明了

verticalCollision

和

horizontalclision

，这两个语句都是块作用域，因此都不能从外部访问……我看不出这段代码实际上是如何执行任何操作的。我假设传递给

setTimeout

内部

gameLoop

的函数必须是实际代码中的

game

，而不是

gameLoop

本身。[事实上，它不能——或者至少不应该——是这样，否则

moveCorona

上的

setInterval

将不断被调用。]通过颠倒逻辑确定它们没有碰撞，然后颠倒逻辑，可以简化实际的碰撞检测。请看此视频：但基本上，如果您在至少一个基本方向上完全超出范围，则不会发生碰撞。