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 twitter.com/theAngularGuy 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

Steps

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).

Shape

border-radius

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.

aspect-ratio

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

box-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 {
  box-shadow:
    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.

text-shadow

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.

Cheers!


What to read next?

Discussion (11)

Collapse
bekbrace profile image
Bek Brace

Beautiful job, my friend

Collapse
mustapha profile image
Mustapha Aouas Author

Thank you!

Collapse
insidiousthedev profile image
Insidious

Just one word. Cool!

Collapse
tomquincy profile image
Tom Odey

Inspiring!

Collapse
crycx profile image
crycx

So cool!

Collapse
mustapha profile image
Mustapha Aouas Author

Thank you πŸ™

Collapse
rehanpia profile image
Rehan Zaheer Zaheer ahmed

Wow...great

Collapse
jovialcore profile image
Chidiebere Chukwudi

Some people really love the dreaded css. Nice

Collapse
richardeschloss profile image
Richard Schloss

Have you thought about putting something like this on Opensea?

Collapse
abhiram profile image
Abhirama sundaram • Edited on

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

Collapse
xdendix profile image
Dendi Prayogo Hidayat

really cool!