狼人杀在线游戏示例

Question

帮我写一个多人可以在线进行狼人杀的网站，满6-10人开一局，仅限一局人比赛，并且可以在静态网站上面直接发html文件部署

Answer 1

下面给出一个示例思路和简易代码，帮助你在纯静态网站（仅需上传一个 HTML 文件）上实现一个“多人在线狼人杀”原型。该示例主要演示了以下要点：

多玩家实时共享状态：利用第三方后端（这里以 Firebase 为例）来存储和同步游戏状态。
仅开一局：当 6～10 人加入后，游戏开始并分发角色，直到游戏结束。
纯前端部署：将下面的 HTML 放到任何静态托管（如 GitHub Pages、Netlify、Vercel、或传统服务器仅提供静态文件）的环境中即可运行，不需要你自行编写后台服务器。

注意：

此示例逻辑非常简化，只演示核心流程和实时同步思路，真正的狼人杀要复杂得多（需要更详细的投票、夜晚操作、规则管理等）。

你需要先在 Firebase 中创建一个项目，启用“Realtime Database”或“Firestore Database”，并将示例中的 FIREBASE_CONFIG 替换成你自己的项目配置。

如果不想使用 Firebase，可以使用其他实时后端服务，例如 Supabase、Appwrite、或者自行搭建 Socket.io 服务。原理类似，都是通过前端访问一个实时数据库/实时通信服务来共享状态。

示例代码（index.html）

将以下内容保存为 index.html，并将里面的 FIREBASE_CONFIG 替换成你自己的 Firebase 项目配置即可。上传到任意支持静态文件的地方后，多人访问同一个 URL 即可一起体验游戏原型。

