Färgbytes spel i JavaScript

I detta avsnitt kommer du med min hjälp att implementera ett spel. Spelet kommer att bestå av ett rutnät, vars celler är färgade i olika slumpmässiga färger.

Låt det finnas en viss uppsättning färger, till exempel, röd, grön, blå. Låt varje klick på en cell ändra dess färg i en cykel. Spelets mål är att med så få klick som möjligt göra rutnätet i en - vilken som helst - färg.

Låt oss börja implementera. Till att börja med gör vi ett spelplan i form av ett rutnät <table>:

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

Låt oss lägga till lite CSS-kod som förbättrar utseendet:

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

Låt oss nu diskutera hur vi ska närma oss implementationen av vårt spel. Som du ser är denna uppgift redan tillräckligt stor för att lösas på en gång. Därför bör den delas upp i några etapper - deluppgifter, genom att utföra dessa kommer vi gradvis att lösa vår huvudsakliga uppgift.

Till att börja med vore den mest logiska etappen att skriva ett skript som skapar tabellceller. Låt oss, till exempel, lagra storleken på spelplanen i följande variabler:

let rows = 3;
let cols = 3;

Kopiera den medföljande HTML- och CSS-koden till dig. Skriv kod som skapar ett rutnät av given storlek.