Как избавится от зависимости onmousemove в JS

Question

Вот код :

window.onmousemove = function(event) {
  var x = event.pageX;
  var y = event.pageY;
  var speed = 10;
  var height = window.innerHeight / 100;

  var block1 = document.getElementById("block1");
  var block2 = document.getElementById("block2");


  block1.onmousemove = function() {
    block1.style.top = (y - (block1.offsetHeight / 2)) + "px";
    block1.style.left = (x - (block1.offsetWidth / 2)) + "px";
    block1.className = "index";
  }

  block2.onmousemove = function() {
    block2.style.top = (y - (block2.offsetHeight / 2)) + "px";
    block2.style.left = (x - (block2.offsetWidth / 2)) + "px";
    block2.className = "index";
  }
  if (block1.onmousemove && block1.offsetTop < height * 80 - block1.offsetHeight)
    block1.style.top = (block1.offsetTop + speed) + "px";

  if (block2.onmousemove && block2.offsetTop < height * 80 - block2.offsetHeight)
    block2.style.top = (block2.offsetTop + speed) + "px";
};

body {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #292929;
}

#block1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #465bfa;
  position: fixed;
  top: 0;
  left: 0;
}

#block2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #465bfa;
  position: fixed;
  top: 0;
  left: 500px;
}

#land {
  width: 100%;
  height: 20%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #49974f;
  z-index: 100000;
}

.index {
  z-index: 2000;
}

<div id="block1"></div>
<div id="block2"></div>

<div id="land"></div>

он работает только когда совершаешь движение мыши ( этo из за onmousemove в начале )

Как избавиться от этой зависимости(костыля)

Answer 1

Обычно, для подобной логики используют requestAnimationFrame.

Также, немного модфицировал логику движения шариков и сделал код независимым от количества блоков.

var blocks = document.querySelectorAll(".block");

window.requestAnimationFrame(function step() {
  var speed = 10;
  var height = window.innerHeight / 100;
  [...blocks].forEach(block => {
    if (block.dataset.moved !== '1' && block.offsetTop < height * 80 - block.offsetHeight)
      block.style.top = (block.offsetTop + speed) + "px";
  });
  window.requestAnimationFrame(step)
});
[...blocks].forEach(block => {
  block.onmouseenter = function(event) {
    block.classList.add("index");
    block.dataset.moved = 1;
  }
  block.onmousemove = function(event) {
    var x = event.pageX;
    var y = event.pageY;
    block.style.top = (y - (block.offsetHeight / 2)) + "px";
    block.style.left = (x - (block.offsetWidth / 2)) + "px";
    block.dataset.moved = 1;
  }
  block.onmouseout = function(event) {
    block.classList.remove("index");
    block.dataset.moved = 0;
  }
});

body {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #292929;
}

.block {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #465bfa;
  position: fixed;
  top: 0;
  left: 0;
}

#block2 {
  left: 300px;
}

#land {
  width: 100%;
  height: 20%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #49974f;
  z-index: 100000;
}

.index {
  z-index: 2000;
}

<div class="block" id="block1"></div>
<div class="block" id="block2"></div>

<div id="land"></div>

БЛОГ НА HUSL

Как избавится от зависимости onmousemove в JS

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