Spalvų keitimo žaidimas JavaScript

Šiame skyriuje jūs, su mano pagalba, įgyvendinsite žaidimą. Žaidimas bus lentelė, kurios langeliai nuspalvinti atsitiktinėmis skirtingomis spalvomis.

Tegul yra tam tikras spalvų rinkinys, pavyzdžiui, raudona, žalia, mėlyna. Tegul kiekvienas paspaudimas ant langelio keičia jo spalvą ratu. Žaidimo tikslas - per mažiausią paspaudimų skaičių padaryti lentelę vienos - bet kurios - spalvos.

Pradėkime įgyvendinimą. Pirmiausia padarykime žaidimo lauką lentelės pavidalu <table>:

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

Pridėkime šiek tiek CSS kodo, kad atrodytų gražiau:

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

Dabar aptarkime, kaip priartėti prie mūsų žaidimo įgyvendinimo. Kaip matote, ši užduotis jau pakankamai didelė, kad ją būtų galima iš karto išspręsti. Taigi, ją reikėtų suskaidyti į keletą etapų - pašalines užduotis, kurias atlikdami palaipsniui išspręsime savo pagrindinę užduotį.

Pirmiausia logiškiausias etapas būtų parašyti scriptą, kuris sukuria lentelės langelius. Tegul, pavyzdžiui, žaidimo lauko dydis saugomas šiuose kintamuosiuose:

let rows = 3;
let cols = 3;

Nukopijuokite pateiktą HTML ir CSS kodą. Parašykite kodą, kuris sukurs nurodyto dydžio lentelę.