Como colocar jogos HTML5 no site de uma empresa

Há três jeitos de colocar um jogo no site de uma empresa: incorporar com iframe um jogo hospedado por outra pessoa, enviar os arquivos do jogo para o seu próprio espaço na web e mostrá-los numa página, ou licenciar um jogo em pacote e publicá-lo como seu. O primeiro é o mais rápido para testar. O segundo dá mais controle. O terceiro é o certo quando o jogo deve carregar a sua marca por muito tempo.

Este guia é para empresas, agências e donos de site em WordPress, Wix, site próprio, intranet ou portal. Ele compara as opções, traz um checklist para antes do lançamento e lista o que vem num pacote da Polar Games. São informações gerais, não aconselhamento jurídico.

Três jeitos de pôr um jogo no seu site

1. Incorporar com iframe. Um jogo hospedado em outro lugar aparece num quadro na sua página. Você escreve uma tag, mas o jogo, as atualizações e a disponibilidade ficam com quem hospeda.
2. Hospedar os arquivos você mesmo. Você envia a pasta do jogo para o seu espaço na web e abre no seu endereço, sozinha ou dentro de um iframe numa das suas páginas. Para os nossos pacotes basta uma hospedagem que sirva arquivos estáticos: não precisa de PHP, banco de dados nem conta para jogar.
3. Licenciar um jogo em pacote. O estúdio entrega uma pasta pronta para hospedar, o código-fonte editável e um manual, com licença para um produto final. Você hospeda, e pode alterar código, arte e áudio dentro desse produto.

Ver os templates de jogos HTML5

Iframe ou hospedagem própria: a comparação

• Velocidade: o quadro carrega o jogo do servidor de quem hospeda, então a sua página depende dele. Arquivos na sua hospedagem carregam de um endereço que você controla.
• Controle: na sua hospedagem você decide o endereço, a página em volta, o cache e as atualizações. Num embed de terceiros, quem hospeda decide e pode mudar ou tirar o jogo.
• Cookies e consentimento: um jogo carregado de endereço de terceiros faz seus visitantes contatarem esse endereço, e essa parte pode definir cookies próprios ou medir visitas. Arquivos hospedados por você vêm do seu domínio. Anúncios e analytics, onde quer que rodem, podem exigir consentimento; confira as regras que valem para você com um profissional habilitado.
• Busca: não conte com um jogo dentro de iframe para fornecer texto à sua página. Escreva o seu próprio título, uma descrição curta, as instruções e um link em volta do jogo.

A tag iframe, atributo por atributo

Um embed típico para um jogo que você hospeda. As observações sobre os atributos vêm da referência de iframe da MDN.

<iframe src="https://seu-site.com.br/jogos/meu-jogo/" title="Meu Jogo" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>

• title: a MDN diz que usuários de leitor de tela podem usá-lo para identificar o conteúdo do quadro, e que deve descrever esse conteúdo de forma concisa.
• allow="fullscreen": a MDN define o atributo antigo allowfullscreen como allow="fullscreen *". Sem a permissão, um quadro de outro endereço não consegue ir para tela cheia.
• sandbox: deixe de fora num jogo hospedado por você. A MDN desaconselha fortemente allow-scripts junto com allow-same-origin num quadro de mesma origem, porque o quadro passa a poder remover o próprio sandbox.
• Quadro em branco ou recusa de conexão: o servidor que hospeda o jogo pode enviar X-Frame-Options (DENY bloqueia qualquer incorporação, SAMEORIGIN só permite a mesma origem) ou uma regra frame-ancestors num cabeçalho Content-Security-Policy, que a MDN recomenda no lugar. Mude o cabeçalho da pasta do jogo, ou sirva página e jogo pelo mesmo endereço.

Ler o guia prático de hospedagem e incorporação

Checklist antes de publicar

