Як зробити гру JS завантажуваною?

20

Я можу вмістити HTML і JavaScript разом у одному .htmlфайлі, але зображення повинні бути окремими файлами. Єдине рішення, яке мені спадає на думку - це дати користувачеві .zipпапку.

Це не дуже, хоча ... Як ще я можу це зробити?

javascript html5 distribution

— Арно
джерело

8

"Стандарт" не робить ігри на JS завантажуваними; вони працюють лише у браузері. Це може бути якийсь незрозумілий спосіб зробити це, але, чесно кажучи, навіщо це змушувати: використовувати правильний інструмент для роботи.

— поштовх

21

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

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

Використовуючи таблиці стилів CSS, ви можете створити ці повністю процедурні в JavaScript.

— Філіп
джерело

звичайно, base64 займає більше місця, вчетверо збільшивши розмір файлу ...

— Tobias Kienzler

10

@TobiasKienzler: 64 * 4 = 256 не означає, що для кодування одного байту потрібно 4 рази більше даних, але ви використовуєте лише 6 біт (2 ** 6 = 64) з кожні 8 байтів. Це означає, що для кодування 3 байтів потрібно 4 байти, що дає на 33% збільшення розміру (не рахуючи прокладки при необхідності). Навряд чи вчетверо. Єдиний випадок, коли розмір даних вчетверо збільшується, це при кодуванні одного байта, для якого потрібні 2 байти даних плюс 2 байта для заниження.

— Піжама Panda

2

@PandaPajama Моє погано, я мав намір сказати "збільшується на чверть" (через 2/8 = 1/4 витрачених бітів). Хоча явно я там помилився, 33% ви отримуєте правильність. Все-таки це накладні, також "відомі" з вкладень електронної пошти

— Tobias Kienzler

1

Чи буде базовим 64 вбудованим кодуванням працювати для інших ресурсів, таких як .wav, .ogg, .m4a і взагалі будь-який файл?

— DrZ214

1

@ DrZ214 Я не намагався, але AFAIK повинен працювати в будь-якому місці, де працює URL-адреса.

— Філіп

31

Просто розміщення всіх файлів у .zip-файлі не є прийнятним рішенням, оскільки для більшості веб-додатків потрібен веб-сервер, щоб вони могли отримати доступ до ресурсів через HTTP-запити. У деяких системах ви можете отримувати доступ до файлів за допомогою file://URI-схеми , але це не гарантується, що працюватиме скрізь із міркувань безпеки і не спрацює з такими речами, як запити AJAX.

Це може працювати для дуже простого додатка, де у вас є більшість ресурсів, але це дійсно не той підхід, який я б рекомендував нікому. Однак існують альтернативи, такі як:

Створіть нативну програму

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

Це не " пакет готових " підходів, хоча .. вам, мабуть, доведеться переписати частини програми та записати різні завантажувачі (наприклад, за допомогою настільного додатку ви краще завантажуєте файли через файлову систему, тоді як ви використовуєте HTTP -Запити в браузері / онлайн-грі).

Використовуйте функції HTML5, щоб дозволити доступ до програми в автономному режимі

Якщо ваша основна мета - дозволити гравцеві грати у вашу гру в режимі офлайн, ви також можете використовувати кеш-програму, щоб дозволити доступ до програми в автономному режимі. Це функція, яка працює в більшості сучасних браузерів . Додатковою перевагою є те, що користувачеві нічого не потрібно завантажувати і він може просто використовувати закладку для гри у вашу гру навіть у режимі офлайн.

Для ресурсів, які завантажуються асинхронно (AJAX), вам також доведеться реалізувати окремі механізми завантаження. Ви можете скористатися локальним сховищем, щоб зберегти ці ресурси для офлайн-використання.

— джмель
джерело

2

Node-Webkit досить великий, і ви отримаєте щось на зразок 60 Мб для гри "Привіт світ", якщо включите його.

— ashes999

1

Це правильна відповідь, якщо ваша програма навіть віддалено ускладнена.

— Vaughan Hilts

1

@ ashes999 Я згоден з вами, але 60MB все ще досить маленький для настільних програм сьогодні. Багато фреймворків загального призначення створюють деякий накладний розмір файлу (візьмемо Unity як яскравий приклад). З постійно зростаючим простором пам’яті зручність перемагає розмір файлу;)

— bummzack

2

@bummzack Я не згоден. Це просто гнітюче взяти гру на 100 кб JS і побачити, як вона стає 60 Мб, перш ніж додавати будь-яке мистецтво або аудіо. Сподіваємось, хтось придумає кращий шлях. +1 btw

— ashes999

1

Хоча в цій відповіді є багато корисної інформації, головне речення є явно неправильним. Ви можете розміщувати дані про ігри у файли JavaScript, сучасні браузери повинні мати можливість обробляти принаймні кілька МБ JavaScript, і доки ви не намагаєтесь прочитати дані зображення з полотна, з використанням файлів зображень немає нічого поганого . Востаннє я перевіряв, що всі сучасні браузери дозволяють file:///отримати доступ до протоколу localStorage, який працює для економії. Це дозволить зробити все, що можна зробити в грі HTML, крім онлайн-ігри.

