Ben Halpern

Posted on Mar 2, 2021

Table Tennis in Pure HTML CSS 🤯

#codepen #css #webdev

No JavaScript to be found here:

Top comments (28)

Temani Afif • Mar 2 '21

too bad there is no Play button ;)

Simon • Mar 2 '21 • Edited

Here is one you can play!

codepen.io/thecodingpie/pen/NWxzBxJ

Temani Afif • Mar 2 '21

nah, in that one there is JS :)

Comment deleted

Christina Gorton • Mar 2 '21

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 • Mar 2 '21

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 • Mar 2 '21

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

Simon • Mar 2 '21 • Edited

sure

Kevin J. Baxter • Mar 5 '21

Great game. Thanx for sharing!

Ben Halpern • Mar 2 '21

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 • Mar 2 '21 • Edited

@lifelongthinker it was a rhetorical question :)

David Wickes • Mar 4 '21

Lorenzo • Mar 2 '21

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

Carmen S. Stanley • Apr 20 '21 • Edited

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 • Mar 2 '21 • Edited

and I thought the calculator was a challenge 😀😀

Tai Kedzierski • Mar 4 '21 • Edited

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.