Можно ли добавить условие «если не нажал» на addEventLisenter в чистом JavaScript? - PullRequest
Новая
       48

Можно ли добавить условие «если не нажал» на addEventLisenter в чистом JavaScript?

0 голосов
/ 28 декабря 2018

Предположим, я хочу игровой процесс, который мог бы увеличить счет за клик на конкретном цветном пузыре (1).Если появившийся пузырь не нажал, счет уменьшится или даже игра закончится. (2)

Легко использовать addEventLisener 'click' событие, чтобы завоевать число 1. Но как я могу сделать 2?

1 Ответ

0 голосов
/ 29 декабря 2018

Это зависит от поведения ваших пузырей.Как упомянуто @CertainPerformance, вы можете использовать setTimeout, но когда вы говорите о пузырьках, я представляю, как пузырь поднимается в небо, так что вы также можете использовать API-интерфейс Intersection Observer для определения того, когдапузырь покидает область просмотра, например: 

var bubble = document.getElementById('bubble');

var options = {
  root: document.querySelector('#window'),
  rootMargin: '0px',
  threshold: 0
}

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      bubble.parentNode.removeChild(bubble);
      alert('You missed it!');
    }
  });
};

var observer = new IntersectionObserver(callback, options);

observer.observe(bubble);

bubble.addEventListener('click', function() {
  observer.unobserve(bubble);
  alert('Got it!');
  bubble.parentNode.removeChild(bubble);
});
#window {
  background: blue;
  border: 1px solid black;
  height: 250px;
  overflow: hidden;
  position: relative;
  width: 500px;
}

#bubble {
  animation: fly 5s normal;
  background: red;
  border-radius: 20px;
  height: 40px;
  left: 150px;
  position: absolute;
  width: 40px; 
}

@keyframes fly {
  from {
    top: 250px;
  }
  to {
    top: -100px;
  }
}
<div id="window">
  <div id="bubble"></div>
</div>

Имейте в виду, что API-интерфейс Intersection Observer не поддерживается Internet Explorer и вам потребуется polyfill для неподдерживаемыхбраузеры.

...