Jak zrobić grę JS do pobrania?

20

Mogę umieścić HTML i JavaScript razem w tym samym .htmlpliku, ale obrazy muszą być osobnymi plikami. Jedyne rozwiązanie, jakie przychodzi mi na myśl, to podanie użytkownikowi .zipfolderu.

To nie jest ładne ... Jak inaczej mogę to zrobić?

javascript html5 distribution Arnaud
źródło
8
„Standardem” nie jest tworzenie gier JS do pobrania; działają tylko w przeglądarce. Może być jakiś niejasny sposób, ale szczerze mówiąc, po co to wymuszać: użyj odpowiedniego narzędzia do pracy.
jhocking

Odpowiedzi:

21

Możesz osadzać obrazy w dokumencie HTML za pomocą składni dataurl, która pozwala umieścić reprezentację binarnych danych obrazu w formacie base64 jako atrybut src obrazu. Działa to również na każdym innym pliku multimedialnym.

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

Kiedy korzystasz z arkuszy stylów CSS, możesz utworzyć je całkowicie proceduralnie w JavaScript.

Philipp
źródło
oczywiście base64 zajmuje więcej miejsca, czterokrotnie zwiększając rozmiar pliku ...
Tobias Kienzler
10
@TobiasKienzler: 64 * 4 = 256 nie oznacza, że ​​potrzeba 4 razy więcej danych do zakodowania jednego bajtu, ale że używasz tylko 6 bitów (2 ** 6 = 64) na każde 8 bajtów. Oznacza to, że kodowanie 3 bajtów zajmuje 4 bajty, co daje 33% wzrost rozmiaru (nie licząc dopełniania, jeśli to konieczne). Prawie czterokrotnie. Jedyny przypadek, w którym rozmiar danych jest czterokrotnie zwiększony, to przy kodowaniu jednego bajtu, co wymaga 2 bajtów danych plus 2 bajtów wypełniania.
Panda Pajama
2
@PandaPajama Mój zły, chciałem powiedzieć „rośnie o jedną czwartą” (z powodu zmarnowanych bitów 2/8 = 1/4). Chociaż i tak oczywiście popełniłem błąd, 33%, które wyprowadzasz, jest poprawne. Jest to jednak narzut, również „sławny” z załączników e-mail
Tobias Kienzler
1
Czy to bazowe 64-liniowe kodowanie będzie działać dla innych zasobów, takich jak .wav, .ogg, .m4a i ogólnie dla dowolnego pliku?
DrZ214,
1
@ DrZ214 Nie próbowałem, ale AFAIK powinien działać wszędzie tam, gdzie działa adres URL.
Filipiny
31

Samo umieszczenie wszystkich plików w pliku .zip nie jest realnym rozwiązaniem, ponieważ większość aplikacji internetowych potrzebuje serwera WWW, aby mogli uzyskać dostęp do zasobów za pośrednictwem żądań HTTP. W niektórych systemach można uzyskać dostęp do plików za pomocą file://schematu URI , ale nie ma gwarancji, że będzie działać wszędzie ze względów bezpieczeństwa i nie powiedzie się w przypadku takich rzeczy, jak żądania AJAX.

Może to działać w przypadku bardzo prostej aplikacji, w której masz większość zasobów, ale to nie jest podejście, które poleciłbym każdemu. Istnieją jednak alternatywy, takie jak:

Zbuduj natywną aplikację

Możesz spakować aplikację internetową jako aplikację natywną za pomocą Node-Webkit . Możesz nawet użyć tego do dodania natywnych funkcji pulpitu (takich jak lokalne zapisywanie gier) do gry.

Nie jest to jednak podejście „ pakiet i gotowe ”. Prawdopodobnie będziesz musiał przepisać fragmenty aplikacji i napisać różne programy ładujące (np. Za pomocą aplikacji komputerowej raczej ładujesz pliki przez system plików, podczas gdy używasz HTTP -Pytania w przeglądarce / grze online).

