DreamLife_Haihai/script.js

const confirmSection = document.querySelector('.confirm');
const acceptedSection = document.querySelector('.accepted');
const rejectedSection = document.querySelector('.rejected');
const boi = document.querySelector('.boi');
const btnDelete = document.querySelector('.confirm-body-button-delete');
const btnCancel = document.querySelector('.confirm-body-button-cancel');
const current = {
    happiness: 0.9,
    derp: 1,
    px: 0.5,
    py: 0.5
};
const target = { ...current };
const fakeCursor = document.querySelector('.fake-cursor');

// 页面加载时，将其放在屏幕中心
window.addEventListener('load', () => {
    // 设置初始位置为屏幕中心（或者你想要的初始位置）
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 1.4;
    fakeCursor.style.transition = 'none'; // 先禁用动画
    fakeCursor.style.transform = `translate(${centerX}px, ${centerY}px)`;
});

document.addEventListener('touchmove', (e) => {
    const touch = e.touches[0];
    if (touch) {
        const { clientX, clientY } = touch;
        fakeCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;
    }
}, { passive: false });

document.addEventListener('touchend', (e) => {
    const touch = e.changedTouches[0];
    if (touch) {
        const { clientX, clientY } = touch;

        // 模拟点击事件
        const target = document.elementFromPoint(clientX, clientY);
        if (target) {
            const clickEvent = new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                clientX,
                clientY,
            });
            target.dispatchEvent(clickEvent);
        }
    }

    // 隐藏箭头
    fakeCursor.style.transform = 'translate(-1000px, -1000px)';
});

let rejectCount = 0;

// 鼠标事件
confirmSection.addEventListener('mousemove', onMouseMove);
confirmSection.addEventListener('mouseleave', onMouseLeave);

// —— 触屏事件 ——
// 滑动模拟鼠标移动
confirmSection.addEventListener('touchstart', onTouchMove, { passive: false });
confirmSection.addEventListener('touchmove', onTouchMove, { passive: false });
// 手指离开模拟鼠标离开
confirmSection.addEventListener('touchend', onMouseLeave);

btnCancel.addEventListener('click', () => {
    confirmSection.classList.add('hidden');
    acceptedSection.classList.remove('hidden');
    target.happiness = 1; // 开心到起飞
    updateBoi();
});

btnDelete.addEventListener('click', () => {
    rejectCount++;
    if (rejectCount >= 5) {
        btnDelete.style.position = 'absolute';
        btnDelete.style.left = `${Math.random() * 80}%`;
        btnDelete.style.top = `${Math.random() * 80}%`;
    }
    target.happiness = Math.max(0.1, target.happiness - 0.1);
    btnCancel.style.transform = `scale(${1 + rejectCount * 0.1})`;
    updateBoi();
});

acceptedSection.querySelector('a').addEventListener('click', () => {
    acceptedSection.classList.add('hidden');
    confirmSection.classList.remove('hidden');
    resetBoi();
});

rejectedSection.querySelector('a').addEventListener('click', () => {
    rejectedSection.classList.add('hidden');
    confirmSection.classList.remove('hidden');
    resetBoi();
});

// 将 touch 事件转换为 mousemove 逻辑
function onTouchMove(e) {
    e.preventDefault();  // 阻止默认滚动
    const touch = e.touches[0];
    if (!touch) return;
    onMouseMove({ clientX: touch.clientX, clientY: touch.clientY });
}

function onMouseMove({ clientX: x, clientY: y }) {
    const rectConfirm = confirmSection.getBoundingClientRect();
    const rectDel = btnDelete.getBoundingClientRect();
    const rectCan = btnCancel.getBoundingClientRect();

    const dx1 = x - (rectDel.x + rectDel.width * 0.5);
    const dy1 = y - (rectDel.y + rectDel.height * 0.5);
    const dx2 = x - (rectCan.x + rectCan.width * 0.5);
    const dy2 = y - (rectCan.y + rectCan.height * 0.5);

    const px = (x - rectConfirm.x) / rectConfirm.width;
    const py = (y - rectConfirm.y) / rectConfirm.height;

    const distDelete = Math.hypot(dx1, dy1);
    const distCancel = Math.hypot(dx2, dy2);
    const happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75);

    target.happiness = happiness;
    target.derp = 0;
    target.px = px;
    target.py = py;
}

function onMouseLeave() {
    target.happiness = 0.9;
    target.derp = 1;
    target.px = 0.5;
    target.py = 0.5;
}

function updateBoi() {
    for (let prop in target) {
        if (Math.abs(target[prop] - current[prop]) < 0.01) {
            current[prop] = target[prop];
        } else {
            current[prop] += (target[prop] - current[prop]) * 0.1;
        }
        boi.style.setProperty(`--${prop}`, current[prop]);
    }
    requestAnimationFrame(updateBoi);
}

function resetBoi() {
    target.happiness = 0.9;
    target.derp = 1;
    target.px = 0.5;
    target.py = 0.5;
    rejectCount = 0;
    btnCancel.style.transform = 'scale(1)';
    btnDelete.style.position = 'static';
}

updateBoi();