|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Mouse Speed test</title>
|
|
4
|
</head>
|
|
5
|
<body>
|
|
6
|
<div>
|
|
7
|
Coordinates:<br>
|
|
8
|
x = <p id="xCoordinate"></p>
|
|
9
|
<br>
|
|
10
|
y = <p id="yCoordinate"></p>
|
|
11
|
</div><br>
|
|
12
|
<div>
|
|
13
|
Direction: <br>
|
|
14
|
<p id="direction"></p>
|
|
15
|
</div><br>
|
|
16
|
<div>
|
|
17
|
Speed: <p id="speed"></p>
|
|
18
|
</div>
|
|
19
|
<script>
|
|
20
|
let lastMouseX, lastMouseY;
|
|
21
|
let lastTimestamp;
|
|
22
|
|
|
23
|
document.addEventListener("mousemove", (e) => {
|
|
24
|
const currentMouseX = e.clientX;
|
|
25
|
document.getElementById("xCoordinate").innerHTML = currentMouseX;
|
|
26
|
const currentMouseY = e.clientY;
|
|
27
|
document.getElementById("yCoordinate").innerHTML = currentMouseY;
|
|
28
|
const currentTime = performance.now();
|
|
29
|
|
|
30
|
|
|
31
|
|
|
32
|
console.log("x = "+currentMouseX+ ", y = "+currentMouseY);
|
|
33
|
|
|
34
|
if(lastMouseX !== undefined && lastMouseY !== undefined) {
|
|
35
|
const deltaX = currentMouseX - lastMouseX;
|
|
36
|
const deltaY = currentMouseY - lastMouseY;
|
|
37
|
const deltaTime = currentTime - lastTimestamp;
|
|
38
|
|
|
39
|
const speedX = deltaX / deltaTime;
|
|
40
|
const speedY = deltaY / deltaTime;
|
|
41
|
|
|
42
|
const speed = (Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)))/deltaTime;
|
|
43
|
|
|
44
|
document.getElementById("speed").innerHTML = speed;
|
|
45
|
|
|
46
|
var direction = "";
|
|
47
|
if(speedX > 0) {
|
|
48
|
direction += " right";
|
|
49
|
} else if(speedX < 0) {
|
|
50
|
direction += " left";
|
|
51
|
}
|
|
52
|
|
|
53
|
if(speedY > 0) {
|
|
54
|
direction += " bottom";
|
|
55
|
} else if(speedY < 0) {
|
|
56
|
direction += " top";
|
|
57
|
}
|
|
58
|
|
|
59
|
document.getElementById("direction").innerHTML = direction;
|
|
60
|
|
|
61
|
if(speed >= 1 && currentMouseY < 20) {
|
|
62
|
// speed determine
|
|
63
|
console.log("speedX = "+speedX.toFixed(2)+ ", speedY = "+speedY.toFixed(2));
|
|
64
|
console.log("speed = "+speed);
|
|
65
|
alert("trying to close");
|
|
66
|
}
|
|
67
|
}
|
|
68
|
|
|
69
|
lastMouseX = currentMouseX;
|
|
70
|
lastMouseY = currentMouseY;
|
|
71
|
lastTimestamp = currentTime;
|
|
72
|
})
|
|
73
|
</script>
|
|
74
|
</body>
|
|
75
|
</html>
|