78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
|
(function () {
|
||
|
|
const canvas = document.getElementById('drag-ball');
|
||
|
|
if (!canvas) return;
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
const W = 200, H = 200;
|
||
|
|
canvas.width = W;
|
||
|
|
canvas.height = H;
|
||
|
|
|
||
|
|
let ballX = W / 2, ballY = H / 2;
|
||
|
|
let dragging = false;
|
||
|
|
let offsetX = 0, offsetY = 0;
|
||
|
|
|
||
|
|
function drawBall() {
|
||
|
|
ctx.clearRect(0, 0, W, H);
|
||
|
|
const r = 30;
|
||
|
|
const grad = ctx.createRadialGradient(ballX, ballY, 0, ballX, ballY, r);
|
||
|
|
grad.addColorStop(0, '#ffb300');
|
||
|
|
grad.addColorStop(1, '#ff6f00');
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(ballX, ballY, r, 0, Math.PI * 2);
|
||
|
|
ctx.fillStyle = grad;
|
||
|
|
ctx.fill();
|
||
|
|
ctx.fillStyle = '#fff';
|
||
|
|
ctx.font = '14px sans-serif';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
ctx.fillText('(¬‿¬)', ballX, ballY);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPos(e) {
|
||
|
|
const rect = canvas.getBoundingClientRect();
|
||
|
|
const scaleX = W / rect.width;
|
||
|
|
const scaleY = H / rect.height;
|
||
|
|
if (e.touches) {
|
||
|
|
return {
|
||
|
|
x: (e.touches[0].clientX - rect.left) * scaleX,
|
||
|
|
y: (e.touches[0].clientY - rect.top) * scaleY
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
x: (e.clientX - rect.left) * scaleX,
|
||
|
|
y: (e.clientY - rect.top) * scaleY
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas.addEventListener('mousedown', (e) => {
|
||
|
|
const pos = getPos(e);
|
||
|
|
const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
|
||
|
|
if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
|
||
|
|
});
|
||
|
|
canvas.addEventListener('touchstart', (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const pos = getPos(e);
|
||
|
|
const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
|
||
|
|
if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
|
||
|
|
}, { passive: false });
|
||
|
|
|
||
|
|
window.addEventListener('mousemove', (e) => {
|
||
|
|
if (!dragging) return;
|
||
|
|
const pos = getPos(e);
|
||
|
|
ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
|
||
|
|
ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
|
||
|
|
drawBall();
|
||
|
|
});
|
||
|
|
window.addEventListener('touchmove', (e) => {
|
||
|
|
if (!dragging) return;
|
||
|
|
const pos = getPos(e);
|
||
|
|
ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
|
||
|
|
ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
|
||
|
|
drawBall();
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('mouseup', () => { dragging = false; });
|
||
|
|
window.addEventListener('touchend', () => { dragging = false; });
|
||
|
|
|
||
|
|
drawBall();
|
||
|
|
})();
|