启动Luogu模拟《原神·空月之歌》

// ==UserScript==
// @name         《原神·空月之歌》，启动！
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  模拟启动《原神·空月之歌》，支持Esc键结束动画
// @author       MRRlly
// @match        https://www.luogu.com.cn/
// @match        https://www.luogu.com.cn
// @icon         https://www.luogu.com.cn/favicon.ico
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    console.log('原神启动动画脚本开始执行...');

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSplash);
    } else {
        setTimeout(initSplash, 100);
    }

    function initSplash() {
        console.log('初始化启动动画...');

        if (document.getElementById('luogu-splash')) {
            console.log('启动动画层已存在，跳过创建');
            return;
        }

        const splash = document.createElement('div');
        splash.id = 'luogu-splash';

        splash.style.position = 'fixed';
        splash.style.top = '0';
        splash.style.left = '0';
        splash.style.width = '100%';
        splash.style.height = '100%';
        splash.style.backgroundColor = 'white';
        splash.style.zIndex = '999999';
        splash.style.display = 'flex';
        splash.style.justifyContent = 'center';
        splash.style.alignItems = 'center';

        document.body.appendChild(splash);
        console.log('启动动画层已创建');

        const mihoyoImg = document.createElement('img');
        mihoyoImg.id = 'mihoyo-img';
        mihoyoImg.src = 'https://cdn.luogu.com.cn/upload/image_hosting/21i8jnbt.png';
        mihoyoImg.alt = 'miHoYo';
        mihoyoImg.style.position = 'absolute';
        mihoyoImg.style.opacity = '0';
        mihoyoImg.style.maxWidth = '100%';
        mihoyoImg.style.maxHeight = '100%';
        mihoyoImg.style.width = 'auto';
        mihoyoImg.style.height = 'auto';
        mihoyoImg.style.objectFit = 'contain';
        mihoyoImg.style.top = '50%';
        mihoyoImg.style.left = '50%';
        mihoyoImg.style.transform = 'translate(-50%, -50%)';
        splash.appendChild(mihoyoImg);
        console.log('miHoYo图片已添加');

        const startupImg = document.createElement('img');
        startupImg.id = 'startup-img';
        startupImg.src = 'https://cdn.luogu.com.cn/upload/image_hosting/u1ecpv6w.png';
        startupImg.alt = '启动图';
        startupImg.style.position = 'absolute';
        startupImg.style.opacity = '0';
        startupImg.style.maxWidth = '100%';
        startupImg.style.maxHeight = '100%';
        startupImg.style.width = 'auto';
        startupImg.style.height = 'auto';
        startupImg.style.objectFit = 'contain';
        startupImg.style.top = '50%';
        startupImg.style.left = '50%';
        startupImg.style.transform = 'translate(-50%, -50%)';
        splash.appendChild(startupImg);
        console.log('启动图片已添加');

        const splashTimeouts = [];

        splashTimeouts.push(setTimeout(() => {
            console.log('开始miHoYo淡入动画');
            mihoyoImg.style.transition = 'opacity 1.5s ease-in';
            mihoyoImg.style.opacity = '1';
        }, 1000));

        splashTimeouts.push(setTimeout(() => {
            console.log('开始miHoYo淡出动画');
            mihoyoImg.style.transition = 'opacity 1.5s ease-out';
            mihoyoImg.style.opacity = '0';
        }, 4500));

        splashTimeouts.push(setTimeout(() => {
            console.log('开始启动图片淡入动画');
            startupImg.style.transition = 'opacity 1.5s ease-in';
            startupImg.style.opacity = '1';
        }, 8000));

        splashTimeouts.push(setTimeout(() => {
            console.log('开始启动图片淡出动画');
            startupImg.style.transition = 'opacity 1.5s ease-out';
            startupImg.style.opacity = '0';
        }, 11500));

        splashTimeouts.push(setTimeout(() => {
            console.log('开始背景淡出动画');
            splash.style.transition = 'opacity 1s ease-out';
            splash.style.opacity = '0';
        }, 14000));

        splashTimeouts.push(setTimeout(() => {
            console.log('移除启动动画层');
            try {
                if (splash && splash.parentNode) {
                    document.body.removeChild(splash);
                }
            } catch (e) {
                console.error('移除启动动画层时出错:', e);
            }
        }, 15000));

        document.addEventListener('keydown', function handleEsc(e) {
            if (e.key === 'Escape') {
                console.log('Esc 键按下，结束动画播放');

                splashTimeouts.forEach(clearTimeout);

                mihoyoImg.style.opacity = '0';
                startupImg.style.opacity = '0';

                if (splash && splash.parentNode) {
                    document.body.removeChild(splash);
                }

                document.removeEventListener('keydown', handleEsc);
            }
        });
    }
})();