Règles du jeu

Le principe

Chaque cible est une image de 400 × 300 pixels. Ton code HTML/CSS est affiché dans un cadre de la même taille, puis comparé à la cible pixel par pixel.

Ce qui est autorisé

Du HTML et du CSS, tout ce que le navigateur sait faire : dégradés, box-shadow, clip-path…
Le code n'a pas besoin d'être « propre » : balises non fermées, guillemets omis, tout est permis.

Ce qui est bloqué

JavaScript : désactivé.
Toute ressource externe : images, polices, feuilles de style, y compris les URL data:.
Plus de 10 000 caractères.

Le calcul du score

La correspondance est la part de pixels identiques (un écart de 16 niveaux par canal est toléré pour absorber l'anticrénelage).

100 % : 600 points, plus un bonus de concision de 400 × 200 / (caractères + 200). Avec 100 caractères, tu marques 866,67 ; avec 50, 920.
Moins de 100 % : 600 × (correspondance / 100)⁴, sans bonus. À 99 %, 576,36 points seulement : une copie parfaite bat toujours une copie approximative.

Seul ton meilleur score par cible est conservé. Le classement général additionne ces meilleurs scores. Le classement Code golf retient, pour chaque cible, la copie parfaite la plus courte.

Duels 1 vs 1

Crée un duel et envoie le lien (ou laisse-le dans les duels ouverts). Dès que l'adversaire rejoint, un compte à rebours de 5 secondes démarre et la cible est dévoilée aux deux joueurs en même temps. Tu peux soumettre autant de fois que tu veux avant la fin du chrono.

Mode Score : le meilleur score à la fin l'emporte.
Mode ⛳ Code golf : seule une copie à 100 % compte, et c'est la plus courte qui gagne. Si personne n'atteint 100 %, la meilleure correspondance l'emporte.
À égalité, le premier à avoir atteint son résultat gagne. Les deux solutions sont révélées à la fin.

Astuces

Le body a une marge de 8 px par défaut.
« Glisser pour comparer » superpose la cible à ton rendu : bouge la souris sur l'aperçu.
« Différence » montre en noir ce qui correspond, en couleur ce qui diffère.
Ton brouillon est gardé dans ton navigateur, cible par cible.