Table Tennis in Pure HTML CSS 🤯

No JavaScript to be found here:

Comments

[Temani Afif]

too bad there is no Play button ;)

[Simon]

Here is one you can play!

codepen.io/thecodingpie/pen/NWxzBxJ

[Temani Afif]

nah, in that one there is JS :)

[Christina Gorton]

Usually because you can learn a lot by trying to limit yourself. These aren't experiments you would put in production usually but they help you learn new concepts in a fun way. And sometimes they are just for fun!

[Temani Afif]

what's the point of running a 2h marathon and get tired if we can simply use a car to reach the final line in 10min ? ;)

[lionel-rowe]

Could you replace this with a plain link or autoplay-disabled embed? The autoplay audio is kinda irritating.

[Simon]

sure

[Kevin J. Baxter]

Great game. Thanx for sharing!

[Ben Halpern]

Of course this in particular is more for art and experimentation than practicality, but there are certain situations where constraints exist for very valid reasons (security being a huge one)... It's not impossible, but much harder to, say, pull XSS without a full programming language running.

[Temani Afif]

@lifelongthinker it was a rhetorical question :)

[David Wickes]

[Lorenzo]

So you are also a developer! I didn't know...

[Carmen S. Stanley]

WOW! This is so cool tennis court. Really appreciated. Actually, you should play tennis as well, I believe you will do wonders there as well.

[Madza]

and I thought the calculator was a challenge 😀😀

[TaiKedz]

OK, nope, I am legit impressed. Copied the HTML and compiled CSS into a local file, removed the sole font import. Totally works. From what I can see, leveraging webkit animation instructions and deterministic re-calculations that make it look like a random game...

Reminds me of the feats done with palette shifting for animating 8-bit scenes and even drawing completely new images into a static array of non-changing bits.

[Davinderpal Singh Rehal]

That is a level of CSS I can only dream of having.... trying to reproduce some of these effects to learn from

[Michael Hungbo]

This is amazing!

[Calin Baenen]

Wow. This is impressive.