A internet nunca cansa de responder à pergunta “mas roda DOOM?”. A novidade da vez é ainda mais improvável: uma versão do game de 1993 que renderiza tudo usando apenas CSS. Sim, CSS mesmo, aquele usado para estilizar sites. O experimento foi criado por Niels Leenheer e já está chamando atenção por mostrar até onde um navegador moderno pode ir quando alguém decide forçar os limites.
A ideia por trás do projeto, chamado cssDOOM, é separar o “cérebro” do “desenho”. A lógica do jogo roda em JavaScript, mas a parte visual acontece toda com CSS. Cada parede, chão, item e inimigo é um simples elemento HTML, principalmente divs, posicionadas em 3D com transformações CSS. Não tem canvas, não tem WebGL, é o motor de layout do navegador trabalhando como se fosse uma engine gráfica.
Para manter o sabor original, Leenheer usa os dados de mapa do próprio DOOM, extraídos do arquivo WAD. Isso garante que o episódio inicial tenha salas, corredores e objetos no lugar certo, como no game clássico. O truque é que, em vez de “pintar pixels”, ele transforma coordenadas do WAD em milhares de elementos com propriedades CSS personalizadas, e deixa o CSS calcular largura, altura, rotação e profundidade de cada peça.
Um dos maiores desafios foi criar a sensação de câmera, porque CSS não tem um objeto de câmera nativo. A solução foi inverter a lógica: em vez de mover o jogador, o sistema move o mundo inteiro na direção contrária, quadro a quadro. O efeito final é aquele clássico “andar pelo corredor”, só que construído em cima de transformações como rotate e translate, além de recursos modernos de cálculo no CSS.
O projeto está disponível para jogar no navegador e também teve o código publicado no GitHub, com explicações de como a mágica funciona. O próprio autor trata como um teste de estresse e uma vitrine do quanto o CSS evoluiu em 30 anos, saindo de um simples “embelezador de páginas” para algo que consegue sustentar uma cena 3D inteira.
No fim, não é só mais um “DOOM em qualquer coisa”. É uma demonstração criativa de engenharia web, e também um lembrete de que, na cultura do desenvolvimento, sempre vai existir alguém tentando fazer o impossível funcionar… dentro de uma aba do navegador.
Veja mais sobre games.