Użyj funkcji HTML5, aby umożliwić dostęp aplikacji do trybu offline

Jeśli Twoim głównym celem jest umożliwienie graczowi grania w grę offline, możesz także użyć pamięci podręcznej aplikacji, aby umożliwić dostęp do aplikacji offline. Ta funkcja działa w większości nowoczesnych przeglądarek . Dodatkową korzyścią jest to, że użytkownik nie musi niczego pobierać i może po prostu użyć zakładki, aby zagrać w grę, nawet w trybie offline.

W przypadku zasobów ładowanych asynchronicznie (AJAX) należy również zaimplementować osobne mechanizmy ładowania. Możesz skorzystać z pamięci lokalnej, aby zapisać te zasoby do użytku offline.

grzmot
źródło
2
Node-Webkit jest dość duży, a jeśli go dodasz, otrzymasz 60 MB na grę JS „hello world”.
ashes999
1
To właściwa odpowiedź, jeśli twoja aplikacja jest nawet zdalnie skomplikowana.
Vaughan Hilts
1
@ ashes999 Zgadzam się z tobą, ale obecnie 60 MB jest wciąż dość mała jak na aplikację komputerową. Wiele frameworków ogólnego przeznaczenia generuje pewien narzut wielkości pliku (weźmy Unity jako wybitny przykład). Wraz ze wzrostem przestrzeni dyskowej wygoda wygrywa z rozmiarem pliku;)
bummzack
2
@bummzack Nie zgadzam się. Przyjemnie jest wziąć grę JS ~ 100 kb i zobaczyć, jak osiąga 60 MB, zanim dodasz grafikę lub dźwięk. Mam nadzieję, że ktoś wymyśli lepszy sposób. +1 btw
ashes999
1
Chociaż w tej odpowiedzi znajduje się wiele przydatnych informacji, zdanie wiodące jest po prostu błędne. Możesz umieszczać dane gry w plikach JavaScript, nowoczesne przeglądarki powinny być w stanie obsłużyć co najmniej kilka MB JavaScript, i dopóki nie spróbujesz odczytać danych obrazu z kanwy, nie ma nic złego w używaniu plików obrazów . Ostatnim razem, gdy sprawdzałem, wszystkie nowoczesne przeglądarki umożliwiają file:///dostęp do protokołu localStorage, który działa w celu zapisywania. Skaluje się do wszystkiego, co można zrobić w grze HTML, z wyjątkiem gry online.
aaaaaaaaaaaa
7

Jeśli chcesz, aby gra działała w trybie offline i mogła cieszyć się rodzimą funkcjonalnością, możesz rozważyć stworzenie aplikacji Chrome .

W ten sposób możesz dystrybuować go w Chrome Web Store , aby uzyskać lepszą widoczność, możesz cieszyć się potężnymi interfejsami API i sprawić, że będzie wyglądał bardziej jak samodzielna aplikacja .

Minusem jest oczywiście Chrome.