html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>狼人杀简易版示例</title>
  <!-- 加载 Firebase 依赖 -->
  <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-database-compat.js"></script>
  <!-- 或者若使用 Firestore 改用 firebase-firestore-compat.js -->

  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
      background: #f8f8f8;
    }
    #app {
      max-width: 600px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
    }
    h1,h2,h3,h4,h5 {
      text-align: center;
    }
    .hidden {
      display: none;
    }
    .player-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .player-item {
      padding: 5px 10px;
      margin: 5px;
      background: #eee;
      border-radius: 4px;
    }
    .role {
      font-weight: bold;
      color: #c00;
    }
    button {
      margin: 5px 0;
      padding: 10px 20px;
      cursor: pointer;
    }
    .notice {
      padding: 10px;
      background: #fffdcc;
      margin-top: 10px;
      border: 1px solid #ffeb99;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>狼人杀简易版（仅限 6～10 人）</h1>

  <!-- 输入昵称的区域 -->
  <div id="login-area">
    <label>请输入你的昵称：
      <input type="text" id="nickname" />
    </label>
    <button id="joinBtn">加入游戏</button>
  </div>

  <div id="game-area" class="hidden">
    <h2>欢迎，<span id="playerName"></span></h2>
    <p>等待玩家加入... （6～10 人后可开始游戏）</p>
    <div class="player-list" id="playerList"></div>

    <button id="startGameBtn">开始游戏</button>

    <div id="inGameArea" class="hidden">
      <h3>你的角色：<span id="myRole" class="role"></span></h3>
      <div class="notice" id="gameNotice"></div>
      <!-- 这里可以扩展夜晚/白天流程、投票等操作按钮 -->
    </div>
  </div>
</div>

<script>
/** 
 * 请将此处的 Firebase 配置替换成你自己的项目配置，
 * 在 Firebase 控制台 -> 项目设置 -> 常规 -> 我们的应用 中可找到
 */
const FIREBASE_CONFIG = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL", 
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化 Firebase
firebase.initializeApp(FIREBASE_CONFIG);
// 如果使用 Realtime Database:
const db = firebase.database().ref("werewolfGame");
// 如果使用 Firestore，则需使用：const db = firebase.firestore().collection("werewolfGame");

const loginArea = document.getElementById("login-area");
const gameArea = document.getElementById("game-area");
const nicknameInput = document.getElementById("nickname");
const playerNameSpan = document.getElementById("playerName");
const playerListDiv = document.getElementById("playerList");
const joinBtn = document.getElementById("joinBtn");
const startGameBtn = document.getElementById("startGameBtn");
const inGameArea = document.getElementById("inGameArea");
const myRoleSpan = document.getElementById("myRole");
const gameNotice = document.getElementById("gameNotice");

let localPlayerId = null;
let localNickname = "";
let currentGameState = null;

/** 监听数据库变化，实时更新 */
db.on("value", (snapshot) => {
  const data = snapshot.val();
  if (!data) {
    // 游戏状态尚未初始化
    return;
  }
  currentGameState = data;

  // 如果玩家列表存在，渲染到页面
  if (data.players) {
    renderPlayerList(data.players);
  }
  
  // 如果游戏已经开始，显示每个人的角色
  if (data.gameStarted) {
    // 如果自己有角色，显示 inGameArea 并告知
    if (data.players[localPlayerId] && data.players[localPlayerId].role) {
      inGameArea.classList.remove("hidden");
      myRoleSpan.textContent = data.players[localPlayerId].role;
    }
    
    startGameBtn.style.display = "none";
    gameNotice.innerText = "游戏已开始！请按狼人杀规则进行讨论、投票等。";
  } else {
    // 游戏还没开始时，根据人数来决定是否显示“开始游戏”按钮
    const playerCount = Object.keys(data.players).length;
    if (playerCount >= 6 && playerCount <= 10) {
      // 只有房主或者第一个加入的玩家才能控制开始游戏，也可以自行修改为其他条件
      if (localPlayerId === data.hostId) {
        startGameBtn.style.display = "block";
      }
    } else {
      startGameBtn.style.display = "none";
    }
  }
});

/** 加入游戏按钮点击事件 */
joinBtn.addEventListener("click", async () => {
  localNickname = nicknameInput.value.trim();
  if (!localNickname) return alert("请输入有效昵称");

  // 从数据库获取当前游戏数据
  const snap = await db.get();
  let data = snap.val();

  // 若尚未有游戏数据，初始化
  if (!data) {
    data = {
      gameStarted: false,
      players: {},
      hostId: null
    };
  }

  // 生成一个随机 playerId
  localPlayerId = "player_" + Math.random().toString(36).slice(2);
  // 加入到 players
  data.players[localPlayerId] = {
    nickname: localNickname,
    role: null
  };
  
  // 如果还没 host，就把自己设为房主
  if (!data.hostId) {
    data.hostId = localPlayerId;
  }

  await db.set(data);

  // 显示游戏区，隐藏登录区
  playerNameSpan.innerText = localNickname;
  loginArea.classList.add("hidden");
  gameArea.classList.remove("hidden");
});

/** 开始游戏按钮点击事件 */
startGameBtn.addEventListener("click", async () => {
  if (!currentGameState) return;
  // 分配角色：例如最简单的 6 人局 -> 2 狼人, 4 村民
  // 若多于 6 人，可灵活增添预言家、女巫等，这里只做示例
  const playerIds = Object.keys(currentGameState.players);
  const playerCount = playerIds.length;
  
  // 计算狼人数量：简化为 int(玩家数 / 3)，至少 1
  const wolfCount = Math.max(1, Math.floor(playerCount / 3));
  // 随机分配狼人
  shuffleArray(playerIds);
  const wolves = playerIds.slice(0, wolfCount);
  
  // 赋值角色
  playerIds.forEach((pid) => {
    if (wolves.includes(pid)) {
      currentGameState.players[pid].role = "狼人";
    } else {
      currentGameState.players[pid].role = "村民";
    }
  });

  // 标记游戏开始
  currentGameState.gameStarted = true;

  await db.set(currentGameState);
});

/** 渲染玩家列表到页面 */
function renderPlayerList(players) {
  playerListDiv.innerHTML = "";
  for (let pid in players) {
    const p = players[pid];
    const div = document.createElement("div");
    div.className = "player-item";
    div.innerText = p.nickname;
    playerListDiv.appendChild(div);
  }
}

/** 随机打乱数组的简单函数 */
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
}
</script>
</body>
</html>

如何使用

在 Firebase 控制台创建一个新项目，启用 Realtime Database（或者 Firestore）。
将上面 index.html 中的 FIREBASE_CONFIG 替换为你在项目设置中获得的配置信息。
将修改后的 index.html 文件上传到任何静态托管服务（如 GitHub Pages、Netlify、Vercel 等），或者你自己的服务器上直接放置在根目录下也可。
多人同时访问这个 index.html 对应的 URL，即可体验简易版本的“多人在线狼人杀”。

后续可拓展的功能

更多角色：预言家、女巫、猎人等，增加更多数据库字段及分配逻辑。
投票/夜晚操作：可在前端加上投票功能（每个玩家点击选择要投死的对象），并将投票结果更新到数据库。
UI/UX：通过隐藏/展示不同阶段的提示，比如“请狼人睁眼”等，需要一些同步逻辑（如由房主点击“进入夜晚”）。
多房间支持：如果想同时开多局，可以将 db = firebase.database().ref("werewolfGame") 换成 db = firebase.database().ref("rooms/" + 房间ID)，让玩家自行输入房间号。

以上就是一个纯静态页面 + 第三方实时数据库构建的简单狼人杀原型示例。你只需部署这一个 index.html 文件，即可让不同玩家通过同一个链接加入并同步游戏进程。祝你开发顺利，玩的开心!

狼人杀在线游戏示例

Pregunta

Pensamiento

Respuesta

示例代码（index.html）

如何使用

后续可拓展的功能

Compartir este Q&A