DEV Community

Cover image for A CSS-only game playable with keyboard! 🀯 (No, you are not dreaming)
Temani Afif
Temani Afif

Posted on

45 5 8 4 4

A CSS-only game playable with keyboard! 🀯 (No, you are not dreaming)

You think it's a clickbait title or it's a joke but No! I created a CSS-only game that you can play using your keyboard. No hidden JavaScript and 100% CSS Magic.

Enjoy the first-ever CSS-only game playable using the keyboard! πŸ₯³


Super CSS Mario

πŸ‘‰ Start a New Game πŸ‘ˆ

Overview of the CSS-only game

If you prefer here is a codepen link and it's a chrome-only experimentation (like all the cool stuff).

Record yourself and show me your best attemptπŸ‘‡ (No screenshots and no cheating 😈)


Share it so that people know what is possible using modern CSS features or if you want another argument against the "CSS is not a programming language" 😜

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed
  • 2:34 --only-changed
  • 4:27 --repeat-each
  • 5:15 --forbid-only
  • 5:51 --ui --headed --workers 1

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Top comments (8)

Collapse
 
hey_yogini profile image
Yogini Bende β€’ β€’ Edited

Loved it! And enjoyed playing.

Could not even believe someone could build this just with CSS!

You should launch this project on Peerlist Project Spotlight β€” It's a launchpad for your side project. I believe your work will be much appreciated there as well.

Collapse
 
link2twenty profile image
Andrew Bone β€’

Scroll animations and container queries 🀯

How do you come up with this stuff?!

Collapse
 
pizofreude profile image
Pizofreude β€’

This is the shizz, a spicy one. πŸ”₯

Collapse
 
god7139 profile image
God7139 β€’

Loved it

Collapse
 
rolandixor profile image
Roland Taylor β€’

Sweet! I've been recently planning an update to my Combo-Breaker CSS game, using new features in CSS (will of course, share a tutorial when I do so, as before). But this is... next level! Great work!

Collapse
 
mortylen profile image
mortylen β€’

Good idea. πŸ˜€

Collapse
 
raynecloudy profile image
rayne cloudy β€’

i am having trouble processing this information, this is just css??

also, 11s

Collapse
 
afif profile image
Temani Afif β€’

Yes 100% CSS!

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more