DEV Community

Ben Halpern
Ben Halpern Subscriber Community Curator

Posted on

Table Tennis in Pure HTML CSS 🀯

No JavaScript to be found here:

Top comments (28)

Collapse
 
afif profile image
Temani Afif •

too bad there is no Play button ;)

Collapse
 
hackercabin profile image
Simon • • Edited

Here is one you can play!

codepen.io/thecodingpie/pen/NWxzBxJ

Collapse
 
afif profile image
Temani Afif •

nah, in that one there is JS :)

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
coffeecraftcode profile image
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!

Thread Thread
 
afif profile image
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 ? ;)

Collapse
 
lionelrowe profile image
lionel-rowe •

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

Thread Thread
 
hackercabin profile image
Simon • • Edited

sure

Collapse
 
kjbaxter65 profile image
Kevin J. Baxter •

Great game. Thanx for sharing!

 
ben profile image
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.

Thread Thread
 
afif profile image
Temani Afif • • Edited

@lifelongthinker it was a rhetorical question :)

Collapse
 
gypsydave5 profile image
David Wickes •

but why

Collapse
 
carmensstanley profile image
Carmen S. Stanley • • 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.

Collapse
 
lorenzoblog profile image
Lorenzo •

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

Collapse
 
madza profile image
Madza • • Edited

and I thought the calculator was a challenge πŸ˜€πŸ˜€

Collapse
 
taikedz profile image
TaiKedz • • 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.

Collapse
 
calinbaenen profile image
Calin Baenen •

Wow. This is impressive.

Collapse
 
mzaini30 profile image
Zen •

Sass is JS in CSS πŸ˜‚

Collapse
 
davinderpalrehal profile image
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