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>陨坠之城 · 末日流星雨驾驶</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Rajdhani:wght@500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --ember:#ff7a1f; --hot:#ffc24b; --blood:#ff3b2f; --ash:#9a8d80;
  --panel:rgba(18,10,7,.82); --line:rgba(255,122,31,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0c0605;font-family:'Noto Sans SC',sans-serif;color:#e8dccd}
canvas{display:block}
#game{position:fixed;inset:0}
.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif}
.num{font-family:'Rajdhani','Noto Sans SC',sans-serif}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.panel{background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),var(--panel);
  border:1px solid var(--line);box-shadow:0 0 24px rgba(255,90,20,.12) inset,0 4px 18px rgba(0,0,0,.5);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.lbl{font-size:11px;letter-spacing:.35em;color:var(--ash);font-weight:500}
#topLeft{position:absolute;top:18px;left:18px;padding:12px 18px 14px;min-width:250px}
#hpWrap{height:15px;background:#1a0d08;border:1px solid #4a2a18;margin:7px 0 9px;transform:skewX(-16deg);overflow:hidden}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#ffd23f,#ff7a1f 55%,#ff3b2f);transition:width .18s;box-shadow:0 0 12px rgba(255,122,31,.7)}
#hpFill.low{animation:hpBlink .5s infinite alternate}
@keyframes hpBlink{to{filter:brightness(1.8)}}
#topLeft .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#cbb89f}
#topLeft .row b{font-size:20px;color:var(--hot)}
#topCenter{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:8px 26px 10px;text-align:center}
#timeVal{font-size:34px;font-weight:700;color:#ffdca4;line-height:1;text-shadow:0 0 16px rgba(255,140,50,.55)}
#subLine{font-size:12px;color:var(--ash);margin-top:4px;letter-spacing:.12em}
#subLine em{font-style:normal;color:var(--hot)}
#topRight{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#mmPanel{padding:8px}
#minimap{display:block;border:1px solid #3a2416}
#mmBadge{font-size:12px;letter-spacing:.2em;color:#ffb27a;text-align:center;padding-top:6px}
#mmBadge b{color:var(--blood);font-size:16px}
#muteBtn{pointer-events:auto;width:42px;height:42px;background:var(--panel);border:1px solid var(--line);color:#ffc98a;
  font-size:18px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:.15s}
#muteBtn:hover{background:#33180c;transform:translateY(-2px)}
#speedPanel{position:absolute;right:18px;bottom:18px;padding:10px 22px 12px;text-align:right}
#speedVal{font-size:56px;font-weight:700;line-height:.9;color:#ffe9c4;text-shadow:0 0 20px rgba(255,140,50,.4)}
#speedPanel .unit{font-size:13px;letter-spacing:.3em;color:var(--ash)}
#driftTag{display:none;margin-top:4px;font-size:14px;letter-spacing:.3em;color:var(--blood);font-weight:900;animation:hpBlink .3s infinite alternate}
#hintBar{position:absolute;left:18px;bottom:18px;padding:9px 16px;font-size:12px;letter-spacing:.15em;color:#c9b394;opacity:0}
#hintBar.show{animation:hintFade 6s forwards}
@keyframes hintFade{0%{opacity:0}8%{opacity:1}75%{opacity:1}100%{opacity:0}}
kbd{font-family:'Rajdhani';font-weight:700;font-size:12px;background:#241309;border:1px solid #5a3a22;border-bottom-width:3px;border-radius:4px;padding:1px 7px;color:#ffcf96;margin:0 2px}

/* 警报 & 飘字 */
#alertBox{position:absolute;top:16%;left:50%;transform:translateX(-50%) scale(.7);padding:10px 34px;font-size:22px;letter-spacing:.25em;
  color:#ffd9a0;background:rgba(60,10,5,.85);border:1px solid var(--blood);box-shadow:0 0 30px rgba(255,59,47,.35);opacity:0;transition:.2s;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
#alertBox.show{opacity:1;transform:translateX(-50%) scale(1);animation:alertPulse .5s infinite alternate}
@keyframes alertPulse{to{box-shadow:0 0 46px rgba(255,59,47,.7)}}
#popups{position:absolute;inset:0;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,0);font-family:'ZCOOL QingKe HuangYou';font-size:24px;color:var(--hot);
  text-shadow:0 0 14px rgba(255,120,30,.8),0 2px 2px #000;white-space:nowrap;animation:popFloat 1.15s forwards}
.pop.bad{color:#ff5a45}.pop.big{font-size:34px}
@keyframes popFloat{0%{opacity:0;transform:translate(-50%,0) scale(.5)}14%{opacity:1;transform:translate(-50%,-12px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-78px) scale.........完整代码请登录后点击上方下载按钮下载查看