Рандомное появления лисы в кустах

Question

Есть следующий код:

<style>
  .item1 {
    overflow: hidden;
    width: 175px;
    height: 500px;
    position: absolute;
    right: 0;
    top: 1500px
  }
  
  .item1:hover .lisa1 {
    opacity: 1;
    top: 274px;
    -moz-transition: all .8s linear;
    -o-transition: all .8s linear;
    -webkit-transition: all .8s linear
  }
  
  .lisa1 {
    position: absolute;
    opacity: 0;
    top: 234px
  }
  
  .kust1 {
    position: absolute
  }
  
  .item2 {
    width: 210px;
    position: absolute;
    left: 0;
    top: 2500px
  }
  
  .item2:hover .lisa2 {
    opacity: 1;
    top: -111px;
    left: 0;
    -moz-transition: all .8s linear;
    -o-transition: all .8s linear;
    -webkit-transition: all .8s linear
  }
  
  .lisa2 {
    position: absolute;
    top: -101px;
    left: -50px;
    opacity: 0
  }
  
  .kust2 {
    position: absolute
  }
  
  .item3 {
    margin-top: -425px;
    width: 370px;
    position: absolute;
    left: 50%;
  }
  
  .item3:hover .lisa3 {
    opacity: 1;
    top: 223px;
    left: 153px;
    -moz-transition: all .8s linear;
    -o-transition: all .8s linear;
    -webkit-transition: all .8s linear;
  }
  
  .lisa3 {
    position: absolute;
    opacity: 0;
  }
  
  .kust3 {
    top: 210px;
    position: absolute;
  }
</style>
<script>
  let item1 = document.createElement('div');
  item1.className = "item1";
  item1.innerHTML = '<div class="lisa1"><img src="https://forumstatic.ru/files/0019/3c/8c/22179.png?v=1"></div><div class="kust1"><img src="https://forumstatic.ru/files/0019/3c/8c/35365.png?v=1"></div>';
  document.body.append(item1);
  let item2 = document.createElement('div');
  item2.className = "item2";
  item2.innerHTML = '<div class="lisa2"><img src="https://forumstatic.ru/files/0019/3c/8c/62333.png"></div><div class="kust2"><img src="https://forumstatic.ru/files/0019/3c/8c/67140.png"></div>';
  document.body.append(item2);
  let item3 = document.createElement('div');
  item3.className = "item3";
  item3.innerHTML = '<div class="lisa3"><img src="https://forumstatic.ru/files/0019/3c/8c/50942.png"></div><div class="kust3"><img src="https://forumstatic.ru/files/0019/3c/8c/56314.png"></div>';
  document.body.append(item3);
</script>

Сейчас код работает следующим образом: лиса появляется, если навести курсор мыши на куст. Нужно: чтобы код спавнил лису случайно по 3 кустам, а при наведении мыши она пропадала и появлялась в других кустах.

Answer 1

Я честно не знаю поможет ли вам мой пример. Но вы можете взять что то за основу.

//Получаем рандомные числа
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

//Рандомим лису в разные кусы
function random() {
  let randomBash = getRandomInt(3);
  if (randomBash == 0) {
    $('#1').html('<span>ЛИСА</span>')
  }
  else if (randomBash == 1) {
    $('#2').html('<span>ЛИСА</span>')
  } else {
    $('#3').html('<span>ЛИСА</span>')
  }
}

//Вызываем рандом лисы при наведении + удаляем старую лису
$('.bash').hover(function(){
  $('.bash span').remove();
  random()
})

.area {
  display: flex;
  justify-content: space-evenly;
  padding-top: 50px;
}

.bash {
  width: 150px;
  height: 60px;
  background-color: green;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="area">
   <div class="bash" id='1'></div>
   <div class="bash" id='2'></div>
   <div class="bash" id='3'></div>
  </div> 
</body>

БЛОГ НА HUSL

Рандомное появления лисы в кустах

Ответы (1 шт):