I was pleasantly surprised by how responsive it was, and overjoyed when I clicked back and immediately came back to HN: no messy history. Genius idea!
history.pushState vs history.replaceState
Play snake in the URL address bar
21–30 of 100 posts
Re: Play snake in the URL address bar
#22I just see the address? Safari on iOS.
See closely there should be snake in the bar as well, which responds if you use the arrows.
Re: Play snake in the URL address bar
#23>demian.ferrei.ro/snake#|%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%A0%88%E2%96%91%E2%96%91%E2%A0%A4%E2%A0%A4%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91%E2%96%91|[score:0] This is too confusing to play on firefox.
Worked just fine on version 143.
Not for me on Android (same version)
Re: Play snake in the URL address bar
#24[deleted]
Re: Play snake in the URL address bar
#25Very cool, would love to see source code. For what its worth no AI was able to replicate this.
There's a link to "code" at the bottom of the page.
Re: Play snake in the URL address bar
#26I made a similar thing some time ago, but with the favicon.
Re: Play snake in the URL address bar
#27I was pleasantly surprised by how responsive it was, and overjoyed when I clicked back and immediately came back to HN: no messy history. Genius idea!
reading the source it looks like for some browsers that rate limit url updates, it has to use a different way that nukes your back button ability.
function drawWorld() {
var hash = '#|' + gridString() + '|[score:' + currentScore() + ']';
if (urlRevealed) {
// Use the original game representation on the on-DOM view, as there are no
// escaping issues there.
$('#url').textContent = location.href.replace(/#.*$/, '') + hash;
}
// Modern browsers escape whitespace characters on the address bar URL for
// security reasons. In case this browser does that, replace the empty Braille
// character with a non-whitespace (and hopefully non-intrusive) symbol.
if (whitespaceReplacementChar) {
hash = hash.replace(/\u2800/g, whitespaceReplacementChar);
}
history.replaceState(null, null, hash);
// Some browsers have a rate limit on history.replaceState() calls, resulting
// in the URL not updating at all for a couple of seconds. In those cases,
// location.hash is updated directly, which is unfortunate, as it causes a new
// navigation entry to be created each time, effectively hijacking the user's
// back button.
if (decodeURIComponent(location.hash) !== hash) {
console.warn(
'history.replaceState() throttling detected. Using location.hash fallback'
);
location.hash = hash;
}
}Re: Play snake in the URL address bar
#28Very clever, and playable! Thanks.
Re: Play snake in the URL address bar
#29Bro the game is intense!
Re: Play snake in the URL address bar
#30I made a similar thing some time ago, but with the favicon. https://franciscouzo.github.io/favisnake/
Likewise, I did 2048 with the favicon years ago