50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
let mouseDown = false;
|
|
let mouseDownEver = false;
|
|
document.onmousedown = function(e) {
|
|
if (e.button === 0) {
|
|
mouseDown = true;
|
|
mouseDownEver = true;
|
|
}
|
|
};
|
|
document.onmouseup = function(e) {
|
|
if (e.button === 0) {
|
|
mouseDown = false;
|
|
document.getElementById("slingshot").classList.add("ungrabbed");
|
|
}
|
|
};
|
|
document.ontouchend = function(e) {
|
|
document.getElementById("slingshot").classList.add("ungrabbed");
|
|
};
|
|
document.ontouchstart = function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
function distance(p1, p2) {
|
|
return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2);
|
|
}
|
|
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (mouseDown) {
|
|
document.getElementById("slingshot").classList.remove("ungrabbed");
|
|
cursorX = e.pageX;
|
|
cursorY = window.innerHeight - e.pageY;
|
|
const slingshot = document.getElementById("slingshot");
|
|
slingshot.style.width = distance({x: cursorX, y: cursorY}, {
|
|
x: window.innerWidth / 2,
|
|
y: window.innerHeight / 2
|
|
}) + "px";
|
|
const angle = cursorX >= window.innerWidth / 2 ? -Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) : (-Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) - Math.PI);
|
|
slingshot.style.transform = "rotate(" + angle + "rad)";
|
|
}
|
|
});
|
|
|
|
|
|
document.addEventListener("touchmove", (e) => {
|
|
document.getElementById("slingshot").classList.remove("ungrabbed");
|
|
cursorX = e.touches[0].clientX;
|
|
cursorY = window.innerHeight - e.touches[0].clientY;
|
|
const slingshot = document.getElementById("slingshot");
|
|
slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px";
|
|
const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
|
|
slingshot.style.transform = "rotate(" + angle + "rad)";
|
|
}); |