Jogos de navegador e js13kGames: jogos pequenos feitos para a web

A maioria dos jogos do FredyGames foi feita para uma máquina que não se vende mais: um console, um portátil, um PC antigo. Para jogá-los no navegador, usamos um emulador que finge ser aquela máquina. Uma parte cada vez maior do catálogo funciona de outro jeito. Esses jogos foram feitos para a própria web, então o navegador não está imitando nada: ele é a plataforma para a qual foram pensados. Este guia explica o que isso quer dizer na prática, apresenta o js13kGames, a competição de onde vieram muitos deles, e faz um passeio pelos jogos de navegador que você pode jogar aqui.

O que é um jogo de navegador hoje

Durante muito tempo, jogo na web queria dizer plug-ins como o Flash, que os navegadores já aposentaram. No lugar deles entrou um conjunto de recursos padrão que todo navegador moderno traz:

Canvas do HTML5, uma superfície de desenho em que um script pinta, pixel a pixel ou com formas e texto. Basta para a maioria dos jogos 2D.
WebGL, que dá ao mesmo script acesso à placa de vídeo. Ele desenha cenas em 3D e deixa o jogo rodar pequenos programas chamados shaders, que calculam cores e iluminação direto na GPU.
Web Audio, uma API que toca sons mas também os sintetiza do zero, com osciladores, filtros e efeitos, como faz um sintetizador de verdade.
WebAssembly, um formato binário compacto que roda código escrito em linguagens como C, C++, Rust ou Python em velocidade próxima à nativa. É o que permite rodar motores de jogos e até linguagens inteiras dentro de uma página.

Um jogo feito com essas peças não precisa de instalação nem de emulador. É uma página da web que, por acaso, é um jogo, e funciona do mesmo jeito no Windows, no macOS, no Linux e, se os controles permitirem, em celulares e tablets.

js13kGames: um jogo inteiro em 13 kilobytes

O js13kGames é uma competição online anual de jogos em JavaScript, organizada desde 2012 por Andrzej Mazur. Cada edição dura um mês, de meados de agosto a meados de setembro, e tem um tema. A regra que a define é o limite de tamanho: o jogo completo, compactado em zip, precisa caber em 13 kilobytes, ou 13.312 bytes. Isso inclui o código, os gráficos, a música e os efeitos sonoros, e o jogo não pode carregar nada de fora do zip.

Para ter uma ideia da escala, 13 kilobytes é menos do que uma única foto de uma página comum da web, e menos do que muitas fontes da web sozinhas. Um parágrafo longo deste guia, em texto puro, já ocupa cerca de meio kilobyte.

Os temas são propositalmente abertos, e os autores os interpretam de jeitos surpreendentes. Vários jogos do FredyGames vêm das edições de 2019 a 2023, cujos temas foram "Back" (de volta), "404", "Space" (espaço), "Death" (morte) e "13th Century" (século 13). Dá para ver cada um nos jogos: Intern Apocalypse manda você de volta à cidade buscar poções; Island Not Found e Soyuz 404 tiraram o nome do código de erro; Norman the Necromancer e The Neatness falam de morte, um com feitiços e esqueletos, o outro com caveiras e lápides.

Como o limite molda os jogos

Um limite tão apertado muda o jeito de fazer jogos, e o resultado tem um estilo reconhecível.

Os gráficos são desenhados por código. Não há espaço para uma pasta de imagens, então a maioria dos jogos gera a arte quando começa: formas e degradês num canvas, sprites de pixel codificados em poucas strings compactas, ou paisagens 3D inteiras feitas de fórmulas e shaders. Island Not Found é o exemplo mais impressionante daqui: a ilha, as texturas e o céu são gerados quando a página carrega, e por isso ele leva alguns segundos para começar. Radius Raid desenha em código o campo de estrelas, os efeitos de brilho e a fonte de pixel.

As fases são geradas. A geração procedural economiza espaço e, de quebra, dá mais vontade de jogar de novo. Bounce Back e Space Huggers montam cada fase ao acaso, então nenhuma partida é igual à outra.

O som é sintetizado. Áudio gravado é grande demais, então os jogos produzem o som com o Web Audio. Bibliotecas pequenas descrevem cada efeito como uma lista curta de números: frequência, ataque, decaimento, ruído, deslize. As mais conhecidas são o jsfxr, versão em JavaScript do clássico gerador sfxr; o ZzFX, um sintetizador minúsculo de efeitos sonoros de Frank Force; e trackers como o SoundBox e o Sonant-X, que guardam músicas inteiras como padrões de notas e as renderizam no navegador. No FredyGames, Radius Raid usa o jsfxr, Stolen Sword usa o ZzFX e Underrun compõe a trilha com uma versão enxuta do Sonant-X, e por isso espera um pouco na tela de introdução enquanto a música é gerada. Intern Apocalypse sintetiza nota por nota as suas duas músicas a partir de uma partitura minúscula composta pelo próprio autor.

O código é espremido. Os autores minificam o JavaScript, encurtam todos os nomes e usam compactadores como o Roadroller, que comprimem o código mais do que o zip sozinho consegue. Os repositórios do código-fonte, que muitos autores publicam, costumam ser perfeitamente legíveis; a versão comprimida serve só para a entrega final.

