detecting collision

[paulinal3]

What's the problem you're trying to solve?

Detecting collision for when it eats food and when it gets hit by trash

Post any code you think might be relevant (one fenced block per file)

const detectFoodEaten = () => {
    for (let i = 0; i < foodArr.length; i++) {
        if (
            player.x < foodArr[i].x + foodArr[i].width &&
            player.x + player.width > foodArr[i].x &&
            player.y < foodArr[i].y + foodArr[i].height &&
            player.y + player.height > foodArr[i].y
        ) {
            // eat the food
            foodArr[i].alive = false
        }
    }
}

function animate() {
    // clears canvas
    ctx. clearRect(0, 0, canvas.width, canvas.height)
    createTrash()
    fallingTrash()
    if (player.alive) {
        createFood()
        detectFoodEaten()
    }
    player.render()
    requestAnimationFrame(animate)
}

animate()

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error, food still on screen when the player tries to eat it.

What is your best guess as to the source of the problem?

The logic in my collision detection function or where the collision detection is in my animate function

What things have you already tried to solve the problem?

Changing around where the code is in my animate function and trying different conditions with my loop

[DoireannJane]

Splice syntax error!