Javascript-форум - Упростить код движения за мышкой

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Упростить код движения за мышкой (https://javascript.ru/forum/misc/74397-uprostit-kod-dvizheniya-za-myshkojj.html)

Упростить код движения за мышкой

Добрый день, может я уже на это форуме всем надоел, но нужна помощь. Движение за мышью. Не понятно себя ведет прицел, может кто помочь?

https://jsfiddle.net/roman1479/arvfgkc9/:help: :help: :help:

Роман1479,
setInterval уберите из кода, а лучше никогда не использовать.
https://jsfiddle.net/arvfgkc9/5/

Понял, учту, спасибо большое

рони,
А какой есть вариант, что-бы если цель(картинка) достигнув курсора появлялась надпись вместо цели(картинки)??

Роман1479,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #etsa {
		  width: 50px;
		  height: 50px;
		  background: url(http://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) no-repeat;
		  background-size: 50px 50px;
		  margin: -25px 0 0 -25px;
		  position: absolute;
		  transition: top 0.5s, left 0.5s;
		  -webkit-transition: top 0.5s, left 0.5s;
		}

		body {
		  margin: 0;
		  overflow: hidden;
		}

  </style>

</head>

<body>
<div class="block" id="block">
  <div id="etsa"></div>
</div>
<script>
var el = document.getElementById('etsa'), timer;
document.onmousemove = function(e) {
  window.clearTimeout(timer);
  el.style.backgroundImage = ""
  el.innerHTML = "";
  var X = 0;
  var Y = 0;
  X = e.clientX;
  Y = e.clientY;
  el.style.left = X + 'px';
  el.style.top = Y + 'px';
  timer = window.setTimeout(function() {
  el.innerHTML = "boom!!!";
  el.style.backgroundImage = "none"
}, 500)
};

</script>
</body>
</html>

То что нужно, спасибо:)

рони, у вас часто меняются параметры анимации, которая не успевает проиграть до конца пока меняется положение курсора, что вместо ease-in-out получается сплайн... что приводит к такому интересному эффекту, когда анимация не успевает проиграть до своего конечного состояния. Мне кажется, что в данном случае лучше не стремиться к какому-то конечному состоянию, а менять параметры анимации всё время...

<!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,
    timer;

document.onmousemove = function(e) {
	clearTimeout(timer);
	timer = setTimeout(function() { isBoom = true; }, 500);

	x.target = e.clientX;
	y.target = e.clientY;
	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)`;
	etsa.textContent = isBoom ? "Boom!" : "";
	style.backgroundImage = isBoom ? "none" : "";
	requestAnimationFrame(update);
}

update();

	</script>
</body>
</html>

Malleys,
:thanks:

вслед за курсором

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>