Jeu de changement de couleurs en JavaScript

Dans cette section, vous allez implémenter avec mon aide un jeu. Le jeu consistera en un tableau, dont les cellules sont colorées avec différentes couleurs aléatoires.

Supposons qu'il y ait un certain ensemble de couleurs, par exemple, rouge, vert, bleu. Supposons que chaque clic sur une cellule change sa couleur en suivant un cycle. Le but du jeu est de rendre le tableau d'une seule - n'importe laquelle - couleur en le moins de clics possible.

Commençons par l'implémentation. Pour commencer, créons le terrain de jeu sous forme de tableau <table> :

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

Ajoutons un peu de code CSS pour embellir le tout :

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

Discutons maintenant de la manière d'aborder l'implémentation de notre jeu. Comme vous pouvez le voir, cette tâche est déjà assez importante pour être résolue d'emblée. Il convient donc de la décomposer en plusieurs étapes - sous-tâches, en les accomplissant nous résoudrons progressivement notre tâche principale.

Pour commencer, l'étape la plus logique sera d'écrire un script créant les cellules du tableau. Imaginons, par exemple, que la taille du terrain de jeu soit stockée dans les variables suivantes :

let rows = 3;
let cols = 3;

Copiez les codes HTML et CSS fournis. Écrivez un code qui créera un tableau de la taille spécifiée.