Farbwechsel-Spiel in JavaScript

In diesem Abschnitt werden Sie mit meiner Hilfe ein Spiel implementieren. Das Spiel wird eine Tabelle sein, deren Zellen in verschiedene zufällige Farben eingefärbt sind.

Nehmen wir einen bestimmten Satz von Farben, zum Beispiel rot, grün, blau. Jeder Klick auf eine Zelle soll ihre Farbe im Kreis wechseln. Das Ziel des Spiels ist es, die Tabelle mit der geringsten Anzahl an Klicks in einer einzigen - beliebigen - Farbe zu gestalten.

Beginnen wir mit der Implementierung. Zuerst erstellen wir das Spielfeld als Tabelle <table>:

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

Fügen wir etwas CSS-Code hinzu, der für Schönheit sorgt:

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

Besprechen wir nun, wie wir die Implementierung unseres Spiels angehen. Wie Sie sehen, ist diese Aufgabe bereits groß genug, um sie sofort zu lösen. Daher sollte sie in einige Phasen unterteilt werden - Teilaufgaben, durch deren Ausführung wir nach und nach unsere Hauptaufgabe lösen.

Zunächst wäre die logischste Phase, ein Skript zu schreiben, das die Tabellenzellen erstellt. Nehmen wir an, dass die Größe des Spielfelds in den folgenden Variablen gespeichert ist:

let rows = 3;
let cols = 3;

Kopieren Sie sich die angegebenen HTML- und CSS-Codes. Schreiben Sie Code, der eine Tabelle der angegebenen Größe erstellt.