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

20

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

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

Arnaud
источник
8
«Стандарт» не делает JS-игры скачиваемыми; они работают только в браузере. Может быть какой-то неясный способ сделать это, но, честно говоря, зачем его заставлять: использовать правильный инструмент для работы.
Джоккинг

Ответы:

21

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

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

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

Philipp
источник
конечно base64 занимает больше места, увеличивая в четыре раза размер файла ...
Тобиас Кинцлер,
10
@TobiasKienzler: 64 * 4 = 256 не означает, что для кодирования одного байта требуется в 4 раза больше данных, но вы используете только 6 бит (2 ** 6 = 64) из каждых 8 в каждом байте. Это означает, что для кодирования 3 байтов требуется 4 байта, что дает увеличение размера на 33% (без учета заполнения при необходимости). Вряд ли в четыре раза. Единственный случай, когда размер данных увеличивается в четыре раза, - это кодирование одного байта, для которого требуется 2 байта данных плюс 2 байта заполнения.
Панда Пижама
2
@PandaPajama Мой плохой, я намеревался сказать «увеличивается на четверть» (из-за 2/8 = 1/4 потраченных бит). Хотя, очевидно, я все равно допустил ошибку, 33%, которые вы получили, верны. Тем не менее, это накладные расходы, также «известные» из вложений электронной почты
Тобиас Кинцлер
1
Будет ли эта встроенная кодировка 64 работать для других ресурсов, таких как .wav, .ogg, .m4a и вообще для любого файла?
DrZ214
1
@ DrZ214 Я не пробовал, но AFAIK он должен работать везде, где работает URL.
Филипп
31

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

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

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

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

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

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

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

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

bummzack
источник
2
Node-Webkit довольно большой, и вы получите около 60 МБ для JS-игры «hello world», если вы ее включите.
ashes999
1
Это правильный ответ, если ваше приложение даже удаленно сложно.
Вон Хилтс
1
@ ashes999 Я согласен с вами, но сейчас 60МБ для настольного приложения все еще невелики. Многие универсальные фреймворки создают некоторые накладные расходы на размер файла (в качестве яркого примера рассмотрим Unity). С постоянно растущим объемом памяти удобство
превосходит
2
@bummzack Я не согласен. Просто удручает взять JS-игру ~ 100 КБ и увидеть, что она становится 60 МБ, прежде чем добавлять какие-либо произведения или аудио. Надеюсь, кто-нибудь придумает лучший способ. +1 между прочим
ashes999
1
Хотя в этом ответе много полезной информации, основное предложение совершенно неверно. Вы можете поместить игровые данные в файлы JavaScript, современные браузеры должны иметь возможность обрабатывать как минимум несколько МБ JavaScript, и если вы не пытаетесь читать данные изображения с холста, то нет ничего плохого в использовании файлов изображений. , В прошлый раз, когда я проверял, все современные браузеры разрешают file:///доступ к протоколу localStorage, который работает для сохранения. Он будет выполнять все, что можно в HTML-игре, кроме онлайн-игры.
аааааааааааа
7

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

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

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

Xan
источник
1
Firefox (и Firefos OS) имеют OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ), который похож на это: идентификатор веб-приложения, загруженный как установленный как приложение. Оба решения должны соответствовать общему стандарту: html5doctor.com/web-manifest-specification . См. Также: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx Конвергентный стандарт, о котором вы упомянули, предназначен для того, что Chrome называет «размещенными приложениями», в отличие от действительно автономного загружаемого приложения, также называемого «упакованным приложением». Та же терминология применима к Firefox. К сожалению, упакованные приложения архитектурно очень разные и вряд ли сойдутся.
Ксан
@Xan что такое упакованное приложение? Доступны ли как «размещенные», так и «упакованные» приложения в магазинах приложений Firefox и Chrome?
Qsigma
1
@Qsigma Упакованное приложение - это в основном автономное приложение HTML5 с доступом к мощным API, таким как доступ к локальной файловой системе; он «упакован», потому что он содержит собственные ресурсы для загрузки. «Размещенное» приложение - это, по сути, ссылка на веб-сайт с некоторыми метаданными. Думайте об этом как нечто среднее между ярлыком и закладкой. Я не могу рассказать о магазине Firefox, но документация из первого комментария описывает, как писать упакованные приложения.
Ксан
В чем разница между щелчком мыши и тем, чтобы приложение запускалось в автономном режиме без дополнительных загрузок с большим количеством квот и разрешений, и щелчком мыши и после того, как приложение запускалось без дополнительных загрузок с большим количеством квот и разрешений? Хотя технически они имеют различия, эти различия являются поверхностными, для пользователя нет никакой разницы. Упаковка должным образом разработанного размещенного приложения должна быть довольно тривиальной с правильными манифестами. Недостатком упакованного приложения является то, что оно не может обновляться без внешнего менеджера пакетов, а с размещенным приложением браузер сам является менеджером пакетов.
Ли Райан
0

Ну, это зависит от того, сколько работы вы действительно хотите вложить. Используя текущий набор веб-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-файл.
Китанга Ндай
источник