Może zrób to w formie tablicy.
Przykład
<div class="field"></div>
<button>Losuj kolor</button>
* {
margin: 0.2em;
}
.field {
width: 5em;
height: 5em;
text-align: center;
line-height: 5em;
transition: background-color 1s;
color: white;
}
const field_color = [
{ 'color':'gray', 'field': [ 5,15,25,35 ] },
{ 'color':'hsl(19, 47%, 40%)', 'field': [ 1,3,21 ] },
{ 'color':'hsl(200, 89%, 82%)', 'field': [ 6,8,9 ] },
{ 'color':'hsl(325, 68%, 54%)', 'field': [ 11,13,14 ] },
{ 'color':'hsl(357, 85%, 52%)', 'field': [ 2,4,7 ] },
{ 'color':'hsl(57, 100%, 50%)', 'field': [ 10,12,16,17 ] },
{ 'color':'hsl(144, 70%, 41%)', 'field': [ 18,19,20,22 ] },
{ 'color':'hsl(203, 100%, 37%)', 'field': [ 23,30,31,34 ] },
{ 'color':'black', 'field': [ 24,26,27,28,29,32 ] }
];
const MAX_FIELD_NUMBER = 35;
const div_field = document.querySelector('.field'),
button = document.querySelector('button');
button.addEventListener('click', setFieldColor);
setFieldColor();
function setFieldColor() {
const field = parseInt(Math.random() * (MAX_FIELD_NUMBER - 1) + 1);
div_field.textContent = field;
for (const row of field_color) {
if (row.field.includes(field)) {
div_field.style.backgroundColor = row.color;
break;
}
}
}