Para permitir que el usuario cambie el color de los círculos, podemos utilizar un array de colores y un contador que se incrementará cada vez que el usuario haga clic en el botón derecho del mouse. Cada vez que se incrementa el contador, se cambia el color actual al siguiente en el array de colores. Si el contador llega al final del array, se reinicia a cero para volver al primer color.
Aquí está el código que implementa esta funcionalidad:
En este código, hemos creado un array de colores colores con los tres colores disponibles: blue, red y green. También hemos creado una variable colorActual que se utiliza como un contador para mantener el color actual de los círculos.
Dentro de la función dibujarCirculo, hemos cambiado la línea que define el color de los círculos para que utilice el color actual, utilizando colores[colorActual] en lugar de "blue".
Dentro de la función alterarColor, hemos añadido la línea evento.preventDefault() para evitar que aparezca el menú contextual del botón derecho del mouse. Después, incrementamos el contador colorActual, y si hemos llegado al final del array de colores, lo reiniciamos a cero para volver al primer color. Finalmente, devolvemos false para evitar que se ejecute la acción por defecto del botón derecho del mouse.
Con estas modificaciones, el usuario puede cambiar el color de los círculos haciendo clic con el botón derecho del mouse. Cada clic cambiará el color al siguiente en el array, y si se llega al final del array, volverá al primer color.
