Pixel Duel is a retro-inspired digital board game built using React (Next.js). The user is prompted to answer pixel-art-themed questions, using card-based bonuses to strategically enhance gameplay.
You can access the game 👉🏻 Here
Next.js
React
TypeScript
- 🎨 CSS Modules & pixel-style design
- 🖼️ Static assets (sprites, tiles, and sound effects)
Answer 36 questions correctly within the 20-minute time limit. Use bonus cards wisely to skip, reveal, or narrow down answers. Earn a badge for a perfect game (0 mistakes)!
- Start the Game: Enter your name and begin the game.
- Answer Questions: Each tile on the board represents a question.
- Score Points: Correct answers earn points. Total possible score: 36 (+1 bonus if "Final Score" card is used).
- Use Cards:
- 🔥 Fire → Skip a question
- ❤️ Heart → Reveal the correct answer
- 🌙 Moon → Remove one wrong answer
- 💎 Diamond → Adds +1 bonus to your final score (if used before ending)
- Finish the Game: Either let the timer run out or click Finish to end early.
- Game Over Alert: See your result, score, and badge (if earned), then return to the landing screen.
Cards can be used by clicking on them. Each card can only be used once.
| Card Name | Icon | Effect |
|---|---|---|
| Heart | ❤️ | Reveals the correct answer |
| Fire | 🔥 | Skips the current question |
| Moon | 🌙 | Removes one wrong answer |
| Diamond | 💎 | Adds +1 to final score if used |
Cards disappear from the deck once used.
- Earn a 🏅 Perfect Badge if you answer all 36 questions correctly without using a wrong answer.
- The badge is shown on the results screen.
- Core game logic
- Handles timer, score, card usage, and game over
- Triggers the
Boardviaref
- Manages current question, shuffles answers
- Exposes
triggerHint,triggerReveal,triggerSkipto parent - Tracks card effects visually and logically
- Popup component (customized alert to replace the UGLY browser alert)
- Used for final score messages or alerts (like time warnings)
- Audio effects are triggered on correct/wrong answers and card usage.
- Board tracks current progress with an active tile and grid.
- Game logic prevents multiple uses of a single card.
- Final score includes conditional logic for using the "final-score" card (very optional).
- Game returns to the landing page after result alert is dismissed.
git clone https://github.com/kaoutarell/pixel-duel-game
cd pixel-duel
npm install
npm run dev
All rights reserved ©
This project is the intellectual property of Kaoutar El Azzab. You may not copy, redistribute, modify, or use any part of this code, assets, or game mechanics without explicit written permission.
This repository is provided for personal archival and demonstration purposes only.