¿Cómo hago para descargar un juego JS?

20

Puedo juntar HTML y JavaScript en el mismo .htmlarchivo, pero las imágenes deben ser archivos separados. La única solución que se me ocurre es darle al usuario una .zipcarpeta.

Sin embargo, esto no es bonito ... ¿De qué otra manera puedo hacer esto?

javascript html5 distribution Arnaud
fuente
8
El "estándar" no es hacer que los juegos JS se puedan descargar; solo funcionan en un navegador. Puede haber alguna forma oscura de hacerlo, pero francamente por qué forzarlo: use la herramienta adecuada para el trabajo.
jhocking

Respuestas:

21

Puede incrustar imágenes en el documento HTML utilizando la sintaxis dataurl que permite colocar la representación base64 de los datos de la imagen binaria como el atributo src de una imagen. Esto también funciona en cualquier otro tipo de archivo multimedia.

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

Cuando usa hojas de estilo CSS, puede crearlas completamente de procedimiento en JavaScript.

Philipp
fuente
por supuesto, base64 ocupa más espacio, cuadruplicando el tamaño del archivo ...
Tobias Kienzler
10
@TobiasKienzler: 64 * 4 = 256 no significa que se necesitan 4 veces más datos para codificar un solo byte, sino que solo usa 6 bits (2 ** 6 = 64) de cada 8 en cada byte. Eso significa que se necesitan 4 bytes para codificar 3 bytes, lo que da un aumento del tamaño del 33% (sin contar el relleno cuando sea necesario). Apenas cuadruplicando. El único caso en el que el tamaño de los datos se cuadruplica es cuando se codifica un solo byte, que requiere 2 bytes de datos más 2 bytes de relleno.
Panda Pyjama
2
@PandaPajama Mi mal, tenía la intención de decir "aumenta en un cuarto" (debido a los 2/8 = 1/4 bits desperdiciados). Aunque obviamente cometí un error allí de todos modos, el 33% que obtienes son correctos. Aún así, es una sobrecarga, también "famosa" de los archivos adjuntos de correo electrónico
Tobias Kienzler
1
¿La codificación en línea de base 64 funcionará para otros recursos como .wav, .ogg, .m4a y, en general, cualquier archivo?
DrZ214
1
@ DrZ214 No lo he intentado, pero AFAIK debería funcionar en cualquier lugar donde funcione una URL.
Philipp
31

Simplemente poner todos los archivos en un archivo .zip no es una solución viable porque la mayoría de las aplicaciones web necesitan un servidor web para poder acceder a los recursos a través de solicitudes HTTP. En algunos sistemas, puede acceder a los archivos a través del file://esquema URI , pero no se garantiza que funcione en todas partes debido a razones de seguridad y fallará por cosas como las solicitudes AJAX.

Podría funcionar para una aplicación muy simple donde tiene la mayoría de los recursos en línea, pero este no es realmente el enfoque que recomendaría a cualquiera. Sin embargo, existen alternativas, tales como:

Crea una aplicación nativa

Puede empaquetar su aplicación web como una aplicación nativa utilizando Node-Webkit . Incluso puede usar esto para agregar características de escritorio nativas (como juegos guardados locales) a su juego.

Sin embargo, este no es un enfoque de " paquete y listo " ... probablemente tendrá que reescribir partes de su aplicación y escribir diferentes cargadores (por ejemplo, con una aplicación de escritorio, preferirá cargar los archivos a través del sistema de archivos, mientras usa HTTP -Solicitudes en un navegador / juego en línea).

Use las funciones HTML5 para permitir el acceso sin conexión de su aplicación

Si su objetivo principal es permitir que el jugador juegue su juego sin conexión, también puede usar el caché de la aplicación para permitir el acceso sin conexión de su aplicación. Esta es una característica que funciona en la mayoría de los navegadores modernos . El beneficio adicional es que el usuario no tiene que descargar nada y solo puede usar un marcador para jugar su juego incluso sin conexión.

Para los recursos que se cargan de forma asincrónica (AJAX), también deberá implementar mecanismos de carga separados. Puede utilizar el almacenamiento local para guardar estos recursos para su uso sin conexión.

bummzack
fuente
2
Node-Webkit es bastante grande, y terminarás con algo así como 60MB para un juego JS "hello world" si lo incluyes.
cenizas999
1
Esta es la respuesta correcta si su aplicación es remotamente complicada.
Vaughan Hilts
1
@ ashes999 Estoy de acuerdo con usted, sin embargo, 60 MB todavía es bastante pequeño para una aplicación de escritorio hoy en día. Muchos de los marcos de uso general crean una sobrecarga de tamaño de archivo (tome Unity como un ejemplo destacado). Con un espacio de almacenamiento cada vez mayor, la comodidad gana sobre el tamaño del archivo;)
bummzack
2
@bummzack No estoy en desacuerdo. Es deprimente tomar un juego JS de ~ 100 kb y ver que se convierte en 60 MB, antes de agregar cualquier arte o audio. Esperemos que alguien encuentre una mejor manera. +1 por cierto
cenizas999
1
Si bien hay mucha información útil en esta respuesta, la oración principal es simplemente incorrecta. Puede poner los datos del juego en archivos JavaScript, los navegadores modernos deberían poder manejar al menos unos pocos MB de JavaScript, y siempre que no intente leer los datos de la imagen desde un lienzo, tampoco tiene nada de malo usar archivos de imagen . La última vez que lo revisé, todos los navegadores modernos permiten el file:///acceso al protocolo localStorage, lo que funciona para guardar. Se escalará para hacer cualquier cosa que uno pueda hacer en un juego HTML, excepto el juego en línea.
aaaaaaaaaaaa
7

