Jouer en 3 étapes
- Lance le jeu. Clique sur « Jouer maintenant ». Ou télécharge le fichier et ouvre-le dans Firefox ou Chrome (pas Safari).
- Démarre la partie. Clique dans la page ou appuie sur espace.
- Regarde la barre d’adresse, pas la page. Flèches haut/bas pour changer de ligne. Gauche/droite pour faire demi-tour : la queue devient la tête. Les bords gauche et droit sont des murs.
Comment ça marche
Un caractère braille = 8 points
Un caractère braille, c’est une grille de 2 colonnes × 4 lignes, soit 8 points. Il en existe 256, un pour chaque combinaison de points allumés et éteints.
20 caractères = un écran
20 caractères côte à côte = un écran de 40 × 4 points. La ligne du bas est toujours allumée : c’est le sol. Et ça évite que Chrome affiche des caractères vides sous forme de code.
L’adresse change 6 fois par seconde
Environ 6 fois par seconde, le code réécrit la fin de l’adresse avec history.replaceState. La page ne se recharge pas, et l’historique ne se remplit pas.
Le score dans l’onglet
Le score s’affiche aussi dans le titre de l’onglet (document.title).
Le code clé
Pas besoin de tout lire. Trois extraits suffisent pour comprendre.
1. Chaque point = un bit
Le tableau BIT dit quel bit correspond à quel point. Une ligne du tableau = une ligne de points, deux colonnes par ligne.
// Chaque point d'un caractère braille correspond à un bit : BIT[ligne][colonne]
const BIT = [
[0x01, 0x08], // ligne 1 : gauche, droite
[0x02, 0x10], // ligne 2
[0x04, 0x20], // ligne 3
[0x40, 0x80], // ligne 4 (le sol)
];2. Du serpent aux caractères braille
draw() part de 20 caractères vides, allume les points du sol, du serpent et de la pomme, puis transforme chaque case en caractère. Le premier caractère braille est 0x2800 (aucun point) : il suffit d’y ajouter les bits allumés.
function draw() {
const cells = new Array(COLS).fill(0); // 20 cases, tous les points éteints
// x >> 1 : quelle case (2 points par case) ; x & 1 : colonne de gauche ou de droite
const light = (x, y) => (cells[x >> 1] |= BIT[y][x & 1]);
for (let x = 0; x < W; x++) light(x, H - 1); // le sol, toujours allumé
for (const p of snake) light(p.x, p.y);
light(food.x, food.y);
// 0x2800 = braille vide, + les bits allumés = le bon caractère
return cells.map((bits) => String.fromCharCode(0x2800 + bits)).join('');
}3. Écrire dans la barre d’adresse
Une seule ligne. replaceState remplace l’adresse actuelle au lieu d’en ajouter une nouvelle : pas de rechargement, et ton bouton « retour » reste propre.
// Réécrit la fin de l'adresse : pas de rechargement, pas de nouvelle entrée d'historique
history.replaceState(null, '', '#' + screen);Pourquoi ça ne marche pas partout
- Safari limite les changements d’adresse trop rapides, donc le jeu bloque.
- Dans un aperçu de fichier (mail, appli, messagerie), il n’y a pas de barre d’adresse. Il faut l’ouvrir dans un vrai navigateur.