We thought about anything that relates to time, and thought about making a rhythm game. We also included a clock in the beginning.

What it does

In the beginning, there is a clock, and we can control it using the arrow keys. Once we hit the right time it goes into the rhythm game part. Then there is a shield that we control, and it goes around the center box. We use that to deflect the incoming circles, and when the circles hit the shield it will make sounds. But if the circles hit the center then the game is over.

How we built it

We used Brackets. The languages we used were HTML and Javascript. We used the p5.js library, and an addon called p5.collisions2d.js. There is a little bit of CSS as well. As for the sounds we downloaded some files online.

Challenges we ran into

We were relatively new to p5.js, and had to learn that along the way. We used circles, and so there was a fair amount of trigonometry and mathematics involved. Also, The sounds are a little weird, and don't work much of the time.

Accomplishments that we're proud of

We made a clock, which was pretty cool. Also, we used a lot of math to correctly move the elements toward the center, and we are also proud of that. We also spent a lot of time getting the sounds to work.

What we learned

We learned a lot about using p5.js, and a lot of applied mathematics as well. We really built up our HTML and CSS skills as well.

What's next for Timr

Since some of the elements, like the sounds, were not working 100% of the time, we plan to fix that and make it more consistent. We plan to make it get harder, and progress as the game goes on.

Share this project: