getting my game to stop after win/lose conditions are met

[paulinal3]

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

Have the game end when the player wins or loses by not allowing the player to move and having the trash stop falling

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

unction gameOver() {
    if (scars >= 3) {
        cancelAnimationFrame(animate)
        document.removeEventListener('keydown,', movePlayer)
        hungerMeter.innerText = 'Game Over! Manny was hit too many times and died :('
    }

}

function playerWins() {
    if (scars < 3 && foodArr === []) {
        hungerMeter.innerText = `Winner Winner, you helped Manny eat all his dinner! He lives another day!`
        cancelAnimationFrame(animate)
        document.removeEventListener('keydown', movePlayer)
    }
}

function animate() {
    // clears canvas
    ctx. clearRect(0, 0, canvas.width, canvas.height)
    createTrash()
    fallingTrash()
    player.render()
    requestAnimationFrame(animate)
    if (removeFoodEaten() === true) {
        playerWins()
    }
    // moves player back to start when hit by trash
    if (detectTrashHit() === true) {
        trashHitSound.play()
        player.x = 25
        player.y = 25
        // tallying up each scar hit
        scarTally.innerText = `Scar Hits: ${scarHit()}`
        gameOver()
    }
}

animate()

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

No error. The text will change to say win or lose like I want it to, but the trash keeps falling and the player can still move around

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

Maybe where the cancelAnimationFrame(animate) should be called?

What things have you already tried to solve the problem?

Moving around the gameOver and playerWins functions and changing the if statements

[DoireannJane]

Decided on using clearInterval() instead