Show HN: URL Snake

#1

Post by lbatchelor » Sat, Jan 07, 2023, 3:02 PM UTC

Just a little demo I made of a fully functioning game of snake encoded entirely within a valid url (around 1033 bytes of code encoded into a 1464 byte url).

Show HN: URL Snake
github.com

Re: Show HN: URL Snake

#2

Post by hgsgm » Sat, Jan 07, 2023, 8:08 PM UTC

HN doesn't linkify data: URLs

data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%3Eeval(atob(%22bGV0IGU9ZG9jdW1lbnQsdD1lLmJvZHkscj1NYXRoLGw9J1ByZXNzIHNwYWNlIHRvIHN0YXJ0L3BhdXNlL3Jlc2V0LCBhcnJvdyBrZXlzIHRvIG1vdmU8YnI+PGJyPjxjYW52YXMgaWQ9ImEiPjxzdHlsZT5jYW52YXN7Ym9yZGVyOiAxcHggc29saWQgYmxhY2s7fWJvZHl7YmFja2dyb3VuZDojY2NjO308L3N0eWxlPicsaT00MCxvPTQwMCxuPW8scz0wLGY9MSxkPTAsYz0xLGg9MCxwPVtbMywzXSxbNCwzXSxbNSwzXV0sdT1wLHk9WzUsNV0sYj0iIzAwMCIsZz0oZSx0LHI9YixsPWksbz1pKT0+e1MuZmlsbFN0eWxlPXIsUy5maWxsUmVjdChlLHQsbCxvKX0sdj0oZSx0LHIsbD0iY2VudGVyIik9PntTLmZpbGxTdHlsZT1iLFMudGV4dEFsaWduPWwsUy5maWxsVGV4dChlLHQscil9LHg9ZT0+ci5mbG9vcihyLnJhbmRvbSgpKmUpLGs9KCk9PntpZighZCYmIWMpe2xldFtlLHRdPXAucG9wKCkscj1wWzBdWzBdK3MsbD1wWzBdWzFdK2Y7aWYocjwwfHw5PHJ8fGw8MHx8OTxsfHxwLnNvbWUoKFtlLHRdKT0+cj09ZSYmbD09dCkpcmV0dXJuIG0oKTtyPT15WzBdJiZsPT15WzFdJiYoaCsrLHAucHVzaChbLi4ucFtwLmxlbmd0aC0xXV0pLHk9W3goOSkseCg5KV0pLHAudW5zaGlmdChbcixsXSksZygwLDAsIiNmZmYiLG4sbyk7Zm9yKFtlLHRdb2YgcClnKGUqaSx0KmkpO2coeVswXSppLHlbMV0qaSwiIzBmMCIpLHYoIlNjb3JlOiAiK2gsbi05LDMwLCJyaWdodCIpfX0sbT0oKT0+e2M9MSxnKDAsMCwiI2YwMCIsbixvKSx2KCJZb3UgZGllZCA6KCIsbi8yLG8vMil9LHc9KCk9PntjPTAscD1bLi4udV0scz0wLGg9MCxmPTF9LFM9KHQuaW5uZXJIVE1MPWwsYS5nZXRDb250ZXh0KCIyZCIpKTthLmhlaWdodD1vLGEud2lkdGg9bixTLmZvbnQ9IjMwcHggQXJpYWwiLGUuYWRkRXZlbnRMaXN0ZW5lcigia2V5dXAiLGU9PntlPWUud2hpY2g7Mzc9PWUmJihzPS0xLGY9MCksMzg9PWUmJihzPTAsZj0tMSksMzk9PWUmJihzPTEsZj0wKSw0MD09ZSYmKHM9MCxmPTEpLDMyPT1lJiYoYz93KCk6ZD1kPzA6MSl9KSxzZXRJbnRlcnZhbChrLG4pOw==%22))%3C%2Fscript%3E

Re: Show HN: URL Snake

#3

Post by realYitzi » Sat, Jan 07, 2023, 11:36 PM UTC

And ChatGPT can tell that it's a game of Snake from the URL. https://www.tiktok.com/@y.i.t.z.i/video/7186055378977803521

"When decoded, the script appears to be a Snake game implemented using JavaScript and the HTML5 canvas element. The script creates an HTML page with a canvas element and adds event listeners for arrow keys and space bar to control the game."

Re: Show HN: URL Snake

#4

Post by neontomo » Sat, Jan 07, 2023, 11:40 PM UTC

I love these types of projects. A suggestion to take this a step further is to encode it inside a QR code.

Re: Show HN: URL Snake

#5

Post by lbatchelor » Sat, Jan 07, 2023, 11:46 PM UTC

realYitzi wrote: post #3

And ChatGPT can tell that it's a game of Snake from the URL. https://www.tiktok.com/@y.i.t.z.i/video/7186055378977803521 "When decoded, the script appears to be a Snake game implemented using JavaScript and the HTML5 canvas element. The script creates an HTML page with a canvas element and adds event listeners for arrow keys and space bar to control the game."

Wow, that's actually impressive. Any idea how chat gpt would know that? Surely it's not making the request for it and surely it's not actually decoding any base64 right?

Re: Show HN: URL Snake

#6

Post by gabrielsroka » Sat, Jan 07, 2023, 11:49 PM UTC

Can't you just put the whole thing in a JavaScript URL without using base64? Eg

  JavaScript:alert(1)

It would be shorter than 1464. I'm not at my computer right now to try it...

Edit: It seems to work. Also, the original can be golfed some more.

Re: Show HN: URL Snake

#7

Post by lbatchelor » Sat, Jan 07, 2023, 11:51 PM UTC

neontomo wrote: post #4

I love these types of projects. A suggestion to take this a step further is to encode it inside a QR code.

That was actually the original plan! But unfortunately it seems like my phone's qr code reader won't open it in a browser automatically. I then tried using a url shortener to link to it but absolutely no shortener that I could find would take a data: url.

I could host my own shortener to do it, but it feels like that is cheating the spirit of the challenge.

I'll keep playing with it though, add touch device controls, maybe a site to allow generating different versions of the url (different colours, sizes, game over messages, etc).

Re: Show HN: URL Snake

#8

Post by realYitzi » Sun, Jan 08, 2023, 12:14 AM UTC

lbatchelor wrote: post #5

realYitzi wrote: post #3

And ChatGPT can tell that it's a game of Snake from the URL. https://www.tiktok.com/@y.i.t.z.i/video/7186055378977803521 "When decoded, the script appears to be a Snake game implemented using JavaScript and the HTML5 canvas element. The script creates an HTML page with a canvas element and adds event listeners for arrow keys and space bar to control the game."

Wow, that's actually impressive. Any idea how chat gpt would know that? Surely it's not making the request for it and surely it's not actually decoding any base64 right?

I can venture a guess, but gonna wait until I know what I'm talking about.

Over here it decodes a js animated SVG https://vt.tiktok.com/ZS8rcjhgg/ but made a few slight mistakes.

Re: Show HN: URL Snake

#9

Post by lbatchelor » Sun, Jan 08, 2023, 6:03 AM UTC

Edit: I've actually managed to get the javascript down to a measly 859 bytes now. Pretty happy with some of the code golfing techniques I came up with

Re: Show HN: URL Snake

#10

Post by gabrielsroka » Sun, Jan 08, 2023, 11:30 AM UTC

lbatchelor wrote: post #9

Edit: I've actually managed to get the javascript down to a measly 859 bytes now. Pretty happy with some of the code golfing techniques I came up with

You should be able to change

  e.addEventListener("keyup"...

to

  e.onkeyup=...

but I haven't tested it.