https://github.com/siddami/color_guessing_game
A simple color guessing game where players match a randomly displayed color to one of six options. Features score tracking, instant feedback, and a reset button. Built with HTML, CSS, and JavaScript, it offers a responsive and engaging user experience.
https://github.com/siddami/color_guessing_game
Last synced: about 1 month ago
JSON representation
A simple color guessing game where players match a randomly displayed color to one of six options. Features score tracking, instant feedback, and a reset button. Built with HTML, CSS, and JavaScript, it offers a responsive and engaging user experience.
- Host: GitHub
- URL: https://github.com/siddami/color_guessing_game
- Owner: Siddami
- Created: 2025-02-03T19:19:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-04T22:11:53.000Z (over 1 year ago)
- Last Synced: 2025-03-04T22:19:27.219Z (over 1 year ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Guessing Game đ¨đŽ
## Project Overview
A interactive, browser-based color guessing game that challenges players to identify the correct color through visual recognition and quick thinking (Don't play if color blind...).
## Project Motivation
This project was developed as a Frontend Intern Task to demonstrate:
- Proficiency in vanilla JavaScript
- Understanding of DOM manipulation
- Ability to create interactive web applications
- Skills in responsive design and user experience
## đ Technologies Used
- **HTML5**: Semantic structure and content
- **CSS3**: Responsive styling and animations
- **JavaScript (ES6+)**: Game logic and interactivity
- **No External Libraries**: Pure vanilla implementation
## Folder Structure
```
color-guessing-game/
â
âââ index.html # Main HTML entry point
âââ styles.css # Styling for the game
âââ script.js # Game logic and functionality
âââ README.md # Project documentation
```
## Design Thought Process
### Conceptual Approach
1. **User-Centric Design**
- Create an intuitive, engaging game interface
- Provide clear instructions and immediate feedback
- Ensure accessibility across different devices
2. **Technical Considerations**
- Implement modular, object-oriented JavaScript
- Use efficient DOM manipulation techniques
- Create a responsive design that works on multiple screen sizes
### Game Mechanics Development
- Randomly generate target and option colors
- Implement score tracking
- Create interactive color selection process
- Add game reset functionality
## Key Features
- Randomly generated target color
- 6 color options with one correct answer
- Real-time score tracking
- Immediate guess feedback
- Responsive design
- New game reset button
## Learning Outcomes
### Technical Skills
- Advanced DOM manipulation
- Event handling in JavaScript
- Creating interactive web applications
- Implementing game logic from scratch
- Responsive design techniques
### Soft Skills
- Problem-solving approach to game design
- Breaking down complex requirements
- Creating user-friendly interfaces
- Understanding of frontend development principles
## Challenges Overcome
1. Implementing truly random color selection
2. Creating a balanced difficulty level
3. Ensuring responsive design across devices
4. Managing game state efficiently
## Potential Future Improvements
- Add difficulty levels
- Implement a timer
- Create a high-score tracking system
- Add sound effects
- Enhance accessibility features
## Key Takeaways
- Importance of modular code design
- Value of user experience in game development
- Practicing vanilla JavaScript skills
- Understanding of frontend development principles
## đ Setup and Installation
1. Clone the repository
2. Open `index.html` in a web browser
3. Start playing!
## Contribution
Suggestions and improvements are welcome!
Please feel free to submit a Pull Request.
## License
This project is open-source and available under the MIT License.
---
**Happy Color Guessing!** đ¨đšī¸