Бозии тағйири ранҷҳо дар JavaScript

Дар ин бахш шумо бо ёрии ман бозиро татбиқ мекунед. Бози ҷадвалиро ташкил медиҳад, ки ҳуҷайраҳои он бо ранҷҳои гуногун тасодуфӣ рангшуда мебошанд.

Бигзор маҷмӯи муайяни ранҷҳо мавҷуд бошад, барои намуна, сурх, сабз, кабуд. Бигзор ҳар клик ба ҳуҷайра ранги онро тавассути давр тағйир диҳад. Мақсади бозӣ - ба ҳадди ақал миқдори кликҳо ҷадвалро якранг - ҳар кадоме ки бошад - сохтан.

Биёед ба татбиқ шурӯъ кунем. Барои ибтидо майдони бозиро ба сурати ҷадвал <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 додашударо ба худ нусхабардорӣ кунед. Рамзеро нависед, ки ҷадвали андозаи додашударо месозад.