Jouer à Snake dans la barre d’adresse URL

• L’utilisateur peut jouer à Snake dans la barre d’adresse URL
• Le serpent se contrôle avec les flèches du clavier ou WASD
• Selon la page web, l’URL peut ne pas s’afficher correctement ou paraître floue à cause d’un effet de « brouillard »
• L’interface propose une expérience originale où l’on joue directement en manipulant l’URL
• Contrairement aux jeux classiques, l’utilisation de la barre d’adresse offre une expérience différente

---

Une façon de jouer originale dans la barre d’adresse URL

• L’utilisateur contrôle le serpent avec les flèches directionnelles ou les touches WASD
• Au lieu d’un écran de jeu classique, la partie se déroule réellement dans la barre d’adresse du navigateur
• En raison des caractéristiques de la page web, certains utilisateurs peuvent rencontrer un problème où l’URL ne s’affiche pas correctement ou apparaît floue
• Si l’URL ne s’affiche pas normalement ou semble difficile à distinguer, il faut vérifier l’affichage de l’adresse de la page ou essayer de l’actualiser
• Contrairement aux jeux HTML5 traditionnels, l’utilisateur profite d’une expérience interactive avec un retour immédiat dans la zone de l’URL

[GN⁺]

Commentaires Hacker News

• J’avais déjà fait quelque chose de similaire il y a longtemps, en utilisant le favicon
  https://franciscouzo.github.io/favisnake/
  • J’avais aussi déjà fait un 2048 en favicon
    https://aquova.net/games/2048/
  • J’ai trouvé ça vraiment fascinant, et plus l’écran est Retina, plus c’est difficile à jouer
• Je trouve ça vraiment génial, mais le caractère utilisé pour représenter les espaces s’affiche un peu bizarrement dans mon navigateur, un peu comme des carrés de largeurs différentes
  Unicode contient tous les motifs braille 4x2 possibles (256 au total), donc ça vaudrait peut-être le coup d’utiliser ⣿ comme fond, puis de « creuser » le serpent ou la nourriture dessus avec de l’ombrage
  Exemple : ⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿
  Comme ça, l’espacement des caractères serait constant, donc sans doute plus lisible
  • J’y ai pensé moi aussi, au début ça aiderait clairement, mais vers la fin ça pourrait au contraire empirer les choses
    Plus le serpent grandit, plus il s’étale sur la grille, et au final davantage de caractères de remplacement des espaces finiraient forcément par attirer l’œil
    Comme le jeu accélère au fil de la partie, je ne pense pas que ce soit souhaitable d’avoir un affichage plus chargé précisément dans les moments où il faut se concentrer
    Si quelqu’un connaît une vraie solution à ce problème d’espaces bizarres, je veux vraiment la connaître, mais je ne veux pas dépendre d’une sortie texte comme le <title> de la page
    D’ailleurs, un jeu de snake similaire récemment posté sur Reddit le dessine dans le titre
    https://old.reddit.com/r/webdev/comments/1n9z77e/snake_in_the_tab_title/
    Si vous visez un gros score tout de suite, le mieux semble être de cliquer sur le « ? » pour afficher l’URL dans la page
• J’ai été surpris par l’excellente réactivité, et j’étais vraiment content de revenir proprement sur HN dès que je repartais en arrière
  L’historique ne se retrouve pas non plus en vrac, c’est vraiment malin
  • On dirait qu’ils ont très bien exploité history.pushState et history.replaceState
  • En regardant le code source, on dirait que, dans certains navigateurs qui limitent la mise à jour de l’URL, il faut utiliser une autre méthode pour bloquer aussi le bouton retour
• J’admire vraiment l’ingéniosité de l’idée
  J’ai été impressionné par l’utilisation des motifs braille pour convertir les informations des points en URL
  https://github.com/epidemian/snake/blob/master/snake.js
• C’est pour ce genre de choses que je viens sur Hacker News, ça m’a égayé la journée
• Je trouve l’idée vraiment unique et créative
• Pour ceux qui n’ont pas tout de suite compris comment ça fonctionne, il y a un petit point d’interrogation cyan en haut à gauche
  Il y a une explication dedans

  Vous pouvez contrôler le snake dans l’URL avec les flèches directionnelles ou WASD. Si l’URL s’affiche mal ou bizarrement, cliquez.
  En plus, la barre d’adresse doit être suffisamment longue pour voir l’écran, donc il faut élargir la fenêtre pour jouer
  Le concept est original et ça fonctionne bien

• C’est plus difficile que je ne l’imaginais, les points vides autour du snake sont assez distrayants
  Je me demande à quoi ça ressemblerait s’il était affiché dans la page sans ces points vides
• C’est vraiment astucieux, et le jeu lui-même est tout à fait amusant à jouer