Malleys,
спасибо за подсказку, вариант без setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#etsa {
position: absolute;
width: 50px; height: 50px; margin: -25px;
display: flex; justify-content: center;
background: url(https://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) 0 / 50px no-repeat;
will-change: transform;
pointer-events: none;
}
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block" id="block">
<div id="etsa"></div>
</div>
<script>
// cостояние приложения
var x = { current: 0, target: 0 },
y = { current: 0, target: 0 },
isBoom = false;
var etsa = document.getElementById("etsa"),
style = etsa.style;
document.onmousemove = function(e) {
x.target = e.clientX;
y.target = e.clientY + 2;
isBoom = false;
};
function update() {
x.current += 0.1 * (x.target - x.current);
y.current += 0.1 * (y.target - y.current);
style.transform = `translate(${x.current}px, ${y.current}px)`;
isBoom = Math.abs(x.current - x.target) < .1 && Math.abs(y.current - y.target) < .1
etsa.textContent = isBoom ? "Boom!" : "";
style.backgroundImage = isBoom ? "none" : "";
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>