代码语言：html

所属分类：其他

代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维沙漠悬浮飞船驾驶游戏

代码标签： 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, maximum-scale=1.0, user-scalable=no">
<title>DUNE RUNNER · 赤沙疾影 — 沙漠悬浮竞速（修复版）</title>
<style>
/* ============================================================
   视觉系统：赤沙暮色 × 品红尾焰 × 电光青 HUD
   ============================================================ */
:root{
  --sand:#d27a3c; --amber:#ffb347; --magenta:#ff2bd6; --cyan:#35e0ff;
  --teal:#2bffb0; --danger:#ff4d5e; --ink:#fff4e6; --dim:#d9b49a;
  --panel:linear-gradient(160deg,rgba(48,16,50,.74),rgba(22,8,30,.84));
  --line:rgba(255,158,96,.30);
  --mono:"Consolas","SF Mono","Menlo","Courier New",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#1a0b1e;font-family:var(--sans);color:var(--ink);
  -webkit-user-select:none;user-select:none;touch-action:none}
#app{position:fixed;inset:0}
#app canvas{display:block}
.hidden{display:none!important}

/* 与主题一致的滚动条 */
.scroll{scrollbar-width:thin;scrollbar-color:#ff2bd6 rgba(40,14,42,.6)}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-track{background:rgba(255,158,96,.08);border-radius:4px}
.scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff2bd6,#ff7a3c);border-radius:4px}
.scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff5ce4,#ffa04d)}

/* ---------------- HUD 面板 ---------------- */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  backdrop-filter:blur(4px)}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.panel::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;
  background:linear-gradient(90deg,var(--magenta),transparent);pointer-events:none}

#hud{position:fixed;inset:0;z-index:5;pointer-events:none;transition:opacity .4s}
#hud.off{opacity:0}

#brand{position:absolute;top:14px;left:16px}
#brand .b1{font-weight:900;font-size:17px;letter-spacing:.14em;
  background:linear-gradient(90deg,var(--amber),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
#brand .b2{font-size:11px;letter-spacing:.32em;color:var(--dim);margin-top:2px}

#timerPanel{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  padding:8px 26px 9px;text-align:center;min-width:230px}
#timer{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:.06em;
  text-shadow:0 0 14px rgba(255,43,214,.45)}
#gateCount{font-size:12px;letter-spacing:.24em;color:var(--amber);margin-top:1px}
#parTime{font-size:10px;letter-spacing:.14em;color:var(--dim);margin-top:2px;font-family:var(--mono)}

#globalTools{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:8px}
.hbtn{pointer-events:auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.hbtn:hover{transform:translateY(-2px);border-color:var(--magenta);box-shadow:0 0 14px rgba(255,43,214,.35)}
.hbtn:active{transform:scale(.94)}
.hbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hbtn:focus-visible{outline:2px solid var(--cyan)}
#hudTools{position:absolute;top:14px;right:66px;display:flex;gap:8px}
#radarWrap{position:absolute;top:66px;right:14px;width:158px;padding:6px 6px 4px;text-align:center}
#radarWrap .rl{font-size:9px;letter-spacing:.34em;color:var(--dim);margin-top:2px}
#minimap{width:146px;height:146px;display:block;margin:0 auto}

/* HTML/CSS 准星：白色半透明圆环 + 十字 */
#crosshair{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;opacity:.85}
#crosshair .ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.75);border-radius:50%;
  box-shadow:0 0 12px rgba(255,255,255,.28),inset 0 0 10px rgba(255,255,255,.12)}
#crosshair .tick{position:absolute;background:rgba(255,255,255,.85)}
#crosshair .tN{left:50%;top:-13px;width:2px;height:11px;margin-left:-1px}
#crosshair .tS{left:50%;bottom:-13px;width:2px;height:11px;margin-left:-1px}
#crosshair .tW{top:50%;left:-13px;height:2px;width:11px;margin-top:-1px}
#crosshair .tE{top:50%;right:-13px;height:2px;width:11px;margin-top:-1px}
#crosshair .dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px #fff}
#crosshair.hit .ring{animation:hitPulse .38s ease-out}
@keyframes hitPulse{0%{transform:scale(1);border-color:var(--teal)}45%{transform:scale(1.4);border-color:var(--teal);
  box-shadow:0 0 26px rgba(43,255,176,.8)}100%{transform:scale(1)}}

#boostWrap{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(420px,46vw);text-align:center}
#boostWrap .bl{font-size:10px;letter-spacing:.3em;color:var(--dim);margin-bottom:5px}
#boostBar{height:11px;background:rgba(30,10,34,.7);border:1px solid var(--line);transform:skewX(-18deg);overflow:hidden}
#boostFill{height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 12px rgba(255,43,214,.6);transition:width .08s linear}
#boostWrap.low #boostFill{background:linear-gradient(90deg,#ff7a3c,var(--amber))}
#boostWrap.active #boostBar{box-shadow:0 0 18px rgba(255,43,214,.75);border-color:var(--magenta)}
#boostWrap.active .bl{color:var(--magenta);text-shadow:0 0 10px rgba(255,43,214,.8)}

#speedo{position:absolute;right:16px;bottom:18px;width:196px;padding:8px 10px 10px;text-align:center}
#speedo svg{width:100%;display:block}
#speedVal{font-family:var(--mono);font-size:31px;font-weight:700;margin-top:-34px;text-shadow:0 0 12px rgba(53,224,255,.4)}
#speedo .unit{font-size:10px;letter-spacing:.3em;color:var(--dim)}
#boostTag{font-size:10px;letter-spacing:.28em;color:var(--magenta);height:13px;margin-top:2px;opacity:0;
  text-shadow:0 0 10px rgba(255,43,214,.9)}
#speedo.od #boostTag{opacity:1;animation:odBlink .5s steps(2) infinite}
#speedo.od #speedVal{color:#ffd9f6;text-shadow:0 0 16px rgba(255,43,214,.9)}
@keyframes odBlink{50%{opacity:.35}}

#controlsHint{position:absolute;left:16px;bottom:18px;padding:10px 14px;font-size:11px;line-height:2;color:var(--dim)}
kbd{display:inline-block;min-width:20px;text-align:center;padding:1px 6px;margin-right:4px;font-family:var(--mono);font-size:10px;
  color:#ffd9b0;background:rgba(255,180,120,.12);border:1px solid rgba(255,180,120,.42);border-radius:4px}

#marker{position:absolute;left:0;top:0;transform:translate(-50%,-50%);text-align:center;will-change:transform}
#markerShape{width:20px;height:20px;margin:0 auto;position:relative}
#markerShape.diamond{border:2px solid var(--magenta);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(255,43,214,.8),inset 0 0 8px rgba(255,43,214,.5);animation:mPulse 1.1s ease-in-out infinite}
#markerShape.arrow{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:17px solid var(--magenta);filter:drop-shadow(0 0 8px rgba(255,43,214,.9))}
@keyframes mPulse{50%{transform:rotate(45deg) scale(1.22)}}
#markerDist{font-family:var(--mono);font-size:11px;color:#ffd9f6;margin-top:7px;text-shadow:0 1px 4px #1a0b1e,0 0 8px rgba(255,43,214,.7)}

#toasts{position:absolute;top:104px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center}
.toast{padding:7px 18px;font-size:12px;letter-spacing:.12em;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论