Estoy haciendo un juego de memoria para la escuela. Mi problema en este momento es que puede hacer clic en spam en todo y todo se mostrará.

siempre que tenga el par incorrecto, las tarjetas hacen que la clase sea "roja" y se vuelven rojas en el código css. Pero aún puede hacer clic en las otras tarjetas y algunas vuelven a la normalidad después de 600 ms, algunas simplemente se quedan y no regresan.

¿Es posible usar una condición if/else para css? Si hay tarjetas "rojas", el evento puntero para las tarjetas normales es ninguno. Puedes jugar el juego aquí y probar el problema tú mismo: https://memory-20.815374.repl.co

Arreglarlo sin If/else también está bien. Usar if/else es solo lo primero que me viene a la cabeza.

aquí está el código para CSS:

 .card.clicked { background-color: orange; pointer-events: none; } .card.checked { background-color: lightgreen; visibility: hidden; transition: visibility 0s linear 300ms, opacity 300ms; } .card.clicked img, .card.checked img { opacity: 1; } .card.red { background-color: #f15f5f; } .card { height: 120px; width: 100px; background-color: #ff5cbb; border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: 0.3s all ease; }

Aquí está el código JavaScript:

 } else { const incorrectCards = document.querySelectorAll(".card.clicked"); incorrectCards[0].classList.add("red"); incorrectCards[1].classList.add("red"); setTimeout(() => { incorrectCards[0].classList.remove("red"); incorrectCards[0].classList.remove("clicked"); incorrectCards[1].classList.remove("red"); incorrectCards[1].classList.remove("clicked"); }, 600);