Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xabdulkhaliq/pixelhunt
Inspired by "Where's Wally", Discover hidden charecters and claim your spot at the top!
https://github.com/0xabdulkhaliq/pixelhunt
express game mongoose react tailwindcss waldo
Last synced: 8 days ago
JSON representation
Inspired by "Where's Wally", Discover hidden charecters and claim your spot at the top!
- Host: GitHub
- URL: https://github.com/0xabdulkhaliq/pixelhunt
- Owner: 0xabdulkhaliq
- Created: 2024-05-21T05:52:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T05:16:43.000Z (5 months ago)
- Last Synced: 2024-11-08T11:23:11.188Z (2 months ago)
- Topics: express, game, mongoose, react, tailwindcss, waldo
- Language: JavaScript
- Homepage: https://pixelhunt.vercel.app
- Size: 61.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
![Pixel Hunt](https://i.ibb.co/St902T4/pixelhunt.webp)
### ❝ An engaging, full-stack hidden object game inspired by "Where's Wally", featuring a dynamic React + Tailwind frontend, and a robust Express + Mongoose backend. ❞
❯
View Demo
·
Report Bug
·
Request Feature
❮
## Game Manual
1. **[Head to the live site](https://pixelhunt.vercel.app/)** on any device using your browser.
2. **Select a Game:**
- On the homepage, browse the available game options.
- Click on a game to select a gameboard (Waldo image).3. **Start the Game:**
- After selecting a game, you will be taken to the `/gameboard` page.
- The gameboard page will show you the list of objects/characters you need to find.
- Once you are ready, click the **Start** button to begin the game.4. **Play the Game:**
- The timer will start counting as soon as you hit the **Start** button.
- Tap on the characters/objects in the image to mark your selections.
- An anchor will appear at your selected spot. Choose the object you think you found.
- If your selection is correct, a green marker will be placed. If it's incorrect, a red marker will appear.5. **Finish the Game:**
- Continue finding all the hidden characters/objects as listed.
- The game ends once you have found all the required characters/objects.
- A form will prompt you to enter your name and show your completion time.
- Enter your name and hit **Submit** to record your score.6. **View the Leaderboard:**
- Navigate to the **Leaderboard** page to see how you rank among other players.
- Use the arrow keys on the top left and top right to switch between leaderboards for different games.
- Scores are ranked based on the fastest completion times.7. **Enjoy playing PixelHunt** and good luck finding all the hidden characters!
## Tech Stack
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
![Express JS](https://img.shields.io/badge/Express-000000.svg?style=for-the-badge&logo=Express&logoColor=white) ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) ![Mongoose](https://img.shields.io/badge/Mongoose-880000.svg?style=for-the-badge&logo=Mongoose&logoColor=white)
## Tools Used
![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white) ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)
## Let's Connect 👋