Värien vaihtopeli JavaScriptillä

Tässä osassa toteutat minun avullani pelin. Peli koostuu taulukosta, joiden solut on väritetty satunnaisiin eri väreihin.

Olkoon tietty joukko värejä, esimerkiksi punainen, vihreä, sininen. Jokainen napsautus solussa vaihtaa sen väriä kiertäen. Pelin tavoite - tehdä taulukosta yhden - minkä tahansa - värinen mahdollisimman vähillä napsautuksilla.

Aloitetaan toteutus. Aluksi tehdään pelikenttä taulukon <table> muodossa:

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

Lisätään hieman CSS-koodia, joka tekee siitä kauniimman:

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

Keskustellaan nyt lähestymistavasta pelimme toteutukseen. Kuten näette, tämä tehtävä on jo tarpeeksi suuri, jotta se voitaisiin ratkaista heti. Siksi se tulisi jakaa joihinkin vaiheisiin - alitehtäviin, joita suorittamalla pääsemme vähitellen ratkaisemaan päätehtävämme.

Aluksi loogisin vaihe olisi kirjoittaa skripti, joka luo taulukon solut. Olkoon, esimerkiksi, pelikentän koko tallennettuna seuraaviin muuttujiin:

let rows = 3;
let cols = 3;

Kopioi annetut HTML- ja CSS-koodit. Kirjoita koodi, joka luo taulukon annetun koon mukaisesti.