マウスストーカーの作成

マウスカーソルを追いかけてくる、マウスストーカー(赤色、直径16pxの円形)作成してみました

JS

<div id = 'stalker'>
  <script>
  var mX = 0; // マウスカーソルの座標
  var mY = 0; // マウスカーソルの座標
  var nX = 0; // ストーカーの座標
  var nY = 0; // ストーカーの座標
  // document.getElementById('stalker');

まず、マウスカーソルとストーカーの座標を設定。
（getElementByIdは必要ないのかな…？）

次にmousemoveイベントを用いて、マウスカーソルが動いた際の座標を取得

JS

  function getMouseXY(e){
   mX = e.pageX;
   mY = e.pageY;
  }
  document.onmousemove = getMouseXY;

addEventListenerを用いるより、この書き方のほうが現代っぽいらしい

今度はストーカーがマウスカーソルを追っかけてくれるようにします

今回は200ミリ毎秒ごとに、ストーカーがマウスカーソルを3pxずつ追いかけるようにする

JS

setInterval(function(){
  if(mX > nX){
    nX += 3;
  } else {
    nX -= 3;
  }
  if(mY > nY){
    nY += 3;
  } else {
    nY -= 3;
  }
  stalker.style.left = nX + 'px';
  stalker.style.top = nY + 'px';
}, 200);

setIntervalを使用

マウスカーソルの座標とストーカーの座標の位置関係に応じて3pxずつ動くように指示

最後にCSSを添付します

css

#stalker {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
}

これにて完成しました

動き自体は遅いですが、追いかけてくるストーカーは出来上がります

これ以外の別の作り方や、間違いがありましたらご指摘いただければと思います