Christmas greeting: An experimental CSS Grid game

Christmas is coming and as each year we want to wish you Merry Christmas and a happy new year in an original way: we have designed an experimental retro game based on CSS Grid Layout.

Play Escape From: A Christmas Tale

This has been with no doubt the year of CSS Grid Layout. It is true that the spec was released before but during the last months we could see a huge growing numbers of websites using CSS Grid in production as Grid Examples reports. So we decided to make a retro game where you have to help Santa Claus to escape from the Mansion of Mr. Scrooge using CSS Grid and the minimum JS possible (just for tracking the progress of the game).

Furthermore, if you are a fan of 8bits games or classic adventure games, you will enjoy with the graphics that the game has. Thank you to Press Start 2P Google font and NES.css framework we are able to recreate the soul and texts of classic games such as LucasArts Adventure Games, NES and similar.

Let’s go through some point and learnings we have got building this Side Project.

CSS Grid is not only the new way to make layouts

CSS Grid Game with SVG

We have written about this idea before. CSS Grid is more than the new spec which comes to say goodbye to floats and hello to Flexbox. It adds a new logic to all front-enders, where the white space has the same weight than the content (or filled spaces). This changes the way we make websites in the same way Mobile First modified the approach we made when we start a new project and we decided that desktop was the main resolution.

Moreover, this new way to divide the available spaces into rows and columns that can be overlapped gives us the opportunity of exploring new concepts and formats. A brilliant example of this is The Deck, a single page experimental web where you move around the same grid that has dimensions far bigger than the device screen.

So having these statements we decided to use a few days in working on this Side Project, learning new things and and leaving our control area aside.

How this experimental CSS Grid game works

CSS Grid Game playgame

Firstly, we define a grid based on the viewport’s height and width, so each column and row has 100vw of height and 100vw of width. All those grid are inside a container (.grid) that exceeds the visible area.

.grid {
	position: absolute;
	transition: transform .7s ease-in-out;
	width: 2000vw;
	height: 2000vh;
	display: grid;
	grid-template: repeat(20, 100vh) / repeat(20, 100vw);
	grid-gap: 0;

Secondly, we add to each grid item a unique identifier. So for example, we have #greenhouse, #workshop or #library to identify the locations. This will help us to show or hide the correct grid item to the user.

Finally, we need to create a list of elements that match those identifiers with the navigation links (which are basically anchor links). We can use the pseudo-class :target to know which grid item we should show using CSS transformations.

#greenhouse:target ~ .grid { transform: translate3d( calc(-10 * 100vw ), calc(-1 * 100vh), 0); }
#workshop:target ~ .grid { transform: translate3d( calc(-6 * 100vw ), calc(-13 * 100vh), 0); }
#library:target ~ .grid { transform: translate3d( calc(-4 * 100vw ), calc(-3 * 100vh), 0); }}

Now we are able to create as many slides as we need and connect them by navigation links. It is like having a big map and move and zoom it using coordinates.

Goal in CSS Grid Game

Designing characters and animations

The characters were designed following the 8-bit style: limited color palette and big pixels. We exported them as .svg file in order to add some simple animations like blinking and nodding.

Those animations are made using basic CSS animations. For example, changing the fill color of the eyes from black to face’s color for some milliseconds makes the effect of blinking. Or moving the character head to show as if he/she was talking.

Using SVG here also helps us to ensure that retina screens are able to render correctly the graphics. For this reason, backgrounds were made using SVG too.

Merry Christmas!

Hope you have a great time playing this game. We have enjoyed and learnt a lot building it. And of course, if you find a bug or something that can be improved, please let us know!

Merry Christmas and Happy new year form SiloCreativo!

Leave a Reply

Your email address will not be published. Required fields are marked *