青丸を赤丸が追いかけるアニメーションのコード

<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
     position: relative;
     height: 300px;
     width: 300px;
     border: 1px solid black;
    }
    #circle {
     position: absolute;
     height: 20px; /* 赤丸のサイズ */
     width: 20px; /* 赤丸のサイズ */
     background-color: red;
     border-radius: 50%;
     transition: top 1s, left 1s; /* 連続的な移動 */
     z-index: 2; /* 赤丸を前面に表示 */
    }
    #circle2 {
     position: absolute;
     height: 20px; /* 青丸のサイズ */
     width: 20px; /* 青丸のサイズ */
     background-color: blue;
     border-radius: 50%;
     transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */
     z-index: 1; /* 青丸を前面に表示 */
    }
    #line {
     position: absolute;
     height: 40px;
     width: 1px; /* 縦線の幅 */
     background-color: white;
     right: -1px; /* 右枠に配置 */
     top: calc(50% - 20px); /* 上下中央に配置 */
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="circle"></div>
    <div id="circle2"></div>
    <div id="line"></div> <!-- 縦線を追加 -->
  </div>

  <script>
    var container = document.getElementById('container');
    var circle = document.getElementById('circle');
    var circle2 = document.getElementById('circle2');

    var x = 0;
    var y = 0;

    function moveCircle() {
     x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
     y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));

     circle.style.left = x + 'px';
     circle.style.top = y + 'px';
    }

    function followCircle() {
     circle2.style.left = x + 'px';
     circle2.style.top = y + 'px';
    }

    function moveToCenter() {
     x = container.offsetWidth - circle.offsetWidth;
     y = (container.offsetHeight - circle.offsetHeight) / 2;

     circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
     circle2.style.left = x + 'px';
     circle2.style.top = y + 'px';
     circle.style.transition = 'left 2s, top 2s'; // 2秒間に移動
     circle.style.left = x - circle.offsetWidth / 2 + 'px';
     circle.style.top = y + 'px';
    }

    function moveToOutside() {
     x = container.offsetWidth + circle.offsetWidth;
     y = (container.offsetHeight - circle.offsetHeight) / 2;

     circle2.style.transition = 'left 1s, top 1s'; // 1秒間に移動
     circle2.style.left = x + 'px';
     circle2.style.top = y + 'px';
    }

    // 最初の位置を設定
    moveCircle();
    circle2.style.left = (container.offsetWidth - circle2.offsetWidth) + 'px';
    circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';

    var intervalId = setInterval(moveCircle, 1000); // 1秒ごとに赤丸を移動
    var intervalId2 = setInterval(followCircle, 1000); // 1秒ごとに青を移動

    setTimeout(function() {
     clearInterval(intervalId); // ランダムな移動を停止
     moveToCenter(); // 20秒後に青丸を右枠中央に移動
    }, 20000);
    setTimeout(function() {
     moveToOutside(); // 21秒後に青丸を枠の外に移動
    }, 21000);
  </script>
</body>
</html>

コメント

コメントを投稿