Código-fonte de jogo de estacionamento: um puzzle de trânsito 3D por dentro
O que vem no pacote do Beep Out, como o projeto em TypeScript está organizado e o que o comprador costuma mudar primeiro.
Se você procura código-fonte de jogo de estacionamento, a resposta curta é esta: o Beep Out é um quebra-cabeça de trânsito em 3D para navegador, pronto, com 30 fases, uma versão pronta para subir e o projeto em TypeScript editável por trás dela, por US$ 35. Este guia abre o pacote e mostra para que serve cada parte.
Jogo de engarrafamento parece simples, e é por isso que um jogo fraco é descoberto rápido. As regras precisam ser entendidas num olhar, a ordem das fases precisa ensinar e o código precisa deixar você criar as suas fases sem quebrar as antigas. São essas três coisas que olhamos aqui, junto com hospedagem, licença e o que a edição não inclui.
O que vem no pacote do código-fonte do jogo de estacionamento
O Beep Out é vendido como Local Browser Edition, versão 1.1.0. O download tem duas metades: um jogo que você hospeda hoje e um projeto que você pode mudar.
- Uma pasta game/ pronta para subir, com as 30 fases.
- JavaScript, CSS e dados do runtime legíveis, para você ver o que o navegador executa.
- O código-fonte do desenvolvedor em TypeScript, com os recursos do jogo e testes.
- Um manual ilustrado em inglês e português com instalação, mapa de arquivos, personalização, solução de problemas e perguntas frequentes.
- Avisos de licença das dependências e das fontes.
A interface vem em 14 idiomas: inglês, português, espanhol, francês, alemão, italiano, holandês, polonês, turco, russo, indonésio, japonês, coreano e chinês simplificado. O manual, por outro lado, existe só em inglês e português, o que conta se o seu desenvolvedor não lê nenhum dos dois.
Abrir a página do Beep Out e jogar a demo
Como o quebra-cabeça de trânsito funciona, regra por regra
Cada veículo tem uma seta no teto que mostra a saída. Toque ou clique num carro com a pista livre à frente e ele vai embora. Escolha um que está bloqueado e ele bate no trânsito, então a ordem das jogadas decide a fase.
A partir da fase 4, uma fila de passageiros espera no ponto de ônibus. Um veículo só sai quando a cor dele combina com o próximo passageiro. Um carro livre da cor errada estaciona numa vaga e sai sozinho quando o passageiro dele chega na frente da fila. O estacionamento é pequeno, então cores erradas demais lotam as vagas, e o jogador precisa planejar várias jogadas à frente. É essa segunda camada que transforma um engarrafamento comum num quebra-cabeça de sequência.
A tela de jogo tem dica, desfazer e reiniciar. Terminar uma fase sem toques bloqueados, sem dica e sem desfazer dá um Clean Clear, e um melhor tempo opcional por fase fica salvo no navegador. Fases concluídas liberam cinco pinturas na Garagem. As pinturas são só visuais: todo carro joga igual.
Como o código está organizado
Há dois lugares para trabalhar, e vale manter os dois bem separados. A pasta game/ é o resultado já compilado: você sobe e ela roda. O projeto do desenvolvedor é onde as mudanças acontecem: fases, ajustes, textos, logos e arquivos de áudio. Depois de mudar, você recompila e troca a pasta game/ hospedada pela saída nova completa.
A base é TypeScript, Three.js e WebGL2, com build pelo Vite. Os arquivos incluem HTML, CSS, JavaScript, TypeScript e JSON. Recompilar pede Node.js 22.12 ou mais novo e npm. Para jogar, nada disso é necessário.
O projeto traz quatro comandos, e o manual explica cada um:
- npm run levels confere os arquivos de fase antes do build.
- npm test roda os testes.
- npm run typecheck pega erros de tipo no TypeScript.
- npm run build gera a pasta nova do jogo.
Um verificador de fases vale mais do que parece. Puzzle de estacionamento quebra de jeito silencioso: uma fase sem solução, um passageiro sem carro da cor dele. Rodar a checagem antes de cada build sai mais barato do que descobrir pelos jogadores.
O que mudar primeiro num template de jogo de estacionamento
Sugerimos começar por estas quatro mudanças, nesta ordem.
1. Nome, logo e marca
O título do HTML e os ajustes de marca ficam no projeto-fonte, com os arquivos de logo em public/ e o áudio na pasta própria. Troque os arquivos mantendo os mesmos caminhos e recompile. White label é permitido: a sua marca ou a do seu cliente entra no lugar da nossa.
2. Fases
Os arquivos de criação de fases ficam em source/. Edite, valide com npm run levels, recompile e suba. O manual traz o mapa de arquivos, então você não precisa caçar uma fase no meio do código.
3. Textos da interface e idiomas
Os textos da interface ficam em arquivos de idioma. Se o seu público fala um dos 14 idiomas, leia cada tela nesse idioma uma vez; quase sempre vale ajustar algumas palavras ao tom da marca.
4. Ajustes do jogo
Os ajustes do jogo ficam em arquivos de configuração, e não espalhados pelo código. Mude um valor por vez e jogue algumas fases depois de cada mudança.
- Guarde uma cópia do pacote original.
- Troque os arquivos de marca, mantendo os caminhos.
- Edite ou crie fases e rode npm run levels.
- Rode npm test e npm run build.
- Troque a pasta game/ hospedada inteira, não arquivos soltos.
- Teste nos celulares e navegadores que os seus jogadores usam.
Hospedagem, incorporação e lojas de apps
Suba o conteúdo de game/ para qualquer hospedagem HTTP(S) de arquivos estáticos e abra o endereço. Não precisa de PHP, banco de dados, conta nem servidor Node.js para jogar. Funciona numa subpasta ou dentro de um iframe na sua página, e o manual traz um exemplo de iframe. Dê altura suficiente ao iframe e deixe o armazenamento do navegador ativo se o progresso precisa sobreviver a um recarregamento.
Abrir o index.html direto do disco não funciona; ele precisa ser servido por HTTP(S). O navegador precisa de JavaScript, módulos ES e WebGL2. Os jogadores tocam na tela do celular e clicam no computador, e os Ajustes têm um modo de gráficos Baixo que poupa bateria em aparelhos mais antigos.
O pacote não traz projeto de app nativo. Se você quer o jogo numa loja de apps, ligado a um SDK de portal ou instalado no seu servidor, isso é um serviço à parte, com orçamento por projeto.
Pedir orçamento de mudanças, hospedagem ou versão em app
O que esta edição deixa de fora
O Beep Out é para um jogador, com dados locais. Progresso, recordes e ajustes ficam no navegador do jogador. Não há multijogador online, ranking online ou recordes na nuvem, SDK de anúncios nem SDK de portal. Apps nativos, hospedagem e serviços hospedados não fazem parte do pacote.
Para muitos sites esse é o formato certo: nada para manter num servidor e nenhum dado de jogador saindo do navegador. Se você precisa de ranking ou anúncios, planeje esse trabalho antes do lançamento, e não depois.
Licença, suporte e preço num parágrafo
Uma 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. Os jogadores podem acessar de graça ou com monetização por anúncios. Você pode mudar o código, as artes e o áudio dentro desse produto e trocar o nosso nome e logo, mas não pode revender nem compartilhar o template, o código-fonte ou os recursos isoladamente. O suporte dura 6 meses, ou 12 com a extensão no checkout, e cobre instalação, uso dos arquivos e correção de defeitos reproduzíveis. O preço de lista é US$ 35; até 30 de novembro de 2026, uma promoção de Black Friday tira 15% de todos os templates, então o Beep Out sai por US$ 29,75, e a partir de 1º de dezembro os preços voltam ao de lista.
Ler os termos completos de licença e suporte
Perguntas frequentes sobre o código-fonte do Beep Out
Preciso de servidor ou banco de dados?
Não. Suba o conteúdo de game/ para uma hospedagem HTTP(S) de arquivos estáticos e abra o index.html por esse endereço. Progresso e recordes ficam salvos no navegador do jogador.
Posso criar as minhas próprias fases de estacionamento?
Sim. Edite os arquivos de fase em source/, valide com npm run levels, recompile e troque a pasta game/ hospedada pela saída nova.
O quebra-cabeça de trânsito funciona no celular?
Sim. No celular o jogador toca nos veículos e no computador clica. O navegador precisa ter WebGL2, e o modo de gráficos Baixo ajuda aparelhos mais antigos. Teste nos seus celulares antes de lançar.
Posso colocar o jogo dentro da minha página?
Sim. Hospede em qualquer pasta e incorpore com um iframe. O manual traz um exemplo pronto.
Vem com anúncios ou ranking online?
Não. A edição não tem SDK de anúncios, ranking online nem multijogador. Incluir isso é trabalho sob medida, com orçamento por projeto.
Posso usar uma licença para dois clientes?
Não. Uma licença cobre um produto final. Um segundo cliente pede uma segunda licença, e vários templates no mesmo pedido têm desconto de pacote.
Templates de quebra-cabeça parecidos
Se o seu público gosta mais de separar cores do que de trânsito, o Mochi Monsters é um puzzle de ordenar cores com 60 fases em três mundos e um modo infinito, por US$ 39 no preço de lista. Se você quer partidas mais curtas, o Gridspark é um puzzle de blocos 8×8 com o movimento ZAP e um desafio diário, por US$ 29 no preço de lista. Os dois vêm com código legível e 14 idiomas na interface.
Ver o Mochi Monsters, puzzle de ordenar cores
Ver o Gridspark, puzzle de blocos
Comprar dois ou mais templates no mesmo pedido baixa cada licença: 5% com dois, 10% com três, 15% com quatro e 20% com cinco ou mais.