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

[Anonymous]

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

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

Dynamic Table



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>




< /code>

Java script:
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;

функция getRandomColor() {

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

const letters = '0123456789ABCDEF';

let color = '#';

for (let i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

}

return color;

функция 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');
< /code>
} < /p>
function handlecellclick (cell) {< /p>
if (cell.classList.contains('reduced-opacity') && size < 10) {

size++;

tableContainer.innerHTML = '';

const newTable = createTable(size);

tableContainer.appendChild(newTable);

randomlyReduceOpacity(newTable);

}
< /code>
} < /p>
const initialtable = createletable (size); < /p>
tablecontainer.appendchild (initialtable); /p>
randlyReduceopacity (pirtinaltable); < /p>

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