js实现简单狼人杀游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js实现简单狼人杀游戏代码，你可以模拟任意的角色，其他角色有ai机器来模拟。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  <title>狼人杀 - 纯前端单文件版</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
  <style>
    :root{
      --bg:#0f1221;
      --panel:#14182c;
      --panel-2:#171c33;
      --text:#f4f6ff;
      --muted:#aab0d9;
      --border:#21264a;
      --primary:#7c7bff;
      --accent:#00d4ff;
      --good:#22c55e;
      --bad:#ef4444;
      --warn:#f59e0b;
      --radius:16px;
      --shadow: 0 10px 40px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
      color:var(--text); background:
        radial-gradient(circle at 20% -10%, #1c2144, transparent 60%),
        radial-gradient(circle at 100% 0%, #122346, transparent 40%),
        linear-gradient(180deg, #0c0f1e, #0b0e1a);
      overflow-x:hidden;
    }
    a{color:var(--accent)}
    .wrap{
      max-width:1200px; margin:0 auto; padding:18px 16px 40px;
    }
    header{
      display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
    }
    .brand{
      display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px;
      background: linear-gradient(135deg, rgba(124,123,255,.15), rgba(0,212,255,.15));
      padding:8px 12px; border:1px solid var(--border); border-radius:12px;
      box-shadow: var(--shadow);
    }
    .brand .tag{ color:var(--muted); font-weight:700; font-size:12px }
    .toolbar{ display:flex; align-items:center; gap:8px }
    button{
      appearance:none; border:1px solid var(--border); color:var(--text);
      background: linear-gradient(180deg, #1b2142, #141a34);
      padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:800; letter-spacing:.3px;
      box-shadow: var(--shadow);
    }
    button:hover{ border-color:#2a2f5a; background:#171d3a }
    button.primary{ background:linear-gradient(135deg, var(--primary), #9c9bff); border-color:#7d80ff; color:#101327 }
    button.danger{ background:linear-gradient(135deg, #ef4444, #fb7185); border-color:#fb7185; color:#19080a }
    button.success{ background:linear-gradient(135deg, #22c55e, #34d399); border-color:#34d399; color:#052011 }
    button.ghost{ background:transparent; border-color:#262b55 }
    button.small{ padding:8px 10px; border-radius:10px; font-weight:700 }
    .grid{
      display:grid; grid-template-columns: 320px 1fr 320px; gap:16px;
    }
    @media (max-width:1100px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:linear-gradient(180deg, var(--panel), var(--panel-2));
      border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
      padding:14px;
    }
    .card h3{ margin:0 0 10px; font-size:16px; display:flex; align-items:center; gap:8px }
    .sub{ color:var(--muted); font-size:12px }

    /* Setup */
    .setup .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
    .setup label{ font-size:13px; color:var(--muted) }
    .badge{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border);
      font-size:12px; background:#121737;
    }
    .badge.good{ color:#a7f3d0; border-color:#155e35; background:rgba(34,197,94,.12) }
    .badge.bad{ color:#fecaca; border-color:#7f1d1d; background:rgba(239,68,68,.12) }
    .badge.neutral{ color:#c7d2fe; border-color:#3730a3; background:rgba(99,102,241,.12) }

    input[type="range"]{ width:220px }
    select, input{
      background:#0f1430; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 10px; outline:none;
    }
    select:focus, input:focus{ border-color:#4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.2) }

    /* Players */
    .players{
      display:grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:10px;
    }
    .player{
      border:1px solid var(--border); border-radius:14px; padding:10px; position:relative;
      background: #101536; display:flex; align-items:center; gap:10px;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .player:hover{ transform:translateY(-2px); border-color:#2a2f5a; box-shadow: 0 10px 30px rgba(0,0,0,.25) }
    .avatar{
      width:40px; height:40px; border-radius:12px; overflow:hidden; background:#111637; flex:0 0 auto;
      display:grid; place-items:center; border:1px solid #262b55;
      font-weight:900; color:#9aa3ff;
    }
    .avatar img{ width:100%; height:100%; object-fit:cover; display:block }
    .meta{ display:flex; flex-direction:column; line-height:1.1 }
    .meta .name{ font-weight:800 }
    .meta .role{ color:var(--muted); font-size:12px }
    .tag{ position:absolute; right:8px; top:8px; font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:#c7d2fe; background:#0c1231 }
    .dead{ opacity:.45; filter:grayscale(.6) }
    .reveal{ position:absolute; left:8px; bottom:8px; font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:#0a1029; color:#e5e7eb }
    .you{ border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.35) inset }
    .selectable{ cursor:pointer; }
    .selectable.disabled{ opacity:.33; cursor:not-allowed; }
    .selected{ outline:2px solid var(--accent); }

    /* Stage */
    .stage .phase{
      display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
    }
    .phase .left{ display:flex; align-items:center; gap:8px }
    .pill{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#101536; border:1px solid var(--border); font-weight:800; font-size:12px;
    }
    .phase .right{ display:flex; align-items:center; gap:8px }
    .message{
      border:1px dashed #2a2f5a; border-radius:12px; padding:10px; background:#0f1430; color:#dbe3ff; margin-bottom:10px
    }
    .actions{ display:flex; gap:10px; flex-wrap:wrap }
    .hint{ color:var(--muted); font-size:12px }
    .hr{ height:1px; background: linear-gradient(90deg, transparent, #2a2f5a, transparent); margin:12px 0 }

    /* Log */
    .log{
      height:420px; overflow:auto; border:1px solid var(--border); border-radius:12px; background:#0f1430; padding:10px; font-size:13px;
    }
    .entry{ display:flex; gap:8px; margin-bottom:8px; align-items:flex-start }
    .time{ color:#6b7280; min-width:44px; text-align:right; font-variant-numeric: tabular-nums }
    .text{ color:#cfd5ff }
    .text .good{ color:#86efac }
    .text .bad{ color:#fca5a5 }
    .text .info{ color:#93c5fd }
    .footer{
      display:flex; justify-content:space-between; align-items:center; margin-top:12px; color:var(--muted); font-size:12px
    }

    .win-banner{
      display:none; position:fixed; inset:0; backdrop-filter: blur(6px);
      background: rgba(3,6,22,.65); z-index:20; align-items:center; justify-content:center;
    }
    .win-card{
      width:min(520px, 92vw); background:linear-gradient(180deg, #151a3a, #121737);
      border:1px solid var(--border); border-radius:20px; padding:16.........完整代码请登录后点击上方下载按钮下载查看