Kleurveranderingsspeletjie in JavaScript

In hierdie afdeling sal jy met my hulp 'n speletjie implementeer. Die speletjie sal 'n tabel wees waarvan die selle in verskillende lukrake kleure gekleur is.

Laat daar 'n sekere stel kleure wees, byvoorbeeld, rooi, groen, blou. Laat elke klik op 'n sel sy kleur in 'n sirkel verander. Die doel van die speletjie is om die tabel in die minste aantal klieke een - enige - kleur te maak.

Kom ons begin met die implementering. Om te begin maak ons die speelveld in die vorm van 'n tabel <table>:

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

Laat ons 'n bietjie CSS-kode byvoeg om dit mooi te maak:

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

Laat ons nou bespreek hoe om ons speletjie te implementeer. Soos jy kan sien, is hierdie taak reeds groot genoeg om dit sommer dadelik op te los. Dus moet dit opgedeel word in sekere fases - subtake, deur dit uit te voer sal ons geleidelik ons hoofprobleem oplos.

Om te begin, sal die mees logiese fase wees om 'n skrif te skryf wat die tabelle selle skep. Laat, byvoorbeeld, die grootte van die speelveld in die volgende veranderlikes gestoor word:

let rows = 3;
let cols = 3;

Kopieer die aangehaalde HTML- en CSS-kodes vir jouself. Skryf kode wat 'n tabel van die gespesifiseerde grootte sal skep.