EcoRise - Restore the Planet

🌍 An educational puzzle-adventure game where you restore Earth's ecosystems by solving climate-action challenges. Fight climate change through addictive puzzle gameplay

Comment

What It Does

EcoRise transforms climate education into an addictive puzzle-adventure. Players match tiles representing real environmental solutions—solar panels, wind turbines, trees, and recycling—to clean pollution and restore six unique biomes: forests, deserts, oceans, cities, tundras, and rainforests.

Key Features:

🌍 8 Progressive Levels - Each level presents a new biome with unique environmental challenges and specialized tiles (ice crystals in tundra, exotic orchids in rainforest)

🏆 Daily Challenges - New 24-hour challenges with exclusive power-up rewards. Build a 7-day streak to earn the legendary Streak Master badge!

⚔️ Weekly Tournaments - Compete globally for top 10 rankings. Winners receive prestigious badges (Champion, Runner-Up, Top 10) displayed on profiles

🎯 5 Mega Power-Ups - Unlock rare tiles with spectacular full-screen animations:

  • ☀️ Supernova: Explosive radial burst
  • 🌊 Tsunami: Cleansing wave effect
  • 🏔️ Earthquake: Board-shaking reshuffle
  • ☄️ Meteor: Cosmic impact
  • 🔥 Phoenix: Rebirth transformation

✨ Particle Collision System - Mouse trails interact with matches, creating score multipliers (2x, 3x, 5x+) when collisions occur. View heatmaps showing your most active zones!

📊 Global Leaderboard - Track your score, CO₂ reduced, challenges completed, and streak against other players worldwide

🎵 Dynamic Audio - Procedurally-generated background music adapts to each biome, plus synthesized sound effects for every achievement

How We Built It

Tech Stack:

  • React 19 + TypeScript for robust component architecture
  • Framer Motion for 60fps animations
  • Tailwind CSS 4 with custom OKLCH color system
  • Shadcn UI v4 for polished components
  • Web Audio API for procedural music and synthesized sound effects
  • Spark Runtime SDK for state persistence and authentication
  • Vite 7 for optimized builds

Key Development Challenges:

  1. Collision Detection System - Built custom collision detection for particle trails intersecting with matched tiles, calculating multipliers based on overlap density
  2. Procedural Audio - Implemented Web Audio API oscillators and filters to generate 7 unique biome soundscapes without audio files
  3. Heatmap Analytics - Created time-based analytics tracking collision patterns by hour/day/biome with data visualization
  4. Smooth Animations - Balanced visual spectacle (power-up animations, particle effects) with 60fps performance on mobile

Challenges We Faced

Performance Optimization: Initial particle systems spawned 500+ particles causing frame drops on mobile. Optimized by implementing particle pooling, lifecycle management, and adaptive spawn rates based on device capabilities.

Tournament Ranking Logic: Ensuring fair rankings with replay mechanics required careful state management—tracking best scores while preventing duplicate entries and handling edge cases like tied rankings.

Educational Integration: Finding the balance between engaging gameplay and educational content. Solved by creating non-intrusive info cards that appear on first encounters with new tile types, making learning feel organic rather than forced.

Procedural Music: Generating music that sounds musical (not random noise) while adapting to biome themes. Implemented chord progressions, scales, and biome-specific instrumentation (droning harmonics for desert, wave-like modulation for ocean).

Accomplishments We're Proud Of

✅ Full-Stack Game Mechanics - Complete gameplay loop with progression, competition, and collection systems
✅ Polish & Feedback - Every action has visual, audio, and statistical confirmation
✅ Educational Impact - Real climate facts integrated seamlessly into gameplay
✅ Accessibility - Responsive design works beautifully on mobile, tablet, and desktop
✅ Community Features - Tournament system with badges creates genuine competitive engagement
✅ Innovation - Collision multiplier system adds strategic depth unique to this game

What We Learned

Game Design: Creating satisfying feedback loops requires layering multiple systems—visual effects alone aren't enough. The combination of particles + sound + score multipliers + heatmap tracking creates addictive gameplay because players always have something new to discover.

Web Audio API: Procedural audio generation is powerful but requires careful tuning. Each oscillator's frequency, gain envelope, and filter cutoff affects perceived "musicality." We learned to think like synthesizer designers.

Data Persistence: Using functional updates (setState(current => ...)) is critical when working with async persistence APIs to avoid race conditions and data loss.

Performance Budgets: 60fps is non-negotiable. We learned to profile constantly, set particle limits, and use will-change CSS hints for animating elements.

What's Next

Immediate Roadmap:

  • 🤝 Multiplayer co-op mode where players collaborate to restore biomes
  • 🌐 Integration with real environmental organizations (trees planted per X score)
  • 📱 Progressive Web App features (offline play, push notifications for daily challenges)
  • 🎨 Player-created custom levels with sharing system

Long-Term Vision:

  • 🏫 Classroom integration tools for teachers
  • 📊 Personal carbon footprint calculator tied to gameplay
  • 🌍 Expanded biomes (coral reefs, wetlands, grasslands, mountains)
  • 🎭 Narrative campaign mode with character-driven storytelling

Built With

Share this project:

Updates