Adding a scoreboard to my web-game.

Phase 1 Project: Bubblegame Scoreboard

Heya! Today I'm thrilled to share the methods behind the magic of my Flatiron phase-1 project.

As part of my Phase 1 project for school, I created a scoreboard for Bubblegame. This addition brings a whole new level of competition and excitement to the game. Let me walk you through my processes.

The Idea Behind the Project

The idea for this project stemmed from the relative popularity of my aim-trainer web game. I noticed that friends and family enjoyed competing against each other, some even going so far as to write down their scores. I love a good competition, and what better way to fuel that competitive spirit than by introducing a leaderboard? The goal was simple: to provide a platform where players could see how they rank and battle for the golden Rank 1 badge.

Creating a leaderboard meant more than just displaying scores; it involved thinking about the user experience, ensuring fairness, and encouraging continuous engagement. I wanted players to feel motivated to improve their skills and come back to play more. This project was not just about coding but about understanding what makes a game engaging and competitive.

Additionally, the process of developing a feature like this involved gathering feedback from users to identify what would make the game more enjoyable. It was an iterative process where I had to balance technical challenges with user expectations, ensuring that the final product was both functional and fun.

Key Features

One of the standout features of the scoreboard is the separation of mobile and MnK (mouse and keyboard) scores. This distinction is crucial because mobile players have an inherent advantage due to smaller screen sizes, the absence of a mouse for aiming, and being able to use multiple fingers—or even hands—while playing. By having separate leaderboards, we ensure that the competition remains fair and balanced, allowing each group to compete on an even playing field. It was fascinating to dive into the nuances of different input methods and ensure that the game was equally challenging and rewarding for everyone.

Another feature I’m proud of is the self-score display. For convenience, the scoreboard shows the score of the currently logged-in player separately, right at the top of the list. This makes it easy for players to track their progress and see how they stack up against others without sifting through the entire leaderboard. This feature was inspired by feedback from early testers who wanted a quick way to view their rankings. It’s these little touches that can make a big difference in user satisfaction.

Lastly, the scoreboard supports tied rankings. If two players achieve the same score, they share the same rank. For instance, if two MnK players both have a score of 22, they are both given the same rank. This feature ensures that every player receives fair recognition for their performance. Implementing this feature involved careful consideration of how to handle ties in a way that felt fair and transparent to all players.

The Tech Behind the Magic

Building this scoreboard was an exciting challenge that involved HTML, Sass, and JavaScript. Originally, I styled the entire site using vanilla CSS, which worked... but it took a long time. Enter Sass—CSS with superpowers. Sass significantly sped up the development process and made the styling much more manageable. Learning Sass was a game-changer for me; it allowed me to write cleaner, more efficient code and maintain it with ease. The ability to use variables, nested rules, and mixins made the styling process much smoother and more enjoyable.

JavaScript played a crucial role in handling dynamic data updates and ensuring that the scoreboard reflected real-time changes. It was exciting to see how the combination of these technologies could create a responsive, user-friendly interface. Each update, each score submission felt like a small victory as the scoreboard seamlessly integrated the new data.

Reflections and Future Improvements

This project has been a fantastic learning experience. It’s taught me a lot about balancing functionality with user experience. One of the most valuable lessons was the importance of testing and feedback. Early testers provided insights that helped shape the final product, and I learned to prioritize features that enhanced user engagement.

In conclusion, adding a scoreboard to my aim-trainer web game has transformed it into a more competitive and enjoyable experience. It’s been rewarding to see players strive for the top spot. Thank you for joining me on this journey. I look forward to sharing more updates with you!