s4meone,
кликнуть по нижнему ряду, через 5 сек., если число совпадает, оно "восстановится".
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td.hide{
color:hsla(0, 0%, 100%, 1);
background-color: hsla(0, 0%, 100%, 1);
transition: 0s;
}
td{
background-color: hsla(0, 0%, 0%, 1);
color: hsla(0, 0%, 100%, 1);
height: 50px;
width: 50px;
font-size: 2em;
text-align: center;
transition: 1s;
}
tr:last-child td{
background-color: hsla(240, 100%, 40%, 1);
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="countdown">
<h1>Осталось <span class="display">5</span> секунд</h1>
</div>
<h3 id="what"></h3>
<script>
let x;
const text = ['1','2','3', '4', '5'];
const tr = document.querySelector('tr');
let tds = tr.querySelectorAll('td');
tds.forEach((td, i) => {
let rtext = text[i];
td.textContent = rtext;
})
const cloneTr = tr.cloneNode(true);
tds = [...tds].sort(_=> Math.random() - .5);
tr.append(...tds);
cloneTr.addEventListener('click', ({target : {textContent}}) => textContent == x.textContent && x.classList.remove('hide'));
tr.parentNode.append(cloneTr);
const display = document.querySelector('#countdown .display');
let timeLeft = parseInt(display.innerHTML);
let timer = setInterval(function(){
if (--timeLeft >= 0) {
display.innerHTML = timeLeft;
} else {
document.querySelector('#countdown h1').style.display = 'none';
let i = Math.floor(Math.random()*tds.length);
x = tds[i];
x.classList.add('hide');
document.getElementById("what").textContent="Что исчезло?";
clearInterval(timer);
}
}, 1000)
</script>
</body>
</html>