Intenté repetidamente usar un detector de mousedown para este juego de memoria, pero no funcionó.
Además, siento que hay una manera de hacer el juego con mi diseño del juego en sí.
async function eachRounds() { for (let i = 0; i < rounds; i++) { for (let j = 0; j <= i; j++) { let currentStatus = document.getElementById("status"); currentStatus.innerHTML = "Round " + (counter + 1) + " out of " + rounds; let random = Math.floor(Math.random() * array.length); await flash(array[random]); await revert(); let prompted = await colorClicked(); if (prompted == array[random]) { currentStatus.innerHTML = "On to the next round!"; if (j == rounds && sequence[rounds - 1] == colorClicked()) { currentStatus.innerHTML = "Congratulations! You win!"; gameOn = false; } } else { currentStatus.innerHTML = "Sorry! You lose!"; gameOn = false; } } } }Ese es el diseño del juego en sí. gameOn es una variable booleana global que se establece en verdadero cuando el juego comienza en otro método.
matriz es la lista de colores y secuencia es la lista de colores ordenados que los usuarios deben replicar haciendo clic.
El detector de eventos para hacer que los paneles de colores actúen como "botones" se enumera a continuación.
async function colorClicked() { red.addEventListener("mousedown", async function () { await flash(red); await revert(); return red; }); blue.addEventListener("mousedown", async function () { await flash(blue); await revert(); return blue; }); green.addEventListener("mousedown", async function () { await flash(green); await revert(); return green; }); yellow.addEventListener("mousedown", async function () { await flash(yellow); await revert(); return yellow; }); }