CSS Minecraft

• Um clone completo de Minecraft criado usando apenas CSS
• Sem uso de JavaScript, com todos os recursos implementados somente com HTML e CSS
• Uso da pseudoclasse :has() do CSS para projetar gatilhos complexos e lógica responsiva, lidando com interações
• Código-fonte e demo disponíveis no GitHub, CodePen e site oficial
• Navegadores modernos (Chromium 105+, Safari 15.4+, Firefox 121+) obrigatórios

[reedids]

Show de força em CSS...

[anveloper]

Uau..

[ifmkl]

Uau..?

[mkyoon]

Caramba..

[ndrgrd]

Eles organizaram de forma que fosse possível selecionar um bloco em cada célula e usaram CSS só para estilizar a aparência? É realmente impressionante.

[GN⁺]

Comentários do Hacker News

• Comentário dizendo que este é provavelmente o exemplo de CSS mais impressionante que já viu, lembrando o antigo e excelente demo “A Single Div”, e afirmando que este demo elevou ainda mais o nível; também compartilha a expectativa de analisá-lo em detalhe junto com o link do A Single Div
  • Lamenta que muitos elementos pareçam interativos, mas não respondam a cliques, e se pergunta se isso acontece por estar no celular ou se é assim mesmo
• Reação de admiração, chamando a ideia de realmente engenhosa e elegante, e compartilha anotações pessoais sobre como o demo funciona no link de análise do CSS Minecraft
• Para quem tinha curiosidade sobre como o estado é gerenciado, diz que ao olhar o código-fonte descobriu que ele usa botões de rádio e que todos os blocos que podem ser posicionados estão embutidos no HTML
  • Acrescenta, para quem queria entender o estado da câmera, que a animação roda no estado :active dos botões e fica parada fora disso
  • Diz que nunca tinha visto um demo em CSS usar uma abordagem tão ousada e demonstra grande apreço por isso
  • Conta que ficou se perguntando por que o mundo é limitado a 9x9x9, mas verificou que as 46 mil linhas de código definem materiais diferentes para cada bloco (ar, pedra, grama, terra, tronco, madeira, folhas e vidro), achando esse método interessante também
• Diz de forma bem-humorada que, ao visitar esse site, sentiu vontade de instalar Minecraft de novo
• Afirma que é tecnicamente muito impressionante e compartilha a experiência pessoal de que, agora já passando da metade da vida, está se divertindo de novo como na infância criando vários apps e sites com HTML e CSS
• Organiza em forma de pergunta se entendeu corretamente como o demo foi implementado: cada voxel é um , cada face é um com classes CSS diferentes, existe um voxel para cada tipo de bloco e apenas um fica ativo por vez, esses estão organizados em uma grade 9x9 de 10 camadas multiplicada pelos tipos de bloco (cerca de 6.500 no total), e toda a estrutura é envolvida por uma com classes CSS que respondem ao controle da câmera; elogia a abordagem como muito inovadora
• Informa que o CSS tem apenas 480 linhas e compartilha o link do código-fonte CSS, além de dizer que o HTML tem 46.022 linhas (3,07 MB)
• Reage dizendo que é realmente impressionante e compartilha a experiência de que, no Chrome no Linux, consegue deixar centenas de abas abertas sem problemas
  • Acrescenta que, mesmo com muitas abas, o navegador descarrega as abas e salva o estado em disco, então não há problema de desempenho a menos que elas sejam realmente abertas
• Pergunta quando surgirá um Minecraft baseado na web
  • Compartilha a lembrança de que antigamente era possível jogar Minecraft classic diretamente no minecraft.net
  • Faz uma piada mencionando os tempos dos Java Applets, dizendo que consegue até ouvir o telefone tocando
  • Recorda que versões iniciais do Minecraft (“classic”) podiam ser jogadas diretamente no navegador e que realmente se divertiu com isso quando criança; depois, como não conseguia mais encontrar o jogo, chegou a suspeitar que fosse uma lembrança inventada de um sonho
• Expressa uma admiração sincera, dizendo que isso é realmente incrível