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">
<title>雪暴余生 · WHITEOUT</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root{--ice:#9fd4ff;--warm:#ffb454;--danger:#ff3b30;}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0b111b;color:#eaf3ff;
  font-family:'Noto Sans SC',system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;display:block;cursor:crosshair}

/* ---------- 屏幕特效层 ---------- */
#frost{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.4;transition:opacity .5s;
  background:
   radial-gradient(ellipse at 0% 0%,rgba(190,225,255,.55),transparent 32%),
   radial-gradient(ellipse at 100% 0%,rgba(190,225,255,.5),transparent 30%),
   radial-gradient(ellipse at 0% 100%,rgba(180,220,255,.5),transparent 32%),
   radial-gradient(ellipse at 100% 100%,rgba(180,220,255,.5),transparent 30%),
   radial-gradient(ellipse at center,transparent 55%,rgba(8,14,24,.65) 100%);}
#danger{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;
  box-shadow:inset 0 0 140px 46px rgba(255,20,10,.55);}
#grain{position:fixed;inset:-50%;pointer-events:none;z-index:7;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .45s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,3%)}66%{transform:translate(3%,-2%)}100%{transform:translate(0,0)}}
#cinemaTop,#cinemaBot{position:fixed;left:0;right:0;height:6vh;background:#000;z-index:8;pointer-events:none}
#cinemaTop{top:0}#cinemaBot{bottom:0}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;display:none}
#crosshair{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;
  border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 6px rgba(160,210,255,.9)}

#timeBox{position:fixed;top:7.4vh;left:22px}
#timeLabel{font-size:11px;letter-spacing:5px;color:#8fb6d8}
#timeVal{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC';font-size:52px;line-height:1;
  color:#eaf6ff;text-shadow:0 0 18px rgba(120,190,255,.45)}
#timeVal.low{color:#ff5f4d;animation:blink .55s infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.35}}

.bars{position:fixed;top:calc(7.4vh + 76px);left:22px;width:230px;display:flex;flex-direction:column;gap:10px}
.bar .lbl{font-size:11px;letter-spacing:3px;color:#a9c8e2;margin-bottom:4px;display:flex;justify-content:space-between}
.track{height:9px;background:rgba(10,20,34,.7);border:1px solid rgba(160,200,240,.25);transform:skewX(-14deg);overflow:hidden}
.fill{height:100%;width:100%;transition:width .25s}
#heatFill{background:linear-gradient(90deg,#2a6cff,#8fd6ff)}
#heatFill.cold{background:linear-gradient(90deg,#ff3b30,#ff8a5c);animation:blink .5s infinite alternate}
#stamFill{background:linear-gradient(90deg,#ff9d3f,#ffd479)}

#compassWrap{position:fixed;top:7.2vh;left:50%;transform:translateX(-50%);text-align:center}
#compass{position:relative;width:340px;height:40px;margin:0 auto;overflow:hidden;
  background:rgba(6,14,26,.62);border:1px solid rgba(160,210,255,.28);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%)}
#strip{position:absolute;top:0;left:0;height:100%;width:2160px;display:flex}
.seg{width:90px;flex:none;text-align:center;padding-top:9px;border-left:1px solid rgba(160,210,255,.22);
  font-size:13px;letter-spacing:2px;color:#6f93b4;font-weight:700}
.seg.maj{color:#dff1ff;font-size:16px;font-family:'ZCOOL QingKe HuangYou','Noto Sans SC'}
#needle{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  border:7px solid tra.........完整代码请登录后点击上方下载按钮下载查看