Como faço para baixar um jogo JS?

20

Posso reunir o HTML e o JavaScript no mesmo .htmlarquivo, mas as imagens precisam ser arquivos separados. A única solução que me vem à mente é dar uma .zippasta ao usuário .

Mas isso não é bonito ... De que outra forma eu posso fazer isso?

javascript html5 distribution Arnaud
fonte
8
O "padrão" não é tornar os jogos JS disponíveis para download; eles funcionam apenas em um navegador. Pode haver alguma maneira obscura de fazê-lo, mas, francamente, por que forçá-lo: use a ferramenta certa para o trabalho.
Jhocking

Respostas:

21

Você pode incorporar imagens no documento HTML usando a sintaxe dataurl, que permite colocar a representação base64 dos dados da imagem binária como o atributo src de uma imagem. Isso também funciona em qualquer outro tipo de arquivo de mídia.

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

Ao usar folhas de estilo CSS, você pode criá-las completamente procedurais em JavaScript.

Philipp
fonte
é claro base64 ocupa mais espaço, quadruplicando o tamanho do arquivo ...
Tobias KIENZLER
10
@TobiasKienzler: 64 * 4 = 256 não significa que são necessários quatro vezes mais dados para codificar um único byte, mas que você usa apenas 6 bits (2 ** 6 = 64) de cada 8 em cada byte. Isso significa que são necessários 4 bytes para codificar 3 bytes, o que aumenta em 33% o tamanho (sem contar o preenchimento quando necessário). Dificilmente quadruplicando. O único caso em que o tamanho dos dados é quadruplicado é ao codificar um único byte, o que requer 2 bytes de dados mais 2 bytes de preenchimento.
Panda Pajama
2
@PandaPajama Meu mal, eu pretendia dizer "aumenta em um quarto" (devido aos 2/8 = 1/4 bits desperdiçados). Embora obviamente eu tenha cometido um erro, os 33% que você obtém estão corretos. Ainda assim, é uma sobrecarga, também "famoso" de anexos de e-mail
Tobias KIENZLER
11
Essa codificação embutida da base 64 funcionará para outros recursos, como .wav, .ogg, .m4a e, em geral, qualquer arquivo?
DrZ214
11
@ DrZ214 Eu não tentei, mas o AFAIK deve funcionar em qualquer lugar em que um URL funcione.
Philipp
31

Colocar todos os arquivos em um arquivo .zip não é uma solução viável, porque a maioria dos aplicativos da Web precisa de um servidor da Web para que eles possam acessar recursos por meio de solicitações HTTP. Em alguns sistemas, você pode acessar arquivos através do file://esquema URI , mas isso não garante que funcione em qualquer lugar por motivos de segurança e falhará em itens como solicitações AJAX.

Pode funcionar para um aplicativo muito simples, onde você tem mais recursos embutidos, mas essa não é a abordagem que eu recomendaria a ninguém. Existem alternativas, como:

Construa um aplicativo nativo

Você pode empacotar seu aplicativo Web como um aplicativo nativo usando o Node-Webkit . Você pode até usar isso para adicionar recursos nativos da área de trabalho (como jogos salvos locais) ao seu jogo.

Porém, essa não é uma abordagem de " pacote e pronto ". Você provavelmente terá que reescrever partes do seu aplicativo e escrever carregadores diferentes (por exemplo, com um aplicativo de desktop, você prefere carregar os arquivos pelo sistema de arquivos, enquanto usa HTTP - Pedidos em um navegador / jogo online).

Use os recursos HTML5 para permitir o acesso off-line do seu aplicativo

Se seu objetivo principal é permitir que o jogador jogue offline, você também pode usar o cache do aplicativo para permitir o acesso offline ao seu aplicativo. Esse é um recurso que funciona na maioria dos navegadores modernos . O benefício adicional é que o usuário não precisa baixar nada e pode usar apenas um marcador para jogar seu jogo, mesmo quando está offline.

Para recursos que estão sendo carregados de forma assíncrona (AJAX), você também precisará implementar mecanismos de carregamento separados. Você pode usar o armazenamento local para salvar esses recursos para uso offline.

bummzack
fonte
2
O Node-Webkit é muito grande e você terá 60 MB para um jogo JS "olá mundo", se você o incluir.
ashes999
11
Esta é a resposta certa se o seu aplicativo for remotamente complicado.
Vaughan Hilts
11
@ ashes999 Concordo com você, no entanto, atualmente, 60 MB ainda são muito pequenos para um aplicativo de desktop. Muitas estruturas de uso geral criam uma sobrecarga de tamanho de arquivo (tome o Unity como um exemplo proeminente). Com cada vez mais espaço de armazenamento, conveniência vitórias sobre file-size;)
bummzack
2
@bummzack Não discordo. É deprimente pegar um jogo JS de ~ 100kb e ver se tornar 60MB antes de adicionar qualquer arte ou áudio. Espero que alguém venha com uma maneira melhor. +1 btw
ashes999
11
Embora exista muitas informações úteis nesta resposta, a frase principal está totalmente errada. Você pode colocar dados do jogo em arquivos JavaScript, os navegadores modernos devem poder manipular pelo menos alguns MB de JavaScript e, desde que você não tente ler os dados da imagem em uma tela, não há nada de errado em usar arquivos de imagem . Na última vez que verifiquei, todos os navegadores modernos permitem o file:///acesso ao protocolo localStorage, o que funciona para salvar. Ele será escalado para fazer o que for possível em um jogo HTML, exceto o jogo online.
Aaaaaaaaaaaa 30/09
7

