JS 游戏设计 - 主要是静态 vs. 主要是动态 HTML

JS Game design - mostly static vs. mostly dynamic HTML

我是 JS 的新手,正在编写一个完全客户端的游戏。我有一个关于 HTML 结构的基本问题。

假设游戏将成为角色扮演游戏,我想向用户显示他们角色的统计数据,例如智力 18、力量 15、魅力 20 等

现在由于这些值不是静态的并且会在每个新回合发生变化(游戏是基于回合的)这些值需要由 JavaScript 填写。假设我们想在列表中显示它们。

据我所知,有两种方法可以做到这一点,一种是保持静态 HTML 并仅使用 JavaScript 来填写这样的值:

<ul>
  <li>Intelligence:
    <div id="IntValue"></div>
  </li>
  <li>Strength:
    <div id="StrValue"></div>
  </li>
</ul>

然后在 JavaScript 中编辑那些 div,如 getElementById("IntValue").innerHTML = "18";

第二种方法可能是仅将 <ul id="CharStats"></ul> 放入实际的 HTML 文件中,然后生成包含所有 <li> 元素的整个列表,例如 JavaScript .例如,我可以创建一个 tableHTML 字符串,然后将所有 <ul> 一个一个地动态添加到它,然后获取 CharStats 并将其 innerHTML 设置为那个 table HTML 字符串.

哪个更好?我知道这取决于具体情况,但你能至少指导我一些关于使用 JavaScript 编码此类内容的好资源吗?

这两种方法都很好,事实上,整个 frameworks 构建在呈现 html 客户端以减少服务器负载 - 这些框架需要与 JSON 一起提供来自服务器而不是整个 HTML 响应,然后 JS 构建基本上构成页面的 HTML 代码。

但是在您的情况下,您可能想以不同的方式做事,请这样看:

  • 方法 A:更新特定元素
  • 方法B:每次都刷新整个列表

方法 A,如果您每回合只更改 1 个统计数据 - 这是要走的路,因为您一次更新的 DOM 较少,但您将有更多的 ID 来跟踪的。

方法 B,如果您每回合更改多个统计数据,那么您可能想要这样做,因为您可以构建 <li> 并将它们放入 ul 中转.

这取决于你的情况,方法 B 确实比方法 A 修改了 DOM,但两者都很好用。

注意

方法 B 比方法 A 删除了更多的元素,请注意,如果您有其他事件处理程序绑定到方法 B 正在刷新的元素,您将不得不重新选择这些元素,因为您之前使用的元素将会消失.

就性能而言,我不会担心方法 A 或方法 B 是最好的。最不容易出错的可能是方法 A,因为您正在更新页面上的特定元素(更少的 DOM 操作意味着更少可能的错误)。

希望这有助于将您推向正确的方向,我链接了该框架以供参考,因为它使用一种非常酷的方法从服务器端显示数据;)

祝你好运, 西德尼·利布兰德