![Cover image for Snake...in pure HTML⁉️ [no JS, no CSS, no images!!] 😱](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl1zfnqp9dna5pvqflzkh.jpg)
They say that some people just like chaos.
Hi there 👋🏼, I am Graham "loves chaos" TheDev, and this time I am back with another silly internet exp...
For further actions, you may consider blocking this person and/or reporting abuse
Am I missing something? This is more than a little click-baity, since it does not accomplish the title. They do acknowledge the PHP in the beginning of the article, but that still invalidates the promise made in the title
if you believe it is clickbait, then you are right (and thanks for the click and comment), it is in the eye of the beholder.
however, I think you are over-thinking the PHP part of this. All it is doing is simulating the equivalent of all the files that could have done the same job. If there were infinite storage and instant processing time, this could certainly have been done without a backend and just having ever game state stored as a page in a huge folder and the links directing to those pages. 💗
yep, you got me Graham :)
I did like it, overall
As long as you took some enjoyment from it then I am happy. If you had left feeling completely cheated I would have been a little disappointed. 🙏🏼💗
absolutely... made me think a little, which is always a good thing. and I did take some enjoyment from it in the end
I would call this SSSnake... Server Side Snake.
Haha, Server Side Slithering is my new favourite pastime! 🤣💗
You're a mad, jury is still out on evil, genius and I love it 😅
hahaha, thanks...think? 🤣💗
Only 6e686 files? You only need like 9 extra dimensions1 in the universe and to assign a file to each of its atoms. Just use Hyper Tesseract Markup Language (abbreviated HTML, with the T bolded) and you'll be good to go ⚛️
haha I love the fact that I did the math, and then you did the math on me doing the math! 🤣💗
I really, really thought I'd escaped Snake as a game and played it for the last time ever in a car park in Bristol on a Blackberry in 2009. Apparently not.
hehe, well at least this is not the best experience, so hopefully it will put you off and you never play again! 🤣💗
I'm afraid this is too late as I already clicked on the article because it claims in the title to have written a snake game in "Pure HTML" instead of "PHP/HTML" and we all know here why it makes all the difference.
clickbait.
Then you didn't read the part of why we used PHP, i didnt have enough atoms in the universe to create all the pages required, otherwise it would have been pure HTML! 🤣💗
I didn't, I stopped at that paragraph I quoted, and I already know that writing a snake in pure HTML is challenging, that's precisely the reason why I visited on your article.
Why not updating the title to match what you actually did?
Then if you have no context I will just say thank you for the click and the comments (they really help boost the article) and I can't wait to get you with some more clickbait in the future 🤷🏼♂️🤣
I got the context right when I read the word PHP. You were initially planning to generate all the states as HTML pages and use links/refresh to step the game. But you quickly realised you couldn't do it because the number of states to generate is way too large. So you wrote the game in PHP instead.
There is a much better simpler and highly compressible way to store the state for snake and food. Which will prevent from hitting url limit by massive margin. Css selector inpection, maybe u can inject content into a form, using css, then submit form to same page. Url#anchor, ccs selector inspection.
No js then.
Then it is using CSS...and this is pure HTML? A little confused what you are suggesting as it would break the idea of HTML only?? 💗
html + backend, not just html frontend.
When read HTML only, mean no backend my mind. U can still improve the state. Attemot add 4 snakes, that eat ewah other. U will probly simplify the implementation of state then.
Built 3 iteration of snake as a child in java.
My top score is only 450, who can beat that? 👇🏼
Not the snake game we deserve....but the snake game we need 🫡🫡🫡
This is so, so, so incredible Graham! I especially appreciated right-clicking to view the page source for it and realized I could play the game and cheat by just clicking on each anchor tag to move the snake around without it moving by itself. Absolutely incredible and that reinforces the fact this truly is HTML.
Hehe, nice way to make sure you get the high score, funnily enough I hadn't thought of that! 🤣💗
This is quite impressive. I'm really surprised you didn't use cookies and keep the session management in PHP - This would have ensured users can't cheat (lol) and it would also fix your URL length issue.
It works reasonable well, although the latency is a bit of a pain (game works quickly sometimes, other times not so quickly). This is probably as I'm in Australia.
Because you've kept the PHP stateless, it would probably work quite well in a FaaS environment.
Latency to Australia will certainly make the game slower and less consistent lol!
The reason state is in the URL is because originally I was going to just do this as a series of static files, but then did the calculation on the number of files required.
You are right, we could certainly do it in cookies now that it has a backend, I was trying to keep it as close as possible to HTML only as possible! 💗
Good concept. Although looking at the title I was wondering that how can a markup language handle a game logic. But looks like you used another language (php) and had the whole game state in the backend and serving static pages updated based on the game state. It feels like cheating but I guess technically you did not use any Javascript and had all the logic in the backend. Overall some good things to learn from here that urls can be powerful way to handle state of an application.
It may not be clear, but this is actually possible with just HTML (with each page a completely different game state), it was just I would need more files than there are atoms in the universe, so I used PHP to generate the next pages. 💗
Truly the dream of Hypermedia As The Engine Of Application State has been realized!
Haha, well you might like the next silly article in this series...first there was HTMX, then there was HTMZ, but I am building HTOMG, and it is a zero JS "framework" for SPAs 🤣💗
Php 🤮
hehe, who would use such a language....disgusting! 🤣💗
Watts Github URL❤️
This isn't on GitHub as it isn't useful in of itself, however all the concepts are explained in the article so hopefully that is useful. 💗
If there's a requirement for projects on github to be useful, then a billion people missed the memo!
Haha, fair comment! 🤣💗
thats crazy, congrats
This is a cool idea. But, if you're going to use PHP, why not just store the game state on the server and use a session cookie?
Because the idea was that this was to be HTML only, which necessitates storing state in the URL. Unfortunately due to needing more files than atoms in the universe I had to use PHP to simulate all the lose pages. 💗
This is absolutely fantastic! Brilliant and absolutely mad
haha thanks! 🙏🏼💗
Oh man, You made my day! Finally something interesting in this stagnant, boring world! Simple and brilliant :)
Haha, thanks, glad some of my silliness brought you some joy! 🙏🏼💗
Once again, absolute cinema!
(wrong meme, correct praise) As always, an inspiration.
I was exploring no-JS keyboard controls myself, but am still stuck on Left/Right detection.
Left and right are not possible (as far as I can tell) as
accesskeydoesn't seem to have any way to map to it (as there is no "<-" character). 😢💗