Színváltó játék JavaScripten

Ebben a részben az én segítségemmel fogtok megvalósítani egy játékot. A játék egy táblázatból fog állni, amelynek celláit különböző véletlenszerű színekre színezzük.

Legyen egy meghatározott színkészlet, például piros, zöld, kék. Minden kattintás egy cellára változtassa a színét körkörösen. A játék célja - a lehető legkevesebb kattintással elérni, hogy a teljes táblázat egy - tetszőleges - színű legyen.

Kezdjük el a megvalósítást. Először készítsük el a játékteret egy <table> táblázat formájában:

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

Adjunk hozzá néhány CSS kódot, amely széppé teszi:

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

Tárgyaljuk most meg, hogyan közelítsük meg a játékunk megvalósítását. Amint látható, ez a feladat már elég nagy ahhoz, hogy egyből megoldjuk azt. Ezért célszerű részfázisokra - részfeladatokra bontani, amelyek végrehajtásával fokozatosan megoldjuk a fő feladatunkat.

Kezdetben a leglogikusabb lépés az lenne, ha írnánk egy szkriptet, amely létrehozza a táblázat celláit. Legyen például a játéktér mérete a következő változókban tárolva:

let rows = 3;
let cols = 3;

Másolja le a megadott HTML és CSS kódokat. Írjon kódot, amely létrehoz egy táblázatot a megadott mérettel.