DEV Community

Cover image for Snake...in pure HTML⁉️ [no JS, no CSS, no images!!] 😱

Snake...in pure HTML⁉️ [no JS, no CSS, no images!!] 😱

GrahamTheDev on March 08, 2024

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...
Collapse
 
ejo profile image
E-jo

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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. 💗

Collapse
 
ejo profile image
E-jo

yep, you got me Graham :)

Thread Thread
 
ejo profile image
E-jo

I did like it, overall

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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. 🙏🏼💗

Thread Thread
 
ejo profile image
E-jo

absolutely... made me think a little, which is always a good thing. and I did take some enjoyment from it in the end

Thread Thread
 
ejo profile image
E-jo

I think there was also some PTSD there... we all remember doing this game in various languages

Thread Thread
 
grahamthedev profile image
GrahamTheDev

hahaha, sorry to bring up past troubles! 🤣💗

Collapse
 
neeh profile image
neeh • Edited

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 I'm over-thinking the PHP part then what about the following:

  1. How can you have a pure HTML snake that reads the state from the search query?
  2. How can you have the next direction encoded a query parameter using pure HTML?
  3. How can you introduce some non-determinism (in this case, the randomised location of the apple) using pure HTML?

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:

  • Mapping the game state into a unique identifier that can be used as the name of each HTML file, each link can reference another game state
  • Using a LCG to create multiple deterministic versions of the game, each one using a different seed to randomise the position of the apple
  • Writing the logic that visits each possible game state and extracts it as a HTML page that links to the pages of its children states

If you can do it then you'd have in written a snake in pure HTML (in theory).

Thread Thread
 
lebbe profile image
Lars-Erik Bruce

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.

Thread Thread
 
neeh profile image
neeh • Edited

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.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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.

<table rules=none>
  <tr>
    <!-- by changing the bgcolor to white or black we can effectively spell "click to start" in large writing-->
    <td bgcolor=black><a href="1.html">&nbsp;</a></td>
    <td bgcolor=black><a href="2.html">&nbsp;</a></td>
    <td bgcolor=white><a href="3.html">&nbsp;</a></td>
    <td bgcolor=black><a href="4.html">&nbsp;</a></td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

By changing the bgcolor of 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 🤷🏼‍♂️🤣💗

Collapse
 
ejo profile image
E-jo

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

Collapse
 
webdgem profile image
Nikki Weathers

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.😆

Collapse
 
grahamthedev profile image
GrahamTheDev

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. 🙏🏼💗

Collapse
 
link2twenty profile image
Andrew Bone

You're a mad, jury is still out on evil, genius and I love it 😅

Collapse
 
grahamthedev profile image
GrahamTheDev

hahaha, thanks...think? 🤣💗

Collapse
 
ruicraveiro profile image
Rui Craveiro

I would call this SSSnake... Server Side Snake.

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha, Server Side Slithering is my new favourite pastime! 🤣💗

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

hehe, well at least this is not the best experience, so hopefully it will put you off and you never play again! 🤣💗

Collapse
 
auroratide profile image
Timothy Foster • Edited

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 ⚛️

  1. That is, assuming quite wrongly that each new dimension adds exponentially more atoms to express reality meaningfully.
Collapse
 
grahamthedev profile image
GrahamTheDev

haha I love the fact that I did the math, and then you did the math on me doing the math! 🤣💗

Collapse
 
neeh profile image
neeh • Edited

However, I want to be clear (as I do not want to be accused of clickbait), I am rendering this HTML using PHP.

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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! 🤣💗

Collapse
 
neeh profile image
neeh

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?

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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 🤷🏼‍♂️🤣

Thread Thread
 
neeh profile image
neeh

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.

Collapse
 
wesley_olis profile image
Wesley Oliver

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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?? 💗

Collapse
 
wesley_olis profile image
Wesley Oliver

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

My top score is only 450, who can beat that? 👇🏼

Collapse
 
greenteaisgreat profile image
Nathan G Bornstein

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

Hehe, nice way to make sure you get the high score, funnily enough I hadn't thought of that! 🤣💗

Collapse
 
realjoshbyrnes profile image
Josh Byrnes

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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! 💗

Collapse
 
rajatkantinandi profile image
Rajat Kanti Nandi

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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. 💗

Collapse
 
billiegoose profile image
Billie Hilton

Truly the dream of Hypermedia As The Engine Of Application State has been realized!

Collapse
 
grahamthedev profile image
GrahamTheDev

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 🤣💗

Collapse
 
zeeshanahmadkhalil profile image
Zeeshan Ahmad Khalil

Php 🤮

Collapse
 
grahamthedev profile image
GrahamTheDev

hehe, who would use such a language....disgusting! 🤣💗

Collapse
 
shadowruge profile image
izaias

Watts Github URL❤️

Collapse
 
grahamthedev profile image
GrahamTheDev

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. 💗

Collapse
 
moopet profile image
Ben Sinclair

If there's a requirement for projects on github to be useful, then a billion people missed the memo!

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Haha, fair comment! 🤣💗

Collapse
 
goodevilgenius profile image
Dan Jones

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?

Collapse
 
grahamthedev profile image
GrahamTheDev

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. 💗

Collapse
 
warkentien2 profile image
Philip Warkentien II

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

Left and right are not possible (as far as I can tell) as accesskey doesn't seem to have any way to map to it (as there is no "<-" character). 😢💗

Collapse
 
sufian profile image
Sufian mustafa

Image description

Collapse
 
kwolniak profile image
Krzysztof Wolniak

Oh man, You made my day! Finally something interesting in this stagnant, boring world! Simple and brilliant :)

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha, thanks, glad some of my silliness brought you some joy! 🙏🏼💗

Collapse
 
abrahamn profile image
Abraham

This is absolutely fantastic! Brilliant and absolutely mad

Collapse
 
grahamthedev profile image
GrahamTheDev

haha thanks! 🙏🏼💗