Juego de cambio de colores en JavaScript

En esta sección, con mi ayuda, implementarás un juego. El juego será una tabla cuyas celdas están coloreadas con diferentes colores aleatorios.

Supongamos que hay un conjunto específico de colores, por ejemplo, rojo, verde, azul. Que cada clic en una celda cambie su color en un ciclo. El objetivo del juego - hacer que la tabla sea de un solo color - cualquiera - en la menor cantidad de clics posible.

Empecemos con la implementación. Para comenzar hagamos el campo de juego en forma de tabla <table>:

<table id="field"></table>

Añadamos algún código CSS, para embellecerlo:

#field td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
}

Discutamos ahora cómo abordar la implementación de nuestro juego. Como puedes ver, esta tarea ya es lo suficientemente grande como para resolverla de inmediato. Por lo tanto, debe dividirse en algunas etapas - subtareas, completando las cuales gradualmente resolveremos nuestra tarea principal.

Para empezar, la etapa más lógica será escribir un script que cree las celdas de la tabla. Supongamos, por ejemplo, que el tamaño del campo de juego se almacena en las siguientes variables:

let rows = 3;
let cols = 3;

Copia los códigos HTML y CSS proporcionados. Escribe el código que creará una tabla del tamaño especificado.