假设,我想要可以增加点击特定彩色气泡(1)的得分的游戏玩法。如果未单击出现的气泡,则得分会降低,甚至游戏也会结束。(2)
使用addEventLisener'click'事件来征服数字1很容易,但是我该怎么做2?
答案 0 :(得分:0)
这取决于气泡的行为。正如@CertainPerformance所提到的,您可以使用setTimeout
,但是当您谈论气泡时,我想像是气泡上升到了天空,因此您也可以使用Intersection Observer API来检测何时出现气泡离开视口,例如:
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>
请记住,Internet Explorer不支持Intersection Observer API,对于不受支持的浏览器,您需要polyfill。