JS Game design - в основном статический или динамический HTML

Я новичок в JS и пишу игру, которая будет полностью на стороне клиента. У меня есть фундаментальный вопрос о структуре HTML.

Скажем, что игра будет RPG, и я хочу показать пользователю статистику их персонажа, такую ​​как Интеллект 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 в эту строку tableHTML.

Что лучше? Я знаю, что это будет зависеть от конкретного случая, но можете ли вы, по крайней мере, направить меня к некоторым хорошим ресурсам о кодировании таких вещей с помощью JavaScript?

Источник

1 ответ

Решение

Оба метода хороши, так как на самом деле существуют целые фреймворки, построенные на рендеринге html-стороны клиента, чтобы уменьшить нагрузку на сервер - эти фреймворки должны поставляться с JSON с сервера вместо полного HTML-ответа, после чего JS создает HTML-код, который в основном делает страницу.

Однако в вашем случае вы можете захотеть сделать что-то по-другому, посмотрите на это так:

  • Метод A: обновить определенный элемент
  • Метод Б: каждый раз обновлять весь список

Метод А, если вы меняете только 1 стат за ход - это путь, так как вы будете обновлять меньше DOM за раз, но у вас будет больше идентификаторов для отслеживания.

Метод Б, если вы меняете несколько характеристик за ход, то вы, вероятно, захотите сделать это, так как вы можете просто построить <li>и положить их внутрь ul каждый ход.

Это зависит от вашей ситуации. Метод B модифицирует DOM больше, чем метод A, но оба они хороши для использования.

НОТА

Метод B удаляет больше элементов, чем метод A, обратите внимание, что если у вас есть другие обработчики событий, связанные с элементами, обновляемыми с помощью метода B, вам придется повторно выбирать эти элементы, так как элемент, который вы использовали ранее, исчезнет.

По производительности я бы не беспокоился о том, лучше ли будет использовать метод А или метод В. Вероятно, одной из наименее подверженных ошибкам является метод А, поскольку вы обновляете определенные элементы на странице (меньше манипуляций с DOM означает меньше возможных ошибок).

Надеюсь, что это поможет подтолкнуть вас в правильном направлении, я связал платформу для справки, поскольку она использует довольно крутой метод отображения данных со стороны сервера;)

Удачи, Сидни Либранд

Источник
Другие вопросы по тегам