Comment puis-je rendre un jeu JS téléchargeable?

20

Je peux mettre le HTML et le JavaScript ensemble dans le même .htmlfichier, mais les images doivent être des fichiers séparés. La seule solution qui me vient à l'esprit est de donner à l'utilisateur un .zipdossier.

Ce n'est pas joli cependant ... Comment puis-je faire cela?

javascript html5 distribution Arnaud
la source
8
Le "standard" n'est pas de rendre les jeux JS téléchargeables; ils ne fonctionnent que dans un navigateur. Il peut y avoir une façon obscure de le faire, mais franchement pourquoi le forcer: utilisez le bon outil pour le travail.
jhocking

Réponses:

21

Vous pouvez incorporer des images dans le document HTML en utilisant la syntaxe dataurl qui permet de mettre la représentation base64 des données d'image binaire comme attribut src d'une image. Cela fonctionne également sur tout autre type de fichier multimédia.

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

Lorsque vous utilisez des feuilles de style CSS, vous pouvez les créer entièrement procédurales en JavaScript.

Philipp
la source
bien sûr, base64 prend plus de place, quadruplant la taille du fichier ...
Tobias Kienzler
10
@TobiasKienzler: 64 * 4 = 256 ne signifie pas qu'il faut 4 fois plus de données pour coder un seul octet, mais que vous n'utilisez que 6 bits (2 ** 6 = 64) sur 8 dans chaque octet. Cela signifie qu'il faut 4 octets pour coder 3 octets, ce qui donne une augmentation de 33% de la taille (sans compter le remplissage si nécessaire). À peine quadruplé. Le seul cas où la taille des données est quadruplée est lors du codage d'un seul octet, ce qui nécessite 2 octets de données plus 2 octets de remplissage.
Panda Pyjama
2
@PandaPajama Mon mauvais, j'avais l'intention de dire "augmente d'un quart" (en raison des 2/8 = 1/4 bits gaspillés). Bien qu'évidemment j'aie fait une erreur là-bas de toute façon, les 33% que vous dérivez sont corrects. Pourtant, c'est un surcoût, également "célèbre" des pièces jointes des e-mails
Tobias Kienzler
1
Ce codage en ligne de base 64 fonctionnera-t-il pour d'autres ressources comme .wav, .ogg, .m4a et en général n'importe quel fichier?
DrZ214
1
@ DrZ214 Je n'ai pas essayé, mais AFAIK cela devrait fonctionner partout où une URL fonctionne.
Philipp
31

Le simple fait de placer tous les fichiers dans un fichier .zip n'est pas une solution viable car la plupart des applications Web ont besoin d'un serveur Web pour pouvoir accéder aux ressources via des requêtes HTTP. Sur certains systèmes, vous pouvez accéder aux fichiers via le file://schéma URI , mais cela ne garantit pas de fonctionner partout pour des raisons de sécurité et échouera pour des choses telles que les demandes AJAX.

Cela pourrait fonctionner pour une application très simple où vous avez la plupart des ressources en ligne, mais ce n'est vraiment pas l'approche que je recommanderais à quiconque. Il existe cependant des alternatives, telles que:

Créer une application native

Vous pouvez empaqueter votre application Web en tant qu'application native à l'aide de Node-Webkit . Vous pouvez même l'utiliser pour ajouter des fonctionnalités de bureau natives (telles que des sauvegardes locales) à votre jeu.

Cependant, ce n'est pas une approche « package et terminé ». -Demandes dans un navigateur / jeu en ligne).

Utilisez les fonctionnalités HTML5 pour autoriser l'accès hors ligne à votre application

Si votre objectif principal est de permettre au joueur de jouer à votre jeu hors ligne, vous pouvez également utiliser le cache d' application pour autoriser l'accès hors ligne à votre application. Il s'agit d'une fonctionnalité qui fonctionne dans la plupart des navigateurs modernes . L'avantage supplémentaire est que l'utilisateur n'a rien à télécharger et peut simplement utiliser un signet pour jouer à votre jeu même hors ligne.

Pour les ressources qui sont chargées de manière asynchrone (AJAX), vous devrez également implémenter des mécanismes de chargement distincts. Vous pouvez utiliser le stockage local pour enregistrer ces ressources pour une utilisation hors ligne.

bummzack
la source
2
Node-Webkit est assez grand, et vous vous retrouverez avec quelque chose comme 60 Mo pour un jeu JS "bonjour le monde" si vous l'incluez.
ashes999
1
C'est la bonne réponse si votre application est même compliquée à distance.
Vaughan Hilts
1
@ ashes999 Je suis d'accord avec vous, mais 60 Mo sont encore assez petits pour une application de bureau de nos jours. De nombreux frameworks à usage général créent une surcharge de taille de fichier (prenez Unity comme exemple). Avec un espace de stockage toujours croissant, la commodité l'emporte sur la taille des fichiers;)
bummzack
2
@bummzack Je ne suis pas en désaccord. C'est juste déprimant de prendre un jeu JS de ~ 100 Ko et de le voir devenir 60 Mo, avant d'ajouter de l'art ou de l'audio. J'espère que quelqu'un trouvera un meilleur moyen. +1 btw
ashes999
1
Bien qu'il y ait beaucoup d'informations utiles dans cette réponse, la phrase principale est tout simplement fausse. Vous pouvez mettre les données de jeu dans des fichiers JavaScript, les navigateurs modernes devraient être capables de gérer au moins quelques Mo de JavaScript, et tant que vous n'essayez pas de lire les données d'image à partir d'un canevas, il n'y a rien de mal à utiliser les fichiers d'image non plus . La dernière fois que j'ai vérifié, tous les navigateurs modernes autorisent l' file:///accès au protocole localStorage, ce qui fonctionne pour la sauvegarde. Il évoluera pour faire tout ce que l'on peut faire dans un jeu HTML, sauf le jeu en ligne.
aaaaaaaaaaaa
7

