JavaScriptda Ranglarni O'zgartirish O'yini

Ushbu bo'limda siz mening yordamimda o'yinni amalga oshirasiz. O'yin turli xil tasodifiy ranglarga bo'yalgan kataklardan iborat jadval ko'rinishida bo'ladi.

Faraz qilaylik, ma'lum bir ranglar to'plami mavjud, masalan, qizil, yashil, ko'k. Har bir katakka bosilganda uning rangi aylana bo'yicha o'zgarishi kerak. O'yin maqsadi - eng kam bosish sonida jadvalni bir xil - har qanday - rangga keltirish.

Keling, amaliyotga o'tamiz. Boshlash uchun o'yin maydonini <table> jadval ko'rinishida yaratamiz:

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

Bir oz go'zallik qo'shadigan CSS kodini qo'shamiz:

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

Keling, endi o'yinimizni qanday amalga oshirishni muhokama qilaylik. Ko'rib turganingizdek, bu vazifa buni darhol hal qilish uchun etarlicha katta. Shuning uchun uni bir qator bosqichlarga - kichik vazifalarga bo'lish kerak, ularni bajarish orqali biz asta-sekin asosiy vazifamizni hal qilamiz.

Boshlash uchun eng mantiqiy bosqich jadval kataklarini yaratadigan skript yozish bo'ladi. Faraz qilaylik, misol uchun, o'yin maydonining o'lchami quyidagi o'zgaruvchilarda saqlansin:

let rows = 3;
let cols = 3;

Keltirilgan HTML va CSS kodlarini o'zingizga nusxalang. Berilgan o'lchamdagi jadvalni yaratadigan kodni yozing.