Παιχνίδι αλλαγής χρωμάτων σε JavaScript

Σε αυτή την ενότητα θα υλοποιήσετε με τη βοήθειά μου ένα παιχνίδι. Το παιχνίδι θα είναι ένας πίνακας, τα κελιά του οποίου είναι χρωματισμένα με διαφορετικά τυχαία χρώματα.

Ας υποθέσουμε ότι υπάρχει ένα συγκεκριμένο σύνολο χρωμάτων, για παράδειγμα, κόκκινο, πράσινο, μπλε. Κάθε κλικ σε ένα κελί αλλάζει το χρώμα του κυκλικά. Ο στόχος του παιχνιδιού - με τον ελάχιστο αριθμό κλικ να κάνετε τον πίνακα ενός - οποιουδήποτε - χρώματος.

Ας αρχίσουμε την υλοποίηση. Αρχικά ας φτιάξουμε το πεδίο του παιχνιδιού ως πίνακας <table>:

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

Ας προσθέσουμε κάποιο CSS κώδικα, για να το κάνουμε πιο όμορφο:

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

Ας συζητήσουμε τώρα, πώς να προσεγγίσουμε την υλοποίηση του παιχνιδιού μας. Όπως βλέπετε, αυτή η εργασία είναι ήδη αρκετά μεγάλη για να λυθεί αμέσως. Επομένως, θα πρέπει να χωριστεί σε ορισμένα στάδια - υπο-εργασίες, εκτελώντας τις οποίες σταδιακά θα λύσουμε το κύριο πρόβλημά μας.

Αρχικά, το πιο λογικό βήμα θα ήταν να γράψουμε ένα σκριπτ που δημιουργεί τα κελιά του πίνακα. Ας υποθέσουμε, για παράδειγμα, ότι το μέγεθος του πεδίου του παιχνιδιού αποθηκεύεται στις ακόλουθες μεταβλητές:

let rows = 3;
let cols = 3;

Αντιγράψτε τους παρεχόμενους κώδικες HTML και CSS. Γράψτε κώδικα που θα δημιουργήσει έναν πίνακα του καθορισμένου μεγέθους.