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 .1.........完整代码请登录后点击上方下载按钮下载查看