A internet nunca cansa de responder \u00e0 pergunta \u201cmas roda DOOM?\u201d. A novidade da vez \u00e9 ainda mais improv\u00e1vel: uma vers\u00e3o 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\u00e1 est\u00e1 chamando aten\u00e7\u00e3o por mostrar at\u00e9 onde um navegador moderno pode ir quando algu\u00e9m decide for\u00e7ar os limites. <\/p>\n
A ideia por tr\u00e1s do projeto, chamado cssDOOM, \u00e9 separar o \u201cc\u00e9rebro\u201d do \u201cdesenho\u201d. A l\u00f3gica do jogo roda em JavaScript, mas a parte visual acontece toda com CSS. Cada parede, ch\u00e3o, item e inimigo \u00e9 um simples elemento HTML, principalmente divs, posicionadas em 3D com transforma\u00e7\u00f5es CSS. N\u00e3o tem canvas, n\u00e3o tem WebGL, \u00e9 o motor de layout do navegador trabalhando como se fosse uma engine gr\u00e1fica. <\/p>\n Para manter o sabor original, Leenheer usa os dados de mapa do pr\u00f3prio DOOM, extra\u00eddos do arquivo WAD. Isso garante que o epis\u00f3dio inicial tenha salas, corredores e objetos no lugar certo, como no game cl\u00e1ssico. O truque \u00e9 que, em vez de \u201cpintar pixels\u201d, ele transforma coordenadas do WAD em milhares de elementos com propriedades CSS personalizadas, e deixa o CSS calcular largura, altura, rota\u00e7\u00e3o e profundidade de cada pe\u00e7a. <\/p>\n Um dos maiores desafios foi criar a sensa\u00e7\u00e3o de c\u00e2mera, porque CSS n\u00e3o tem um objeto de c\u00e2mera nativo. A solu\u00e7\u00e3o foi inverter a l\u00f3gica: em vez de mover o jogador, o sistema move o mundo inteiro na dire\u00e7\u00e3o contr\u00e1ria, quadro a quadro. O efeito final \u00e9 aquele cl\u00e1ssico \u201candar pelo corredor\u201d, s\u00f3 que constru\u00eddo em cima de transforma\u00e7\u00f5es como rotate e translate, al\u00e9m de recursos modernos de c\u00e1lculo no CSS. <\/p>\n O projeto est\u00e1 dispon\u00edvel para jogar no navegador e tamb\u00e9m teve o c\u00f3digo publicado no GitHub, com explica\u00e7\u00f5es de como a m\u00e1gica funciona. O pr\u00f3prio autor trata como um teste de estresse e uma vitrine do quanto o CSS evoluiu em 30 anos, saindo de um simples \u201cembelezador de p\u00e1ginas\u201d para algo que consegue sustentar uma cena 3D inteira. <\/p>\n No fim, n\u00e3o \u00e9 s\u00f3 mais um \u201cDOOM em qualquer coisa\u201d. \u00c9 uma demonstra\u00e7\u00e3o criativa de engenharia web, e tamb\u00e9m um lembrete de que, na cultura do desenvolvimento, sempre vai existir algu\u00e9m tentando fazer o imposs\u00edvel funcionar\u2026 dentro de uma aba do navegador.<\/p>\n Veja mais sobre games.<\/p>\n <\/p><\/div>\n","protected":false},"excerpt":{"rendered":" A internet nunca cansa de responder \u00e0 pergunta \u201cmas roda DOOM?\u201d. A novidade da vez \u00e9 ainda mais improv\u00e1vel: uma vers\u00e3o 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\u00e1 est\u00e1 chamando aten\u00e7\u00e3o por mostrar at\u00e9 onde …<\/p>\n","protected":false},"author":1,"featured_media":21683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_shortscore_rating":"","_shortscore_game":"","_shortscore_summary":"","footnotes":""},"categories":[92],"tags":[619,43,10749,7518,10750,1641,10751,3781,2824,1067,1249],"coauthors":[393],"class_list":["post-21682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geek","tag-navegador","tag-classico","tag-css","tag-dev","tag-divs","tag-doom","tag-estilos","tag-recria","tag-roda","tag-so","tag-usando"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/posts\/21682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=21682"}],"version-history":[{"count":0,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/posts\/21682\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/media\/21683"}],"wp:attachment":[{"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=21682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=21682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=21682"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/obewise.com.br\/index.php\/wp-json\/wp\/v2\/coauthors?post=21682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/nerdizmo.ig.com.br\/wp-content\/uploads\/2026\/04\/Doom-roda-em-CSS-03.jpg\")
<\/figure>\n![\"\"](\"https:\/\/nerdizmo.ig.com.br\/wp-content\/uploads\/2026\/04\/Doom-roda-em-CSS-02.jpg\")
<\/figure>\n![\"\"](\"https:\/\/nerdizmo.ig.com.br\/wp-content\/uploads\/2026\/04\/Doom-roda-em-CSS-01.jpg\")
<\/figure>\n<\/figure>\nRelacionado<\/em><\/h3>\n<\/p>\n