Para que uma solução baseada no Chrome torne o jogo offline e desfrute de algumas funcionalidades nativas, considere criar um aplicativo do Chrome .

Dessa forma, você pode distribuí-lo na Chrome Web Store para aumentar a visibilidade, aproveitar algumas APIs poderosas e parecer mais um aplicativo independente .

A desvantagem é, obviamente, exigir o Chrome.

Xan
fonte
11
O Firefox (e o Firefos OS) possui o OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ), que é semelhante a este: o ID do aplicativo Web baixado como instalado como um aplicativo. Ambas as soluções devem convergir para um padrão comum: html5doctor.com/web-manifest-specification . Veja também: code.google.com/p/chromium/issues/detail?id=366145
ysdx 30/09/14
@ysdx O padrão convergente mencionado é o que o Chrome chama de "aplicativos hospedados", em vez de um verdadeiro aplicativo para download e independente, também chamado de "aplicativo empacotado". A mesma terminologia se aplica ao Firefox. Infelizmente, os aplicativos empacotados são arquitetonicamente muito diferentes e dificilmente convergirão.
Xan
@Xan O que é um aplicativo empacotado? Os aplicativos 'hospedados' e 'empacotados' estão disponíveis nas lojas de aplicativos Firefox e Chrome?
Qsigma
11
@Qsigma Um aplicativo empacotado é principalmente um aplicativo HTML5 independente, com acesso a APIs poderosas, como acesso ao sistema de arquivos local; é "empacotado" porque contém recursos próprios em um download. Um aplicativo "hospedado" é basicamente um link para um site com alguns metadados. Pense nisso como um cruzamento entre um atalho e um marcador. Não sei dizer sobre a loja do Firefox, mas a documentação do primeiro comentário descreve como escrever aplicativos empacotados.
Xan
Qual é a diferença entre clicar e executar o aplicativo offline sem downloads adicionais com mais cotas e permissões e clicar e executar o aplicativo sem downloads adicionais com mais cotas e permissões? Embora tecnicamente tenham diferenças, essas diferenças são superficiais, para o usuário não há diferença. O empacotamento de um aplicativo hospedado projetado corretamente deve ser bastante trivial com os manifestos certos. A desvantagem do aplicativo empacotado é que ele não pode se atualizar sem um gerenciador de pacotes externo; com o aplicativo hospedado, o próprio navegador é o gerenciador de pacotes.
Lie Ryan
0

Bem, depende de quanto trabalho você realmente deseja colocar nele. Usando o conjunto atual de APIs da Web, você pode:

  • Criar um aplicativo Web progressivo (PWA) (infelizmente, os PWAs são apenas para celulares e Chrome OS, mas ouvi dizer que o Chrome for Desktop em breve terá suporte para ele em breve. Por enquanto, se esconde atrás de uma bandeira) desde o aplicativo antigo O cache agora está obsoleto
  • Converta tudo em texto ( imagens e áudio ). E incentive o usuário a salvar a página da web como está (usando Cmd+Sou Ctrl+Sno navegador) ou a cache da página como um PWA. Apenas saiba que, no celular, os dataURIs não têm um desempenho muito bom.
  • Você pode criar um aplicativo Chrome , mas isso não funcionará em nenhuma versão do Chrome que não esteja sendo executada no Chrome OS . Isto significa que é melhor para você criar uma extensão em vez
  • A maioria dos jogos tem menos de 10 MB e, com isso, você pode armazenar em cache todos os dados do seu jogo no armazenamento local. A decisão de como você faz isso: você pode fazer o que foi descrito acima (converter tudo em texto), usar a API do Blob, etc. O que significa que você deve verificar se está tudo bem (se o seu código ainda estiver na memória), o que significa tempos de carregamento mais longos e também pode travar o telefone do usuário. Se você optar por seguir esse caminho, definitivamente se beneficiará do uso do LocalForage
  • Usando Electron ou NW.js , você pode usar seus html, css e js para criar um aplicativo de desktop. Métodos semelhantes também podem ser usados ​​para criar aplicativos móveis (usando algo como o Cordova ou um dependente do Cordova como o PhoneGap ). Você faria isso e permitiria ao usuário baixar o jogo completo, se quisesse.
  • Se você ainda deseja continuar com um ziparquivo, faça o check-out do JSZip . Não tenho idéia de como você pode usá-lo, mas tenho certeza de que alguém pode ter uma boa idéia (talvez zipe seu arquivo e depois converta os dados binários em string e coloque-os em linha no html).
  • Esse truque estranho permite carregar qualquer dado textual como algo conhecido como bloco de dados. Essa é apenas outra ferramenta que você pode usar para incorporar ativos em um arquivo html.
Kitanga Nday
fonte