本文介绍如何用原生 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 中硬编码的数组替换为异步加载逻辑。建议在 <script> 标签末尾（或 DOMContentLoaded 回调中）执行：</script>
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 =
`<strong>${player.name}</strong>: ${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/ 下的文件，刷新网页即可生效——真正实现「代码一次，内容常新」的开发体验。
