three实现三维太空宇宙驾驶流浪地球穿越行星陨石游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维太空宇宙驾驶流浪地球穿越行星陨石游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>流浪地球 · 行星发动机</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@300;400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#030610; --panel:rgba(11,20,33,.82); --line:rgba(61,126,166,.42);
  --cyan:#7fe0ff; --cyan-dim:#4a8cb4; --amber:#ffb347; --orange:#ff7a2f;
  --red:#ff4d4d; --green:#7dffa8; --text:#dcecf7; --dim:#8fb0c6;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Rajdhani','Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:'Noto Sans SC',sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#scene{position:fixed;inset:0;z-index:0}
.hidden{display:none!important}

/* ---------- 全屏氛围层 ---------- */
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(2,5,10,.62) 100%)}
#scanlines{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
#dmgFlash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 140px 70px rgba(255,42,20,.85)}
#critOverlay{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  box-shadow:inset 0 0 90px 24px rgba(255,40,30,.4)}
body.critical #critOverlay{opacity:1;animation:critPulse 1.1s ease-in-out infinite}
@keyframes critPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- 通用面板 ---------- */
.panel{position:absolute;background:linear-gradient(160deg,rgba(14,25,40,.88),rgba(7,13,22,.74));
  border:1px solid var(--line);padding:12px 16px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.panel::before{content:'';position:absolute;top:0;left:0;width:16px;height:16px;
  border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.panel::after{content:'';position:absolute;bottom:0;right:0;width:16px;height:16px;
  border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}
.p-title{font-family:var(--disp);font-size:13px;letter-spacing:3px;color:var(--cyan)}
.p-title .dim{color:var(--cyan-dim);font-size:11px}
.p-title.sub{margin-top:10px;font-size:11px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#topLeft{top:18px;left:18px;min-width:300px}
#topLeft .big{margin:4px 0 6px}
#distVal{font-family:var(--num);font-weight:700;font-size:40px;letter-spacing:2px;color:#fff;
  text-shadow:0 0 16px rgba(127,224,255,.4)}
.unit{font-size:12px;color:var(--cyan-dim);margin-left:7px;letter-spacing:2px}
#topLeft .rows{display:flex;gap:18px}
.kv{display:flex;align-items:baseline;gap:5px}
.kv span{font-size:11px;color:var(--dim);letter-spacing:1px}
.kv b{font-family:var(--num);font-weight:600;font-size:19px;color:#fff}
.kv i{font-style:normal;font-size:10px;color:var(--cyan-dim)}
#missVal{color:var(--amber)}
#missVal.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.5);color:#fff}}

#topRight{top:18px;right:18px;width:252px}
#healthPct{float:right;font-family:var(--num);color:#fff;font-size:14px}
#healthBar{height:11px;margin-top:7px;border:1px solid var(--line);background:rgba(4,10,18,.8);
  background-image:repeating-linear-gradient(90deg,transparent 0 10px,rgba(3,6,12,.95) 10px 12px)}
#healthFill{height:100%;width:100%;transition:width .35s ease,background .35s}
#healthFill.ok{background:linear-gradient(90deg,#2f9fd0,#7fe0ff);box-shadow:0 0 10px rgba(127,224,255,.5)}
#healthFill.warn{background:linear-gradient(90deg,#c07a1f,#ffb347);box-shadow:0 0 10px rgba(255,179,71,.5)}
#healthFill.crit{background:linear-gradient(90deg,#a02020,#ff5348);box-shadow:0 0 12px rgba(255,80,60,.7);animation:critPulse 1s infinite}
#engStatus{color:var(--dim);font-size:11px;letter-spacing:1px}
#engineGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:8px}
.edot{height:9px;background:#5f3a1c;transform:skewX(-14deg);transition:all .3s}
.edot:not(.off){background:var(--cyan);box-shadow:0 0 8px rgba(127,224,255,.8);animation:dotFlk 2.4s infinite}
.edot.off{background:#2a2f36;box-shadow:none}
@keyframes dotFlk{0%,100%{opacity:1}50%{opacity:.72}}
.throttle{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--dim)}
#throttleBar{flex:1;height:8px;border:1px solid var(--line);background:rgba(4,10,18,.8)}
#throttleFill{height:100%;width:0;background:linear-gradient(90deg,#1a4fd0,#7fc4ff 60%,#ffb347);
  box-shadow:0 0 10px rgba(127,196,255,.6);transition:width .12s linear}
#throttlePct{font-family:var(--num);font-size:13px;color:#fff;min-width:38px;text-align:right}

#banner{position:fixed;top:86px;left:50%;transform:translateX(-50%);z-index:6;
  padding:10px 42px;background:rgba(64,10,8,.88);border:1px solid var(--red);color:#ffd9d2;
  font-family:var(--disp);font-size:16px;letter-spacing:4px;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  box-shadow:0 0 28px rgba(255,60,40,.45);animation:bannerPulse 1s infinite}
#banner::before,#banner::after{content:'';position:absolute;top:0;bottom:0;width:8px;
  background:repeating-linear-gradient(45deg,#ff4d4d 0 7px,transparent 7px 14px)}
#banner::before{left:10px}#banner::after{right:10px}
@keyframes bannerPulse{50%{opacity:.72}}

#toast{position:fixed;top:140px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:8px 26px;background:rgba(9,24,34,.92);border:1px solid rgba(127,224,255,.55);
  color:#cfeeff;font-size:14px;letter-spacing:2px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  animation:toastIn .3s ease}
.toast.warn{border-color:var(--amber);color:#ffe6b.........完整代码请登录后点击上方下载按钮下载查看