<a> links and :hover events not working when I include a certain JavaScript file

Question

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)

Answer 1

I figured out the problem. A separate JS file I have generates a grid that is around 99vh height and 99vw width. The grid is used for the snake element. Because of the Z-index, the on-hover events were being blocked by this giant invisible element. I set the header z-index to 900, just in case;), and now every thing is working nicely