Bullseye 得分游戏 - 尝试使用纯 JS 错了吗？

Question

我正在开发一个逻辑上简单的游戏，其中包含一个靶心和 8 轮记分牌。我在每个区域使用带有 onClick 事件的圆形图像映射来写入适当的得分量。示例：靶心的中间是 6 分，下一个环是 4 分，下一个是 3 分，以此类推。我正在使用会话存储来存储玩家人数、玩家姓名、轮到谁等。

我对第 1 版的了解相当深入，并且大部分都可以正常工作，但由于我构建它的方式，我开始遇到一些问题。我遇到了一个很难使用 HTML 表格的问题，因为表格 HTML 在我的所有 JS 在文档中触发之前呈现。问题示例：我要求将玩家人数作为游戏的第一步。我需要为每个玩家写一个表格行，如果页面已经呈现，我不能这样做。此外，在宣布获胜者时，我没有一个很好的方法来关联玩家姓名和玩家总得分。

所以我的问题是……尝试用纯 HTML 和 JS 来做这件事有错吗？ jQuery（或其他语言）会让这更容易吗？我没有大量使用 jQuery 的经验。您会改为使用数据库来临时存储球员人数、姓名、分数等吗？

也许我可以将游戏的提示部分拆分为单独的页面？例如。第 1 页询问有多少玩家，第 2 页询问他们的姓名，第 3 页建立靶心和记分牌？我还得解决球员姓名和总分的关联问题。

我的代码没有足够的形状来展示大众，所以这更像是一篇理论文章。谢谢！

Answer 1

我需要为每个玩家写一个表格行，如果页面已经呈现，我不能这样做。

为什么不呢？您可以在呈现后轻松修改现有的 html：

const add = document.getElementById("add")
const players = document.getElementById("players").querySelector('tbody');
add.addEventListener("click", () => {
   const newRow = document.createElement('tr');
   const playerName = document.createElement('td');
   const playerScore = document.createElement('td');
   const controls = document.createElement('td');
   controls.innerHTML = `
       <button class="incrementScore">+</button>
       <button class="decrementScore">-</button>
   `;
   playerScore.innerHTML = 0
   newRow.appendChild(playerName);
   newRow.appendChild(playerScore);
   newRow.appendChild(controls);
   controls.querySelector('.incrementScore').addEventListener('click', () => {
       playerScore.innerHTML = parseInt(playerScore.innerHTML) + 1;
   });
   controls.querySelector('.decrementScore').addEventListener('click', () => {
       playerScore.innerHTML = parseInt(playerScore.innerHTML) - 1;
   });
   const name = prompt('name?');
   playerName.innerHTML = name;
   players.appendChild(newRow);
});

<table id="players" border=1>
<thead><tr><th>Player</th><th>Score</th><th></th></tr></thead>
<tbody>
</tbody>
<tfooter>
<tr><td colspan=3><button id="add">+ Add Player</button></td></tr>
</tfooter>
</table>