JavaScript-də Rəng Dəyişmə Oyunu

Bu bölmədə siz mənim köməyimlə bir oyun reallaşdıracaksınız. Oyun, xanaları müxtəlif təsadüfi rənglərə boyanmış bir cədvəl şəklində olacaq.

Tutaq ki, müəyyən bir rəng dəsti var, məsələn, qırmızı, yaşıl, mavi. Hər bir xanaya klik onun rəngini dairəvi şəkildə dəyişsin. Oyunun məqsədi - ən az klik sayı ilə cədvəlin hamısını eyni - hər hansı bir - rəng etməkdir.

Gəlin reallaşdırmaya başlayaq. Əvvəlcə oyun meydanını <table> cədvəli şəklində edək:

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

Gəlin bir qədər CSS kodu əlavə edək, gözəllik yaradan:

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

İndi gəlin oyunumuzun reallaşdırılmasına yanaşmanı müzakirə edək. Gördüyünüz kimi, bu tapşırıq artıq kifayət qədər böyükdür ki, dərhal həll edilə bilsin. Ona görə də onu bəzi mərhələlərə - alt tapşırıqlara bölmək lazımdır, hansılarını yerinə yetirərək tədricən əsas tapşırığımızı həll edəcəyik.

Əvvəlcə ən məntiqli mərhələ, cədvəlin xanalarını yaradan skripti yazmaq olardı. Tutaq ki, məsələn, oyun meydanının ölçüsü aşağıdakı dəyişənlərdə saxlanılır:

let rows = 3;
let cols = 3;

Verilmiş HTML və CSS kodlarını özünüzə köçürün. Müəyyən edilmiş ölçüdə cədvəl yaradan kodu yazın.