Código-fonte de jogo HTML5: abrimos um pacote para mostrar o que vem dentro
Um passeio por pacotes reais do Marketplace Polar Games: pastas, arquivos, build, licenças e as perguntas que valem a pena antes de pagar.
Código-fonte de jogo HTML5 pode significar três coisas bem diferentes: uma versão pronta para subir, os arquivos de desenvolvimento que você edita, ou um projeto que só abre num editor específico. Um template de jogo HTML5 com código-fonte do nosso marketplace traz as duas primeiras juntas, em arquivos web comuns, e este guia abre pacotes de verdade para mostrar como isso fica.
Nós vendemos esses templates, então leia como um passeio pelos nossos próprios pacotes, não como uma pesquisa neutra do mercado. Passamos por várias edições, principalmente Velvet Pool, Puttide e Sunset Rally, lemos os manuais públicos e os termos da loja e anotamos o que vem na caixa, o que você precisa para rodar e o que não vem. Cada manual tem link na página do item, então dá para conferir cada linha antes de pagar.
O que pode significar “código-fonte de jogo HTML5”
Quem vende usa a expressão código-fonte de um jeito solto. Três perguntas separam o que de fato está à venda.
Versão pronta, código de desenvolvimento ou os dois?
A versão pronta (o build) é o jogo acabado do jeito que o navegador carrega: um index.html, scripts, imagens e arquivos de som. Dá para hospedar como está. O código de desenvolvimento é a versão feita para gente editar, com os arquivos separados por função. Um pacote só com o build você sobe, mas dificilmente consegue mudar. Um pacote só com código pode exigir ferramentas antes de rodar qualquer coisa. As edições deste guia trazem os dois no mesmo ZIP: em geral uma pasta game/ para publicar e uma pasta source/ para editar (no Ricopop, a própria game/ é o código-fonte).
Legível ou minificado?
Minificar espreme o script em poucas linhas densas, com nomes curtos: baixa mais rápido e é péssimo de ler. A ofuscação vai além e embaralha os nomes de propósito. Nenhuma das duas atrapalha um site no ar. As duas atrapalham quem comprou o código para mudar. Antes de pagar, abra um script da demo no ar nas ferramentas do desenvolvedor do navegador e veja se você conseguiria acompanhar.
Arquivos comuns ou projeto de editor?
Alguns templates chegam como projeto de um editor de jogos específico, e só abrem nele. Outros são arquivos web comuns, que qualquer editor de código abre. As edições deste guia são do segundo tipo: HTML, CSS, JavaScript e JSON, com TypeScript em algumas.
O que vem num pacote da Polar Games
Vamos de Velvet Pool, a nossa edição de sinuca 8-ball. O manual descreve quatro pastas dentro do ZIP:
- game/ é a edição pronta para enviar e a única pasta que você publica.
- source/ é o mesmo jogo como edição de desenvolvimento editável, com README, package.json e testes.
- documentation/ guarda o guia ilustrado e as imagens dele.
- THIRD-PARTY-LICENSES/ guarda os textos de licença das fontes e um resumo em README.txt.
Na sua biblioteca, o mesmo pacote aparece em dois downloads: o pacote completo (código e manual) ou só o jogo, pronto para hospedar.
game/ e source/ têm a mesma estrutura. No Velvet Pool o manual manda editar os arquivos em source/ e copiar os alterados para o mesmo caminho em game/. Nada é compilado no meio.
Por dentro do Velvet Pool: o mapa de arquivos
Um mapa de arquivos é o jeito mais barato de avaliar um código antes de comprar. Este é o do manual do Velvet Pool, com caminhos relativos a source/ ou game/:
- src/core/physics.js: simulação das bolas, efeito e tabelas.
- src/core/rules.js: regras da bola 8 e decisões de falta.
- src/core/ai.js: como o computador escolhe a tacada.
- src/game/controls.js: mira, força e efeito.
- src/game/progress.js: conquistas, panos, tacos e pontuação da partida.
- src/game/i18n.js: os textos em 14 idiomas.
- src/game/localRecords.js: o histórico local de pontuação.
- src/game/audio.js: efeitos sonoros e reprodução de música.
- css/style.css e css/fonts.css: tema, layout responsivo e declaração das fontes.
- assets/: arte, áudio e fontes, com uma subpasta logo/.
Repare na divisão. Regras, física e computador ficam em src/core. Controles, saves, textos e som ficam em src/game. O manual pede para mudar um recurso por vez, e esse desenho torna isso viável: mexer na tabela e corrigir uma tradução tocam arquivos diferentes.
O manual também afirma que o código em source/src e game/src é JavaScript comum e formatado, sem arquivos minificados ou empacotados. O Velvet Pool é Vanilla JavaScript com WebGL2 e não usa biblioteca de código nenhuma, nem o Three.js. O histórico de versões confirma: a 1.0.1 dividiu textos longos de uma linha só (áudio, traduções e shaders) em linhas legíveis, sem mudar o comportamento.
Puttide: a mesma estrutura, mais bibliotecas
O Puttide, nossa edição de minigolfe 3D, usa as mesmas quatro pastas e acrescenta uma coisa: duas bibliotecas de terceiros de que o jogo precisa. O Three.js r186 (MIT) e o Rapier 3D 0.21.0 (Apache-2.0) ficam em lib/three/ e lib/rapier/, e o import map do index.html diz ao navegador onde achá-los. A FAQ do Puttide afirma que nada é carregado de CDN, então o jogo só precisa da sua hospedagem. O manual acrescenta que os arquivos das bibliotecas estão formatados para leitura, com o comportamento intacto.
O mapa de arquivos dele, também relativo a source/ ou game/:
- src/course/courses.js: ordem dos percursos e requisitos de desbloqueio.
- src/course/holes.js: geometria, par e obstáculos do percurso Ruínas. pier.js, ice.js, lava.js e sky.js guardam os outros quatro.
- src/sim/constants.js: ajuste da física.
- src/game/economy.js: definições e preços de bolas, rastros e roupas.
- src/ui/i18n.js e mais três arquivos de dicionário: os textos dos idiomas.
- css/style.css: cores da interface, fontes e estilos responsivos.
- fonts/ e music/: as fontes web com suas licenças e duas músicas.
A receita do manual para criar um buraco novo: duplique uma definição no arquivo do percurso certo, dê um id único, defina par e posições do tee e do buraco, adicione ao percurso e depois coloque o nome e a dica nos dicionários de idioma. Leia uma receita assim antes de comprar. Se parece um trabalho que você sabe fazer, o pacote serve para você.
Quando o código-fonte precisa de build
“Sem build” vale para algumas edições e não para outras, então confira a edição, não a loja. Aqui estão cinco das nossas lado a lado, com os preços de tabela. A nossa própria loja mostra hoje 10% de desconto sobre o preço de tabela, a oferta direta do estúdio em cada página de item: o Velvet Pool, por exemplo, aparece por US$ 35,10 em vez de US$ 39.
- Velvet Pool, preço de tabela US$ 39: módulos JavaScript comuns com WebGL2. Edite source/ e copie para game/. Node.js 20+ só para os testes opcionais.
- Puttide, US$ 39: módulos JavaScript comuns, com Three.js e Rapier em lib/. Sem build. O Node.js é opcional e serve só para gerenciar as versões das bibliotecas.
- Ricopop, US$ 39: HTML, CSS e módulos JavaScript comuns, e a própria pasta game/ é o código-fonte. Ferramentas opcionais (Node.js 20+): servidor local, verificador de fases e testes.
- Pinloop, US$ 24: TypeScript com Vite. A pasta game/ traz JavaScript e CSS legíveis. Node.js 22.12+ e npm só para editar e recompilar o código.
- Sunset Rally, US$ 39: TypeScript com Three.js r184 e Vite. A pasta game/ já vem compilada e sem minificar. Node.js só se você recompilar.
No Sunset Rally, o manual recomenda o Node.js 24 LTS. Dentro de source/ você roda npm ci, npm run typecheck e npm run build e publica só o conteúdo de dist/. Ele também pede para manter minify e cssMinify desligados ao recompilar, porque o código entregue está formatado para leitura. Suba o resultado, nunca a node_modules/.
Hospedagem: o que “estática” quer dizer na prática
Hospedagem estática significa que o servidor só entrega arquivos. Os manuais do Velvet Pool e do Puttide dão a instalação inteira em três passos:
- Extraia o ZIP.
- Envie tudo o que está dentro de game/ para uma pasta do seu site, por exemplo public_html/velvet-pool/, por FTP ou pelo gerenciador de arquivos da hospedagem, mantendo as subpastas.
- Abra esse endereço no navegador.
Não entram npm, terminal, build, PHP, banco de dados nem conta. O que costuma pegar as pessoas, segundo os mesmos manuais:
- Não abra o index.html com duplo clique. Os navegadores bloqueiam módulos de jogo em file://. Para testar no seu computador, rode python -m http.server 8765 dentro de game/ e abra http://localhost:8765/.
- O servidor precisa mandar arquivos .js com tipo MIME de JavaScript e .wasm como application/wasm. Um MIME errado aparece como erro de módulo recusado.
- Use HTTPS na hospedagem pública.
- O save pertence à origem do navegador (protocolo, host e porta). Mude o jogo de domínio e os jogadores recomeçam do zero.
- Um carregamento novo da página ainda precisa da sua hospedagem, então não é um app instalável que funcione offline.
Onde ficam o logo, as cores, as regras e as traduções
Todo manual tem uma seção de personalização, e o que ela cobre muda de edição para edição. Veja o que cada um diz.
Velvet Pool
- Logo e marca: troque os arquivos em assets/logo/ e ajuste as dimensões correspondentes no CSS.
- Panos e tacos: as definições ficam em progress.js. Mantenha os IDs estáveis para os itens salvos continuarem valendo.
- Comportamento do computador em ai.js, física em physics.js. Depois de mudar regras ou física, rode os testes de bola 8.
- Traduções: src/game/i18n.js, com a lista de idiomas em LANGS.
Puttide
- Cores e fontes: css/style.css.
- Física: src/sim/constants.js. Preços dos cosméticos: src/game/economy.js, mantendo os IDs existentes.
- Música: copie um arquivo licenciado para music/ e atualize o mapeamento de faixas em src/audio/audio.js.
- Buracos, par e desbloqueios: os arquivos de percurso descritos acima.
Gridspark e Sunset Rally
No Gridspark, segundo a FAQ do item, o texto da interface fica em src/locales.js, as constantes de regra e a paleta em src/config.js e as regras do quebra-cabeça em game.js, board.js, generator.js e shapes.js. No Sunset Rally, as partidas da campanha e as condições de estrelas estão em Campaign.ts, os locais em Places.ts, a física em physics.ts e a pontuação em match.ts. Os textos em inglês e português ficam em src/i18n.ts, e os outros 12 idiomas em src/locales/.
Repare no que os manuais deixam de fora. O manual do Puttide cobre cores, física, buracos, preços e música, mas não tem um passo para trocar o logo, e o do Sunset Rally não tem uma seção própria de marca. Se trocar a marca é a primeira coisa que você vai fazer, pergunte antes de comprar.
Testes automáticos: o que checam e o que não checam
A pasta source/ do Velvet Pool inclui uma suíte de testes. Com Node.js 20 ou mais novo, abra um terminal dentro de source/ e rode npm test, que equivale a node tests/run.js. Não precisa instalar dependências. Segundo o manual, a suíte checa física, regras da bola 8, partidas do computador e a consistência das chaves de tradução, e não substitui testar em navegadores e em aparelhos reais.
Checar chaves de tradução é o tipo de teste de que um jogo com 14 idiomas precisa: você acrescenta uma chave num idioma, esquece outro, e uma pessoa pode levar semanas para notar.
Nem toda edição tem testes. O manual do Puttide não descreve nenhum, só checagens manuais. O Pinloop e o Beep Out listam npm test entre os comandos de desenvolvimento, e as ferramentas do Ricopop incluem um verificador de fases.
Licença, avisos de terceiros e histórico de versões
Pelos termos da loja, cada compra dá uma licença perpétua e não exclusiva para usar a edição em um produto final, seu ou de um cliente. Você pode alterar código, arte e sons dentro dele, e os jogadores podem acessar de graça ou com monetização por anúncios. Você não pode revender, compartilhar ou redistribuir o template, o código-fonte ou os recursos isoladamente, como template, kit ou pacote de recursos, nem dentro de outro produto feito para desenvolvedores. A licença não vence quando o suporte acaba.
As partes de terceiros seguem as próprias licenças, e você mantém os avisos junto com o seu produto. No Velvet Pool são duas fontes, Manrope e Fraunces, sob a SIL Open Font License 1.1, com os textos em THIRD-PARTY-LICENSES/ e ao lado das fontes. No Puttide a lista soma o Three.js (MIT), o Rapier (Apache-2.0) e as fontes Rubik e Fredoka (OFL 1.1).
O histórico de versões mostra como um pacote é cuidado. O Velvet Pool 1.0.1 (18 de outubro de 2026) dividiu textos longos em linhas legíveis e reuniu os avisos de licença numa pasta única. A versão 1.1.0 (22 de outubro de 2026) levou a interface a 14 idiomas. Essas entradas ficam na página do item. Os termos dizem que as atualizações da mesma edição, quando publicadas, aparecem na sua biblioteca, sem promessa de atualizações por um prazo fixo.
Como ler o código de um jogo que você comprou em uma hora
Este é um roteiro sugerido, não um tempo prometido. Ele segue a estrutura do Velvet Pool e usa só o que o pacote entrega.
- Minutos 0 a 10: extraia o ZIP, dê uma olhada no README de source/ e no mapa de arquivos do manual. Abra o index.html e veja quais scripts e estilos ele carrega.
- Minutos 10 a 20: rode npm test dentro de source/ (Node.js 20+) para ter uma base verde.
- Minutos 20 a 35: leia src/core antes de src/game. Comece por rules.js, depois ai.js, depois physics.js. Isso é o jogo em si. Controles, progresso, textos e som são a encanação em volta.
- Minutos 35 a 40: anote que os IDs dos itens e as chaves de save precisam ficar estáveis, senão os jogadores perdem os cosméticos salvos.
- Minutos 40 a 55: faça uma mudança pequena, como uma definição de pano em progress.js. Copie o arquivo para o mesmo caminho em game/, sirva game/ com python -m http.server 8765 e olhe o resultado. Nunca abra por file://.
- Minutos 55 a 60: rode os testes de novo.
Módulos ES dizem o que precisam nas linhas de import, então dá para seguir a cadeia a partir do primeiro script que a página carrega. É por isso que uma edição de arquivos comuns pode ser lida nesse ritmo.
Perguntas para fazer antes de comprar código-fonte
- Posso ler o manual e jogar uma demo antes de pagar? Nas nossas edições, os dois têm link na página do item.
- Existe uma versão pronta para hospedar e um código de desenvolvimento separado?
- O código é legível ou minificado? Abra um script e olhe.
- Preciso de Node.js, npm, PHP ou banco de dados, e em quais versões?
- O jogo carrega algo de CDN ou de outro site?
- Quais bibliotecas de terceiros vêm dentro, e com quais licenças?
- Em quantos projetos posso usar, e posso redistribuir?
- Quanto tempo dura o suporte e o que ele cobre? O nosso é de 6 meses, ou 12 com a extensão escolhida na compra, e cobre dúvidas sobre instalar e usar os arquivos e defeitos reproduzíveis.
- O que ficou de fora?
- Existe um histórico de versões e um lançamento recente?
- Qual é a regra de reembolso? A nossa: templates são produtos digitais, então só reembolsamos se você ainda não baixou o template ou se ele tem um defeito que não conseguimos corrigir. O pedido é feito escrevendo para o estúdio com o número da licença.
O que estas edições não incluem
Algumas edições trazem extras opcionais. O Ricopop e o Zabum incluem um placar em PHP de um arquivo só, desligado por padrão. É um placar casual compartilhado, que guarda as pontuações num arquivo: não é um ranking à prova de trapaça nem multijogador ao vivo.
O suporte cobre dúvidas sobre instalar e usar os arquivos entregues e a correção de defeitos reproduzíveis do jogo entregue. Isso é um limite, e é melhor conhecê-lo no primeiro dia.
Perguntas frequentes sobre código-fonte de jogo HTML5
Qual a diferença entre a pasta game e a pasta source?
game/ é a versão que você sobe para a hospedagem. source/ é a edição de desenvolvimento editável do mesmo jogo. No Velvet Pool e no Puttide elas têm a mesma estrutura, então um arquivo editado em source/ é copiado para o mesmo caminho em game/. Nas edições em TypeScript, como o Sunset Rally, source/ é um projeto que você recompila, e você publica o resultado novo.
Preciso de npm ou Node.js para usar o jogo?
Para hospedar, não. O Node.js aparece só nos testes opcionais do Velvet Pool (20 ou mais novo) ou para recompilar as edições em TypeScript, como o Sunset Rally (24 LTS recomendado) e o Pinloop (22.12 ou mais novo).
O código-fonte vem minificado?
Não nas edições tratadas aqui. O Velvet Pool e o Puttide são JavaScript comum e formatado, e a versão 1.0.1 de ambos dividiu textos longos de uma linha só em linhas legíveis. O código entregue do Sunset Rally vem formatado, com a minificação desligada.
Posso usar uma compra em vários projetos ou clientes?
A licença cobre um produto final, seu ou de um cliente. Um segundo produto fica fora dela.
Posso revender ou compartilhar o código-fonte?
Não: nem isoladamente, nem como template, kit ou pacote de recursos, nem dentro de outro produto feito para desenvolvedores. Você pode alterar código, arte e sons dentro do seu próprio produto final.
Dá para ler o manual antes de comprar?
Dá. Cada página de item tem link para o manual e para uma demo jogável da mesma edição.
Abra um pacote antes de comprar um
Escolha uma edição, abra o manual pela página do item, jogue a demo e leia o mapa de arquivos com as perguntas acima na mão. Se o manual responde, o pacote deve responder também. Se não responde, escreva para o estúdio antes de pagar.