Xan
źródło
1
Firefox (i Firefos OS) ma OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ), który jest podobny do tego: identyfikator aplikacji internetowej pobrany jako zainstalowany. Oba rozwiązania powinny być zgodne ze wspólnym standardem: html5doctor.com/web-manifest-specification . Zobacz także: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx Wspomniany standard zbieżności dotyczy tego, co Chrome nazywa „aplikacjami hostowanymi”, w przeciwieństwie do prawdziwej samodzielnej aplikacji do pobrania, zwanej również „aplikacją pakietową”. Ta sama terminologia dotyczy Firefoksa. Niestety aplikacje w pakiecie różnią się pod względem architektonicznym i raczej nie są zbieżne.
Xan
@ Xan co to jest aplikacja w pakiecie? Czy aplikacje „hostowane” i „spakowane” są dostępne w sklepach z aplikacjami Firefox i Chrome?
Qsigma
1
@Qsigma Spakowana aplikacja to w większości samodzielna aplikacja HTML5 z dostępem do potężnych interfejsów API, takich jak dostęp do lokalnego systemu plików; jest „spakowany”, ponieważ zawiera własne zasoby do pobrania. „Hostowana” aplikacja to w zasadzie link do strony internetowej z pewnymi metadanymi. Potraktuj to jako skrzyżowanie skrótu i ​​zakładki. Nie mogę powiedzieć o sklepie Firefox, ale dokumentacja z pierwszego komentarza opisuje, jak pisać aplikacje w pakiecie.
Xan
Jaka jest różnica między kliknięciem a uruchomieniem aplikacji w trybie offline bez dalszych pobrań z większą liczbą przydziałów i uprawnieniami, a kliknięciem i uruchomieniem aplikacji bez dalszych pobrań z większą liczbą przydziałów i pozwoleń? Chociaż technicznie mają różnice, różnice te są powierzchowne, dla użytkownika nie ma różnicy. Pakowanie odpowiednio zaprojektowanej hostowanej aplikacji powinno być dość trywialne z odpowiednimi manifestami. Minusem związanym z aplikacją spakowaną jest to, że nie może ona się zaktualizować bez zewnętrznego menedżera pakietów, w przypadku aplikacji hostowanej przeglądarka jest menedżerem pakietów.
Lie Ryan
0

To zależy od tego, ile pracy naprawdę chcesz w to włożyć. Korzystając z bieżącego zestawu interfejsów API sieci Web, możesz:

  • Utwórz progresywną aplikację internetową (PWA) (niestety PWA są przeznaczone tylko dla telefonów komórkowych i systemu operacyjnego Chrome, ale słyszałem, że wkrótce Chrome na komputery będzie ją obsługiwał. Na razie ukrywa się pod flagą) od starej aplikacji Pamięć podręczna jest teraz przestarzała
  • Konwertuj wszystko na tekst ( obrazy i audio ). I albo zachęć użytkownika do zapisania strony internetowej bez zmian (za pomocą Cmd+Slub Ctrl+Sw przeglądarce) lub buforuj stronę jako PWA. Po prostu wiedz, że na urządzeniach mobilnych dataURI nie działają zbyt dobrze.
  • Możesz utworzyć aplikację Chrome , ale nie będzie ona działać w żadnej wersji Chrome, która nie działa w systemie operacyjnym Chrome . Oznacza to, że lepiej jest zamiast tego utworzyć rozszerzenie
  • Większość gier ma mniej niż 10 MB, co oznacza, że ​​możesz buforować wszystkie dane gry do lokalnego magazynu. To, jak to zrobisz, zależy od Ciebie: możesz zrobić powyższe (przekonwertować wszystko na tekst), użyć interfejsu Blob API itp. Chociaż bardzo to odradzam, ponieważ niektóre telefony komórkowe mogą wyczyścić całą grę z pamięci. Co oznacza, że ​​musisz sprawdzić, czy wszystko jest w porządku (jeśli kod jest nadal w pamięci), co oznacza dłuższy czas ładowania, a także może spowodować awarię telefonu użytkownika. Jeśli zdecydujesz się pójść tą ścieżką, na pewno skorzystasz z LocalForage
  • Korzystając z Electron lub NW.js , możesz użyć html, css i js do stworzenia aplikacji komputerowej. Podobne metody można również wykorzystać do tworzenia aplikacji mobilnych (przy użyciu czegoś takiego jak Cordova lub Cordova zależna jak PhoneGap ). Zrobisz to i zezwolisz użytkownikowi na pobranie pełnej gry, jeśli zechce.
  • Jeśli nadal chcesz kontynuować z zipplikiem, sprawdź JSZip . Nie mam pojęcia, jak możesz go używać, ale jestem pewien, że ktoś może wymyślić dobry pomysł (może skompresować plik, a następnie przekonwertować dane binarne na ciąg i umieścić je w pliku HTML).
  • Ten dziwny hack pozwala załadować dowolne dane tekstowe jako coś, co nazywamy blokiem danych. To tylko kolejne narzędzie do osadzania zasobów w pliku HTML.
Kitanga Nday
źródło