hhl_project/demo/script.js

let step = 0;
/*
function serveFood() {
    switch(step) {
        case 0:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.rice').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 1:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.meat').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 2:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.rice-mirror').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 3:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.meat-mirror').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 4:
            document.querySelector('.rice').style.opacity = '0';
            document.querySelector('.meat').style.opacity = '0';
            document.querySelector('.rice-mirror').style.opacity = '0';
            document.querySelector('.meat-mirror').style.opacity = '0';
            step = -1;
        default:
            step = -1;
            break;
    }
    step++;
    console.log(step);
}
*/

const OFFSET = 20; // 偏移量，每次堆叠时图片上移的像素值

function serveFood() {
    document.querySelector('.chef-hand').style.opacity = '1';
    setTimeout(() => {
        switch(step % 4) {
            case 0:
                addFood('.rice', step);
                break;
            case 1:
                addFood('.meat', step);
                break;
            case 2:
                addFood('.rice-mirror', step);
                break;
            case 3:
                addFood('.meat-mirror', step);
                break;
        }
        document.querySelector('.chef-hand').style.opacity = '0';
        step++;
        console.log(step);
    }, 500);
}

function addFood(selector, currentStep) {
    const refElement = document.querySelector(selector);
    const newElement = refElement.cloneNode(true);
    newElement.style.opacity = '1';
    newElement.style.position = 'absolute';
    
    const translateYOffset = Math.floor(currentStep / 4) * OFFSET;
    if (selector.includes('mirror')) {
        newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px)) scaleX(-1)`;
    } else {
        newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px))`;
    }
    
    // Increase the z-index based on the current step
    newElement.style.zIndex = 3 + currentStep; // This will make sure the new element is always on top
    
    refElement.parentNode.insertBefore(newElement, refElement);
}