返回主页
景安游乐场 · 3D 星际穿梭 II (Hyperdrive Warp II)
基于图片源码深度优化的 3D 穿梭特效。全屏载入一万个璀璨星体,完全采用图片的 pos 投影与 alpha 线性透视算法,加入了琥珀金 HUD 未来控制台,并支持极速下的超长白光拉伸拖尾效果。
💻 仅代码
🌓 左右分屏
👁️ 仅看特效
运行调试
实时源码编辑器 (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)
实时可交互