Я хотела сделать мини игру, где
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>