Estoy trabajando en una barra de navegación para mi sitio web. Para desarrollarlo, comencé un nuevo archivo HTML para poder jugar con el código sin cambiar mi archivo index.html principal. En su propio archivo HTML, todos los enlaces y eventos de desplazamiento están funcionando. Sin embargo, cuando traje el código del encabezado a mi archivo index.html de trabajo, los enlaces no funcionan y los eventos :hover css ya no funcionan. Reduje el problema a la inclusión de un archivo Javascript. Este archivo javascript controla los elementos de un juego de serpientes e incluye un bucle de juego requestAnimationFrame que se ejecuta de forma recursiva.
¿Cómo puedo evitar que este archivo JS bloquee estos otros eventos?
Aquí está el bucle del juego...
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)Resolví el problema. Un archivo JS separado que tengo genera una cuadrícula de alrededor de 99vh de alto y 99vw de ancho. La cuadrícula se utiliza para el elemento serpiente. Debido al índice Z, los eventos flotantes estaban siendo bloqueados por este elemento invisible gigante. Establecí el índice z del encabezado en 900, por si acaso;), y ahora todo funciona bien