1. HTTPS em tudo. Uma página https não carrega um iframe http: a MDN lista scripts e iframes entre as requisições que os navegadores bloqueiam como conteúdo misto.
2. Celulares. Abra num celular de verdade, nas duas orientações, dentro da sua página.
3. Som. A MDN diz que os navegadores em geral só permitem áudio audível automático depois que o visitante interage com a página. Espere silêncio até o primeiro toque e desenhe a tela inicial em torno de um toque.
4. Tela cheia e idiomas. Confira se o botão de tela cheia aparece no quadro e se os idiomas do jogo cobrem o seu público.
5. Acessibilidade básica. Dê um título ao quadro, ofereça um link que abra o jogo sozinho, confira tamanho de texto e contraste e diga quais são os controles. Mantenha a informação essencial como texto normal da página, não dentro do jogo.
6. Privacidade e consentimento. Liste o que roda na página: scripts de anúncios, analytics, fontes de outras hospedagens. Atualize a política de privacidade. Se usar anúncios ou analytics, pergunte ao seu consultor se a lei local exige consentimento.

Doze coisas para conferir antes de pagar por um jogo

O que vem num pacote da Polar Games

Cada edição lista o conteúdo na própria página do marketplace, e você joga uma demo ao vivo antes de comprar. Em geral você recebe:

• Uma pasta game/ pronta para hospedar. Os requisitos que as nossas edições listam são um navegador moderno e qualquer hospedagem HTTP(S) que sirva arquivos estáticos. Hospedar não pede banco de dados nem build. Duas edições, Zabum e Ricopop, têm um ranking opcional que pede PHP 7.4 ou mais novo.
• Uma pasta source/ editável e um manual em documentation/ com capítulos de instalação e de personalização.

Cinco edições, entre elas Gridspark e Velvet Pool, são em JavaScript puro. As outras são escritas em TypeScript e algumas usam bibliotecas como Three.js ou Phaser, mas a pasta game/ já vem compilada. Você só precisa do Node.js para editar e recompilar o código-fonte.

Não estão incluídos: hospedagem, instalação no seu servidor, personalização, recursos novos e integração com SDKs ou portais. Os termos listam esses itens como serviços à parte, com orçamento antes de começar. O suporte cobre dúvidas sobre instalar e usar os arquivos entregues e defeitos reproduzíveis, por 6 meses, ou 12 com a extensão.

Ver o Gridspark, uma edição de quebra-cabeça em JavaScript puro

Ver o Velvet Pool, uma edição 3D de sinuca

Licença, nota fiscal e pacotes

• Uma licença cobre um produto final, seu ou de um cliente. Uma agência que atende vários clientes precisa de uma licença para o produto de cada cliente.
• A licença é perpétua e não vence quando o suporte acaba. Os visitantes podem jogar de graça ou com monetização por anúncios.
• Emitimos nota fiscal brasileira se você pedir, ou invoice para clientes no exterior.
• Comprar vários itens juntos dá desconto sobre os preços de lista: 5% em dois, 10% em três, 15% em quatro, 20% em cinco ou mais.

A licença explicada, cláusula por cláusula

Quando faz sentido um jogo com a sua marca

Um template pronto basta quando você quer um bom jogo numa página rapidamente. Uma versão sob encomenda faz sentido quando o jogo deve levar o seu logo, cores, textos e regras, quando precisa combinar com uma campanha ou quando tem de funcionar dentro de uma plataforma que você já usa. Aceitamos projetos sob encomenda e white label. Preços e prazos dependem do trabalho, então não listamos nenhum: mande o template de que gostou e o que quer mudar, e peça um orçamento.

Contato: willian@polargames.com.br

Engine, template ou JavaScript puro: qual escolher

Perguntas frequentes

Um jogo em iframe ajuda no SEO da página?

Não conte com isso. Escreva títulos, descrição e instruções em volta do jogo como texto normal da página.

Os jogos têm anúncios ou rastreamento?

As edições listam SDKs e contas de anúncios como não incluídos. O que a sua própria página acrescenta, como analytics ou anúncios, é você quem deve informar e, quando exigido, pedir consentimento.

Próximo passo

Escolha um jogo no marketplace, jogue a demo e leia o manual. Depois escolha o caminho que serve ao seu site e escreva para nós se quiser a sua marca nele.

Ver os templates de jogos HTML5

Jogos HTML5 white label: o que você recebe e o que perguntar

Licenciar jogos HTML5 ou comprar o código-fonte?

Advergame: um jogo HTML5 com a sua marca na campanha