为什么我的碰撞检测/更新分数在我的游戏中不起作用？

Question

所以我正在为一个小项目制作一个简单的 2d 无尽跑酷游戏，例如 chrome 恐龙游戏。这是非常基本的，我希望每次玩家成功跳过障碍时它都会将分数更新一。

当我尝试实现碰撞检测时，如果玩家错过了障碍物，则应该检测到障碍物，然后结束游戏（我尚未完成）或更新分数。这是代码。

const player = document.getElementById('player');
const obstacle = document.getElementById('obstacle');
const scoreValue = document.getElementById('score-value');
let score = 0

function updateScore() {
    score++;
    scoreValue.innerText = score;
}

function moveObstacle() {
    const speed = 5
    let obstaclePosition = parseInt(window.getComputedStyle(obstacle).getPropertyValue('right'));

    if (obstaclePosition < window.innerWidth) { 
        obstacle.style.right = `${obstaclePosition + speed}px`
    } else {
        obstacle.style.right = '0';
    }

    detectCollision();
}

function jump() {
    if (!player.classList.contains('jump')) {
        player.classList.add('jump');

        setTimeout(() => {
             player.classList.remove('jump') 
        }, 500);
    }
}

function detectCollision() {
    let playerRect = player.getBoundingClientRect();
    let obstacleRect = obstacle.getBoundingClientRect();

    if (playerRect.left < obstacleRect.right &&
        playerRect.right > obstacleRect.left &&
        playerRect.top < obstacleRect.bottom &&
        playerRect.bottom > obstacleRect.top) {
        // Collision detected, update the score
        updateScore();
    }
}

document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        jump();
    }
});

setInterval(moveObstacle, 20);

Answer 1

这对我来说听起来不对：

playerRect.top < obstacleRect.bottom &&
playerRect.bottom > obstacleRect.top

我将其解释为“玩家顶部位于障碍物底部下方，玩家底部位于障碍物顶部上方”

想必您想要：

playerRect.top < obstacleRect.top &&
playerRect.bottom > obstacleRect.bottom

然而，这个逻辑似乎是在检查playerRect是否完全在障碍物矩形内/内，而不是仅仅与它碰撞。