Игра с низкой цветовой коробкой непрозрачно ⇐ Html

[Anonymous]

Цветовая коробка с низкой непрозрачностью < /p>

Код: Выделить всё

const tableContainer = document.getElementById('table-container');
let size = 2;

function createTable(size) {
const table = document.createElement('table');
table.id = 'dynamicTable';
const backgroundColor = getRandomColor();
for (let i = 0; i < size; i++) {
const row = document.createElement('tr');
for (let j = 0; j < size; j++) {
const cell = document.createElement('td');
cell.style.backgroundColor = backgroundColor;
cell.addEventListener('click', () => handleCellClick(cell));
row.appendChild(cell);
}
table.appendChild(row);
}
return table;
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function randomlyReduceOpacity(table) {
const cells = table.querySelectorAll('td');
const randomIndex = Math.floor(Math.random() * cells.length);
const randomCell = cells[randomIndex];
randomCell.style.opacity = 0.5;
randomCell.classList.add('reduced-opacity');
}

function handleCellClick(cell) {
if (cell.classList.contains('reduced-opacity') && size < 10) {
size++;
tableContainer.innerHTML = '';
const newTable = createTable(size);
tableContainer.appendChild(newTable);
randomlyReduceOpacity(newTable);
}
}

const initialTable = createTable(size);
tableContainer.appendChild(initialTable);
randomlyReduceOpacity(initialTable);

Код: Выделить всё

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

table {
border-collapse: collapse;
}

td {
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
border: 1px solid #ddd;
cursor: pointer;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/793 ... r-box-game