three三维沙漠飞船驾驶游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沙海远航 · DUNE RUNNER — 戈壁沙暴空域</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --cyan:#5fe8ff; --amber:#ffb454; --red:#ff5f4d;
  --panel:rgba(7,15,19,.55); --line:rgba(95,232,255,.38);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;
  font-family:'Rajdhani','PingFang SC','Microsoft YaHei',sans-serif;color:#dfeef4;
  -webkit-user-select:none;user-select:none}
canvas{display:block}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;transition:opacity .5s}
#hud.hidden{opacity:0}
.hud-panel{position:absolute;background:var(--panel);border:1px solid var(--line);
  padding:12px 18px;backdrop-filter:blur(3px);
  clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  box-shadow:inset 0 0 24px rgba(95,232,255,.06)}
.lbl{font-size:11px;letter-spacing:3px;color:rgba(95,232,255,.8);font-weight:600}
.val{font-family:'Orbitron',monospace;font-size:30px;font-weight:700;color:#fff;
  text-shadow:0 0 12px rgba(95,232,255,.55);line-height:1.1}
.unit{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:2px}
#pSpeed{left:22px;top:22px;min-width:150px}
#pScore{right:22px;top:22px;text-align:right;min-width:190px}
#pScore .val{color:var(--amber);text-shadow:0 0 14px rgba(255,180,84,.5)}
#pBars{left:22px;bottom:22px}
.bar-row{display:flex;align-items:center;gap:10px;margin-top:7px}
.bar-name{width:52px;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.75)}
.bar{width:215px;height:9px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2bd6c8,var(--cyan));
  box-shadow:0 0 10px rgba(95,232,255,.6);transition:width .12s linear}
#energyFill{background:linear-gradient(90deg,#ff9a3a,var(--amber));box-shadow:0 0 10px rgba(255,180,84,.6)}
.bar.low i{background:linear-gradient(90deg,#ff3b2e,#ff8a3a)!important;animation:blink .5s steps(2) infinite}
#boostTag{margin-top:9px;font-family:'Orbitron';font-size:12px;letter-spacing:4px;color:var(--amber);
  opacity:0;transition:opacity .15s;text-shadow:0 0 10px rgba(255,180,84,.8)}
#boostTag.on{opacity:1;animation:blink .3s steps(2) infinite}
#pWeather{right:22px;bottom:22px;text-align:right;font-size:13px;letter-spacing:2px}
#weatherTag{font-family:'Orbitron';font-size:15px;color:var(--cyan)}
#warn{position:absolute;top:11%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:'Orbitron','Microsoft YaHei';font-size:19px;font-weight:700;letter-spacing:5px;
  padding:9px 30px;border:1px solid transparent;opacity:0;transition:opacity .4s}
#warn.show{opacity:1}
#warn.amber{color:var(--amber);border-color:rgba(255,180,84,.4);text-shadow:0 0 16px rgba(255,180,84,.8);animation:pulse 1.2s ease-in-out infinite}
#warn.red{color:var(--red);border-color:rgba(255,95,77,.45);text-shadow:0 0 18px rgba(255,60,40,.9);animation:blink .6s steps(2) infinite}
@keyframes pulse{50%{opacity:.55}}
@keyframes blink{50%{opacity:.25}}
#reticle{position:absolute;left:50%;top:47%;width:52px;height:52px;transform:translate(-50%,-50%);
  border:1px solid rgba(95,232,255,.4);border-radius:50%;opacity:.7}
#reticle::before,#reticle::after{content:'';position:absolute;background:rgba(95,232,255,.55)}
#reticle::before{left:50%;top:-8px;width:1px;height:10px;box-shadow:0 58px 0 rgba(95,232,255,.55)}
#reticle::after{top:50%;left:-8px;height:1px;width:10px;box-shadow:58px 0 0 rgba(95,232,255,.55)}
#toasts{position:fixed;bottom:20%;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;
  display:flex;flex-direction:column-reverse;align-items:center;gap:6px}
.toast{font-family:'Orbitron','Microsoft YaHei'.........完整代码请登录后点击上方下载按钮下载查看