3

Я хотела сделать мини игру, где

5 шариков идут снизу вверх и когда нажимаешь на один из них, он исчезает, а вместо него появляется новый в рандомной позиции.

Создала один элемент в html и клонировала его 5 раз. но когда нажимаешь на один из клонов, исчезает только последний из них и так по порядку.

Как это исправить?

И вообще как заставить элемент появиться снова в рандомном месте??

$(function() {
  function getRandomInt(min, max) {
    return Math.round(Math.random() * (max - min + 1)) + min;
  }

  var e = $('.el');
  for (var i = 0; i < 5; i++) {
    e.clone().insertAfter(e);
  }

  var score = 0;
  $('.el').click(function() {
    $('.el').each(function() {
      $(this).css({
        'transform': 'translateY(-600px)',
        'transition': getRandomInt(5000, 10000) + 'ms'
      });
    })
    $(this).addClass('display');
    score++
    $('.score span').text(score);
  })
});
.el {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
}

.display {
  display: none
}

.army {
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="score">
  <h2>your score: <span></span></h2>
</div>
<div class="army">
  <div class="el"></div>
</div>

1
  • Уточните пожалуйста про "рандомное место". Круг должен появляться на месте первоначальных элементов или в каком-то другом месте? 21 ноя 2018 в 11:46

1 ответ 1

0

На самом деле, если посмотреть код элементов после нажатия на один из красных кругов, то можно заметить, что исчезает нужный элемент, а остальные просто смещаются влево. Это происходит из-за display:none, который полностью убирает элемент из потока и скрывает его.

Для исправления этого, можно заменить стиль класса display на:

.display {
  visibility: hidden !important;
  transform: none !important;
  transition: none !important;
}

По поводу второй части вопроса: если я правильно понял задачу, то можно сделать следующим образом: при достижении определенного числа кликов (например 3), показывать один из нажатых кругов на своем первоначальном месте (убрав для этого у него класс display).

$(function() {
  function getRandomInt(min, max) {
    return Math.round(Math.random() * (max - min + 1)) + min;
  }

  var e = $('.el');
  for (var i = 0; i < 5; i++) {
    e.clone().attr('id', i+1).insertAfter(e); // Добавляем элементам id
  }

  var score = 0;
  var clicked = []; // Массив, в котором будут храниться id нажатых кругов
  $('.el').click(function() {
  $(this).addClass('display');
    $('.el').each(function() {
      $(this).css({
        'transform': 'translateY(-600px)',
        'transition': getRandomInt(5000, 10000) + 'ms'
      });
    })
    
    score++;
    clicked.push($(this).attr('id')); // Добавляем id нажатого круга в массив
    if(score > 2){
      var rand = clicked[Math.floor(Math.random()*clicked.length)]; // Выбираем случайный элемент из массива
      clicked = $.grep(clicked, function(value) {
        return value != rand;
      }); // Удаляем этот элемент из массива
      $('#'+rand).removeClass('display').css({
        'transition': getRandomInt(5000, 10000) + 'ms'
      }); // Показываем элемент на первоначальном месте (Можно увеличивать скорость при достижении определенного числа кликов)
    }
    $('.score span').text(score);
  })
});
.el {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
}

.display {
  visibility: hidden !important;
  transform: none !important;
  transition: none !important;
}

.army {
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="score">
  <h2>your score: <span></span></h2>
</div>
<div class="army">
  <div class="el" id="0"></div>
</div>

2
  • блиин круто!! так даже лучше, спасибо большое :)
    – valeria
    21 ноя 2018 в 13:46
  • у меня один вопрос... иногда когда нажимаешь на круг, он исчезает только после 2-3 дополнительных кликов. у вас тоже так?
    – valeria
    21 ноя 2018 в 13:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.