DEV Community

loading...
Cover image for ๐Ÿ‘พ Pure CSS Gameboy

๐Ÿ‘พ Pure CSS Gameboy

baumannzone profile image Jorge Baumann ใƒป2 min read

Hi again!

I'm Jorge Baumann and I want to show you this handmade Nintendo Gameboy built from scratch with HTML & CSS. Animated (a little bit) by Javascript. It was my first game console. What beautiful memories! ๐Ÿ˜

๐Ÿ‘‰ Live DEMO: https://baumannzone.github.io/gameboy-css/

Gameboy

๐Ÿ‘‰ Source Code:

GitHub logo baumannzone / gameboy-css

๐Ÿ‘พ Pure CSS GameBoy - Includes animations and the original sound ๐Ÿ”Š

Video:

Let's get started!

HTML it's written in Pug (formerly known as jade) and CSS with Stylus CSS.

This is the only HTML (Pug) used:

  .gameboy
    .screen-cont
      .power
      .screen
        .header DOT MATRIX WITH STEREO SOUND
        .animated-text Nintendo
          .copy ยฎ
    .controls-cont
      .btn-direction
        .vertical
        .horizontal
      .btn-AB
      .btn-start-select
    .speakers
    .on-off < off-on >
    .phones phones
Enter fullscreen mode Exit fullscreen mode

Check the whole file here: index.pug.
Also, here it is the CSS file (stylus): main.styl


Although the Pure CSS Gameboy is done, I wanted to add a little bit of magic so, with a little Javascript and CSS, I added animations and effects ๐Ÿ”ฎ.

  • The first thing you see when you turn on the gameboy is the Nintendo word transition
  • After the transition is done, a "beep" ๐Ÿ”Š sound sounds (Recorded it and edited by myself with my own Gameboy) So, it's the original one ๐Ÿ˜„.
  • Last detail, it simulates the power light comes on when you "turn on" the device.
  • EXTRA โœ๏ธ: Font used is called "Pretendo" by jackster3000, a mimic nintendo-like font. The real Nintendo font is not well known.

Animation


๐Ÿท That's all, folks!

Do you have any question? Let me know what do you think in the comments below or drop me a few words on twitter (@baumannzone).

I'm still thinking what will be my next "Pure CSS" idea, what would you like to see?

If you liked the content of this post, you should subscribe to my newly released Youtube channel: RambitoJS.

RambitoJS

Also, if you are into #vuejs, #css #javascript, #testing or some other topic related to web development, you may follow me on Github, since I'm creating open source content frequently.


If you liked this article, you should check "Pure CSS Zombie", from css-art series:


๐Ÿฆ„ Thanks for reading, see you soon! ๐Ÿฅณ
Say Hello! Twitter | Github | Youtube

Discussion (9)

pic
Editor guide
Collapse
nickytonline profile image
Nick Taylor (he/him)

This looks great Jorge!

Collapse
baumannzone profile image
Jorge Baumann Author

Thank you, Nick ๐Ÿฆ„

Collapse
souder_arguedas profile image
Collapse
baumannzone profile image
Jorge Baumann Author

Hey! Thank you, already saw your twitter message. ๐Ÿ˜

Collapse
bauripalash profile image
Palash Bauri ๐Ÿ‘ป

That's Awesome โ™ฅ๏ธ
I wish I could play some games in it.. ๐Ÿ˜Š๐Ÿ˜…

Collapse
baumannzone profile image
Jorge Baumann Author

Well.. a lot of people wanted to make it interactive and load roms or something to play gameboy ๐Ÿ˜

Collapse
baumannzone profile image
Jorge Baumann Author

+1000 views. You guys are awesome <3

Collapse
diemkay profile image
Andreea Nฤƒstase

I just found this and think I might challenge myself to do something similar during this lockdown :) thanks for the inspiration!

Collapse
baumannzone profile image
Jorge Baumann Author

I would love to see what you do. Don't forget to share it