Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Play snake in the URL address bar

demian.ferrei.ro

Post reply on HN
Print view View original

31–40 of 100 posts

Re: Play snake in the URL address bar

#31

Post by epidemian »

Wow! It's such a surprise to see this old project of mine here on HN front page!

I must say, if you're experiencing any issues playing this, it's probably because it was designed to be played on the browsers of 10 years ago hehe. Here's how the game used to look and play in its former days of glory: https://github.com/epidemian/snake/blob/master/gameplay.gif?...

Since then, browsers have made some so-called "security" "improvements" that heavily hindered the capabilities of addressbar-based videogames. You can see traces of this on the game source code, and on the commit history.

At some point, pushing things to `history.replaceState()` got super rate-limited on Chrome, to something like tens of updates per minute IIRC, which totally wrecked the playing experience. I think i got around this by falling back to using `location.hash` directly. I think Chrome later rose this throttling to something more sensible. IDK if enough to play Crysis at 60fps on the addressbar, but enough for a snake game. And if not, sorry for messing up your Back button!

The worst of these security-excused changes was Firefox and Chrome starting to escape all whitespace characters (and others) on URLs. The game uses Braille characters to "render" its grid world, and blank Braille characters are abundant, especially on the early game. I think i made some comments on the browsers' issue trackers, and even received some sympathy from the developers (or maybe this was on the throttling of history, i don't remember). But of course, and as usual, "security" trumps over fun.

I ended up trying to counteract this URL escaping mechanisms with some horrible, really really horrible, indefensible, shameful, canvas-based font-measuring hack to replace blank Braille characters with some other character that doesn't get escaped and is more or less the same width, and as blank as possible. See https://github.com/epidemian/snake/blob/e9d5591a613afabc7e11.... If you have any idea of how to do this in a less soul-damning way, please let me know!

I think the game never worked properly on Safari. I know the browser used to hide the URL fragment, or maybe everything other than the domain name. I've no idea what it does now; does it even allow users to visit random webpages or does it mandate a separate app for everything? /s

In case my pile of hacks fails thoroughly, i resignedly added a way of showing the intended URL on the actual page content, by clicking on the "?"

Anyways, i should probably write a blog post about this little silly thing. Thanks for playing! :)

Re: Play snake in the URL address bar

#33

Post by em-bee »

epidemian wrote: post #31

Wow! It's such a surprise to see this old project of mine here on HN front page! I must say, if you're experiencing any issues playing this, it's probably because it was designed to be played on the browsers of 10 years ago hehe. Here's how the game used to look and play in its former days of glory: https://github.com/epidemian/snake/blob/master/gameplay.gif?... Since then, browsers have made some so-called "security…

https://github.com/epidemian/snake/blob/master/gameplay.gif?...

that looks a lot better. i am seeing the address bar filled with black and white pixelated block characters (U+2591 light shade). it still works though.

Re: Play snake in the URL address bar

#34

Post by epidemian »

MontyCarloHall wrote: post #18

This is awesome. My only issue is that the character used for whitespace looks janky in my browser, like a bunch of non-monospaced squares. A potential remedy: because Unicode contains all 256 possible 4x2 Braille patterns, why not use ⣿ as the background and carve out the snake/food as negative space, e.g. ⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿ This would ensure uniform spacing and is just as legible.

Yes, i thought of doing that. The problem is that, while it would definitely help on the early game, it would also mess things badly on the late game. As you snake grows, it'll take more and more space on the grid, and you'll start seeing more and more janky whitespace-replacement characters.

The game gets faster as you progress, so it's definitely not a good idea to make it jankyer when you're try-harding it :P

I'd love to know of a way of "fixing" this jankyness issue properly. Without admitting defeat and rendering to some other text-admitting output, like the page , as this oher snake game that was recently posted on Reddit does: https://old.reddit.com/r/webdev/comments/1n9z77e/snake_in_th...

But, for now, if you're actually trying to get a high score, i think the best approach is rendering the URL on page, by clicking on the "?"

Re: Play snake in the URL address bar

#36

Post by epidemian »

arguflow wrote: post #6

Harder than I expected, the extra blank dots all around the snake are kind of distracting, how does it look when they aren't on the page?

This is how it used to look in olden days, before browsers plundered our fun in the name of security: https://raw.githubusercontent.com/epidemian/snake/refs/heads...

Re: Play snake in the URL address bar

#38

Post by zaidhaan »

mjmas wrote: post #21
iamjackg wrote: post #2

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

One thing to note about these two APIs is that they affect how the session history (the back/forward stack) behaves, but the global browser history (entries shown in the History tab) is separate.

Most browsers record every change in the global history regardless of whether `history.pushState` or `history.replaceState` is used. The HTML Spec[0] is explicit about session history but does not define how global history should behave.

I can understand why the spec makes no mention of this -- global history is a user-facing UI feature, similar to address bar autocomplete, and it makes sense for browsers to control this behavior. That said, I'm always annoyed when I look into my history tab after visiting a page like this (e.g. Vercel Domains[1]), and see my global history flooded with entries for each individual keystroke I've made, all in the name of "user experience".

In this particular case, it's just a fun gimmick, but for everyday websites I'd much prefer if they just debounced the updates to the URL to avoid cluttering the global history.

[0]: https://html.spec.whatwg.org/#navigation-and-session-history

[1]: https://vercel.com/domains

Re: Play snake in the URL address bar

#40

Post by epidemian »

650 wrote: post #13

Very cool, would love to see source code. For what its worth no AI was able to replicate this.

The source code is not minified or anything, ctrl+u is your friend :)

IDK about the AI claim tho. The game has been there for like 10 years, so it's probably in the training data of these things. The bots might be able to replicate it, but they surely won't be able to enjoy it! (for now at least)

Post reply on HN