Jogo de Mudança de Cores em JavaScript

Nesta seção, você irá implementar com minha ajuda um jogo. O jogo será uma tabela, cujas células são coloridas com cores aleatórias diferentes.

Suponha que haja um conjunto específico de cores, por exemplo, vermelho, verde, azul. Cada clique em uma célula deve mudar sua cor em um ciclo. O objetivo do jogo é fazer com que a tabela fique de uma única - qualquer - cor com o menor número de cliques.

Vamos começar a implementação. Primeiro, vamos fazer o campo de jogo como uma tabela <table>:

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

Vamos adicionar um código CSS para embelezar:

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

Agora, vamos discutir como abordar a implementação do nosso jogo. Como você pode ver, esta tarefa já é suficientemente grande para ser resolvida de imediato. Portanto, ela deve ser dividida em algumas etapas - subtarefas, realizando-as, gradualmente resolveremos nossa tarefa principal.

Para começar, a etapa mais lógica será escrever um script que cria as células da tabela. Suponha, por exemplo, que o tamanho do campo de jogo esteja armazenado nas seguintes variáveis:

let rows = 3;
let cols = 3;

Copie os códigos HTML e CSS fornecidos. Escreva um código que criará uma tabela do tamanho especificado.