— aaaaaaaaaaaa

7

Щоб створити на базі Chrome рішення для гри в режимі офлайн і насолодитися деякими нативними функціоналами, ви можете розглянути можливість створення програми Chrome .

Таким чином, ви можете поширити його у веб-магазині Chrome для додаткової наочності, ви можете насолоджуватися деякими потужними API та зробити його більш схожим на окремий додаток .

Мінус, звичайно, вимагає Chrome.

— Ксан
джерело

1

Firefox (і Firefos OS) має OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ), що подібне до цього: ідентифікатор веб-програми, завантажений як встановлений як додаток. Обидва рішення повинні сходитися до загального стандарту: html5doctor.com/web-manifest-specification . Дивіться також: code.google.com/p/chromium/isissue/detail?id=366145

— ysdx

@ysdx Стандартний конвергент, який ви згадуєте, - це те, що Chrome називає "розміщеними програмами", на відміну від справжнього самостійного завантажуваного додатка, який також називається "пакується додаток". Ця ж термінологія застосовується і до Firefox. На жаль, упаковані програми архітектурно відрізняються і навряд чи зближаться.

— Xan

@Xan що таке пакується додаток? Чи доступні додатки "розміщені" та "упаковані" у магазинах додатків Firefox та Chrome?

— Qsigma

1

@Qsigma Упакований додаток - це здебільшого автономний додаток HTML5 з доступом до потужних API, таких як доступ до локальної файлової системи; він "упакований", оскільки він містить власні ресурси для завантаження. "Розміщений" додаток - це в основному посилання на веб-сайт з деякими метаданими. Подумайте про це як про перехрестя між ярликом і закладкою. Я не можу розповісти про магазин Firefox, але документація з першого коментаря описує, як писати упаковані програми.

— Xan

Яка різниця між натисканням і запуском програми офлайн без подальших завантажень із більшою кількістю квот та дозволів, а також натисканням та запуском програми без подальших завантажень із більшою кількістю квот та дозволів? Хоча технічно вони мають відмінності, ці відмінності є поверхневими, для користувача різниці немає. Упаковка належним чином розробленого розміщеного додатка має бути досить тривіальною з правильними маніфестами. Недоліком упакованого додатка є те, що він не може оновити себе без зовнішнього менеджера пакунків, а розміщений додаток сам браузер - менеджер пакунків.

— Лі Лі Райан

0

Ну, це залежить від того, скільки роботи ви насправді хочете вкласти в нього. Використовуючи поточний набір веб-API, ви можете:

Створіть прогресивну веб-програму (PWA) (На жаль, PWA призначені лише для мобільних телефонів та ОС Chrome, але я чув, що незабаром Chrome for Desktop матиме підтримку для неї. Наразі він ховається за прапором) із старого додатка Кеш тепер застарілий
Перетворити все в текст ( зображення та аудіо ). І або заохочуйте користувача зберігати веб-сторінку такою, якою є (за допомогою Cmd+Sабо Ctrl+Sв браузері), або кешуйте її як PWA. Просто знайте, що на мобільних пристроях даніURI не працюють дуже добре.
Ви можете створити додаток Chrome , але це не працюватиме в будь-якій версії Chrome, яка не працює в ОС Chrome . Це означає, що вам краще створити розширення замість цього
Більшість ігор мають менше 10 Мб, при цьому ви можете сказати, що ви можете кешувати всі дані вашої гри в локальну пам’ять. Як ви це зробите, залежить від вас: ви можете виконати вищесказане (перетворити все в текст), використовувати Blob api тощо. Хоча я дуже перешкоджаю цьому, оскільки деякі мобільні телефони можуть очистити всю вашу гру з пам'яті. Це означає, що ви повинні перевірити, що все в порядку (якщо ваш код все ще знаходиться в пам'яті), що означає триваліший час завантаження, а також може збити телефон користувача. Якщо ви все-таки вирішите піти цим шляхом, вам обов'язково виграє використання LocalForage
Використовуючи Electron або NW.js , ви можете використовувати html, css та js для створення настільного додатка. Подібні методи можна використовувати і для створення мобільних додатків (використовуючи щось на кшталт Кордова або залежне від Кордови, як PhoneGap ). Ви зробите це, і дозволите користувачу завантажити повну гру, якщо захоче.
Якщо ви все ще хочете продовжувати zipфайли, оформіть JSZip . Я не маю поняття, як ви можете ним користуватися, але я впевнений, що хтось може придумати гарну ідею (можливо, зашпаркуйте ваш файл, а потім перетворіть бінарні дані в рядок і помістіть їх в рядок у HTML).
Цей дивний злом дозволяє завантажувати будь-які текстові дані як щось відоме як блок даних. Це лише ще один інструмент, за допомогою якого ви можете вставляти активи у файл html.

— Kitanga Nday
джерело