本文介绍如何用原生 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 files:', 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/ 下的文件，刷新网页即可生效——真正实现「代码一次，内容常新」的开发体验。