Para una solución basada en Chrome para hacer que el juego se ejecute sin conexión y disfrutar de algunas funciones nativas, puede considerar hacer una aplicación de Chrome .

De esta forma, puede distribuirlo en Chrome Web Store para mayor visibilidad, puede disfrutar de algunas API potentes y hacer que se parezca más a una aplicación independiente .

La desventaja es, por supuesto, requerir Chrome.

Xan
fuente
1
Firefox (y Firefos OS) tiene OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) que es similar a esto: la identificación de la aplicación web descargada como instalada como una aplicación. Ambas soluciones deben converger a un estándar común: html5doctor.com/web-manifest-specification . Ver también: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx El estándar convergente que menciona es para lo que Chrome llama "aplicaciones alojadas", en lugar de una verdadera aplicación descargable y autónoma, también llamada "aplicación empaquetada". La misma terminología se aplica a Firefox. Desafortunadamente, las aplicaciones empaquetadas son arquitectónicamente muy diferentes y es poco probable que converjan.
Xan
@ Xan, ¿qué es una aplicación empaquetada? ¿Están disponibles las aplicaciones 'alojadas' y 'empaquetadas' en las tiendas de aplicaciones Firefox y Chrome?
Qsigma
1
@Qsigma Una aplicación empaquetada es una aplicación HTML5 en su mayoría autónoma con acceso a API potentes como el acceso al sistema de archivos local; está "empaquetado" porque contiene sus propios recursos en una descarga. Una aplicación "alojada" es básicamente un enlace a un sitio web con algunos metadatos. Piense en ello como un cruce entre un atajo y un marcador. No puedo contar sobre la tienda Firefox, pero la documentación del primer comentario describe cómo escribir aplicaciones empaquetadas.
Xan
¿Cuál es la diferencia entre hacer clic y hacer que la aplicación se ejecute sin conexión sin más descargas con más cuotas y permisos y hacer clic y hacer que la aplicación se ejecute sin más descargas con más cuotas y permisos? Si bien técnicamente tienen diferencias, esas diferencias son superficiales, para el usuario no hay diferencia. Empaquetar una aplicación alojada correctamente diseñada debería ser bastante trivial con los manifiestos correctos. La desventaja de la aplicación empaquetada es que no puede actualizarse sin un administrador de paquetes externo, con la aplicación alojada, el navegador es el administrador de paquetes.
Lie Ryan
0

Bueno, depende de cuánto trabajo realmente quieras poner en él. Con el conjunto actual de API web puede:

  • Crear una aplicación web progresiva (PWA) (Lamentablemente, las PWA son solo para teléfonos móviles y Chrome OS, pero he oído que Chrome for Desktop pronto tendrá soporte para ella pronto. Por ahora, se esconde detrás de una bandera) desde la antigua aplicación La caché ahora está en desuso
  • Convierte todo en texto ( imágenes y audio ). Y aliente al usuario a guardar la página web tal como está (usando Cmd+So Ctrl+Sen el navegador) o guarde en caché la página como PWA. Solo sepa que, en dispositivos móviles, los dataURI no funcionan muy bien.
  • Puede crear una aplicación de Chrome , pero eso no funcionará en ninguna versión de Chrome que no se ejecute en Chrome OS . Esto significa que es mejor para usted para crear una extensión en su lugar
  • La mayoría de los juegos tienen menos de 10 MB, con eso dicho puedes almacenar todos los datos de tu juego en el almacenamiento local. Depende de usted: puede hacer lo anterior (convertir todo a texto), usar Blob api, etc. Aunque lo desaconsejo mucho, ya que algunos teléfonos móviles pueden borrar todo el juego de la memoria. Lo que significa que debe verificar que todo esté bien (si su código todavía está en la memoria), lo que significa tiempos de carga más largos y también podría bloquear el teléfono del usuario. Sin embargo, si elige seguir este camino, definitivamente se beneficiará al usar LocalForage
  • Usando Electron o NW.js , puede usar sus html, css y js para crear una aplicación de escritorio. También se pueden usar métodos similares para crear aplicaciones móviles (usando algo como Cordova o un Cordova dependiente como PhoneGap ). Harías esto y permitirías al usuario descargar el juego completo si quisiera.
  • Si aún desea continuar con un ziparchivo, consulte JSZip . No tengo idea de cómo puede usarlo, pero estoy seguro de que alguien puede tener una buena idea (tal vez comprima su archivo y luego convierta los datos binarios en una cadena y colóquelo en línea en el html).
  • Este extraño truco te permite cargar cualquier dato textual como algo conocido como bloque de datos. Esta es solo otra herramienta que puede usar para incrustar activos en un archivo html.
Kitanga Nday
fuente