Français
Il existe une loi tacite sur Internet : si quelque chose existe, quelqu’un essaiera d’y faire tourner DOOM. Tests de grossesse, tracteurs, Flipper Zero (en anglais), thermostats. La liste est longue, ridicule et ne cesse de s’allonger.
Mais cette semaine, le développeur Niels Leenheer a emmené la plaisanterie là où personne ne l’attendait. Il a créé une réimplémentation jouable de DOOM dans laquelle chaque mur, sol, baril et imp est un élément HTML <div>, entièrement rendu avec CSS. Pas de canvas. Pas de WebGL. Juste des feuilles de style en cascade faisant des choses qu’elles n’étaient jamais censées faire.
Vous pouvez y jouer dès maintenant dans votre navigateur. Le développeur propose une démo jouable ; la compatibilité et les performances peuvent varier selon le navigateur.
Comment peut-on seulement créer un jeu de tir en 3D avec CSS ?
La réponse courte : avec une quantité terrifiante de mathématiques et une connaissance approfondie de fonctionnalités modernes de CSS auxquelles la plupart des développeurs web n’ont jamais touché.
Leenheer a extrait les données originales des cartes du fichier WAD de la version shareware de 1993 (les mêmes données que celles utilisées par le moteur original de DOOM) et a traduit chaque sommet, segment de mur et secteur en éléments HTML. Chaque mur reçoit ses coordonnées DOOM brutes sous forme de propriétés personnalisées CSS. Ensuite, CSS effectue les calculs géométriques : les largeurs avec hypot(), les angles de rotation avec atan2(), et le placement dans l’espace 3D avec translate3d() et rotateY().
La logique du jeu s’exécute en JavaScript. Mais le rendu, dans son intégralité, est du pur CSS. JavaScript transmet quatre propriétés personnalisées à la zone d’affichage (les coordonnées X, Y et Z du joueur, ainsi que son angle), et CSS s’occupe du reste. Cette séparation nette entre logique et affichage est l’un des aspects les plus élégants du projet.
Déplacer le monde plutôt que la caméra
C’est ici que les choses deviennent philosophiquement intéressantes (à la manière des geeks). CSS n’a pas de caméra. On ne peut pas pointer un objectif virtuel sur une scène 3D et le déplacer. Leenheer a donc utilisé une vieille astuce des débuts de la 3D : au lieu de déplacer la caméra à travers le monde, on déplace le monde entier autour du joueur.
Vous avancez d’un pas ? Le monde recule. Vous montez un escalier ? L’escalier descend. Chaque mouvement est inversé. C’est déroutant quand on y pense, mais cela fonctionne parfaitement en pratique.
Si vous avez déjà exploré l’étrange histoire du développement de jeux vidéo (en anglais), vous savez que ce genre d’astuce est omniprésent. Le DOOM original lui-même en était rempli. Que quelqu’un ait recréé ce même esprit de résolution créative des problèmes avec CSS en 2026 est, franchement, magnifique.
Les sols sont simplement des divs basculés à l’horizontale
Les éléments du DOM sont verticaux par défaut. Les sols doivent être horizontaux. Chaque sol reçoit donc un rotateX(90deg) pour le faire pivoter dans le bon plan. Leenheer reconnaît s’être trompé de signe la première fois. Le sol était là, simplement orienté du mauvais côté, invisible pour le joueur. Un classique.
Pour les formes irrégulières que peuvent prendre les secteurs de DOOM (pièces en L, courbes plus ou moins circulaires, plateformes trouées), il a utilisé clip-path avec des tracés SVG et la règle de remplissage evenodd. La nouvelle fonction CSS shape() a permis de faire cela plus proprement que ce n’aurait été possible ne serait-ce qu’un an auparavant. Le CSS moderne ne cesse de gagner en puissance, et ce type de projet le prouve.
L’astuce des feuilles de sprites et la marche des zombies
Les ennemis de DOOM sont des sprites 2D toujours tournés vers la caméra (une technique appelée billboarding). Chaque ennemi possède des sprites correspondant à différents angles de vue, et le jeu original ne stockait que 5 ensembles uniques pour 8 orientations, les autres étant obtenus par symétrie. Leenheer a reproduit ce principe avec des feuilles de sprites, des animations CSS steps() et un retournement scaleX() pour les directions symétriques.
Un problème inattendu : tous les ennemis marchaient parfaitement en rythme. Le pied gauche de chaque zombie touchait le sol exactement à la même image. Selon les mots de Leenheer, c’était « profondément troublant ». La solution a consisté à définir en JavaScript un animation-delay aléatoire pour décaler le cycle de marche de chaque ennemi. Un minuscule détail qui fait la différence entre une « démo technique » et « quelque chose qui semble vivant ».
Tout a commencé avec un oscilloscope
Le projet cssDOOM n’est pas sorti de nulle part. Leenheer avait déjà créé une version de DOOM tournant sur un oscilloscope des années 1980, ce qui lui avait fourni le code d’extraction des cartes et une solide compréhension des mathématiques nécessaires.
Pour la boucle de jeu JavaScript (la partie qu’il jugeait la moins intéressante), il s’est aidé de Claude pour créer une approximation en JavaScript à partir du code source original en C. Le code source original de DOOM est public depuis des années, et Leenheer voulait consacrer son temps à la partie difficile : faire faire à CSS des choses pour lesquelles il n’avait pas été conçu. Le code source complet de cssDOOM est disponible sur GitHub.
Pourquoi cela compte au-delà du mème
« Est-ce que ça peut faire tourner DOOM ? » est un mème, oui. Mais des projets comme cssDOOM sont plus que des plaisanteries. Ce sont des tests de résistance pour les technologies des navigateurs. Ils poussent CSS dans ses derniers retranchements et révèlent ce que les navigateurs modernes peuvent réellement gérer. Chaque mur du jeu utilise hypot(), atan2(), des propriétés personnalisées CSS, clip-path et des déclarations @property. Ces fonctionnalités des navigateurs sont employées dans une combinaison particulièrement ambitieuse. Leur prise en charge et leurs performances peuvent varier selon le navigateur et l’appareil.
Keith Clark avait créé il y a des années une démo de jeu de tir à la première personne au rendu entièrement en CSS qui prouvait que le concept était possible. Leenheer est allé plus loin en réalisant le rendu d’un projet jouable avec des ennemis, des portes, des ascenseurs et des animations de sprites. Il s’agit d’une réimplémentation expérimentale, qui ne prétend pas être totalement fidèle au moteur original. L’écart entre ce que CSS pouvait faire en 2010 et ce qu’il peut faire aujourd’hui est stupéfiant.
Si vous avez déjà regardé des speedrunners décortiquer des jeux (en anglais) ou suivi des développeurs indépendants construire des mondes entiers à partir de rien (en anglais), vous savez que les choses les plus intéressantes en technologie arrivent quand quelqu’un décide d’ignorer les règles et d’essayer quelque chose d’absurde.
cssDOOM est absurde. Il est aussi brillant. Et vous pouvez y jouer dès maintenant sur cssdoom.wtf.
Allez-y. Votre navigateur peut encaisser. Probablement.
Traduction française de l’article original en anglais du 2026-03-30. Traduction réalisée avec l’aide de l’IA le 2026-11-02 ; les références temporelles restent celles de l’original.
