blob: 6347b87ee345906cebd1a3e508f10890caa4ca7d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
const btn = document.getElementById("moveBtn");
btn.addEventListener("mouseover", () => {
let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px
let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px
// Get viewport dimensions
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Get button dimensions
const btnRect = btn.getBoundingClientRect();
// Ensure button stays within viewport
randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right);
randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom);
btn.style.transform = `translate(${randX}px, ${randY}px)`;
});
btn.addEventListener("click", () => {
let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px
let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px
// Get viewport dimensions
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Get button dimensions
const btnRect = btn.getBoundingClientRect();
// Ensure button stays within viewport
randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right);
randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom);
btn.style.transform = `translate(${randX}px, ${randY}px)`;
});
|