As ideias são enxutas. Com espaço para poucas mecânicas, os jogos tendem a ter uma ideia clara e bem explorada. Isso os deixa fáceis de pegar e, muitas vezes, surpreendentemente profundos.

Um passeio pelos jogos de navegador do FredyGames

Todos estes jogos rodam direto na página. A página da plataforma jogos de navegador lista todos; aqui estão agrupados por gênero.

Quebra-cabeças

Black Hole Square (js13kGames 2021): toque nas casas com setas na ordem certa para empurrar todas as casas para um buraco negro, com um limite rígido de jogadas.
The Neatness (2022): trace linhas por labirintos para que cada caveira chegue a uma lápide, sem juntar duas caveiras nem duas lápides.
Super Castle Game (2023): conduza um bloco que cresce ao encostar em blocos soltos e dê a ele a forma que preenche as casas marcadas.
Fire & Fondness 2: um quebra-cabeça por turnos num programa de auditório, com lança-chamas, alavancas e muitas piadas. Foi feito com o motor Godot, cuja exportação para a web roda em WebAssembly.
Tessel: um jogo tranquilo de encaixar peças em tabuleiros quadrados, hexagonais e aperiódicos de Penrose.
Cube Composer: encadeie funções como map e reject para transformar fileiras de cubos na forma pedida, uma introdução suave à programação funcional.
E os quebra-cabeças de lógica da coleção de Simon Tatham, que têm um guia só para eles.

Ação e tiro

Radius Raid (2013): um jogo de tiro espacial de dois comandos numa arena maior que a tela, com movimento no teclado e mira no mouse.
Starship Sorades 13K (2012): um jogo de nave com rolagem vertical do primeiríssimo js13kGames, com itens de arma, escudo e bomba.
Underrun (2018): um jogo de tiro sombrio, visto de cima, em que os seus disparos são a principal fonte de luz.
Bounce Back (2019): um roguelite visto de cima em que a única arma é um bumerangue.
Norman the Necromancer (2022): segure os aldeões com feitiços em arco e levante os mortos como esqueletos.
Space Huggers (2021): um jogo de plataforma e tiro em planetas destrutíveis, para até quatro jogadores com gamepads.
Stolen Sword (2020): um jogo de ação de um gesto só, em que o tempo desacelera enquanto você mira cada investida; funciona bem no celular.
SpacePi (2012): desenhe linhas com o mouse para defender uma base que não para de crescer.

Aventura e exploração

Island Not Found (2020): uma aventura de quebra-cabeças em 3D e primeira pessoa, numa ilha inteira. Precisa de WebGL 2.
Humwin & Darbold (2021): um robozinho explora um planeta roxo atrás do amigo desaparecido.
Soyuz 404 (2020): uma aventura curta de apontar e clicar sobre dois cosmonautas perdidos onde nem as estrelas existem.
Intern Apocalypse (2019): uma pequena aventura de ação em 3D sobre o estagiário que vai buscar as poções.
A Dark Room: não é do js13k, mas é um dos jogos de navegador mais conhecidos da sua década, um jogo minimalista em texto que cresce de um quarto frio para uma vila e uma expedição.

Estratégia e programação

You're the OS!: administre processos, páginas de memória e E/S no papel do sistema operacional. É escrito em Python e roda na página graças ao WebAssembly.
Elevator Saga: escreva o JavaScript que controla um conjunto de elevadores e veja se ele vence o desafio.

Controles, saves e celulares

Como não há emulador, não existe uma tabela de teclas comum: cada jogo tem os seus controles, listados na página dele. Muitos usam o mouse, as setas ou WASD; alguns, como Stolen Sword, Black Hole Square e Tessel, foram pensados para telas de toque e são confortáveis no celular. Outros, como Radius Raid e Underrun, pedem teclado e mouse.

Os saves funcionam do jeito que os autores os fizeram. Os jogos que lembram o seu progresso o guardam no navegador, só naquele aparelho, como explica o nosso guia sobre jogar no navegador. Alguns jogos de competição não têm save nenhum e foram feitos para uma sessão só.

Alguns jogos precisam de WebGL, ou de WebGL 2. Se um deles mostrar a tela em branco, confira se a aceleração de hardware está ligada no navegador ou use uma versão recente do Chrome, Edge, Firefox ou Safari.

Por que podemos hospedá-los

O FredyGames só hospeda jogos cujos autores deram permissão explícita de redistribuição, e com jogos de navegador isso costuma ser fácil. Cada um dos jogos acima foi publicado pelo autor sob uma licença livre: MIT, GPL, Mozilla Public License, Unlicense ou Creative Commons Atribuição-CompartilhaIgual, conforme o jogo. Cada página de jogo diz qual é a licença, aponta para onde o autor o publicou e, quando a licença pede, hospeda o código-fonte junto do jogo.

Também garantimos que cada jogo rode inteiro a partir dos nossos próprios servidores. Quando a versão original carregava estatísticas, fontes, um runtime de linguagem ou qualquer outra coisa de outro site, a versão daqui teve essas requisições removidas ou os arquivos hospedados junto do jogo, e a página do jogo diz o que mudou. Os jogos em si não carregam nada de outros sites.

Os detalhes de como conferimos cada licença estão em como o FredyGames confere a licença de cada jogo. E, se esses jogos compactos e espertos agradam a você, o guia de consoles de fantasia cobre outro canto da cena em que limites apertados produzem jogos surpreendentemente criativos.