Игра "Что исчезло?". Почему исчезает только последнее число?
Здравствуйте, извините за го*но код пожалуйста, возникла проблема - делаю игру, где сначала рандомно появляются числа от 1 до 5, потом по прохождению пяти секунд одна исчезает. Я уже не знаю, что делать, обращаюсь к вам за помощью, почему исчезает только последнее число всегда? Можете помочь исправить это пожалуйста?
Вот код:
<div id="countdown">
<h1>Осталось <span class="display">5</span> секунд</h1>
</div>
<h3 id="what"></h3>
<table>
<tbody>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
</tbody>
</table>
<script>
const text = ['1','2','3', '4', '5'];
var i=1;
var used = [];
while (i!=6) {
tdid = document.getElementById(i);
var rtext = text[Math.floor(Math.random()*text.length)];
var ind = text.indexOf(rtext);
used.push(rtext);
text.splice(ind, 1);
tdid.textContent = rtext;
i++;
}
if (i==6){
var rndint= randomInteger(1,5);
var ind2 = used.indexOf(rndint);
used.splice(ind2,1);
(function(d){
var display = d.querySelector('#countdown .display')
var timeLeft = parseInt(display.innerHTML)
var timer = setInterval(function(){
if (--timeLeft >= 0) {
display.innerHTML = timeLeft
} else {
d.querySelector('#countdown h1').style.display = 'none'
var j=1;
while (j!=6){
tdid = document.getElementById(j);
tdid.textContent = ' ';
j++;
if (j==6){
document.getElementById("what").textContent="Что исчезло?";
}
var k = 1;
var f = 0;
while (k!=5){
tdid2 = document.getElementById(k);
tdid2.textContent = used[f];
f++;
k++;
}
}
clearInterval(timer)
}
}, 1000)
})(document)
}
function randomInteger(min, max) {
// получить случайное число от (min-0.5) до (max+0.5)
let rand = min - 0.5 + Math.random() * (max - min + 1);
return Math.round(rand);
}
</script>
|
s4meone,
<!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);
}
td{
background-color: hsla(0, 0%, 0%, 1);
color: hsla(0, 0%, 100%, 1);
transition: 1s;
height: 50px;
width: 50px;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div id="countdown">
<h1>Осталось <span class="display">5</span> секунд</h1>
</div>
<h3 id="what"></h3>
<table>
<tbody>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
</tbody>
</table>
<script>
const text = ['1','2','3', '4', '5'];
const tds = document.querySelectorAll('td');
tds.forEach(td => {
let i = Math.floor(Math.random()*text.length);
let rtext = text.splice(i, 1)[0];
td.textContent = rtext;
})
const display = document.querySelector('#countdown .display');
let timeLeft = parseInt(display.innerHTML);
let x;
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].textContent;
//tds[i].textContent = ' ';
tds[i].classList.add('hide');
document.getElementById("what").textContent="Что исчезло?";
clearInterval(timer);
}
}, 1000)
</script>
</body>
</html>
|
Спасибо! Я хотел еще второй ряд добавить, где будут цифры от 1 до 5 в каждой ячейка, а потом, чтобы по нажатию на них высвечивался alert, где если textContent этой ячейки равен x, то писалось "Верно" или что-то типа того. Но я чего-то не могу разобраться, почему их не видно то? Можете помочь пожалуйста?
|
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>
|
| Часовой пояс GMT +3, время: 05:13. |