38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
// Add this to your game.js file or create a new cursor.js file
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cursor = document.createElement('div');
|
|
cursor.classList.add('custom-cursor');
|
|
cursor.innerHTML = '<div class="cursor-dot"></div><div class="cursor-outline"></div>';
|
|
document.body.appendChild(cursor);
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
cursor.style.left = e.clientX + 'px';
|
|
cursor.style.top = e.clientY + 'px';
|
|
});
|
|
|
|
document.addEventListener('mousedown', () => {
|
|
cursor.classList.add('clicking');
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
cursor.classList.remove('clicking');
|
|
});
|
|
|
|
// Optional: Add a subtle trailing effect
|
|
let trailDot = null;
|
|
setInterval(() => {
|
|
if (trailDot) {
|
|
trailDot.remove();
|
|
}
|
|
trailDot = cursor.querySelector('.cursor-dot').cloneNode(true);
|
|
trailDot.style.transition = 'all 0.15s linear';
|
|
trailDot.style.opacity = '0.5';
|
|
cursor.appendChild(trailDot);
|
|
setTimeout(() => {
|
|
if (trailDot) {
|
|
trailDot.style.opacity = '0';
|
|
}
|
|
}, 50);
|
|
}, 100);
|
|
}); |