Come faccio a scaricare un gioco JS?

20

Posso mettere insieme HTML e JavaScript nello stesso .htmlfile, ma le immagini devono essere file separati. L'unica soluzione che mi viene in mente è di dare all'utente una .zipcartella.

Questo non è carino però ... In quale altro modo posso farlo?

javascript html5 distribution

— Arnaud
fonte

8

Lo "standard" non è quello di rendere scaricabili i giochi JS; funzionano solo in un browser. Potrebbe esserci un modo oscuro per farlo, ma francamente perché forzarlo: usare lo strumento giusto per il lavoro.

— jhocking

21

È possibile incorporare immagini nel documento HTML utilizzando la sintassi dataurl che consente di inserire la rappresentazione base64 dei dati binari dell'immagine come attributo src di un'immagine. Questo funziona anche con qualsiasi altro tipo di file multimediale.

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

Quando usi i fogli di stile CSS, puoi crearli completamente procedurali in JavaScript.

— Philipp
fonte

ovviamente base64 occupa più spazio, quadruplicando la dimensione del file ...

— Tobias Kienzler,

10

@TobiasKienzler: 64 * 4 = 256 non significa che occorrono 4 volte più dati per codificare un singolo byte, ma che usi solo 6 bit (2 ** 6 = 64) su ogni 8 in ogni byte. Ciò significa che sono necessari 4 byte per codificare 3 byte, il che comporta un aumento delle dimensioni del 33% (senza contare il riempimento quando necessario). Quasi quadruplicando. L'unico caso in cui la dimensione dei dati è quadruplicata è quando si codifica un singolo byte, che richiede 2 byte di dati più 2 byte di riempimento.

— Panda Pajama,

2

@PandaPajama Mio male, intendevo dire "aumenti di un quarto" (a causa dei 2/8 = 1/4 di bit sprecati). Anche se ovviamente ho fatto un errore lì, comunque, il 33% che ottieni è corretto. Tuttavia, è un sovraccarico, anche "famoso" dagli allegati di posta elettronica

— Tobias Kienzler,

1

La codifica inline 64 di base funzionerà con altre risorse come .wav, .ogg, .m4a e in generale qualsiasi file?

— DrZ214,

1

@ DrZ214 Non l'ho provato, ma AFAIK dovrebbe funzionare ovunque funzioni un URL.

— Philipp,

31

Il semplice inserimento di tutti i file in un file .zip non è una soluzione praticabile poiché la maggior parte delle applicazioni Web necessita di un server Web per poter accedere alle risorse tramite richieste HTTP. Su alcuni sistemi è possibile accedere ai file tramite lo file://schema URI , ma non è garantito che funzioni ovunque per motivi di sicurezza e fallirà per cose come le richieste AJAX.

Potrebbe funzionare per un'app molto semplice in cui hai la maggior parte delle risorse in linea, ma questo non è l'approccio che consiglierei a nessuno. Ci sono alternative però, come:

Crea un'applicazione nativa

Puoi impacchettare la tua applicazione web come app nativa usando Node-Webkit . Puoi anche usarlo per aggiungere funzionalità desktop native (come i salvataggi locali) al tuo gioco.

Questo non è un approccio " pacchetto e fatto " però ... probabilmente dovrai riscrivere porzioni della tua applicazione e scrivere caricatori diversi (ad es. Con un'app desktop preferirai caricare i file tramite filesystem, mentre usi HTTP -Richieste in un browser / gioco online).

Utilizza le funzionalità HTML5 per consentire l'accesso offline della tua app

Se il tuo obiettivo principale è consentire al giocatore di giocare offline, puoi anche utilizzare la cache dell'applicazione per consentire l'accesso offline della tua app. Questa è una funzionalità che funziona nella maggior parte dei browser moderni . Il vantaggio aggiuntivo è che l'utente non deve scaricare nulla e può semplicemente utilizzare un segnalibro per giocare anche quando è offline.

Per le risorse che vengono caricate in modo asincrono (AJAX) dovrai anche implementare meccanismi di caricamento separati. È possibile utilizzare l'archiviazione locale per salvare queste risorse per l'utilizzo offline.

— bummzack
fonte

2

Node-Webkit è piuttosto grande e finirai con qualcosa come 60 MB per un gioco JS "ciao mondo" se lo includi.

— ashes999,

1

Questa è la risposta giusta se la tua applicazione è anche lontanamente complicata.

— Vaughan Hilts,

1

@ ashes999 Sono d'accordo con te, ma 60 MB è ancora abbastanza piccolo per un'app desktop al giorno d'oggi. Molti framework per scopi generici creano un overhead di dimensioni di file (prendono Unity come esempio di spicco). Con lo spazio di archiviazione sempre crescente, la convenienza vince sulla dimensione del file;)

— bummzack,

2

@bummzack Non sono in disaccordo. È deprimente prendere un gioco JS da ~ 100kb e vederlo diventare 60MB, prima di aggiungere arte o audio. Spero che qualcuno possa trovare un modo migliore. +1 btw

— ashes999

1

Mentre ci sono molte informazioni utili in questa risposta, la frase principale è chiaramente sbagliata. Puoi inserire i dati di gioco nei file JavaScript, i browser moderni dovrebbero essere in grado di gestire almeno alcuni MB di JavaScript e finché non provi a leggere i dati delle immagini da un'area di disegno non c'è nulla di sbagliato nell'usare i file di immagini . L'ultima volta che ho controllato, tutti i browser moderni consentono l' file:///accesso al protocollo localStorage, che funziona per il salvataggio. Scalerà per fare tutto ciò che si può fare in un gioco HTML, ad eccezione del gioco online.

— aaaaaaaaaaaa,

7

Per una soluzione basata su Chrome per rendere il gioco offline e usufruire di alcune funzionalità native, puoi prendere in considerazione l'idea di creare un'app Chrome .

In questo modo, puoi distribuirlo nel Chrome Web Store per una maggiore visibilità, puoi goderti alcune potenti API e renderlo più simile a un'app standalone .

Il rovescio della medaglia, ovviamente, richiede Chrome.

— Xan
fonte

1

Firefox (e il sistema operativo Firefos) ha OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) che è simile a questo: l'id dell'applicazione Web scaricato come installato come applicazione. Entrambe le soluzioni dovrebbero convergere in uno standard comune: html5doctor.com/web-manifest-specification . Vedi anche: code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx Lo standard convergente che menzioni è quello che Chrome chiama "app ospitate", al contrario di una vera app indipendente e scaricabile, chiamata anche "app in pacchetto". La stessa terminologia si applica a Firefox. Sfortunatamente, le app in pacchetto sono architettonicamente molto diverse e difficilmente convergono.

