https://github.com/darshanas17/emoji-game-react
An engaging Emoji Game built using React.js, where users can test their memory by selecting unique emojis without repeating.
https://github.com/darshanas17/emoji-game-react
css es6-modules game hmtl javascript reactjs state-management
Last synced: 2 months ago
JSON representation
An engaging Emoji Game built using React.js, where users can test their memory by selecting unique emojis without repeating.
- Host: GitHub
- URL: https://github.com/darshanas17/emoji-game-react
- Owner: Darshanas17
- Created: 2025-03-26T04:00:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-26T04:13:29.000Z (about 1 year ago)
- Last Synced: 2025-03-26T05:22:29.820Z (about 1 year ago)
- Topics: css, es6-modules, game, hmtl, javascript, reactjs, state-management
- Language: JavaScript
- Homepage: https://darshanas17.github.io/Emoji-Game-React/
- Size: 705 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Emoji Game
An engaging **Emoji Game** built using React.js, where users can test their memory by selecting unique emojis without repeating.
## 🚀 Live Demo
[Click Here to View the App](https://Darshanas17.github.io/Emoji-Game-React)
## 📸 Preview
---
## 🎯 Features
- **Memory-Based Gameplay:** Click unique emojis to increase score
- **Win/Lose Logic:** Winning and losing screens based on selections
- **Top Score Tracking:** Highest score is recorded for future attempts
---
## 🛠️ Installation & Setup
1. Clone the repository:
```sh
git clone https://github.com/Darshanas17/Emoji-Game-React.git
cd Emoji-Game-React
```
2. Install dependencies:
```sh
npm install
```
3. Start the development server:
```sh
npm start
```
4. Open the browser and go to `http://localhost:3000` to view the app.
---
## 📝 Implementation Details
### **Technologies Used**
- React.js
- CSS (for styling)
- JavaScript (ES6+)
### **File Structure**
```
├── src
│ ├── components
│ │ ├── EmojiGame
│ │ │ ├── index.js
│ │ │ ├── index.css
│ │ ├── NavBar
│ │ │ ├── index.js
│ │ │ ├── index.css
│ │ ├── EmojiCard
│ │ │ ├── index.js
│ │ │ ├── index.css
│ │ ├── WinOrLoseCard
│ │ │ ├── index.js
│ │ │ ├── index.css
│ ├── App.js
│ ├── index.js
├── package.json
```
---
## 🎮 How to Play?
1. Click on an emoji to score a point
2. Avoid clicking the same emoji twice
3. If all emojis are clicked once, you win!
4. If a duplicate emoji is clicked, you lose
5. Track and beat your **Top Score**
---
## 📂 Resources
### **Colors Used**
- `#6a59ff` (Primary)
- `#ffffff` (White)
- `#3d3d3d` (Dark Grey)
- `#ffce27` (Yellow)
---
## 📜 License
This project is licensed under the **MIT License**.
---
## 🤝 Contributing
Feel free to fork and contribute to this project.
1. Fork the repository
2. Create a new branch (`feature/your-feature`)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request