three实现三维暴风雪求生游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由minimax-m3.1-flash 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="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%AA%94%3C/text%3E%3C/svg%3E">
<style>
  :root{
    --ice:#cfe2f2; --steel:#8ba6bd; --warn:#ff5a4d; --warm:#ffb347; --safe:#7ee3b8;
    --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{width:100%;height:100%;overflow:hidden;background:#05080d;font-family:var(--font);color:#e8f2fb;}
  canvas{display:block;}
  #scene{position:fixed;inset:0;z-index:0;}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .5s ease;}
  #hud.on{opacity:1;}
  #vignette{position:fixed;inset:0;z-index:11;pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(2,6,12,.55) 82%, rgba(1,4,9,.88) 100%);}
  #frost{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;
    background:
      radial-gradient(ellipse at 12% 14%, rgba(214,236,255,.55), rgba(214,236,255,0) 38%),
      radial-gradient(ellipse at 88% 20%, rgba(214,236,255,.5), rgba(214,236,255,0) 36%),
      radial-gradient(ellipse at 20% 86%, rgba(214,236,255,.48), rgba(214,236,255,0) 40%),
      radial-gradient(ellipse at 84% 84%, rgba(214,236,255,.52), rgba(214,236,255,0) 38%),
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 46%, rgba(190,225,255,.25) 100%);
    transition:opacity .6s ease;}
  #damage{position:fixed;inset:0;z-index:13;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at 50% 50%, rgba(255,0,0,0) 35%, rgba(190,10,10,.62) 100%);}

  #topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;gap:22px;padding:14px 18px;}
  .panel{background:linear-gradient(180deg,rgba(10,18,28,.55),rgba(8,14,22,.35));border:1px solid rgba(180,210,235,.18);
    border-radius:9px;padding:7px 13px;backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.35);}
  .panel .label{display:block;font-size:10px;letter-spacing:.24em;color:#9fb8cf;opacity:.85;}
  .panel .big{font-size:20px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1.15;}
  #timerBox{min-width:126px;text-align:center;}
  #timerBox .big{color:#eef7ff;text-shadow:0 0 14px rgba(150,200,255,.35);}
  #timerBox.danger .big{color:#ff8d80;text-shadow:0 0 16px rgba(255,90,70,.6);animation:pulse 1s infinite;}
  @keyframes pulse{50%{opacity:.45;}}
  #distBox{min-width:108px;text-align:center;}
  #distBox .big{color:var(--warm);}
  #compassWrap{padding:4px 8px;line-height:0;}
  #compass{width:440px;height:44px;max-width:42vw;}

  #lockHint{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;
    color:#cfe2f2;background:rgba(8,16,24,.55);border:1px solid rgba(170,205,235,.25);padding:7px 16px;border-radius:8px;
    opacity:0;transition:opacity .3s;pointer-events:none;}
  #lockHint.on{opacity:1;}
  #crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
    background:rgba(235,245,255,.75);box-shadow:0 0 6px rgba(0,0,0,.8);}

  #bars{position:absolute;left:22px;bottom:22px;width:238px;display:flex;flex-direction:column;gap:9px;}
  .bar{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;color:#b9cde0;}
  .bar .track{flex:1;height:8px;border-radius:5px;background:rgba(6,12,20,.65);border:1px solid rgba(170,205,235,.2);overflow:hidden;}
  .bar .track i{display:block;height:100%;width:100%;border-radius:4px;transition:width .18s linear, background .4s;}
  #warmFill{background:linear-gradient(90deg,#7ec8ff,#e9f6ff);}
  #stamFill{background:linear-gradient(90deg,#5ad29a,#d8f7e6);}
  .bar em{font-style:normal;font-variant-numeric:tabular-nums;width:30px;text-align:right;color:#dceaf7;font-size:11px;}
  .bar.low .track i{background:linear-gradient(90deg,#ff6a52,#ffb199);}
  #hints{position:absolute;left:22px;bottom:98px;font-size:11px;line-height:1.75;color:#8fa7bd;letter-spacing:.06em;opacity:.75;}
  #hints b{color:#cfe2f2;font-weight:600;}

  #prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);font-size:14px;letter-spacing:.12em;
    padding:8px 18px;border-radius:8px;background:rgba(8,16,24,.6);border:1px solid rgba(255,180,90,.4);color:#ffd9a4;
    opacity:0;transition:opacity .25s;}
  #prompt.on{opacity:1;}
  #warn{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;font-size:26px;font-weight:800;
    letter-spacing:.34em;color:#ff6a55;text-shadow:0 0 22px rgba(255,60,40,.7);opacity:0;transition:opacity .2s;}
  #warn.on{opacity:1;animation:pulse .8s infinite;}
  #warn small{display:block;font-size:12px;font-weight:500;letter-spacing:.18em;color:#ffc0b6;margin-top:8px;}
  #toast{position:absolute;left:50%;bottom:33%;transform:translateX(-50%);font-size:13px;letter-spacing:.1em;color:#dceaf7;
    background:rgba(8,16,24,.55);border:1px solid rgba(170,205,235,.22);padding:7px 16px;border-radius:8px;opacity:0;transition:opacity .3s;}
  #toast.on{opacity:1;}
  #bearing{position:absolute;right:22px;bottom:22px;font-size:11px;letter-spacing:.1em;color:#9fb8cf;text-align:right;line-height:1.8;}
  #bearing b{color:var(--warm);font-size:13px;}

  /* ---------- 覆盖层 ---------- */
  .screen{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;
    background:radial-gradient(ellipse at 50% 30%, rgba(18,32,48,.72), rgba(3,6,11,.94));backdrop-filter:blur(7px);text-align:center;padding:24px;}
  .screen.on{display:flex;}
  .screen h1{font-size:clamp(30px,6vw,58px);letter-spacing:.16em;font-weight:800;
    background:linear-gradient(180deg,#ffffff,#8fb9d8 70%,#5d84a6);-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 12px 40px rgba(0,0,0,.6);}
  .screen h2{font-size:clamp(24px,4.4vw,40px);letter-spacing:.2em;margin-bottom:6px;}
  .screen p.sub{margin-top:10px;font-size:13px;letter-spacing:.34em;color:#8fa7bd;}
  .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;max-width:760px;margin:26px 0 6px;width:100%;}
  .keys div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#b8cde0;background:rgba(12,22,34,.55);
    border:1px solid rgba(160,200,230,.14);border-radius:8px;padding:9px 12px;text-align:left;}
  kbd{display:inline-block;min-width:26px;text-align:center;font-family:var(--font);font-size:11px;font-weight:700;color:#e9f4ff;
    background:linear-gradient(180deg,#2b3d51,#18242f);border:1px solid rgba(190,215,235,.28);border-bottom-width:2px;border-radius:5px;padding:3px 7px;}
  .diffs{display:flex;gap:12px;margin:22px 0 4px;}
  .diff{width:168px;padding:14px 12px;border-radius:10px;border:1px solid rgba(160,200,230,.18);background:rgba(12,22,34,.5);cursor:pointer;transition:.2s;}
  .diff:hover{border-color:rgba(255,190,120,.5);background:rgba(26,38,52,.6);}
  .diff.sel{border-color:var(--warm);background:rgba(58,40,20,.55);box-shadow:0 0 0 1px rgba(255,179,71,.35) inset;}
  .diff b{display:block;font-size:15px;letter-spacing:.2em;margin-bottom:6px;}
  .diff span{font-size:11.5px;color:#9fb8cf;line-height:1.7;}
  button.big{margin-top:24px;padding:14px 46px;font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.3em;color:#06202f;
    background:linear-gradient(180deg,#eaf6ff,#9dc6e4);border:none;border-radius:9px;cursor:pointer;transition:.2s;
    box-shadow:0 10px 30px rgba(90,150,200,.28);}
  button.big:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(90,150,200,.42);}
  button.ghost{margin-top:12px;padding:10px 30px;font-family:var(--font);font-size:12px;letter-spacing:.22em;color:#b9cde0;
    background:transparent;border:1px solid rgba(160,200,230,.25);border-radius:8px;cursor:pointer;}
  button.ghost:hover{border-color:rgba(200,225,245,.6);color:#eaf4ff;}
  .stats{display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:12px;margin:22px 0 4px;}
  .stats div{background:rgba(12,22,34,.55);border:1px solid rgba(160,200,230,.16);border-radius:9px;paddi.........完整代码请登录后点击上方下载按钮下载查看