— Xan,

@Xan cos'è un'app in pacchetto? Le app "ospitate" e "in pacchetto" sono disponibili negli app store di Firefox e Chrome?

— Qsigma,

1

@Qsigma Un'app in pacchetto è un'app HTML5 prevalentemente autonoma con accesso a potenti API come l'accesso al filesystem locale; è "impacchettato" perché contiene le proprie risorse in un download. Un'app "ospitata" è fondamentalmente un collegamento a un sito Web con alcuni metadati. Pensalo come un incrocio tra una scorciatoia e un segnalibro. Non posso dire di Firefox Store, ma la documentazione del primo commento descrive come scrivere app in pacchetto.

— Xan,

Qual è la differenza tra fare clic e far funzionare l'app offline senza ulteriori download con più quote e autorizzazioni e fare clic e far funzionare l'app senza ulteriori download con più quote e autorizzazioni? Mentre tecnicamente hanno differenze, quelle differenze sono superficiali, per l'utente non c'è differenza. Il packaging di un'app ospitata correttamente progettata dovrebbe essere abbastanza banale con i manifesti giusti. L'aspetto negativo con l'app in pacchetto è che non può aggiornarsi senza un gestore di pacchetti esterno, con l'app ospitata il browser stesso è il gestore di pacchetti.

— Lie Ryan,

0

Bene dipende da quanto lavoro vuoi davvero fare. Utilizzando l'attuale set di API Web è possibile:

Creare un'app Web progressiva (PWA) un'app (purtroppo le PWA sono solo per telefoni cellulari e Chrome OS, ma ho sentito che Chrome per desktop presto avrà presto il supporto. Per ora, si nasconde dietro una bandiera) poiché la vecchia applicazione La cache è ora obsoleta
Converti tutto in testo ( immagini e audio ). E incoraggiare l'utente a salvare la pagina Web così com'è (utilizzando Cmd+So Ctrl+Snel browser) o memorizzare nella cache la pagina come PWA. Sappi solo che, sui dispositivi mobili, i datiURI non funzionano molto bene.
Puoi creare un'app di Chrome , ma non funzionerà su nessuna versione di Chrome che non è in esecuzione su Chrome OS . Questo significa che è meglio per voi per creare un prolungamento invece
La maggior parte dei giochi arriva a meno di 10 MB, con ciò detto che è possibile memorizzare nella cache tutti i dati del gioco nella memoria locale. Il modo in cui lo fai dipende da te: puoi fare quanto sopra (convertire tutto in testo), usare Blob api, ecc. Anche se scoraggo fortemente questo, poiché alcuni telefoni cellulari potrebbero cancellare l'intero gioco dalla memoria. Ciò significa che devi verificare che tutto sia a posto (se il tuo codice è ancora in memoria), il che significa tempi di caricamento più lunghi e potrebbe anche causare l'arresto anomalo del telefono dell'utente. Se scegli di seguire questo percorso, trarrai sicuramente vantaggio dall'utilizzo di LocalForage
Utilizzando Electron o NW.js , è possibile utilizzare html, css e js per creare un'app desktop. Metodi simili possono essere utilizzati anche per creare app mobili (usando qualcosa come Cordova o Cordova dipendente come PhoneGap ). Lo faresti e permetteresti all'utente di scaricare il gioco completo se lo desiderassero.
Se vuoi ancora continuare con un zipfile, controlla JSZip . Non ho idea di come puoi usarlo, ma sono sicuro che qualcuno può inventare una buona idea (forse comprimere il tuo file e poi converti i dati binari in stringa e inseriscili in html).
Questo strano hack ti consente di caricare qualsiasi dato testuale come qualcosa noto come blocco di dati. Questo è solo un altro strumento che puoi usare per incorporare risorse in un file html.

— Kitanga Nday
fonte