As part of the HNG Internship Stage 1 task, I was challenged to build an interactive color-guessing game. The goal was to create an engaging and visually appealing game where players try to match a target color by selecting from six given options. The game also needed to include animations, a scoring system, and a reset functionality while ensuring a great user experience.
Game Features
1. Target Color Display
A randomly selected color is displayed in a box, serving as the target color for the game. Players must match this color from the available choices.
2. Six Color Options
Six different color buttons are displayed, one of which matches the target color. Players must click the correct button to win.
3. Game Instructions
A message is displayed to guide players on how to play the game.
4. Score Tracking
Each correct guess increases the player's win count, while incorrect guesses increase the loss count.
5. Fun Animations
To make the game more engaging, I implemented animations such as a confetti effect when the player selects the correct color and a shake effect when they choose the wrong one.
6. Reset Functionality
Players can reset the game using a button, which restores the original state without resetting on page reload.
Technical Details
JavaScript was used to handle game logic, including color generation, event handling, and score updates.
CSS Animations were added to enhance the user experience.
Session Storage was used to store the initial state of the game as well as the score so that on refresh of the page, the current score is not lost.
This task was an exciting introduction to the HNG Internship, and I look forward to more challenges ahead!
Game UI:
Link to repo: https://github.com/Chioma-Okeke/shade-detective
Link to hosted game: https://guess-the-color-alpha.vercel.app/
What do you think of this game? Let me know in the comments!