I wanted to make a mini game where

5 balls go up from the bottom and when you click on one of them, it disappears, and a new one appears in the random position instead.

Created one item in html and cloned it 5 times . but when you click on one of the clones, only the last of them disappears, and so in order.

How to fix it?

And in general, how to make the element appear again in a random place ??

 $(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>

  • Please specify about the "random place". Should the circle appear at the site of the original elements or at some other place? - Anton Mironov

1 answer 1

In fact, if you look at the code of the elements after clicking on one of the red circles, you can see that the desired element disappears, while the rest simply shift to the left. This is due to display:none , which completely removes the element from the stream and hides it.

To fix this, you can replace the display class style with:

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

Regarding the second part of the question: if I correctly understood the task, then I can do it as follows: when a certain number of clicks are reached (for example, 3), show one of the pressed circles in its original place (removing the display class for that).

 $(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>

  • bliin cool !! so much better, thank you very much :) - valeria
  • I have one question ... sometimes when you click on a circle, it disappears only after 2-3 additional clicks. do you like that too? - valeria