-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclicker.html
125 lines (117 loc) · 4.01 KB
/
clicker.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Circle Mover</title>
<style>
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<p id="pos">Position: 0,0</p>
<div id="circle"></div>
<script>
var circle = document.getElementById('circle');
var initialMouseX = 0;
var initialMouseY = 0;
var initialCircleX = 0;
var initialCircleY = 0;
var circlePosAdj = 50;
var floating = true;
var angle = Math.PI / 4;
var currentX = circle.offsetLeft;
var currentY = circle.offsetHeight;
const fps = 60;
const distance = 3; //distance traveled per frame
var interval = setInterval(function() {
if (floating) {
var viewportWidth = window.innerWidth; //Gets site's height and width.
var viewportHeight = window.innerHeight;
var maxCircleX = viewportWidth - circle.offsetWidth;
var maxCircleY = viewportHeight - circle.offsetHeight;
if (maxCircleY > 550) {
maxCircleY = 550;
}
if (currentX < 0 || currentX > maxCircleX || currentY < 0 || currentY > maxCircleY) {
angle = Math.random() * 2 * Math.PI;
if (currentX < 0) {
currentX = 0;
}
if (currentX > maxCircleX) {
currentX = maxCircleX;
}
if (currentY < 0) {
currentY = 0;
}
if (currentY > maxCircleY) {
currentY = maxCircleY;
}
}
var newX = currentX + Math.cos(angle) * distance;
var newY = currentY + Math.sin(angle) * distance;
circle.style.left = newX + 'px';
circle.style.top = newY + 'px';
currentX = newX;
currentY = newY;
document.getElementById("pos").innerHTML = "Position: " + Math.round(newX) + "," + Math.round(newY);
} }, 1000/fps);
circle.addEventListener('mousedown', handleStart);
document.addEventListener('keypress', pause);
function handleStart(event) {
event.preventDefault();
if (event.type === 'mousedown') {
floating = false;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
}
initialCircleX = circle.offsetLeft;
initialCircleY = circle.offsetTop;
document.addEventListener('mousemove', handleMove);
document.addEventListener('mouseup', handleEnd);
}
function handleMove(event) {
event.preventDefault();
var currentMouseX;
var currentMouseY;
if (event.type === 'mousemove') {
currentMouseX = event.clientX;
currentMouseY = event.clientY;
}
var deltaX = currentMouseX - initialMouseX;
var deltaY = currentMouseY - initialMouseY;
var newCircleX = initialCircleX + deltaX;
var newCircleY = initialCircleY + deltaY;
var viewportWidth = window.innerWidth; //Gets site's height and width.
var viewportHeight = window.innerHeight;
var maxCircleX = viewportWidth - circle.offsetWidth;
var maxCircleY = viewportHeight - circle.offsetHeight;
if (maxCircleY > 550) {
maxCircleY = 550;
} //y cap
newCircleX = Math.max(0, Math.min(newCircleX, maxCircleX));
newCircleY = Math.max(50, Math.min(newCircleY, maxCircleY));
circle.style.left = newCircleX + 'px';
circle.style.top = newCircleY + 'px';
currentX = newCircleX;
currentY = newCircleY;
document.getElementById("pos").innerHTML = "Position: " + Math.round(newCircleX) + "," + Math.round(newCircleY);
}
function handleEnd() {
document.removeEventListener('mousemove', handleMove);
document.removeEventListener('mouseup', handleEnd);
floating = true;
}
function pause(e) {
if (e.code === 'KeyP') {
floating = !floating;
}
}
</script>
<br>
</body>
</html>