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">
<title>展翼飞驰 · WING RUSH</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --cyan:#3ee6ff; --amber:#ffb454; --red:#ff5a4e;
  --ink:#07111c; --panel:rgba(8,18,28,.84);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a1622;font-family:"Noto Sans SC",sans-serif;user-select:none}
canvas{display:block}
.disp{font-family:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif}
.num{font-family:"Orbitron","Noto Sans SC",monospace}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;color:#dff3ff}
.panel{position:absolute;background:var(--panel);padding:12px 18px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:inset 0 0 0 1px rgba(62,230,255,.28)}
#scorePanel{top:18px;left:18px;min-width:190px}
#scorePanel .lbl{font-family:Orbitron;font-size:10px;letter-spacing:.35em;color:var(--cyan);opacity:.85}
#scoreV{font-family:Orbitron;font-weight:900;font-size:40px;line-height:1;color:#fff;text-shadow:0 0 18px rgba(62,230,255,.45)}
#scoreV.pop{animation:pop .28s}
@keyframes pop{40%{transform:scale(1.14);color:var(--amber)}}
#distV{font-size:12px;color:#9fc6dd;margin-top:4px}
#comboV{margin-top:6px;font-family:Orbitron;font-weight:700;font-size:18px;color:var(--amber);
  opacity:0;transform:translateY(-4px);transition:.25s}
#comboV.on{opacity:1;transform:none}

#statusPanel{top:18px;right:18px;width:250px}
.barRow{margin:7px 0}
.barRow label{display:flex;justify-content:space-between;font-family:Orbitron;font-size:10px;letter-spacing:.25em;color:#9fc6dd;margin-bottom:4px}
.bar{height:9px;background:#0d2233;transform:skewX(-18deg);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bar i{display:block;height:100%;width:100%;transition:width .18s}
#hullFill{background:linear-gradient(90deg,var(--amber),#ffd28a)}
#energyFill{background:linear-gradient(90deg,#19b8d8,var(--cyan))}
#energyFill.low{background:linear-gradient(90deg,#ff7a3c,var(--red));animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.45}}

#speedCluster{position:absolute;right:26px;bottom:22px;text-align:right}
#speedV{font-family:Orbitron;font-weight:900;font-size:82px;line-height:.9;color:#fff;text-shadow:0 0 26px rgba(62,230,255,.5)}
#speedCluster .unit{font-family:Orbitron;font-size:13px;letter-spacing:.3em;color:var(--cyan)}
#altChip{display:inline-block;margin-top:8px;padding:4px 14px;font-family:Orbitron;font-size:14px;color:#031018;
  background:var(--cyan);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  opacity:0;transform:translateY(8px);transition:.3s}
#altChip.on{opacity:1;transform:none}

#modeBadge{position:absolute;left:26px;bottom:24px;display:flex;align-items:center;gap:10px;
  padding:10px 20px;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(62,230,255,.28);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:.3s}
#modeBadge svg{width:26px;height:26px;transition:.4s}
#modeBadge .mt{font-family:Orbitron;font-size:12px;letter-spacing:.2em;color:#9fc6dd}
#modeBadge .ms{font-size:17px;font-weight:700;color:#fff}
#modeBadge.fly{box-shadow:inset 0 0 0 1px var(--cyan),0 0 24px rgba(62,230,255,.35)}
#modeBadge.fly svg{transform:rotate(-14deg) scale(1.15);filter:drop-shadow(0 0 6px var(--cyan))}
#modeBadge.fly .ms{color:var(--cyan)}

#keys{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:14px;font-size:12px;color:#8fb4c9;white-space:nowrap}
kbd{font-family:Orbitron;font-size:10px;padding:3px 7px;border:1px solid rgba(160,220,255,.4);border-bottom-width:2px;
  border-radius:4px;color:#cfeaff;background:rgba(10,25,38,.7);margin-right:5px}

#toasts{position:absolute;top:16%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:8px 26px;font-size:18px;font-weight:700;color:#fff;background:rgba(8,20,32,.85);
  box-shadow:inset 0 0 0 1px rgba(255,180,84,.55);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  animation:tin .3s, tout .4s 1.5s forwards}
.toast.cyan{box-shadow:inset 0 0 0 1px rgba(62,230,255,.65)}
.toast.red{box-shadow:inset 0 0 0 1px rgba(255,90,78,.75);color:#ffd6d2}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.9)}}
@keyframes tout{to{opacity:0;transform:translateY(-10px)}}

#vignette{position:fixed;inset:0;pointer-events:none;z-index:8;background:radial-gradient(ellipse at center,transparent 62%,rgba(2,8,14,.55) 100%)}
#boostfx{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(62.........完整代码请登录后点击上方下载按钮下载查看