DEV Community

Cover image for I made a working Gameboy CSS art: try it out πŸ•Ή
Mustapha Aouas
Mustapha Aouas

Posted on

I made a working Gameboy CSS art: try it out πŸ•Ή

Here is the story. Three years ago, I went to an interview (for an Angular position) and the interviewer asked me about a maze-solving algorithm. So I completed the algorithm and just for fun I went ahead and did an Angular project where you had to solve a maze (generating a maze is also a good exercise).

So, I had a fully working maze game on my laptop, and I also had a CSS art of a Gameboy πŸ‘‰ I figured it would be fun to merge these two together.

  • Try it out here (if you're on laptop you can use your keyboard)
  • Contribute here (or if you'd like to give a ⭐️)
  • Demo here πŸ‘‡

Follow me on Twitter at as I tweet (almost) every day about the things I learned in my 6+ years journey in web development βœ…

In this post, we will talk about a couple of things that went into this project. First, we will talk about the maze generation algorithm, and the maze solving algorithm. Then we will talk about some CSS art key concepts.


Maze generation algorithm


There is a lot of algorithms for this. The one I went with is the recursive generation, for two reasons:

  1. Because I love solving problems with recursion (Scheme changed me forever)
  2. Because the generated maze is prettier to look at (with long alleys)

There are four steps in this algorithm:

  1. Delimit the maze area
  2. Divide the area vertically in the middle (or at a random point) and make an opening in the division
  3. Take the two halves and divide them horizontally in the middle, and make an opening in each division
  4. Take each new portion and go to step. 2

This will go on and on until there's not enough room to make a division.
Here is a gif with the full process of generation πŸ‘‡

Generation gif

You can visualize the maze as a binary tree, each node represents a part / division of the maze.


Maze solving algorithm

For solving the maze I used the depth-first search algorithm. It's not the most performant algorithm for solving a maze but it gets the job done and it's fairly easy to implement. Also, I use it to go through the maze and find the longest path possible, then I use that as the exit point (goal location some might call it) of the maze. Here is a gif illustrating this algorithm:
maze solving algorithm

I won't go deep into the details here, but tell me in the comments if you would be interested in a maze-solving article.


CSS art: key concepts

We are gonna talk about some CSS properties I wanted to highlight. We can divide these properties into two categories. Shape and Lightening (impression of light and shadows).



The first one is the good old border-radius. You might use it to make circles or ellipses. But this property can achieve more. You can specify the horizontal and vertical radius of each corner. Have a look at this snippet below:

.plate {
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
Enter fullscreen mode Exit fullscreen mode

I used this to shape the gameboy plate and the black screen.


This property is very useful, it sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes.
For example I can set the width and an aspect ratio, and the height will be calculated automatically. Have a look:

.plate {
    width: 500px;
    aspect-ratio: 1 / 2;
    /* The height will be 1000px */
Enter fullscreen mode Exit fullscreen mode

I used this on almost every element. Yeah I know I love this property!

transform: skew

You might use transform for rotations, scaling (resizing), or translation (moving), but you can also use it for distortion (skewing).
The skew CSS property defines a transformation that skews an element on the 2D plane.

I use this for the sound holes grid. Have a look at the image below with skewing (right) and without (left):
comparison skew or not

There's also a rotation that is applied on the grid in both pictures.
Also, for the sound grid, I used a grid layout. If you want to learn more about CSS grid I wrote an article where I explain every concept of it πŸ‘‡

Light and shadow


To give an impression of volume, lighting is essential. Look at the two examples below, left is without shadow and right is using shadows (text-shadow & box-shadow):
box-shadow comparison

To achieve this effect of lighting we have to understand where to put light and where to put some shadow, and that depends on if something is in relief or depression. Have a look at the image below:
light effect

If we apply this to the buttons, we would have something like this (assuming the light is at the top left of the screen):
lighting and shadow for buttons

That translates to this code:

.button {
    inset 3px 5px 5px -1px rgb(255 255 255 / 50%), 
    inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
    1px 1px 1px 2px rgb(0 0 0 / 80%),
    2.5px 5px 5px 1px rgb(0 0 0 / 90%)
Enter fullscreen mode Exit fullscreen mode

The inset keyword sets the shadow to go inside the frame.


Fo the texts we use the same principle either the text is in relief or depression. Here is an example of a text that is in relief:

.text {
  text-shadow: -1px -1px 1.2px rgb(255 255 255 / 50%),
               1px 1px 1px rgb(1 1 1 / 7%);
Enter fullscreen mode Exit fullscreen mode

That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.


What to read next?

Discussion (11)

bekbrace profile image
Bek Brace

Beautiful job, my friend

mustapha profile image
Mustapha Aouas Author

Thank you!

insidiousthedev profile image

Just one word. Cool!

tomquincy profile image
Tom Odey


crycx profile image

So cool!

mustapha profile image
Mustapha Aouas Author

Thank you πŸ™

rehanpia profile image
Rehan Zaheer Zaheer ahmed


jovialcore profile image
Chidiebere Chukwudi

Some people really love the dreaded css. Nice

richardeschloss profile image
Richard Schloss

Have you thought about putting something like this on Opensea?

abhiram profile image
Abhirama sundaram • Edited on

Awesome! this shows how much hard work you have put into this. Thanks for sharing with us :)

xdendix profile image
Dendi Prayogo Hidayat

really cool!