Pour qu'une solution basée sur Chrome rende le jeu hors ligne et bénéficie de certaines fonctionnalités natives, vous pouvez envisager de créer une application Chrome .

De cette façon, vous pouvez le distribuer dans le Chrome Web Store pour plus de visibilité, vous pouvez profiter de certaines API puissantes et le faire ressembler davantage à une application autonome .

L'inconvénient, bien sûr, nécessite Chrome.

Xan
la source
1
Firefox (et Firefos OS) a OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) qui est similaire à ceci: l'identifiant de l'application Web téléchargé comme installé en tant qu'application. Les deux solutions doivent converger vers un standard commun: html5doctor.com/web-manifest-specification . Voir également: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx La norme convergente que vous mentionnez concerne ce que Chrome appelle les "applications hébergées", par opposition à une véritable application autonome et téléchargeable, également appelée "application packagée". La même terminologie s'applique à Firefox. Malheureusement, les applications packagées sont très différentes sur le plan architectural et peu susceptibles de converger.
Xan
@Xan qu'est-ce qu'une application packagée? Les applications «hébergées» et «packagées» sont-elles disponibles dans les boutiques d'applications Firefox et Chrome?
Qsigma
1
@Qsigma Une application packagée est une application HTML5 principalement autonome avec accès à de puissantes API comme l'accès au système de fichiers local; il est "empaqueté" car il contient ses propres ressources dans un téléchargement. Une application "hébergée" est essentiellement un lien vers un site Web contenant des métadonnées. Considérez-le comme un croisement entre un raccourci et un signet. Je ne peux pas parler de Firefox Store, mais la documentation du premier commentaire décrit comment écrire des applications packagées.
Xan
Quelle est la différence entre cliquer et faire fonctionner l'application hors ligne sans téléchargements supplémentaires avec plus de quotas et d'autorisations et cliquer et faire exécuter l'application sans téléchargements supplémentaires avec plus de quotas et d'autorisations? Bien qu'ils aient techniquement des différences, ces différences sont superficielles, pour l'utilisateur, il n'y a pas de différence. Empaqueter une application hébergée correctement conçue devrait être assez banal avec les bons manifestes. L'inconvénient d'une application packagée est qu'elle ne peut pas se mettre à jour sans un gestionnaire de packages externe, avec une application hébergée, le navigateur lui-même est le gestionnaire de packages.
Lie Ryan
0

Eh bien, cela dépend de la quantité de travail que vous voulez vraiment y consacrer. En utilisant l'ensemble actuel d'API Web, vous pouvez:

  • Créer une application Web progressive (PWA) (Malheureusement, les PWA ne sont que pour les téléphones mobiles et Chrome OS, mais j'ai entendu dire que Chrome pour le bureau sera bientôt pris en charge bientôt. Pour l'instant, il se cache derrière un drapeau) depuis l'ancienne application Le cache est désormais obsolète
  • Convertir tout en texte ( images et audio ). Et encouragez l'utilisateur à enregistrer la page Web telle quelle (à l'aide Cmd+Sou Ctrl+Sdans le navigateur) ou mettez la page en cache en tant que PWA. Sachez simplement que, sur mobile, les dataURI ne fonctionnent pas très bien.
  • Vous pouvez créer une application Chrome , mais cela ne fonctionnera pas sur les versions de Chrome qui ne fonctionnent pas sur Chrome OS . Cela signifie qu'il est préférable pour vous de créer une extension à la place
  • La plupart des jeux font moins de 10 Mo, ce qui signifie que vous pouvez mettre en cache toutes les données de votre jeu dans le stockage local. La décision vous appartient: vous pouvez faire ce qui précède (tout convertir en texte), utiliser l'API Blob, etc. Bien que je décourage fortement cela, car certains téléphones portables peuvent effacer tout votre jeu de la mémoire. Ce qui signifie que vous devez vérifier que tout va bien (si votre code est toujours en mémoire), ce qui signifie des temps de chargement plus longs et pourrait également planter le téléphone de l'utilisateur. Si vous choisissez de suivre cette voie, vous bénéficierez certainement de l'utilisation de LocalForage
  • Utiliser Electron ou NW.js , vous pouvez utiliser votre html, css et js pour créer une application de bureau. Des méthodes similaires peuvent également être utilisées pour créer des applications mobiles (en utilisant quelque chose comme Cordova ou un dépendant de Cordova comme PhoneGap ). Vous feriez cela et autoriseriez l'utilisateur à télécharger le jeu complet s'il le souhaitait.
  • Si vous souhaitez continuer avec un zip fichier, consultez JSZip . Je ne sais pas comment vous pouvez l'utiliser, mais je suis sûr que quelqu'un peut trouver une bonne idée (peut-être compresser votre fichier, puis convertir les données binaires en chaîne et les placer en ligne dans le html).
  • Ce hack bizarre vous permet de charger toutes les données textuelles sous la forme d'un bloc de données. Ceci est juste un autre outil que vous pouvez utiliser pour incorporer des actifs dans un fichier html.
Kitanga Nday
la source