Untitled

<style>
  .floating-play {
    position: fixed;
    z-index: 999999;
    cursor: pointer;
    user-select: none;
    transition: transform 2.5s linear;
  }
</style>

<div class="floating-play">Play</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const btn = document.querySelector(".floating-play");
  if (!btn) return;

  let isPlaying = false;
  let x = Math.random() * (window.innerWidth - 120);
  let y = Math.random() * (window.innerHeight - 60);

  btn.addEventListener("click", function () {
    isPlaying = !isPlaying;
    btn.textContent = isPlaying ? "Pause" : "Play";
  });

  function moveRandomly() {
    const dx = (Math.random() - 0.5) * 120;
    const dy = (Math.random() - 0.5) * 120;

    x = Math.max(20, Math.min(window.innerWidth - 120, x + dx));
    y = Math.max(20, Math.min(window.innerHeight - 60, y + dy));

    btn.style.transform = `translate(${x}px, ${y}px)`;
  }

  moveRandomly();
  setInterval(moveRandomly, 3000);
});
</script>