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">
<title>狂沙危途 · DUSTSTORM OUTRUN</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&family=Rajdhani:wght@600;700&display=swap" rel="stylesheet">
<style>
:root{
  --sand:#e8c48a; --amber:#ffb454; --amber2:#ff9f1c; --ink:#1c1108;
  --panel:rgba(26,16,8,.80); --line:rgba(255,180,84,.45);
  --red:#ff4636; --yellow:#ffd23f; --green:#7ed957;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Rajdhani','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#1a0f06;font-family:var(--body);color:var(--sand)}
canvas#c3d{position:fixed;inset:0;display:block}
.hidden{display:none!important}

/* ---------- 全屏特效层 ---------- */
#flash{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,60,30,.25) 0%,rgba(255,30,10,.55) 100%)}
#sandVig{position:fixed;inset:0;pointer-events:none;z-index:29;opacity:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(158,104,42,.62) 100%)}
#lowVig{position:fixed;inset:0;pointer-events:none;z-index:29;opacity:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(180,20,10,.5) 100%);
  animation:lowPulse 1s ease-in-out infinite}
@keyframes lowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:40;font-family:var(--body)}
.panel{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)}
#hudTL{position:absolute;top:18px;left:18px;padding:12px 18px 14px;min-width:250px}
.hudLabel{font-size:11px;letter-spacing:.35em;color:rgba(232,196,138,.75);margin-bottom:6px}
#hpBar{width:230px;height:15px;background:rgba(0,0,0,.55);border:1px solid rgba(255,180,84,.35);position:relative;overflow:hidden}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#ff7a1a,#ffd23f);transition:width .18s ease}
#hpBar.low #hpFill{background:linear-gradient(90deg,#c81f10,#ff4636);animation:hpBlink .5s steps(2) infinite}
@keyframes hpBlink{50%{filter:brightness(1.7)}}
.chipRow{display:flex;gap:8px;margin-top:10px}
.chip{background:rgba(0,0,0,.4);border:1px solid rgba(255,180,84,.28);padding:4px 10px;font-family:var(--num)}
.chip b{font-size:17px;color:var(--amber);font-weight:700;margin-left:5px}
.chip span{font-size:10px;letter-spacing:.2em;color:rgba(232,196,138,.7)}

#hudTR{position:absolute;top:18px;right:18px;padding:10px 12px 8px;text-align:center}
#map{display:block;background:#c89a5f;border:1px solid rgba(60,35,12,.6)}
.mapLegend{display:flex;gap:10px;justify-content:center;margin-top:7px;font-size:10px;color:rgba(232,196,138,.85)}
.mapLegend i{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:-1px}
#muteBtn{pointer-events:auto;margin-top:8px;background:rgba(0,0,0,.45);border:1px solid var(--line);
  color:var(--sand);font-family:var(--num);font-size:12px;letter-spacing:.15em;padding:3px 12px;cursor:pointer;transition:.15s}
#muteBtn:hover{background:rgba(255,159,28,.25);transform:translateY(-1px)}

#speedo{position:absolute;right:18px;bottom:18px;padding:12px 20px 14px;text-align:right;min-width:190px}
#speedVal{font-family:var(--num);font-weight:700;font-size:64px;line-height:.95;color:#fff;
  text-shadow:0 0 18px rgba(255,159,28,.55)}
#speedUnit{font-size:11px;letter-spacing:.4em;color:rgba(232,196,138,.75)}
#gearVal{position:absolute;left:16px;bottom:16px;font-family:var(--num);font-weight:700;font-size:30px;color:var(--amber)}
#segs{display:flex;gap:3px;margin-top:8px;justify-content:flex-end}
#segs span{width:13px;height:7px;background:rgba(255,255,255,.13);transform:skewX(-18deg);transition:background .1s}
#segs span.on{background:linear-gradient(180deg,#ffd23f,#ff7a1a)}
#segs span.on.hot{background:linear-gradient(180deg,#ff8a5a,#ff2d1a)}

#hints{position:absolute;left:18px;bottom:18px;font-size:11px;color:rgba(232,196,138,.6);letter-spacing:.08em;line-height:1.9}
#hints b{color:var(--amber);font-family:var(--num);border:1px solid rgba(255,180,84,.4);padding:0 6px;margin-right:2px}

#warn{position:absolute;top:86px;left:50%;transform:translateX(-50%);padding:9px 30px 9px 22px;
  font-family:var(--disp);font-size:24px;letter-spacing:.18em;color:#fff;display:none;
  border-left:8px solid var(--yellow);background:rgba(60,20,5,.82);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
#warn.show{display:block;animation:warnBlink .55s steps(2) infinite}
#warn.danger{border-left-color:var(--red);color:#ffd9d4;text-shadow:0 0 14px rgba(255,60,40,.8)}
@keyframes warnBlink{50%{filter:brightness(1.55)}}
#toast{position:absolute;top:140px;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.25em;
  color:var(--yellow);opacity:0;transition:opacity .4s;text-shadow:0 2px 8px #000}

/* ---------- 覆盖屏 ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(18,9,3,.55) 0%,rgba(18,9,3,.82) 100%);overflow:auto}
.overlay::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(100deg,transparent 0 7px,.........完整代码请登录后点击上方下载按钮下载查看