Как сделать игру JS скачиваемой?

Я могу поместить HTML и JavaScript вместе в один .htmlфайл, но изображения должны быть отдельными файлами. Единственное решение, которое приходит мне в голову - это дать пользователю .zipпапку.

Это не красиво, хотя ... Как еще я могу это сделать?

Вы можете встраивать изображения в HTML-документ, используя синтаксис dataurl, который позволяет поместить представление base64 данных двоичного изображения в качестве src-атрибута изображения. Это также работает с любым другим типом медиа-файла.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">

Когда вы используете таблицы стилей CSS, вы можете создавать их полностью процедурно в JavaScript.

Простое помещение всех файлов в ZIP-файл не является жизнеспособным решением, поскольку большинству веб-приложений необходим веб-сервер, чтобы они могли обращаться к ресурсам через HTTP-запросы. В некоторых системах вы можете получить доступ к файлам через file://URI-схему , но это не гарантирует, что она будет работать везде из-за соображений безопасности и не будет работать для таких вещей, как запросы AJAX.

Это может работать для очень простого приложения, в котором у вас есть большинство встроенных ресурсов, но это действительно не тот подход, который я бы рекомендовал никому. Хотя есть альтернативы, такие как:

Создайте нативное приложение

Вы можете упаковать свое веб-приложение как нативное, используя Node-Webkit . Вы даже можете использовать это, чтобы добавить в игру встроенные функции рабочего стола (например, локальные сохранения).

Это не подход « пакет и готово », хотя ... вам, вероятно, придется переписывать части вашего приложения и писать разные загрузчики (например, с настольным приложением вы скорее загрузите файлы через файловую систему, тогда как вы используете HTTP -Запросы в браузере / онлайн-игре).

Используйте функции HTML5, чтобы разрешить автономный доступ к вашему приложению

Если ваша основная цель состоит в том, чтобы позволить игроку играть в вашу игру в автономном режиме, вы также можете использовать кэш приложения, чтобы разрешить автономный доступ к вашему приложению. Эта функция работает в большинстве современных браузеров . Дополнительным преимуществом является то, что пользователю не нужно ничего скачивать, и он может просто использовать закладку, чтобы играть в свою игру, даже когда он не в сети.

Для ресурсов, которые загружаются асинхронно (AJAX), вам также потребуется реализовать отдельные механизмы загрузки. Вы могли бы использовать локальное хранилище, чтобы сохранить эти ресурсы для автономного использования.

Для решения на основе Chrome, позволяющего запустить игру в автономном режиме и использовать некоторые собственные функции, вы можете рассмотреть возможность создания приложения Chrome .

Таким образом, вы можете распространять его в Chrome Web Store для дополнительной наглядности, вы можете пользоваться некоторыми мощными API большей и делать его больше похожим на отдельное приложение .

Недостатком, конечно же, является необходимость в Chrome.

Ну, это зависит от того, сколько работы вы действительно хотите вложить. Используя текущий набор веб-API, вы можете:

• Создание прогрессивного веб-приложения (PWA) (к сожалению, PWA предназначены только для мобильных телефонов и Chrome OS, но я слышал, что Chrome для настольных компьютеров скоро получит поддержку для него в ближайшее время. На данный момент он скрывается за флагом) со времен старого приложения Кеш теперь устарел
• Конвертировать все в текст ( изображения и аудио ). И либо поощряйте пользователя сохранять веб-страницу как есть (используя Cmd+SилиCtrl+S в браузере), либо кэшируйте страницу как PWA. Просто знайте, что на мобильных устройствах dataURI работают не очень хорошо.
• Вы можете создать приложение Chrome , но оно не будет работать на любой версии Chrome, не работающей в Chrome OS . Это означает, что вам лучше создать расширение вместо
• Большинство игр имеют размер менее 10 МБ, при этом вы можете кэшировать все данные вашей игры в локальное хранилище. Как это сделать, зависит только от вас: вы можете делать все вышеперечисленное (конвертировать все в текст), использовать API-интерфейсы Blob и т. Д. Хотя я крайне не одобряю это, поскольку некоторые мобильные телефоны могут очистить всю вашу игру из памяти. Это означает, что вы должны проверить, что все в порядке (если ваш код все еще находится в памяти), что означает более длительное время загрузки, а также может привести к поломке телефона пользователя. Если вы решите пойти по этому пути, вы наверняка выиграете от использования LocalForage
• Используя Electron или NW.js , вы можете использовать html, css и js для создания настольного приложения. Подобные методы можно использовать и для создания мобильных приложений (используя что-то вроде Cordova или Cordova, например PhoneGap). ). Вы сделаете это и позволите пользователю загрузить полную версию игры, если они захотят.
• Если вы все еще хотите продолжить с zipфайлом, оформите заказ JSZip . Я понятия не имею, как вы можете использовать его, но я уверен, что кто-то может придумать хорошую идею (может быть, ZIP-файл, а затем преобразовать двоичные данные в строку и поместить их в HTML).
• Этот странный хак позволяет вам загружать любые текстовые данные как нечто, известное как блок данных. Это просто еще один инструмент, который вы можете использовать для встраивания ресурсов в HTML-файл.