< HomeProjects

Games with Hue

This project is a suite of kids games that uses the Philips Hue API to communicate with your smart home lighting to add an extra level of interaction to some well known games. I’ve started off with building ‘Red Light, Green Light!’, and ‘The Floor is Lava’ and ‘Musical Chairs’ are in the works. This project was very significant in my learning process of how to code and practice putting together a project from start to finish. More importantly, it helped me recognize and build my own abilities as a developer. I’ve been a big fan of the ‘internet of things’ but was somewhat disappointed at the limited application of smart devices I owned myself. With some enouragement, I started to tackle the project myself and decided to develop Games with Hue. I’m super proud of what I’ve learned and worked on so far.

Learning CSS Animation

Learning CSS Animation It was very cool to see how I could make some simple shapes and sprites come to life with different applications of CSS. My particular favorite was the ‘Bulbie' animation. I used CSS step animations and react state and was able to make them run across the screen!

Asynchronous?

I finally realized how confusing it can be to have so many time-sensitive functions firing at the same time in JS. It made it more satisfying to find a solution that solved all these problems for the timing in Red Light, Green Light! I found a way (not so elegant) to make the bulbs switch between stopped and running as well as the lights switch between red and green. These actions happen all while having the bulbies cross the finish line at the same time whilst having different paces!

Future Improvements

While I was beyond happy in finishing the first game, I also saw that there were a lot of places where I could improve and optimize my code. While I did strive to make reusable components for my game console and buttons, I ended up with some unreasonably large components. My goal for the next game is to clean up my code to make it more readable, and rearrange how my setTimeout functions fire.