JavaScriptда ранг алмаштириш ўйини

Ушбу бўлимда сиз менинг ёрдамимда бир ўйинни амалга оширасиз. Ўйин турли хил тасодифий рангларга бўялган ҳужайралардан иборат жадвал бўлади.

Маълум бир ранглар мажмуи бор деб фараз қилайлик, масалан, қизил, яшил, кўк. Ҳар бир ҳужайрага босилганда унинг рангги айлана бўйича ўзгарсин. Ўйиннинг мақсади - энг кам босish сони билан жадвалнинг барча ҳужайраларини бир хил - istalgan - рангга киритиш.

Келгинг, амалга оширишни бошлаймиз. Аввало ўйин майдонини <table> жадвал шаклида ясаймиз:

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

Бир оз CSS кодини қўшайлик, гўзалликни оширувчи:

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

Энди бизнинг ўйинимизни қандай амалга оширишни муҳокама қилайлик. Сиз кўриб тургангиздек, бу вазифа айни дақиқада ечиш учун жуда катта. Шу сабабдан уни бир неча босқичларга - кичик вазифаларга ажратиш керак, уларни бажариш орқали бир-кетин асосий вазифанимизни ечамиз.

Бошлаш учун энг мантиқий босқич - жадвал ҳужайраларини яратувчи скриптни ёзиш бўлади. Масалан, фараз қилайлик, ўйин майдонининг ҳажми куйидаги ўзгарувчиларда сақлансин:

let rows = 3;
let cols = 3;

Келтирилган HTML ва CSS кодларин ўзингизга нусхаланг. Берилган ҳажмдаги жадвални яратувчи кодни ёзинг.