DEV Community

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

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
 
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
 
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
 
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 πŸ€·πŸΌβ€β™‚οΈπŸ€£πŸ’—