Kids, a game and some CSS animations

-

Once in a while I need a project to experiment with some new technology. This time I thought it would be cool to learn some CSS animations and to find out how to communicate with my Philips Hue lights. I also had the idea for a while now to create a game for my kids. Crack the code! Or maybe also known as Mastermind.

So in this post I will tell you how this all came together in a now addicted and fun game for my kids.

The game – the rules

The idea was to create a game where a random code of three numbers was generated and the kids can guess the code by entering numbers from one to nine.  If a number exists in de code and is in the correct position, it will be coloured green. If code contains the number but is in the wrong position, it will be coloured yellow. And if the code does not contain the number it will be coloured red.  To make it a bit harder, they have a limited number of attempts.

Philips Hue lights

Each time that a code was entered I wanted to change my lights corresponding with the color of the attempt. So if the code was incorrect, the lights should turn red. If the code was correct, the lights would turn green.

While I was expecting a lot of time to configure my lights, it turned out to be really easy. You need an API key and call some REST endpoints. To change a color for a specific room, all I had to do was the following call:

  this.http.put(`http://${this.yourHueBridgeIpAddress}/api/${this.yourHueApiKey}/groups/${this.room}/action`, {
            on: true,
            hue: this.color
        }).subscribe();

While I was kind of disappointed that this took me only 15 minutes, I created an Ionic 4 app for the first version of the app. After a while I had something working which looked like this:

Correct or wrong?!

Because I wanted to use the Hue lights and make the app a bit more appealing for the kids, I implemented that after each correct of incorrect attempt to crack the code the lights responded.  If the code was (in)correct a different image appears to make it more fun. Also the correct code will be displayed in case of the maximum attempts has been reached. The cool thing for me was that all these features were feature requests by my children. Who said that user feedback is not important?! 🙂 This resulted in the following screens:

Animations

Now that the game is functionality working, it is time for some animations. The animation should not distract too much so I decided to add a simple one. If you have ever placed a Super Mario game, you will recognise the moving bullet.

In the html I have added the image with a class bullet-container.

  

In the CSS you see the class .bullet-container which contains the animation. Lets see how the animation is build up:

  • slide-right – the name of the animation
  • 5s – the duration of the animation
  • ease-out – the timing function which specifies the speed curve of an animation
  • infinite – the iteration count
  • both – the fill mode which specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

The .bullet-container also contains a delay to make sure the animation is not started directly.

Moving the dragon in the minecraft level looks really fancy, but that is just a gif image moving from right to left with the same animation properties as the bullet 😉

.bullet-container {
  animation: slide-right 5s ease-out infinite both;
  animation-delay: 5s;
}

@keyframes slide-right {
  0% {
    transform: translateX(-100);
    margin-left: -200px
  }
  100% {
    transform: translateX(500px);
  }
}

Again… too easy

A simple animation is not that hard. A single game level is not that much… So I decided that the game needed more levels and that you need to have a different game mode so you can go to the next level after you have completed one.

Here is a short screen capture of a few levels with some animations between the levels and after a level is completed.

This is the code for animating the Level text, which comes from the top of the screen and has some bouncing effect. The percentages in the keyframes are points on the animation timeline.
So at each point the text will move downwards and at 95% it will move a bit up again to create the bouncing effect.

.bounce-in-top {
  animation: bounce-in-top 1.1s both;
}

@keyframes bounce-in-top {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

Fun is also important

It turns out that this project is much more fun (and more work) than I expected. I learned a bit of CSS animations and can probably improve a lot more on that part, but it’s a good start. Combined with the Hue lights in each of my children’s bedroom the app has become an extra thing (next to reading a bedtime story) to do before going to bed.

I guess that the feedback of my children is the most fun part of this project. They have a lot of ideas for animations and features. So on the backlog we have collecting stars on level completion, a bonus level, an end boss level and creating some augmented reality portals 🙂

I hope you liked my post and if you have any questions feel free to ask them.