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:

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

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

css#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:

javascriptlet rows = 3;
let cols = 3;