three实现三维末世酸雨求生游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维末世酸雨求生游戏代码，核心循环：间歇期（搜刮）→ 警报（5 秒警报声 + 掩体光柱急闪）→ 酸雨（暴露持续掉血、掩体内缓慢回血）→ 下一波更强、间歇更短。求生指引：底部箭头实时指向最近掩体并显示距离；酸雨中的绿色警示暗角、暴露标签即时反馈危险。

代码标签： 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>硫酸雨：末世求生 | ACIDFALL PROTOCOL</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=Noto+Sans+SC:wght@400;500;700&family=Share+Tech+Mono&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --acid:#c8ff3e; --acid-dim:#93bd2f; --amber:#ffb52e; --danger:#ff5a3c; --cyan:#45e6ff;
  --panel:rgba(9,13,7,.84); --line:rgba(200,255,62,.35); --ink:#dfe8cf;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#070a06}
body{font-family:'Noto Sans SC',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}
.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;letter-spacing:.06em;font-weight:400}
.num{font-family:'Share Tech Mono',monospace}
.hidden{display:none!important}
#app{position:fixed;inset:0}
/* 只命中主渲染画布（#app 的直接子级），避免误伤小地图 canvas */
#app>canvas{position:absolute;inset:0;z-index:0;display:block}

/* ---------- 全屏特效层 ---------- */
#vignetteBase{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
#acidTint{position:absolute;inset:0;z-index:4;pointer-events:none;background:rgba(150,255,46,.5);opacity:0;mix-blend-mode:screen}
#vignette{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 34%,rgba(140,230,30,.62) 100%)}
#flash{position:absolute;inset:0;z-index:6;pointer-events:none;background:#eaffcf;opacity:0}
#scanlines{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  animation:crt 4s infinite}
@keyframes crt{0%,100%{opacity:.28}50%{opacity:.22}}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);padding:10px 16px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
#hudTop{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panelHead{font-size:12px;letter-spacing:.3em;color:var(--acid-dim)}
.panelHead .en{opacity:.55;margin-left:6px;font-family:'Share Tech Mono',monospace;letter-spacing:.15em}
#hpBar{width:236px;height:15px;border:1px solid var(--line);background:#0a0e08;position:relative;margin:7px 0 8px}
#hpFill{position:absolute;inset:1px;width:100%;background:linear-gradient(90deg,#6f9c1e,var(--acid));
  box-shadow:0 0 10px rgba(200,255,62,.35);transition:width .12s linear}
#hpBar.mid #hpFill{background:linear-gradient(90deg,#b3801a,var(--amber))}
#hpBar.low #hpFill{background:linear-gradient(90deg,#a3271a,var(--danger));animation:blink .5s infinite}
.statRow{display:flex;gap:16px;font-size:13px;color:#b9c6a4}
.statRow b{color:var(--acid);font-weight:500}
#weatherPanel{text-align:right;min-width:190px}
#phaseName{font-size:24px;line-height:1.1}
#phaseName.calm{color:var(--acid)}
#phaseName.warn{color:var(--amber);animation:blink .45s infinite}
#phaseName.rain{color:var(--danger)}
#phaseTimer{font-size:30px;color:#fff;text-shadow:0 0 12px rgba(200,255,62,.35)}
#rainMeter{width:180px;height:7px;border:1px solid var(--line);background:#0a0e08;position:relative;margin:6px 0 4px auto}
#rainFill{position:absolute;inset:1px;width:12%;background:linear-gradient(90deg,#7fae22,#e6ff6a)}
#exposeTag{display:inline-block;margin-top:4px;padding:2px 10px;border:1px solid var(--danger);color:#ffb8a4;
  font-size:12px;letter-spacing:.2em;animation:blink .4s infinite}
@keyframes blink{50%{opacity:.25}}

#crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2px;border-radius:50%;
  background:rgba(200,255,62,.9);box-shadow:0 0 0 6px rgba(200,255,62,.12),0 0 10px rgba(200,255,62,.7)}

#shelterHud{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:9px 20px}
#shelterArrow{width:30px;height:30px;transition:transform .08s linear}
#shelterHud.alert #shelterArrow path{fill:#ffb52e}
#shelterHud .lbl{font-size:11px;letter-spacing:.25em;color:var(--acid-dim)}
#shelterDist{font-size:20px;color:#fff}
#safeTag{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);
  border:1px solid var(--acid);color:var(--acid);background:rgba(10,16,6,.8);
  padding:6px 18px;font-size:14px;letter-spacing:.15em;animation:pulseGlow 1.6s infinite}
@keyframes pulseGlow{50%{box-shadow:0 0 20px rgba(200,255,62,.55)}}

/* ---------- 小地图 ---------- */
#minimap{position:absolute;left:16px;bottom:16px;pointer-events:none;width:180px}
.mmHead{display:flex;justify-content:space-between;width:178px;font-size:11px;
  letter-spacing:.25em;color:var(--acid-dim);margin-bottom:5px}
/* 关键.........完整代码请登录后点击上方下载按钮下载查看