![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 think there was also some PTSD there... we all remember doing this game in various languages
hahaha, sorry to bring up past troubles! 🤣💗
If I'm over-thinking the PHP part then what about the following:
There is a difference between writing the game logic in PHP and actually extracting the game logic as a Finite State Machine in pure HTML.
With the latter, there are challenges that you could skip simply because you wrote the logic in PHP instead of writing a script that extracts the logic as a flat FSM in pure HTML (using whatever language).
Here are the ones I can think of:
If you can do it then you'd have in written a snake in pure HTML (in theory).
There is nothing wrong with naming files with the query part (you need a file system that supports all url characters as part of a file name). There is also a nothing wrong with pre-determined placements of the apple.
For the file name part, your suggestion would require a custom web server so that's just working around the issue. We want to write a snake in pure HTML that works anywhere. So ideally we'd have a state to ID mapping that can be also used as a filename to fix both the filename and the maximum URL length issue.
For the determination issue, there's nothing wrong with with pre-determined placements from a gameplay point of view. However, this is not what the program in the article is doing, even though this is not possible in pure HTML.
Correct on how the URL was going to be handled (if physics hadn't got in the way), I was going to go very simple and just do s010101020103a0206dirl with "s010101020103" being snake positions as "x1,y1,x2,y2,x3,y3" and "a0206" being the apple position x,y and "dirl" being left for a naming convention (although anything will do that is a valid URL obviously). All the other info could have been stored in the HTML such as score.
As for the randomisation of the apples, it is obviously impossible, but one idea I had was to make a "start screen" as a 300 x 80 table that used the following technique to "pseudo-random" the start position.
By changing the
bgcolorof each<td>to spell words ("click here to start") and having a different snake starting position and apple start position for each anchor it would have offered 2400 possible (and about 1500 realistic "people might actually click here") random starting positions and apple positions. To a human it would appear random (even if you could technically click the exact same spot and perform the exact same moves to get a repeated game).You could even have a 0 refresh time meta refresh on the start screen with other starting snake and apple positions for each page's table, to multiply the possible starts by 100 or so and increase the pseudo-randomness further.
in the scheme of this project, 2400 times to 240000 times more permutations is nothing 🤷🏼♂️🤣💗
No JS, no CSS, no images... haha, tricked ya, I didn't specifically mention no PHP. Although I did say "pure HTML"... oh, dang... that doesn't work at all
Since its function is not php based (ie it works w/out php), then it does exactly what is said. But if u actually want to use this versus learn from it, then the time it would take to build w/out php is outlandish. His point was to show what can be done with pure html, to that there were no lies told. Even if this was done w/out php, you'd still want to see a demo, thus click bait is inevitable if that's what you want to call it.😆
Thanks, I am glad someone realised why there is PHP and that it doesn't invalidate the fact this can be done entirely with HTML and PHP is there purely for making a working demo vs just theory. 🙏🏼💗
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 🤣💗
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! 🤣💗
Php 🤮
hehe, who would use such a language....disgusting! 🤣💗
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. 💗
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). 😢💗This is absolutely fantastic! Brilliant and absolutely mad
haha thanks! 🙏🏼💗
thats crazy, congrats
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! 🙏🏼💗