I'm working on a navbar for my website. To develop it, I started a new HTML file so I could play around with the code without changing my main index.html file. On its own HTML file, all of the links and hover events are working. However, when I brought the header code into my working index.html file, the links do not work, and the :hover css events no longer work. I narrowed down the problem to the inclusion of a Javascript file. This javascript file controls the elements of a snake game, and includes a requestAnimationFrame game-loop that runs recursively.

How can I stop this JS file from blocking these other events?

Here is the game-loop...

function main(currentTime) {

    if (gameOver) {
        if (confirm("You lost. Press ok to restart.")) {
            window.location ="/"
        }
        return
    }

    window.requestAnimationFrame(main)
    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000;
    if (secondsSinceLastRender < 1 / SNAKE_SPEED) return
    
    // console.log("Render")
    lastRenderTime = currentTime
    
    update()
    draw()
}

window.requestAnimationFrame(main)