17370845950

本文介绍如何用原生 javascript（无需 node.js）通过 fetch 读取外部文本/csv 文件，动态加载不同性别、难度的挑战任务，并无缝集成到网页游戏中。

在当前的 Truth or Dare 网页应用中，所有挑战语句（dares）都硬编码在 JavaScript 数组中（如 maleDares 和 femaleDares），这严重限制了可维护性与扩展性。要支持轻松增删上百条任务、按性别/难度分类管理，最佳实践是将数据外置为纯文本或 CSV 文件，并在运行时异步加载——注意：浏览器环境无法使用 fs.readFile（Node.js 模块），必须改用 fetch API。

✅ 推荐方案：使用纯文本文件（.txt）替代 CSV

虽然问题提到 CSV，但对单列任务列表而言，CSV 过于复杂（需处理引号、逗号转义等）。更轻量、可靠且易编辑的方式是使用换行分隔的纯文本文件：

// data/male.txt
Sing a song from your favorite musical.
Do an impersonation of your favorite celebrity.
Dance like nobody is watching.
Wear a silly costume and walk around the block.

同理创建 data/female.txt 和未来可扩展的 data/easy.txt、data/hard.txt。

? 步骤一：预加载任务数据（在 DOM 加载后执行）

将原 JS 中硬编码的数组替换为异步加载逻辑。建议在

let maleDares = [];
let femaleDares = [];

// 预加载所有 dare 列表
Promise.all([
  fetch('data/male.txt').then(r => r.text()),
  fetch('data/female.txt').then(r => r.text())
])
.then(([maleTxt, femaleTxt]) => {
  // 按换行分割，过滤空行
  maleDares = maleTxt.split('\n').map(s => s.trim()).filter(s => s);
  femaleDares = femaleTxt.split('\n').map(s => s.trim()).filter(s => s);

  console.log(`✅ Loaded ${maleDares.length} male dares, ${femaleDares.length} female dares.`);
})
.catch(err => {
  console.error('❌ Failed to load dare f
iles:', err);
  alert('游戏任务加载失败，请检查 data/ 目录下 male.txt 和 female.txt 是否存在。');
});

⚠️ 重要注意事项：确保 data/ 文件夹与 HTML 同级，且服务器已启动（直接双击 HTML 会因 CORS 报错；请用 VS Code Live Server、Python http.server 或任意本地 Web 服务打开）。所有 fetch 请求必须在页面加载完成后执行（避免操作未定义的 DOM 元素），建议包裹在 document.addEventListener('DOMContentLoaded', ...) 中。

? 步骤二：改造 generateDare 逻辑（延迟执行）

由于 fetch 是异步的，generateDare 按钮点击时数据可能尚未就绪。因此需添加状态判断：

document.getElementById("generateDare").addEventListener("click", function() {
  if (players.length === 0) {
    alert("Please add some players first!");
    return;
  }

  // 等待数据加载完成
  if (maleDares.length === 0 || femaleDares.length === 0) {
    alert("⏳ Tasks are still loading… Please try again in a moment.");
    return;
  }

  const randomPlayer = Math.floor(Math.random() * players.length);
  const player = players[randomPlayer];
  const dareList = player.gender === "male" ? maleDares : femaleDares;
  const dare = dareList[Math.floor(Math.random() * dareList.length)];

  document.getElementById("dareDisplay").innerHTML = 
    `${player.name}: ${dare}`;
});

? 进阶：支持多维度筛选（性别 + 难度）

只需增加对应文件（如 data/male_easy.txt, data/female_hard.txt）并扩展加载逻辑：

// 支持难度选择（示例）
let dareMap = {};

Promise.all([
  fetch('data/male_easy.txt').then(r => r.text()),
  fetch('data/male_hard.txt').then(r => r.text()),
  fetch('data/female_easy.txt').then(r => r.text()),
  fetch('data/female_hard.txt').then(r => r.text())
])
.then(([mEasy, mHard, fEasy, fHard]) => {
  dareMap = {
    male: { easy: parseLines(mEasy), hard: parseLines(mHard) },
    female: { easy: parseLines(fEasy), hard: parseLines(fHard) }
  };
})
.catch(console.error);

function parseLines(txt) {
  return txt.split('\n').map(s => s.trim()).filter(s => s);
}

// 使用时：
// const dare = dareMap[player.gender][difficulty].at(Math.floor(Math.random() * dareMap[player.gender][difficulty].length));

✅ 总结

• ✅ 放弃 fs：浏览器不支持 Node.js 的 fs 模块，fetch 是唯一标准方案。
• ✅ 优选 .txt：比 CSV 更简洁、无解析风险，适合单列文本列表。
• ✅ 健壮错误处理：网络失败、文件缺失、空数据均需友好提示。
• ✅ 解耦与可扩展：未来新增“非二元”、“团队模式”等，只需添加新文件和映射逻辑，无需修改核心游戏流程。

现在，你只需用任意文本编辑器修改 data/ 下的文件，刷新网页即可生效——真正实现「代码一次，内容常新」的开发体验。