Värvide muutmise mäng JavaScriptis

Selles jaotises realiseerite minu abiga mängu. Mäng on tabel, mille lahtrid on värvitud erinevatesse juhuslikesse värvidesse.

Olgemel teatud hulk värve, näiteks punane, roheline, sinine. Iga klõps lahtril muudab selle värvi ringis. Mängu eesmärk - teha tabel ühe - mis tahes - värvi võimalikult väheste klõpsudega.

Asugem realiseerimise kallale. Alustuseks teeme mänguvälja tabelina <table>:

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

Lisame natuke CSS koodi, et muuta see ilusamaks:

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

Arutleme nüüd, kuidas läheneda meie mängu realiseerimisele. Nagu näete, on see ülesanne juba piisavalt suur, et seda otse lahendada. Seetõttu tuleks see jagada mitmeks etapiks - alamülesanneteks, mille täitmisel me järk-järgult lahendame oma põhiülesande.

Alustuseks on kõige loogilisem etapp kirjutada skript, mis loob tabeli lahtrid. Olgu näiteks mänguvälja suurus salvestatud järgmistesse muutujatesse:

let rows = 3;
let cols = 3;

Kopeerige endale toodud HTML ja CSS koodid. Kirjutage kood, mis loob tabeli antud suurusega.