3D 星际穿梭 II (Hyperdrive Warp II) · 特效源代码交互游乐场

实时源码编辑器 (HTML/CSS/JS) 支持 Tab 缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 星际穿梭 II (Hyperdrive Warp II)</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #00050c;
            font-family: 'Segoe UI', -apple-system, sans-serif;
            color: #ffffff;
        }

        #space {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1;
        }

        /* 深空背景渐变，营造更加深邃的宇宙感 */
        .deep-space-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 70% 20%, rgba(244, 63, 94, 0.06) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(0, 10, 20, 1) 0%, #000308 100%);
            z-index: 0;
            pointer-events: none;
        }

        /* 极速跃迁时的全屏震颤与白光 */
        .warp-flash {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            opacity: 0;
            z-index: 2;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        /* 琥珀金/橙色系未来科技感 HUD 面板 */
        .hud-panel {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 330px;
            background: rgba(12, 10, 8, 0.65);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 16px;
            padding: 24px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(245, 158, 11, 0.05);
            z-index: 10;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform-origin: top left;
        }

        .hud-panel.minimized {
            transform: scale(0) translate(-50px, -50px);
            opacity: 0;
            pointer-events: none;
        }

        .hud-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(245, 158, 11, 0.2);
            padding-bottom: 12px;
            margin-bottom: 16px;
        }

        .hud-title {
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 1.5px;
            color: #f59e0b;
            text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f59e0b;
            box-shadow: 0 0 8px #f59e0b;
            animation: pulse 1.2s infinite alternate;
        }

        @keyframes pulse {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .hud-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 13px;
        }

        .hud-label {
            color: rgba(255, 255, 255, 0.5);
        }

        .hud-value {
            font-family: monospace;
            font-weight: bold;
            color: #f59e0b;
            text-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
        }

        /* 联动滑动条 */
        .control-group {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid rgba(245, 158, 11, 0.1);
        }

        .control-title {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }

        .slider-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            height: 4px;
            border-radius: 2px;
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background: #f59e0b;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
            transition: transform 0.1s;
        }

        input[type=range]::-webkit-slider-thumb:hover {
            transform: scale(1.3);
        }

        /* 操作提示卡 */
        .tips-box {
            background: rgba(245, 158, 11, 0.05);
            border-left: 2px solid #f59e0b;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.5;
            margin-top: 16px;
        }

        /* 显示/隐藏控制面板的按钮 */
        .toggle-hud-btn {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(12, 10, 8, 0.7);
            border: 1px solid rgba(245, 158, 11, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        .toggle-hud-btn:hover {
            border-color: #f59e0b;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
            transform: scale(1.05);
        }

        .toggle-hud-btn svg {
            width: 20px;
            height: 20px;
            fill: #f59e0b;
            transition: transform 0.4s;
        }

        /* 引导长按激活跃迁 */
        .boost-prompt {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            font-size: 12px;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.5);
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(245, 158, 11, 0.15);
            padding: 10px 24px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            pointer-events: none;
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .boost-prompt.warp-active {
            opacity: 0;
            transform: translateX(-50%) translateY(20px) scale(0.9);
        }

        .boost-indicator {
            width: 6px;
            height: 6px;
            background-color: #f59e0b;
            border-radius: 50%;
            box-shadow: 0 0 8px #f59e0b;
            display: inline-block;
            animation: pulse-orange 1s infinite alternate;
        }

        @keyframes pulse-orange {
            0% { transform: scale(0.8); opacity: 0.5; }
            100% { transform: scale(1.3); opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="deep-space-bg"></div>
    <div class="warp-flash" id="warpFlash"></div>
    <canvas id="space"></canvas>

    <!-- 右上角 HUD 显隐开关 -->
    <button class="toggle-hud-btn" id="toggleHud" title="显示/隐藏控制面板">
        <svg viewBox="0 0 24 24">
            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
    </button>

    <!-- HUD 信息面板 -->
    <div class="hud-panel" id="hudPanel">
        <div class="hud-header">
            <div class="hud-title">
                <span class="status-dot"></span>
                <span>星际穿梭 II 控制台</span>
            </div>
            <div style="font-size: 11px; color: rgba(255,255,255,0.4); font-family: monospace;">WARP: v2.0</div>
        </div>

        <div class="hud-row">
            <span class="hud-label">粒子跃迁速度 (Speed)</span>
            <span class="hud-value" id="valSpeed">1.00</span>
        </div>
        <div class="hud-row">
            <span class="hud-label">3D 透视焦距 (FocalLength)</span>
            <span class="hud-value" id="valFov">2000</span>
        </div>
        <div class="hud-row">
            <span class="hud-label">璀璨星团容积 (NumStars)</span>
            <span class="hud-value" id="valCount">10000</span>
        </div>
        <div class="hud-row">
            <span class="hud-label">跃迁引擎状态 (Engine)</span>
            <span class="hud-value" id="valEngine" style="color: #f59e0b;">CRUISE</span>
        </div>

        <!-- 参数控制滑条 -->
        <div class="control-group">
            <div class="control-title">
                <span>巡航基速 (Cruise Speed)</span>
                <span id="sliderSpeedText">1.0</span>
            </div>
            <div class="slider-wrapper">
                <input type="range" id="sliderSpeed" min="0.1" max="5.0" step="0.1" value="1.0">
            </div>
        </div>

        <div class="control-group">
            <div class="control-title">
                <span>鼠标感应系数 (Influence)</span>
                <span id="sliderInfluenceText">0.2</span>
            </div>
            <div class="slider-wrapper">
                <input type="range" id="sliderInfluence" min="0.05" max="0.8" step="0.05" value="0.2">
            </div>
        </div>

        <div class="control-group">
            <div class="control-title">
                <span>星辰容积 (Star Density)</span>
                <span id="sliderCountText">10000</span>
            </div>
            <div class="slider-wrapper">
                <input type="range" id="sliderCount" min="2000" max="15000" step="500" value="10000">
            </div>
        </div>

        <div class="tips-box">
            👉 <b>鼠标滚动</b>：线性改变跃迁基速<br>
            👉 <b>移动鼠标</b>：控制航偏（解算 3D 偏转视差）<br>
            👉 <b>点击屏幕</b>：激活 <b>超光速拉伸拖尾</b> (Speed > 10)
        </div>
    </div>

    <!-- 引导长按激活跃迁 -->
    <div class="boost-prompt" id="boostPrompt">
        <span class="boost-indicator"></span>
        <span>点击或长按屏幕激活 <b>HYPER WARP</b> (拖尾特效)</span>
    </div>

    <script>
        const canvas = document.getElementById("space");
        const c = canvas.getContext("2d");
        const raf = window.requestAnimationFrame;

        const hudPanel = document.getElementById("hudPanel");
        const toggleHud = document.getElementById("toggleHud");
        const warpFlash = document.getElementById("warpFlash");
        const boostPrompt = document.getElementById("boostPrompt");

        // HUD 面板数值显示
        const valSpeed = document.getElementById("valSpeed");
        const valFov = document.getElementById("valFov");
        const valCount = document.getElementById("valCount");
        const valEngine = document.getElementById("valEngine");

        // Sliders 和文本
        const sliderSpeed = document.getElementById("sliderSpeed");
        const sliderInfluence = document.getElementById("sliderInfluence");
        const sliderCount = document.getElementById("sliderCount");
        const sliderSpeedText = document.getElementById("sliderSpeedText");
        const sliderInfluenceText = document.getElementById("sliderInfluenceText");
        const sliderCountText = document.getElementById("sliderCountText");

        // ======= 完全对齐图片源码的配置参数结构 =======
        const cfg = {
            numStars: 10000,               // 星星数量
            focallength: canvas.width * 2, // 焦距：影响3D效果
            mouseInfluence: 0.2,          // 鼠标影响系数
            speed: 1,                      // 移动速度
            maxStarSize: 5,                // 星星最大尺寸
            fadeStartZ: 200,               // 开始淡出的距离
            fadeEndZ: 100                  // 完全消失的距离
        };

        let stars = [], cx, cy, mx = 0, my = 0;
        let baseSpeed = 1.0;               // 巡航基准速度
        let targetSpeed = 1.0;             // 缓动目标速度
        let isBoosting = false;

        // ======= 初始化星群数据 (对齐图片源码) =======
        function init() {
            cx = canvas.width / 2;
            cy = canvas.height / 2;
            cfg.focallength = canvas.width * 2; // 动态更新焦距
            valFov.textContent = Math.round(cfg.focallength);

            stars = Array.from({ length: cfg.numStars }, () => ({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                z: Math.random() * canvas.width,
                o: '0.' + Math.floor(Math.random() * 99) + 1, // 随机透明度
                px: 0, // 上一帧x坐标
                py: 0, // 上一帧y坐标
                pz: 0  // 上一帧z坐标
            }));
        }

        // ======= 套用透视投影公式 (完全对齐图片源码) =======
        // 屏幕 = (世界坐标 - 中心) * (焦距 / z) + 中心
        function pos(x, y, z) {
            const scale = cfg.focallength / z;
            return {
                x: (x - cx) * scale + cx,
                y: (y - cy) * scale + cy,
                size: Math.min(cfg.maxStarSize, scale) // 限制星星大小
            };
        }

        // ======= 计算尾部透明度实现平滑流出效果 (完全对齐图片源码) =======
        function alpha(z) {
            if (z <= cfg.fadeStartZ) {
                // 线性插值计算透明度
                return Math.max(0, Math.min(1, (z - cfg.fadeEndZ) / (cfg.fadeStartZ - cfg.fadeEndZ)));
            }
            return 1;
        }

        // ======= 更新星星位置 (完全对齐图片源码) =======
        function move() {
            stars.forEach(star => {
                // 保存当前位置用于绘制线
                star.px = star.x;
                star.py = star.y;
                star.pz = star.z;

                star.z -= cfg.speed;
                // 鼠标影响航向
                star.x += mx * cfg.mouseInfluence / star.z;
                star.y += my * cfg.mouseInfluence / star.z;

                // 重置飞出视界的星星
                if (star.z < cfg.fadeEndZ) {
                    star.z = canvas.width;
                    star.x = Math.random() * canvas.width;
                    star.y = Math.random() * canvas.height;
                    // ES6 数组解构赋值重置上一帧
                    [star.px, star.py, star.pz] = [star.x, star.y, star.z];
                }
            });
        }

        // ======= 渲染星辰与高速拖尾 (完全对齐并扩充图片源码) =======
        function draw() {
            // 自适应画布大小
            if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                init();
            }

            // 清空画布 (图片源码：rgb(0,10,20))
            c.fillStyle = "rgb(0,10,20)";
            c.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制每个星星
            stars.forEach(star => {
                const curr = pos(star.x, star.y, star.z);
                const a = alpha(star.z);

                // 高速时绘制拖尾 (图片源码判定：cfg.speed > 10)
                if (cfg.speed > 10) {
                    const prev = pos(star.px, star.py, star.pz);
                    c.beginPath();
                    c.moveTo(prev.x, prev.y);
                    c.lineTo(curr.x, curr.y);
                    c.strokeStyle = `rgba(255, 255, 255, ${0.3 * a})`;
                    c.lineWidth = curr.size;
                    c.stroke();
                }

                // 绘制常规星星
                c.beginPath();
                c.arc(curr.x, curr.y, curr.size > 0.1 ? curr.size : 0.1, 0, Math.PI * 2);
                c.fillStyle = `rgba(255, 255, 255, ${parseFloat(star.o) * a})`;
                c.fill();
            });
        }

        // ======= 动画主循环 (完全对齐图片源码) =======
        function loop() {
            raf(loop);
            
            // 物理平滑速度 Lerp 过渡
            cfg.speed += (targetSpeed - cfg.speed) * 0.08;
            valSpeed.textContent = cfg.speed.toFixed(2);

            move();
            draw();
        }

        // 默认初始化
        init();
        loop();

        // ======= 鼠标事件处理 (完全对齐图片源码) =======
        document.addEventListener('mousemove', e => {
            mx = e.clientX - cx;
            my = e.clientY - cy;
        });

        // 滚轮动态改变巡航基速 (完全对齐图片源码：cfg.speed = Math.max(0.1, Math.min(50, cfg.speed - e.deltaY * 0.01)))
        document.addEventListener('wheel', e => {
            if (isBoosting) return; // 暴走模式下锁定
            
            // 使用原图完全一致的公式：
            cfg.speed = Math.max(0.1, Math.min(50, cfg.speed - e.deltaY * 0.01));
            
            // 同时更新巡航基速、目标速度和控制面板，确保 HUD 完美联动
            baseSpeed = cfg.speed;
            targetSpeed = cfg.speed;
            
            sliderSpeed.value = cfg.speed.toFixed(1);
            sliderSpeedText.textContent = cfg.speed.toFixed(1);
        }, { passive: true });

        // ======= 跃迁加速 (Warp Boost) 辅助机制 =======
        function startBoost() {
            isBoosting = true;
            targetSpeed = 24.0; // 超光速：完美触发 speed > 10 的拖尾特写！
            valEngine.textContent = "HYPER WARP";
            valEngine.style.color = "#f59e0b";
            warpFlash.style.opacity = "0.2";
            boostPrompt.classList.add("warp-active");
            setTimeout(() => {
                warpFlash.style.opacity = "0";
            }, 150);
        }

        function endBoost() {
            isBoosting = false;
            targetSpeed = baseSpeed;
            valEngine.textContent = "CRUISE";
            valEngine.style.color = "#10b981";
            boostPrompt.classList.remove("warp-active");
        }

        // 点击屏幕激活超光速拉伸拖尾
        window.addEventListener("mousedown", (e) => {
            if (hudPanel.contains(e.target) || toggleHud.contains(e.target)) return;
            startBoost();
        });

        window.addEventListener("mouseup", () => {
            if (isBoosting) endBoost();
        });

        // 移动端触屏支持
        window.addEventListener("touchstart", (e) => {
            if (hudPanel.contains(e.target) || toggleHud.contains(e.target)) return;
            startBoost();
        });
        window.addEventListener("touchend", () => {
            if (isBoosting) endBoost();
        });

        // HUD 面板展开收起
        toggleHud.addEventListener("click", () => {
            hudPanel.classList.toggle("minimized");
        });

        // ======= Sliders 控制绑定 =======
        sliderSpeed.addEventListener("input", (e) => {
            baseSpeed = parseFloat(e.target.value);
            sliderSpeedText.textContent = baseSpeed.toFixed(1);
            if (!isBoosting) {
                targetSpeed = baseSpeed;
            }
        });

        sliderInfluence.addEventListener("input", (e) => {
            cfg.mouseInfluence = parseFloat(e.target.value);
            sliderInfluenceText.textContent = cfg.mouseInfluence.toFixed(2);
        });

        sliderCount.addEventListener("input", (e) => {
            cfg.numStars = parseInt(e.target.value);
            sliderCountText.textContent = cfg.numStars;
            valCount.textContent = cfg.numStars;
            init(); // 重新生成星群
        });
    </script>
</body>
</html>
实时渲染沙盒视窗 (Sandboxed Sandbox) 实时可交互