Mindful-Maze

• 

• 

  Pause & Reflect ❓ – A quick quiz pops up to boost knowledge and awareness.

• 

  Mindful Moments ✨ – Celebrate progress with uplifting health tips and affirmations.

Inspiration

I wanted to create something beyond just a game an experience that combines fun, learning, and wellness. Many games focus only on entertainment, but I was inspired to design a maze that not only challenges players but also improves their mindfulness and health awareness through affirmations, tips, and quizzes.

What it does

Mindful-Maze is a progressive maze game where each level gets harder as the player navigates toward the goal. On reaching the goal, the player receives a motivational health message or a mini quiz related to well-being. This keeps the player engaged while subtly building healthier habits and mental awareness.

How we built it

I built the game using React.js for interactivity and dynamic maze generation. The grid-based maze logic was implemented with arrays and randomization for walls and obstacles. CSS was used to style the maze, player, goal, and background with custom patterns (like question marks or light bulbs) to make the visuals fun and educational. I also integrated a set of health messages and quiz questions that pop up at the end of each level, keeping the player motivated and engaged.

Challenges we ran into

Balancing the maze generation so it remains solvable and not too easy or impossible. Avoiding bugs where levels were skipping or messages appeared multiple times. Designing a clean but fun visual background that didn’t overwhelm the maze.

Accomplishments that we're proud of

Successfully merging fun gameplay with educational and health-focused elements. Creating a maze that progressively increases in size and difficulty. Adding motivational/health messages and mini quizzes that enhance the experience beyond a typical game. Designing a background with repeating SVG patterns for a unique visual identity.

What we learned

How to combine game logic with UI/UX design principles. The importance of balancing difficulty and engagement in a game. Creative use of CSS patterns and animations to enhance user experience. Building an interactive project collaboratively while managing debugging and feature iteration.

What's next for Mindful-Maze

Adding more diverse quizzes (covering nutrition, exercise, mindfulness, and mental health). Introducing sound effects and background music for a more immersive feel. Developing a mobile-friendly version or even a mobile app. Implementing a scoring system or leaderboard to make the game competitive.

Built With

• css3
• javascript
• jsx
• react