A story of ‘Bubble Festival’ - pure css game

See game first and then read about it below :) Please note everything is done in pure css, no images or js used.
https://bubble-festival-css-game.netlify.com/

Sometimes days like this happen… Special days… you wake up and think ‘I need to do something cool, like NOW. But coffee first’
Definition of cool is very wide, it can mean anything from baking a blueberry pie to sewing hole in your favorite sock. For me it was making my own css game (I don’t have fav socks).

I saw examples of pure css games some time ago and they blew me away. I mean… I love css, totally love it and to be able to create a gaming experience, even a very limited one, with it was like a ‘OMG, that’s why I was born’ kind of moment (I’m overreacting a bit, but whatever).

I wanted not only to create a game but also a story for it. Clicking bubbles to get points is fun BUT if at the same time you get to be Purr Evil, evil kitty that can turn bright, happy day into creepy, dark night… that makes it like fun++. At least in my mind it does.
Besides it’s not only about YOU having fun playing it… it’s also about CSS itself having fun, it has feelings too you know.

CSS Just Want to Have Fuuuunnn … I think that’s how that song goes.

So anyway if you, my dear reader, decide to free the CSS and let it have some fun, here are few tips for you. Things I’ve learned during my ‘Bubble Festival’ project.


1. Plan ahead

First of all think what your goal is - is it a short animation? Is it a game? How will users be able to interact?

If your project will end up being a bigger one, you probably should divide it into modules. With my ‘Bubble Festival’ I have created each scene in a separate file and only after I was happy with each one I merged them, giving each scene a different animation delay so they play one after another. To make sure it all aligns properly you will have to view your game/animation a loooot of times so dividing it into smaller parts will save your sanity. Trust me.

Think ahead of any reusable parts, you will probably write hundreds of lines of css so think which parts could be reused. Maybe shapes could stay, just color change. For example I have used same cat body/face for Purr Evil, Purretta Goodie and the beaten Purr Evil, with only slight modifications.
Same with day and night scenes, hills are the same, most decorations too, I have treated night scene as base and changed few things for the day scene.

Also… if you happen to create a scene or animation which, after some time, you think is not good enough, DO NOT delete it. Save it somewhere, one day it might come handy.


2. Draw on paper

You don’t have to be a sketch artist. For css animations you will use simple shapes - circles, rectangles, triangles… so use those to draw more or less what you’re trying to achieve. It will save you time in a long run.

If you compare my drawings for the ‘Bubble Festival’ game to the final product… it looks a bit different but the point was to start thinking in a certain way and imagine my scenes/characters roughly before I started coding them.

You have to use your imagination, some shapes can be created by overlapping one another. For example a heart is just 2 circles and an upside down triangle, cloud can be created by overlapping few ovals. 
One shape is a bit, well not weird but a bit less obvious to create - triangle. I think the best explanation of how to make triangles can be found here: https://codepen.io/chriscoyier/pen/lotjh

Play around with border sizes to achieve irregular triangle shapes :)

Here’s an example of Purr Evil’s head. All those elements are put together using position absolute and modifying top/left values. Also remember each consequent div will appear on top of the one before him in html. If you’re not achieving that for any reason, you can always use z-index.

You might be wondering about cat’s mouth, so here’s a small explanation on how to achieve this. It’s actually 2 elements next to each other with only bottom border visible:

Cat’s mouth element with pink bg color to show the actual shape
border: solid 4px #252525;
border-color: transparent transparent #252525 transparent;
border-radius: 40%;
width: 49px;
height: 155px;
background-color: pink;

Change background-color to transparent in the above code and you’ll get left (or right) side of the cat’s mouth.

3. Interactions

For interactions you can create hover effects, animations or you can modify things with checkbox/radio input clicks. Hover I think is pretty self explanatory (just don’t forget to add transition for smoothness).

But first few words about css counters which allow for numbering html elements and in my game are used for increasing/displaying points. 
Start with initializing your counter by using a counter-reset property. For my game I have created counter named bubble-points. You can set any initial value for it, but if you don’t set anything (like below) it starts with 0.

body {
counter-reset: bubble-points;
}

To increase counter value you use counter-increment property (which happens when bubble is clicked). And to display your current counter value you can insert it as content on a before/after pseudo-element:

/*increase points after bubble is clicked*/
input:checked {
 counter-increment: bubble-points; 
}
/*display points, mypoints is just a class in h3 tag*/
.mypoints::before {
 content: counter(bubble-points);
}

If you want to modify styling of an element (or increase counter) due to user clicking something, you can use checkbox or radio inputs.

Checkbox or rather its label, can be styled in any way you want to. In my mini game labels were styled as bubbles. After clicking a label/bubble, checkbox gets toggled and the input:checked css is invoked. In my case bubble disappears and counter is increased.

/*increase points after bubble is clicked*/
input:checked {
 counter-increment: bubble-points; 
}
/*after bubble is clicked, remove it*/
.bubble input:checked + label {
 display: none;
}

4. Testing

After your project is done don’t forget to test it in different browsers. Most dreaded moment >_<

I must admit I only tested mine on Chrome, IE and Firefox… all seems fine except FF behaving buggy sometimes so you have to double/triple click bubbles. Also… counter-reset doesn’t seem to reset on refresh, unless you perform a hard refresh of page or clear cache :/ If you know how to fix it, please let me know… 
I’ve included copy that shows up on FF only to warn users about bugginess. If FF is the browser of your choice… REALLY SORRY! (now go install Chrome lol)

Also… mobile responsiveness. Decide ahead if your project will be usable on mobiles. Right now you’re probably like OMG DUH WHAT? IT SHOULD ALWAYS BE RESPONSIVE, WHAT ARE YOUR TALKING ABOUT?!? But tbh my game wasn’t created with mobile in mind at all, I think it might be hard to read and follow on mobile (+ checkboxes are not easy to click).


To summarize : pure CSS creations are amazingly fun to create. Yes, there are easier ways to do those things, faster too but it’s not about that. It’s about having fun and keeping CSS happy :)

Happy CSS-ing and I hope you’ll enjoy my little, pure css mini game :)

You can play it here: https://bubble-festival-css-game.netlify.com/