three实现三维打雪仗游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：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>三维打雪仗 · Snowball Fight 3D</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #0a1526; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    color: #eaf3ff;
  }
  canvas { display: block; }

  /* ================= HUD ================= */
  #hud {
    position: fixed; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity .35s;
  }
  #hud.show { opacity: 1; }

  #topbar {
    position: absolute; top: 16px; left: 16px; right: 16px;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
  }
  .panel {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 14px;
    background: rgba(16, 32, 54, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 14px; letter-spacing: .5px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  }
  .bar {
    width: 170px; height: 12px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
  }
  #hpBar {
    height: 100%; width: 100%; border-radius: 6px;
    background: linear-gradient(90deg, #4fd1c5, #a8e6cf);
    transition: width .18s ease, background .3s;
  }
  #hpBar.low { background: linear-gradient(90deg, #ff6b6b, #ffa07a); }
  #hpText { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 34px; text-align: right; }
  .stat-panel span { opacity: .85; }
  .stat-panel b {
    font-variant-numeric: tabular-nums; font-size: 16px;
    color: #9fe6ff; margin-left: 3px;
  }

  #crosshair {
    position: absolute; left: 50%; top: 50%;
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    transition: transform .1s, border-color .1s;
  }
  #crosshair.aim { border-color: #ff7b7b; transform: scale(1.5); }

  #chargeWrap {
    position: absolute; left: 50%; top: calc(50% + 34px);
    transform: translateX(-50%);
    width: 140px; height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px; overflow: hidden;
    opacity: 0; transition: opacity .12s;
  }
  #chargeWrap.show { opacity: 1; }
  #chargeBar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #7fd8ff, #ffffff);
  }

  #vignette {
    position: fixed; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at center, rgba(255,0,0,0) 35%, rgba(200,0,30,0.62) 100%);
    transition: opacity .45s ease;
    z-index: 5;
  }
  #vignette.hit { opacity: 1; transition: opacity .05s; }

  /* ================= 覆盖层 ================= */
  .overlay {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px; text-align: center;
    background: radial-gradient(circle at 50% 35%, rgba(30, 60, 100, 0.55), rgba(8, 16, 30, 0.88));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .overlay.hidden { display: none; }

  .overlay h1 {
    font-size: clamp(34px, 7vw, 62px);
    letter-spacing: 6px;
    background: linear-gradient(180deg, #ffffff, #8fc9ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 20px rgba(80, 160, 255, 0.4));
  }
  .overlay h2 { font-size: clamp(26px, 5vw, 42px); letter-spacing: 4px; }
  .sub {
    letter-spacing: 8px; font-size: 12px; opacity: .6;
    text-transform: uppercase; margin-top: -10px;
  }
  .tips {
    display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
    max-width: 640px; font-size: 14px; opacity: .92;
  }
  kbd {
    display: inline-block; padding: 2px 8px; margin: 0 2px;
    border-radius: 6px; font-size: 12px; font-family: inherit;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom-width: 2px;
  }
  .goal { font-size: 14px; opacity: .72; max-width: 540px; line-height: 1.75; }

  .btn {
    margin-top: 8px; padding: 14px 44px;
    font-size: 17px; font-family: inherit; color: #fff; cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(180deg, rgba(120, 190, 255, 0.32), rgba(60, 120, 200, 0.28));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .18s, background .18s, box-shadow .18s;
    box-shadow: 0 8px 26px rgba(50, 130, 230, 0.28);
  }
  .btn:hover {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(180deg, rgba(150, 210, 255, 0.5), rgba(70, 140, 220, 0.4));
    box-shadow: 0 12px 32px rgba(80, 160, 255, 0.42);
  }
  .btn:active { transform: translateY(0) scale(.98); }

  .result { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
  .result div { display: flex; flex-direction: column; gap: 6px; }
  .result span { font-size: 13px; opacity: .6; letter-spacing: 1px; }
  .result b { font-size: 30px; font-varia.........完整代码请登录后点击上方下载按钮下载查看