Playing games is part of human nature. In the process of the game, in addition to pleasure our body and mind, but also can harvest a full sense of achievement. But there are some timeless classics that we can’t forget. Even though the graphics may seem “horrible” now, they were the best part of our childhoods, brought us great joy, and are classics today.

Recently, I set up a topic of # daily Pen# on weibo and often browse the foreign front-end community – Codepen. During the browsing process, there are some small surprises: many developers use front-end technology, those retro classic games are re-” restored “, once again brought me a taste of childhood classics. Like Super Mari, Sonic the Hedgehog, Zelda, Pac-Man, Little Bee…. How many of these classic games do you remember?

1.Super Mario Brothers


Super Mario, the plumber in the red hat and blue suspenders, is known to all. He carries so many memories. So, the first work to be shared today is Super Mario Brothers 3, implemented by Ashley Nolan using CSS animation and media queries. You can demo the game by adjusting the width of Codepen’s window, and he wrote an article about his overall process of animating the game. Interested friends can understand.

Project Address: [portal】

2.Sonic the Hedgehog





As the protagonist of a game that was once popular around the world, this cute hedgehog has won a lot of fans. Since 1991, it has maintained super endurance, running and advancing constantly. Like developer Ryan Petersen’s HTML+CSS animation, it keeps the classics alive.

Project Address: [portal】

3.The Legend of Zelda


The Legend of Zelda is arguably nintendo’s best-known and best-reviewed game series. Originally released on Nintendo’s FC in 1986 as The Legend of Zelda: The Fantasy of Hailar, Stix reworked it as a 404 page using HTML+CSS+JS. Does it make you miss something?


Of course, can be voted as the most classic game, there must be its extraordinary place. The legend of Zelda: Breath of the Wild was released in March of this year, and it scored near perfect scores in the gaming industry. Interested partners can take the time to try, you will not be disappointed.

Project Address: [portal】

4.pac-man


Pac-man is probably one of the first games you’ve ever seen, and it’s one of the most iconic arcade games in video game history. It was released in 1980 and quickly became popular around the world. Now celebrating its 37th anniversary, Namco has adopted the character as its mascot and company logo.

Then, the magic programmer can not miss this classic game remodeling! HTML5 developer HelloKatili will this interesting game, the use of front-end technology to achieve, let us in CodePen again feel the magic charm of the lovely mouth! Finally, do you know how Pac-Man got his name from?

Project Address: [portal】

5.Little bee


In addition to Pac-Man, small bee this game, I believe that we also contact relatively early. Back in the ’70s, it made our parents have a lot of fun with it. This time, developer Adonis Domingues Vieira implemented it simply using HTML+JS, and we were lucky enough to masturbate together again.

Project Address: [portal】

6.Table tennis


If you play table tennis outside with friends or colleagues, it won’t take long before you get bored. However, as the originator of sports video games, Pong was an arcade game that once made The United States play crazy, and set off a storm of electronic games in the United States. The game is also said to be used to diagnose Parkinson’s disease and neurological disorders such as autism. So, what are you waiting for? Let’s revisit the JS version of Pong!

Project Address: [portal】

Pokemon go

It was 1996, and pokemon was an instant hit when a crazy console game came out of nowhere in Japan. With its diverse video games and more than 700 unique pokemon characters, Pokemon continues to attract new generations of fans today.


As a classic role-playing game, it has the honor of being the second best-selling video game in the world after the Super Mario Series. Of course, in addition to the hero of the small wisdom of iron, let us remember, wonderful frog seeds, pikachu, Jeni turtle and other lovely baby elves, are also our hearts have wanted to have a dream.

Everyone’s favorite expression of Pokemon is different, but the group of programmers is particularly special. They show their love for the game by recreating classic scenes, items, pets, etc. All of the remakes below are how they prove their true love.


CSS implementation of the true newtown animation


Pure CSS implementation with shiny Sprite balls


Pure CSS implementation of the first generation of Pokemon animation


Pure CSS draws pikachu’s face


CSS implementation of the Pokemon map

After watching it, do you also feel good? For front-end developers, there is nothing impossible, only unexpected.

Some games, it’s just a game. Played, happy, forget also forget. Other games, on the other hand, accompany a generation to grow up and awaken memories of their youth. I think the so-called classic of classic, it is after the time of hone, finally blossoming dazzling flowers. It brings us not only memories, moved and resonance, but also through the baptism of time, leaving an immortal footprint.

Which of these games do you like best? Please share your memories and feelings with us in the comments.

Thank you for reading. If you gain something, please like and share.

If you need to reprint, please indicate the source. Thanks for your cooperation.

The author:
IT application lion



Article from:
zhuanlan.zhihu.com/p/31594225

More articles:

1. The 10 most popular coding challenge sites of 2017

2. 10 Puzzle sites to hone your programming skills

3. Great! The latest 12 hot front-end projects on CodePen

4. 12 free games to Help You learn programming

At the same time, please follow my wechat [IT Program lion] and share IT learning articles and resources from time to time.