Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2020, 10:31
Интересующийся
Отправить личное сообщение для s4meone Посмотреть профиль Найти все сообщения от s4meone
 
Регистрация: 07.06.2020
Сообщений: 15

Игра "Что исчезло?". Почему исчезает только последнее число?
Здравствуйте, извините за го*но код пожалуйста, возникла проблема - делаю игру, где сначала рандомно появляются числа от 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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2020, 11:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.06.2020, 12:13
Интересующийся
Отправить личное сообщение для s4meone Посмотреть профиль Найти все сообщения от s4meone
 
Регистрация: 07.06.2020
Сообщений: 15

Спасибо! Я хотел еще второй ряд добавить, где будут цифры от 1 до 5 в каждой ячейка, а потом, чтобы по нажатию на них высвечивался alert, где если textContent этой ячейки равен x, то писалось "Верно" или что-то типа того. Но я чего-то не могу разобраться, почему их не видно то? Можете помочь пожалуйста?
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2020, 12:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
передать параметры (количество ячеек, минимальное число и максимальное число)? Почему SilentBelka Элементы интерфейса 4 19.10.2017 16:09
игра угадай число. что я сделала не так? 2 раза выбираю число и он выкидывает... olikbel2017 Общие вопросы Javascript 8 07.10.2017 01:41