three实现三维狼人杀游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维狼人杀游戏代码，有新手指引教程。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<title>月夜狼村 · 3D 狼人杀（新手版）</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>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --disp:"Ma Shan Zheng","STKaiti","KaiTi",serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --ink:#f0e6cf; --amber:#ffcf7d; --amber2:#ff9a45; --dim:#9b8f78;
  --wolf:#ff5a5f; --seer:#6ea8ff; --witch:#b98cff; --vil:#ffc46b;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--body);background:#070a18;color:var(--ink);font-size:14px;user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;cursor:grab}
.hidden{display:none!important}

/* ---------- 顶部栏 ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:50;display:flex;align-items:center;gap:12px;
  padding:0 16px;background:linear-gradient(180deg,rgba(10,8,22,.92),rgba(10,8,22,.35) 80%,transparent)}
.logo{font-family:var(--disp);font-size:24px;color:#ffe3ae;letter-spacing:2px;text-shadow:0 0 18px rgba(255,180,80,.45)}
.logo b{color:#ff9a45}
#phasePill{padding:5px 14px;border-radius:999px;background:rgba(20,16,40,.8);border:1px solid rgba(255,207,125,.3);
  font-size:12.5px;color:#ffe9c0;letter-spacing:1px}
.tright{margin-left:auto;display:flex;align-items:center;gap:8px}
#roleChip{padding:4px 12px;border-radius:999px;border:1.5px solid;font-size:12.5px;font-weight:700;background:rgba(15,12,30,.85)}
.tbtn{font-family:inherit;font-size:12px;font-weight:600;color:#ffd98c;background:rgba(255,207,125,.07);
  border:1px solid rgba(255,207,125,.4);border-radius:8px;padding:6px 10px;cursor:pointer;transition:.15s}
.tbtn:hover{background:rgba(255,207,125,.18);transform:translateY(-1px)}

/* ---------- 按钮 ---------- */
.btn{font-family:inherit;font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:.15s;color:#2a1404;background:linear-gradient(180deg,#ffd489,#ff9a45);letter-spacing:1px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,150,60,.35)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:rgba(255,207,125,.08);color:#ffd98c;border-color:rgba(255,207,125,.5)}
.btn.big{font-size:16px;padding:13px 28px}
.btn.choice{display:flex;flex-direction:column;gap:2px;width:min(460px,100%);text-align:left;align-items:flex-start}
.btn.choice small{opacity:.7;font-weight:400;font-size:12px}

/* ---------- 猫头鹰向导 ---------- */
#guide{position:fixed;left:18px;bottom:18px;z-index:75;display:flex;gap:12px;align-items:flex-start;max-width:350px;
  background:linear-gradient(160deg,#2e2240,#1b1328);border:1.5px solid #a3814e;border-radius:14px;padding:14px 16px;
  box-shadow:0 14px 44px rgba(0,0,0,.55),inset 0 0 30px rgba(255,180,90,.06);animation:riseIn .4s ease}
.owl{font-size:36px;line-height:1;animation:owlBob 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
#gTitle{font-family:var(--disp);font-size:19px;color:#ffd98c;margin-bottom:4px;letter-spacing:1px}
#gText{color:#e9dcc0;font-size:13px;line-height:1.75;margin-bottom:10px}
#gOk{font-size:12.5px;padding:7px 16px}

/* ---------- 日志 ---------- */
#logPanel{position:fixed;right:14px;top:62px;bottom:14px;width:272px;z-index:25;display:flex;flex-direction:column;
  background:rgba(13,10,26,.74);border:1px solid rgba(255,190,90,.22);border-radius:12px;backdrop-filter:blur(6px);overflow:hidden}
#logTitle{padding:9px 12px;font-family:var(--disp);font-size:16px;color:#ffd98c;border-bottom:1px dashed rgba(255,207,125,.25)}
#log{flex:1;overflow-y:auto;padding:10px 12px;font-size:12.5px;line-height:1.7;color:#d9cdb4}
#log::-webkit-scrollbar{width:5px}#log::-webkit-scrollbar-thumb{background:rgba(255,207,125,.3);border-radius:3px}
.entry{margin-bottom:8px;padding-left:9px;border-left:2px solid rgba(255,207,125,.35);animation:fadeUp .3s ease}
.entry.death{border-color:var(--wolf);color:#f2bcc0}
.entry.dim{color:var(--dim);border-color:rgba(255,255,255,.12)}

/* ---------- 气泡 ---------- */
#bubble{position:fixed;z-index:30;transform:translate(-50%,-115%);max-width:260px;background:#fdf6e3;color:#2b1c10;
  border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.55;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
#bubble:after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fdf6e3;border-bottom:0}
#bName{font-weight:900;margin-right:6px}

/* ---------- 操作面板 ---------- */
#actionSheet{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:35;width:min(700px,94vw);
  background:linear-gradient(170deg,rgba(34,25,50,.96),rgba(20,14,34,.96));border:1.5px solid rgba(255,190,90,.45);
  border-radius:14px;padding:14px 18px;text-align:center;box-shadow:0 16px 50px rgba(0,0,0,.6);animation:riseIn .35s ease}
#asTitle{font-family:var(--disp);font-size:22px;color:#ffe3ae;letter-spacing:2px}
#asHint{font-size:12.5px;color:#cbbfa6;line-height:1.7;margin-top:4px}
#asHint b{color:#ffd98c}
#asChips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:#1c1432;
  border:1px solid #5b4a75;color:#f0e6cf;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.chip:hover{border-color:#c9a86a;transform:translateY(-1px)}
.chip.sel{border-color:var(--amber);background:#3d2c15;box-shadow:0 0 0 2px rgba(255,207,125,.35)}
#asBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* ---------- 横幅 ---------- */
#banner{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(6,8,20,.1),rgba(5,7,18,.62));animation:fadeUp .5s ease}
#banner.out{opacity:0;transition:opacity .55s}
#bannerText{font-family:var(--disp);font-size:clamp(40px,7vw,64px);color:#ffeecb;text-align:center;
  text-shadow:0 0 34px rgba(255,180,80,.55);letter-spacing:6px}
.bsub{font-size:17px;color:#cfd8ff;font-family:var(--body);margin-top:10px.........完整代码请登录后点击上方下载按钮下载查看