10 Retro Video Games Recreated with HTML, JS & CSS

Retro games still bring a smile to fans both young and not-so-young. That was evidenced by the wild popularity of the NES Classic Edition and the Super NES Classic Edition, among others. Heck, even Atari has announced plans for a console.

People love the simplicity of a pick-up-and-play game. They also love the childhood memories associated with old school titles. Plus, the thought of making new memories by playing with friends and family is still a strong draw.

Designers in particular seem eternally gaga over the likes of Mario, Pokémon, and Sonic. In fact, a jaunt through CodePen shows us there are several odes to classic video games made with good old HTML5, CSS, and JavaScript. Here are 10 of our favorites:

CSS Q*bert by Patrick Cox

The strange little orange creature named Q*bert was all the rage back in the 1980s, even starring in his own Saturday morning cartoon. While this is just a CSS animation, any mention of Q*bert is a good thing.

See the Pen CSS Q-Bert by Patrick Cox

Enduro HTML5 Game by Rafael Castrocouto

Enduro is a racing game originally released back in 1983 for the Atari 2600. No worries if you don’t have a spare cartridge at home – you can play a recreation of the game with this HTML5 version!

See the Pen Enduro – Atari – Html5 Game by rafaelcastrocouto

Media Query Super Mario Bros. by Ashley Watson-Nolan

CodePen is absolutely full of Mario-related goodness. Unfortunately, there’s no way to spotlight all of them. But Media Query Mario is one of the coolest tributes we’ve seen. It’s an animated remake of Super Mario Bros. 3. The only catch is that you have to resize your browser to between 320 and 420 pixels to watch.

See the Pen Media Query Mario by Ashley Watson-Nolan

CSS Sonic the Hedgehog by Ryan Petersen

Nothing said Sega like good old Sonic. Originally introduced back in 1991 for the Sega Genesis console, the little blue guy sped his way into many hearts (where, like Mario, he still resides). He’s also kept up his endurance, as seen in this CSS animation.

See the Pen CSS Sonic the Hedgehog 2:Chemical Plant Zone by Ryan Petersen

The Legend of Zelda by Stix

Zelda was one of those games you could play for hours on end. Thanks to the original’s battery backup included on the cartridge, it was one of the few games of the era that let you save your progress. Here we see Link repurposed nicely for a 404 screen.

See the Pen Retro Error 404 – Zelda 2 by Stix

Asteroids by Artem N

A true classic, Asteroids goes all the way back to 1979. And it’s still just as addictive as it was back in the day. It goes to show fancy graphics only get you so far. You can play right from your browser with this HTML5 Canvas version.

See the Pen Asteroids by Artem N

HTML5 Pac-Man by Hellokatili

The little yellow dot-eater is one of the most recognizable game characters of all time. He (and later, his lady friend) became an arcade sensation. Here, you can chew up dots and outrun ghosts in your browser with this fun HTML5 offering.

See the Pen HTML5 Pacman by hellokatili

Galaxian by Adonis Domingues Vieira

Another spaceship shooter from the ‘70s (1979, to be exact), Galaxian was one of the rare games for its time that was as fun to play at home as it was in the arcade. The otherworldly sound effects were great for driving parents to insanity. Here’s a HTML5/JS edition.

See the Pen Galaxian by adonis domingues vieira

JavaScript Pong by Gabriel Dubé

If you had Pong in your home, you probably got bored after about 20 minutes. But, as one of the first really significant video games, it paved the way for everything to come. Enjoy a JS version of the game below.

See the Pen Pong game with JavaScript by Gabriel Dubé

HTML5 Canvas Pokémon by Panagiotis Vourtsis

Pokémon is the second best-selling game franchise of all time – trailing only Mario. From its humble beginnings for the Nintendo Game Boy, all the way to the hysteria of Pokémon Go, the franchise has remained a cultural phenomenon. Below is a decidedly retro HTML5 Canvas game.

See the Pen HTML5 canvas games – POKEMON ! by panagiotis vourtsis

Going Back to the Future

It’s amazing to think that, decades after their debuts, these games still resonate. But not only are the examples above a testament to the power of classic games, but it also shows how far web development has come in a relatively short amount of time.

Complex games and animations can now be created on the web with just a bit of code. Now, who’s up for some Pac-Man?