Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS3 Games Collection

DZone's Guide to

CSS3 Games Collection

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Have you ever thought about creating your own web games? I'm sure that most of you have already heard about the newest technologies like html5, canvas, webgl, and node.js. But I think that before you start working with these new technologies, you should start developing games with the simplest DOM (like HTML, CSS, and Javascript). I would like to provide you with a collection of such games, so you will be able to investigate and try them out. Some of them even work without Javascript! 

1. Whack-a-Rat – CSS only game

Whack-a-Rat - CSS only game

2. SURVIVOR (1982 Commodore 64 game remake)

SURVIVOR

3. Sumon

Sumon

4. 3D – CSS puzzle

3D - CSS puzzle

5. Duck Hunt

Duck Hunt

6. Dino Pairs Game

Dino Pairs Game

7. Cops and Robbers – CSS puzzle

Cops and Robbers - CSS puzzle

8. Cascading Cube Racer

Cascading Cube Racer

9. CSS maze puzzle

CSS maze puzzle

10. One-Of-A-Kind CSS/JS-Based Game Portfolio

One-Of-A-Kind

Plus, you can find tutorial about making this portfolio here

11. Anigma

Anigma

12. Ninja Jarimaru

Ninja Jarimaru


Conclusion

I hope that our new collection of CSS3 games was interesting for you. Good luck!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}