Estoy trabajando en un juego de carreras usando HTML, CSS y JavaScript. La progresión de la carrera estará determinada por un botón generador de números aleatorios en el que se hará clic para simular a los corredores. Aquí una imagen de la página: y aquí está el archivo app.js en progreso.

 let racers = [ { id: "racer1", count: 0 }, { id: "racer2", count: 0 }, { id: "racer3", count: 0 }, { id: "racer4", count: 0 }, { id: "racer5", count: 0 }, { id: "racer6", count: 0 }, { id: "racer7", count: 0 }, ]; // random number button function randNum() { const randomNumber = Math.floor(Math.random() * 7 + 1); document.getElementById("number").innerHTML = randomNumber; racers[randomNumber - 1].count++; // new test code // ONLY TO TEST IMAGE DISPLAY AND HIDE let car1 = document.getElementById("p1First"); if (car1.style.display === "none") { car1.style.display = "none"; } else { car1.style.display = "block"; } } console.log(racers);

En la consola, al hacer clic en el botón de número aleatorio, la propiedad de conteo se actualizará cuando tenga un resultado de un número determinado. Por ejemplo, si se hace clic en el botón del generador de números aleatorios y tiene un resultado de "4", racer4 ahora tendrá un conteo de "1". Esta lógica será consistente a lo largo de toda la carrera, ya que el usuario continúa haciendo clic en el botón hasta que un corredor gana, lo que significa que llegó a un conteo de "10" (al mostrar el número de ese jugador como resultado del generador un total de diez veces) .

Mi objetivo es mostrar las imágenes de cada corredor en el lugar correspondiente para mostrar el progreso que han hecho en la carrera. Entonces, si racer1 tiene un "conteo" de 4, muestre la cuarta imagen de racer1 (el auto) y oculte el resto de las imágenes de autos. Si racer2 tiene una cuenta de 6, muestra la sexta imagen de racer2 (el bote) y oculta el resto de las imágenes del bote. Quiero que solo muestre una imagen de cada corredor a la vez, para ilustrar su progreso. Esto continuará hasta que un corredor alcance un conteo de "10", y se mostrará la décima imagen, que se encuentra en la línea de meta del cuadro de cuadros.

No estoy seguro de por dónde empezar, solo sé que necesito implementar una lógica que permita que la propiedad de conteo "hable con" los elementos de la imagen. Tengo un extracto de código en mi app.js que muestra y oculta una de las imágenes cuando se hace clic en el botón, pero eso es solo una prueba para ver si era posible. Es probable que este extracto de código deba modificarse, moverse e incluso reemplazarse completamente por alguna otra sintaxis.