CSS Minecraft

• Un clone complet de Minecraft réalisé uniquement en CSS
• Sans utiliser JavaScript, toutes les fonctionnalités sont implémentées uniquement avec du HTML et du CSS
• Utilise la pseudo-classe :has() de CSS pour concevoir des déclencheurs complexes, une logique réactive et gérer les interactions
• GitHub, CodePen et le site officiel proposent le code source et une démo
• Les navigateurs récents (Chromium 105+, Safari 15.4+, Firefox 121+) sont indispensables

[reedids]

Numéro de force en CSS...

[anveloper]

Waouh..

[ifmkl]

Waouh..?

[mkyoon]

Oh là là..

[ndrgrd]

Ils ont disposé les cases de façon à pouvoir sélectionner un bloc pour chacune, puis n’ont habillé que l’apparence avec du CSS ? C’est impressionnant, en tout cas.

[GN⁺]

Avis Hacker News

• Quelqu’un dit que c’est probablement la réalisation CSS la plus impressionnante qu’il ait vue jusqu’ici, que cela lui rappelle l’ancien et excellent démo CSS « A Single Div », et que cette nouvelle démo en établit un nouveau record ; il compte l’analyser lui-même et partage le lien vers A Single Div
  • Beaucoup d’éléments semblent interactifs, mais rien ne se passe quand on clique, ce qui est un peu décevant ; il se demande si c’est à cause du mobile ou si c’est simplement prévu ainsi
• Réaction admirative face à une idée vraiment ingénieuse et élégante, avec partage de notes personnelles sur le fonctionnement de la démo : lien d’analyse de CSS Minecraft
• Pour ceux qui se demandaient comment l’état est géré, une personne explique avoir regardé le code source et constaté que tout repose sur des boutons radio, avec tous les blocs pouvant être placés directement intégrés dans le HTML
  • Ajout d’une explication pour ceux qui s’interrogent sur l’état de la caméra : l’animation s’exécute pendant l’état :active des boutons et reste arrêtée le reste du temps
  • Étonnement enthousiaste : c’est la première fois qu’elle voit une approche aussi audacieuse dans une démo CSS
  • Quelqu’un se demandait pourquoi le monde était limité à 9x9x9, puis a découvert que les 46 000 lignes de code attribuent à chaque bloc différents matériaux (air, pierre, herbe, terre, tronc, bois, feuilles, verre), et trouve cette méthode intéressante elle aussi
• Visiter ce site donne soudain envie de réinstaller Minecraft, dit quelqu’un sur un ton amusé
• Avis selon lequel c’est techniquement très impressionnant, avec le partage d’une expérience personnelle : arrivé au milieu de sa vie, quelqu’un a au contraire l’impression de retomber en enfance en s’amusant à créer toutes sortes d’apps et de sites en HTML et CSS
• Une personne résume sa compréhension de l’implémentation sous forme de question : les voxels seraient implémentés avec , chaque face avec un doté d’une classe CSS différente, il y aurait un voxel pour chaque type de bloc avec un seul actif à la fois, ces seraient disposés en une grille 9x9 sur 10 couches multipliée par les types de blocs (environ 6 500), et l’ensemble serait enveloppé dans un portant des classes CSS qui réagissent au contrôle de la caméra ; elle qualifie cette approche de véritablement révolutionnaire
• Le CSS ne fait que 480 lignes, avec un lien vers le code source CSS, tandis que le HTML compte 46 022 lignes (3,07 Mo)
• Réaction très impressionnée, accompagnée d’un retour d’expérience disant que sous Chrome sur Linux, même avec des centaines d’onglets ouverts, cela ne pose aucun problème
  • Réponse ajoutant que même avec beaucoup d’onglets, le navigateur les décharge et enregistre leur état sur disque, donc il n’y a pas de problème de performance tant qu’on ne les rouvre pas réellement
• Quelqu’un se demande quand arrivera un Minecraft basé sur le web
  • Souvenir qu’autrefois on pouvait jouer directement à Minecraft classic sur minecraft.net
  • Mention malicieuse de l’époque des applets Java, avec une blague sur un téléphone qui sonne
  • Rappel qu’une première version de Minecraft (« classic ») était jouable directement dans le navigateur, avec le souvenir personnel d’y avoir vraiment joué enfant, puis d’avoir plus tard été incapable de retrouver le jeu au point de se demander si ce n’était pas un faux souvenir
• Réaction finale de pure admiration : c’est vraiment incroyable