three实现三维死亡列车生存游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维死亡列车生存游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>死亡列车 · DEATH TRAIN</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚂</text></svg>">
<style>
:root{
  --coal:#120d0b;--panel:#1d1411;--panel2:#261913;--rust:#b7412a;--rust-d:#7a2a1c;
  --yellow:#f2b632;--warn:#ff3b30;--green:#57c95c;--gold:#ffd257;--night:#24354f;
  --steel:#9a938b;--bone:#e8ddca;--dim:#b3a globe;}
:root{--dim:#b3a693;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--coal);color:var(--bone);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#160f0c;border-left:1px solid #3a241a}
::-webkit-scrollbar-thumb{background:linear-gradient(#b7412a,#7a2a1c);border:2px solid #160f0c;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#f2b632,#b7412a)}
*{scrollbar-width:thin;scrollbar-color:#b7412a #160f0c}
#game{position:fixed;inset:0}
#game canvas{display:block;touch-action:none}
.hidden{display:none!important}
.mono{font-family:Consolas,"Courier New",monospace}
.disp{font-family:Impact,"Arial Black","Microsoft YaHei",sans-serif;letter-spacing:.06em}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid #6b4a33;border-bottom-width:3px;border-radius:5px;
  background:#2a1c14;color:var(--yellow);font:700 11px Consolas,monospace;text-align:center;margin:0 2px}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20;font-size:13px}
.plate{background:linear-gradient(160deg,rgba(38,25,19,.92),rgba(20,13,10,.92));
  border:1px solid #5a3423;border-left:3px solid var(--rust);border-radius:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(242,182,50,.12);padding:8px 10px;position:relative}
.plate::before,.plate::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#e8b25a,#5a3018);top:5px}
.plate::before{left:5px}.plate::after{right:5px}
#topCenter{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;max-width:min(560px,60vw)}
#stationLine{font-size:12px;color:var(--dim);letter-spacing:.08em;text-shadow:0 1px 3px #000;white-space:nowrap}
#phaseRow{display:flex;align-items:center;gap:10px}
#phaseBadge{padding:3px 12px;border-radius:4px;font-weight:900;font-size:13px;letter-spacing:.2em;border:1px solid;transform:skewX(-8deg)}
#phaseBadge.travel{background:linear-gradient(#31486b,#1a2740);border-color:#5a7ab0;color:#cfe0ff}
#phaseBadge.dock{background:linear-gradient(#2c5a30,#14301a);border-color:#57c95c;color:#c9f5cb}
#phaseBadge.settle{background:linear-gradient(#6b5220,#3a2c10);border-color:var(--gold);color:#ffe9a8}
#phaseTimer{font:900 30px Consolas,monospace;color:var(--yellow);text-shadow:0 0 12px rgba(242,182,50,.45),0 2px 3px #000;min-width:96px;text-align:center}
#phaseTimer.hot{color:var(--warn);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#warnBanner{padding:3px 16px;border-radius:4px;font-weight:900;font-size:13px;letter-spacing:.12em;
  background:linear-gradient(90deg,transparent,rgba(255,59,48,.28),transparent);color:#ffb3ad;border:1px solid rgba(255,59,48,.5);white-space:nowrap}
#warnBanner.ok{background:linear-gradient(90deg,transparent,rgba(87,201,92,.22),transparent);color:#b8f0ba;border-color:rgba(87,201,92,.5)}
#warnBanner.flash{animation:blink .4s steps(2) infinite}
#statPanel{position:absolute;top:10px;left:10px;width:212px}
#lvBadge{display:inline-block;background:linear-gradient(#f2b632,#c07818);color:#241505;font-weight:900;
  padding:1px 10px;border-radius:4px;transform:skewX(-8deg);font-size:13px;box-shadow:0 0 10px rgba(242,182,50,.4)}
.bar{height:12px;background:#0d0806;border:1px solid #4a2c1c;border-radius:6px;overflow:hidden;position:relative;margin-top:5px}
.bar .fill{height:100%;border-radius:5px;transition:width .15s;background:linear-gradient(90deg,#2e8f3a,#57c95c,#8fe08a)}
.bar .chip{position:absolute;inset:0;background:rgba(255,255,255,.55);width:0;border-radius:5px}
.bar.hp .fill.low{background:linear-gradient(90deg,#8f1e14,#ff3b30);animation:blink .6s steps(2) infinite}
.barTxt{position:absolute;inset:0;font:700 9px/12px Consolas,monospace;color:#fff;text-align:center;text-shadow:0 1px 2px #000}
.statRow{display:flex;gap:10px;margin-top:6px;font-size:12px;color:var(--dim)}
.statRow b{color:var(--bone)}
.statRow .buffed{color:var(--green);text-shadow:0 0 8px rgba(87,201,92,.6)}
#buffRow{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.buffChip{font-size:10px;padding:1px 7px;border-radius:4px;background:#14301a;border:1px solid #3a7a42;color:#a8e8ac}
#ptsPanel{position:absolute;top:52px;right:10px;width:212px;text-align:right}
#curPts{font:900 24px Consolas,monospace;color:var(--gold);text-shadow:0 0 12px rgba(255,210,87,.5)}
#curPts.flash{animation:ptpop .3s}
@keyframes ptpop{50%{transform:scale(1.18);color:#fff}}
#cumPts{font-size:11px;color:var(--dim)}
.bar.lv .fill{background:linear-gradient(90deg,#8a6a1a,#f2b632,#ffe9a8)}
.bar.lv.ready .fill{animation:blink .5s steps(2) infinite}
#lvProgText{font-size:10px;color:var(--dim);margin-top:3px}
#missionCard{position:absolute;top:172px;right:10px;width:212px}
#missionTitle{font-size:12px;font-weight:900;color:var(--yellow);letter-spacing:.05em}
#missionCard .bar .fill{background:linear-gradient(90deg,#31486b,#5a8ad0,#9fc4ff)}
#missionText{font-size:11px;color:var(--dim);margin-top:3px}
#missionCard.done{border-left-color:var(--green)}
#missionCard.done #missionTitle{color:var(--green)}
#missionCard.done .bar .fill{background:linear-gradient(90deg,#2e8f3a,#8fe08a)}
#bossBar{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:min(480px,52vw)}
#bossName{font-size:13px;font-weight:900;color:#ff8a7a;text-align:center;letter-spacing:.15em;text-shadow:0 0 10px rgba(255,59,48,.6)}
#bossBar .bar{height:14px;border-color:#7a2a1c}
#bossBar .bar .fill{background:linear-gradient(90deg,#7a1410,#ff3b30,#ff8a5a);transition:width .1s}
#prompt{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);padding:6px 18px;border-radius:6px;
  background:rgba(20,13,10,.9);border:1px solid var(--yellow);color:var(--yellow);font-weight:700;font-size:14px;
  box-shadow:0 0 16px rgba(242,182,50,.3);white-space:nowrap}
#boardArrow{position:absolute;padding:4px 12px;border-radius:6px;background:rgba(122,20,16,.92);border:1px solid var(--warn);
  color:#ffd9d5;font-weight:900;font-size:13px;transform:translate(-50%,-50%);animation:blink .5s steps(2) infinite;white-space:nowrap;z-index:25}
#chips{position:absolute;bottom:10px;right:10px;display:flex;gap:8px;pointer-events:auto}
.chipBtn{padding:8px 14px;border-radius:8px;border:1px solid #6b4a33;background:linear-gradient(#2a1c14,#1a110c);
  color:var(--bone);font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.chipBtn:hover{border-color:var(--yellow);color:var(--yellow)}
.chipBtn.gold{background:linear-gradient(#f2b632,#c07818);color:#241505;border-color:#ffe9a8}
.chipBtn.gold:hover{filter:brightness(1.12);color:#241505}
.chipBtn.locked{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
#hintBar{position:absolute;bottom:10px;left:10px;font-size:11px;color:#8d7f6c;text-shadow:0 1px 2px #000;line-height:1.9}
#crosshair{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
  background:rgba(242,182,50,.9);box-shadow:0 0 6px rgba(242,182,50,.8),0 0 2px #000}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:18;opacity:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(200,20,10,.55) 100%)}
#topBtns{position:fixed;top:10px;right:10px;z-index:40;display:flex;gap:6px}
.iconBtn{width:38px;height:34px;border-radius:7px;border:1px solid #6b4a33;background:linear-gradient(#2a1c14,#1a110c);
  color:var(--yellow);font-size:15px;cursor:pointer;pointer-events:auto}
.iconBtn:hover{border-color:var(--yellow)}
#muteBtn{width:auto;padding:0 10px;font-size:12px;font-weight:700}
#toasts{position:fixed;top:128px;left:50%;transform:translateX(-50%);z-index:35;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(560px,92vw)}
.toast{padding:6px 18px;border-radius:6px;background:rgba(24,15,11,.94);border:1px solid #6b4a33;border-left:3px solid var(--yellow);
  color:var(--bone);font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.6);animation:tin .25s;max-width:100%;text-align:center}
.toast.warn{border-left-color:var(--warn);color:#ffc9c4}
.toast.good{border-left-color:var(--green);color:#c9f5cb}
.toast.gold{border-left-color:var(--gold);color:#ffe9a8}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}
#floaters{position:fixed;inset:0;pointer-events:none;z-index:22;overflow:hidden}
.floater{position:absolute;font:900 16px Consolas,monospace;text-shadow:0 2px 3px #000,0 0 8px currentColor;
  transform:translate(-50%,-100%);will-change:transform,opacity;white-space:nowrap}
.floater.dmg{color:#ffe9c9}.floater.crit{color:#ff9a3a;font-size:22px}
.floater.hurt{color:#ff5a4a}.floater.pts{color:var(--gold);font-size:14px}
.floater.heal{color:#7de08a}.floater.info{color:#9fc4ff;font-size:13px}
/* ---------- overlays ---------- */
.ov{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(18,11,8,.62),rgba(8,5,4,.86));backdrop-filter:blur(3px);padding:14px}
.panel{width:min(660px,94vw);max-height:88vh;overflow-y:auto;overflow-x:hidden;position:relative;
  background:linear-gradient(165deg,#2a1c14,#170f0b 60%);border:1px solid #6b3a24;border-top:3px solid var(--rust);
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(242,182,50,.15);padding:20px 22px}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.07) 3px 4px)}
.pHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative}
.pTitle{font-family:Impact,"Arial Black","Microsoft YaHei",sans-serif;font-size:24px;color:var(--yellow);
  letter-spacing:.1em;transform:skewX(-6deg);text-shadow:0 0 14px rgba(242,182,50,.4),2px 2px 0 #5a2010}
.xBtn{width:32px;height:32px;border-radius:6px;border:1px solid #6b4a33;background:#241811;color:var(--dim);font-size:15px;cursor:pointer}
.xBtn:hover{color:var(--warn);border-color:var(--warn)}
.btn{padding:10px 22px;border-radius:8px;border:1px solid #6b4a33;background:linear-gradient(#3a2418,#241811);
  color:var(--bone);font-weight:900;font-size:15px;cursor:pointer;letter-spacing:.08em;transition:transform .1s,filter .1s}
.btn:hover{filter:brightness(1.2);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#ffd257,#f2b632 40%,#c07818);color:#241505;border-color:#ffe9a8;
  box-shadow:0 4px 18px rgba(242,182,50,.35);text-shadow:0 1px 0 rgba(255,255,255,.3)}
.btn.danger{border-color:#7a2a1c;color:#ff9a8a}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.6)}
.seg{display:flex;gap:0;border:1px solid #6b4a33;border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:8px 14px;background:#1a110c;color:var(--dim);border:none;font-weight:700;font-size:13px;cursor:pointer}
.seg button.on{background:linear-gradient(#b7412a,#7a2a1c);color:#ffe9d5;text-shadow:0 0 8px rgba(255,150,100,.6)}
select,input[type=range]{background:#1a110c;color:var(--bone);border:1px solid #6b4a33;border-radius:6px;padding:6px 10px;font-size:13px}
input[type=range]{accent-color:var(--yellow);padding:0;height:22px}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-size:13px;color:var(--dim)}
.setRow>label{min-width:64px;font-weight:700;color:var(--bone)}
/* shop */
#shopGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{background:linear-gradient(150deg,#241811,#170f0b);border:1px solid #4a2c1c;border-radius:9px;padding:10px 12px;position:relative}
.item .ic{font-size:26px;float:left;margin-right:10px;filter:drop-shadow(0 0 6px rgba(242,182,50,.4))}
.item h4{font-size:14px;color:var(--yellow)}
.item p{font-size:11px;color:var(--dim);margin:3px 0 8px;min-height:28px}
.item .own{position:absolute;top:8px;right:10px;font-size:10px;color:#9fc4ff}
.buyRow{display:flex;align-items:center;justify-content:space-between;clear:both}
.price{font:900 15px Consolas,monospace;color:var(--gold)}
.price.no{color:var(--warn)}
.buy{padding:5px 16px;border-radius:6px;border:1px solid #ffe9a8;background:linear-gradient(#f2b632,#c07818);color:#241505;font-weight:900;cursor:pointer;font-size:13px}
.buy:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.8)}
.shopNote{font-size:12px;color:var(--dim);margin-bottom:10px}
.shopNote b{color:var(--gold)}
/* stats */
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:13px}
.statGrid .k{color:var(--dim)}.statGrid .v{text-align:right;font-weight:900;color:var(--bone)}
.invItem{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #4a2c1c;border-radius:8px;margin-top:8px;background:#1c130e}
.invItem .ic{font-size:22px}.invItem .nm{flex:1;font-size:13px}
.invItem .nm small{display:block;color:var(--dim);font-size:10px}
.useBtn{padding:4px 14px;border-radius:6px;border:1px solid #3a7a42;background:#14301a;color:#a.........完整代码请登录后点击上方下载按钮下载查看