Blue Clicker

Inspiration

This project was inspired by the very stagnant nature of being a gamer. We are hoping to help gamers take better care of themselves and not sit in front of a screen 24/7, as it is quite easy to become immersed. Using tasks such as “take a walk”, “stretch”, and “posture check”, we are hoping to encourage gamers to incorporate a bit more movement into their day. Tasks such as “drink some water” and “carpal tunnel stretches” are to promote a somewhat healthy lifestyle among gamers. With tasks like “no screen time for 10 minutes” and “meditate”, we want to help support the mental health of gamers, who can easily become burnt out or overworked without knowing it. Finally, we want to promote a healthy gamer community with the “check in with someone you care about” task. While this task leaves the recipient open ended, we recognize that it is important for gamers to make strong connections inside of the community and out.

How Does it Work?

Click on Blue and/or do tasks to receive points in order to purchase Team Liquid flair for the home screen. When you begin, you are able to click Blue and he will jump on every click for 1 point. Longer clicks make Blue jump higher! Tasks come in sets of 3. Each individual task will give you 20 points, and upon completing each set, you will receive 50 points.

How Did We Build it?

The majority of the project was built on Repl.it.

Challenges

Some challenges we ran into are trying to figure out a way to implement coding for the Team Liquid Merch to appear on the home screen as you buy them from the store and having tasks giving you points as you complete them. We solved this problem using local storage to hold variables relating to points and store-bought flairs.

One of our biggest challenges was balancing the schedule of all four members. Since all four of us were college students, we have work that was also due at the same time as Hackathon. It became extremely challenging to meet up and discuss. We solved this through the use of discord and proper communication techniques. We relayed any changes and necessary changes as soon as we did them. Since it was in text format, the information can be read quickly even if one of us was in the middle of something. Repl.it also helped an incredible amount by streamlining the entire coding process.

Our Experience

Since this was our first Hackathon, we had plenty to learn. For one, we came into this event with little to no preparation. Though we managed to complete a decent prototype, we are, on a larger scale, very disorganized. In the future, proper planning tools and a designation of roles would help immensely. Instead of focusing on fancy details like animation, we should have instead focused on the basics.

What's Next For BlueClicker?

A feature that we are looking forward to implementing is creating a leveling system and separating the tasks from the clicks. Clicks would give experience and levels, which would help Blue grow from an adorable foal to an epic gamer horse. Tasks would instead give the points to be used in the shop. Instead of having a task section in the menu, we would have liked “health packs” inspired by multiple games such as League of Legends, OverWatch, and Fortnite to fall down from the top of the screen. Clicking on these health packs would give the tasks to be completed. This would encourage gamers to complete tasks as they come, promoting a more balanced lifestyle. We also really wanted to add an option to buy background music in the shop - namely Kahoot lobby music, as Blue really seemed to vibe with it. We also would have liked to format it nicer, with a cute room instead of the TL wallpaper, so store-bought items would look more in-place as posters. A cute feature we could add is having hearts appear for every click, accompanied by sound effects.

Thank you for taking a look at our project! Let's go Liquid!

Built With

• css
• html
• javascript
• jquery
• replit