Kinding Quest

A multi-level 2D adventure where small acts of empathy—helping elders, sweeping streets, and uniting neighbors—physically transform a struggling village into a thriving community.

Comment

Inspiration

Most "social good" or educational games fall into the same trap: they are preachy multiple-choice quizzes disguised as gameplay. We wanted to build something that follows the golden rule of game design—show, don't tell.

We asked ourselves: How can we help players—especially students and young learners—actually feel the ripple effect of everyday empathy? Whether it is checking in on an isolated elderly neighbor, taking pride in keeping public streets clean, conserving water, or helping a shy newcomer feel included, small acts of kindness compound to transform entire neighborhoods. That idea gave birth to Kindness Quest: a cozy, multi-level 2D adventure where every good deed physically restores a struggling village before your eyes.

What it does

Kindness Quest places players in Havenwood Village, an interconnected 2D community where residents face everyday real-world challenges. Guided by an interactive Level Progression Map, players advance through chapters of social responsibility:

  • 🤝 Level 1: The Helping Hand (Community Cooperation) — Players complete 6 foundational neighborly quests: delivering groceries to Grandma Evelyn, setting up an outdoor peer reading circle with Student Maya, planting and watering 3 neglected community garden beds, gathering ingredients for a community center feast, delivering clinic wellness kits to Riverside Park, and facilitating a community vote on how to share public square space.
  • 🧹 Level 2: Clean & Green Village (Civic Pride & Eco-Stewardship) — Players equip a bamboo street broom and physically walk over 8 storm-littered piles across the village roads to sweep them clean, collect and sort riverside recyclables into new color-coded bins, and shut off 3 leaking water taps to conserve clean water.
  • 🙏 Level 3: Respecting Elders & Empathy (Polite Manners & Inclusion) — Players earn bonus Kindness Points for choosing patient, respectful greetings with elders, listen closely to an elder's memories to recover a lost family heirloom pocket watch, and organize a Golden Lantern Welcome Circle so a shy new student doesn't feel left out.

Built Around the 3 Core Pillars:

  1. Accessibility: Zero lengthy text manuals. A 1-click Title Screen leads into an 8-second 4-Step Arrow Coach, backed by a live Orbiting Golden Compass (➤) and Automatic Step-by-Step Target Locking (📍) that dynamically highlights the exact next person, trash pile, or water tap.
  2. Usability: Features context-sensitive action keys ([T] Talk, [G] Grab, [P] Plant, [F] Fix, [R] Read) on desktop, paired with a smooth 360° Virtual Analog Thumbstick and a ✋ Move UI / Controls customization mode on mobile so players can drag any HUD bar or button anywhere on their screen. Includes a 🔓 Judge Mode toggle on the Level Map so reviewers can unlock and test any level immediately.
  3. Purpose: Every completed task permanently upgrades the village (blooming flower boxes, reading tables, lush gardens, banquet feasts, recycling stations, and festival lanterns) and presents a 🌍 Real-World Impact Card connecting the in-game action to real-world civic statistics.

How we built it

  • Game Engine (Phaser 3): Built the 2D top-down world, Arcade Physics collision footprints, depth-sorted entities, particle bursts, and camera tracking in Phaser 3.
  • Hybrid Canvas + DOM UI Architecture: Instead of rendering menus inside the WebGL canvas (which hurts mobile responsiveness and readability), we built a reactive HTML5/CSS overlay layer on top of Phaser, synchronized via a decoupled Pub/Sub EventBus and a single-source-of-truth GameState store.
  • Procedural 2D Texture Generator (BootScene.js): Rather than relying on external image URLs that can fail or clash in art style, we wrote an HTML5 Canvas procedural graphics generator that dynamically draws cohesive tiles, buildings, villager sprites, and quest items at boot time.
  • Zero-Dependency Web Audio Synthesizer (AudioManager.js): Using the browser's native Web Audio API (AudioContext), we synthesized a pastoral C-major pentatonic background melody, footstep thuds, character-pitched dialogue chimes, and rising coin-claim arpeggios with zero external .mp3 dependencies.
  • Persistence (SaveManager.js): Automatic checkpoint saving via LocalStorage for level stars, quest states, inventory, player coordinates, and custom mobile HUD layouts.

Challenges we ran into

  • Multi-Step Objective Navigation: In quests with multiple sub-targets (like sweeping 8 scattered trash piles or planting 3 garden beds after collecting two tools), static map markers left players guessing what to do next. We solved this by engineering a reactive priority resolver (getActiveTargetCoords()) that inspects inventory and world flags in real time—automatically hopping the 📍 target ring from Trash Pile #1 to #2 to #8 as you sweep.
  • Mobile Screen Clutter & Control Comfort: Standard 4-button on-screen D-pads felt rigid on phones, and fixed top HUD bars risked clipping on narrow viewports. We replaced the D-pad with a vector-normalized 360° analog thumbstick, compacted the HUD into glassmorphic pills, and built a live pointer-capture drag system (✋ Move UI) so mobile users can reposition every HUD bar and control on the fly.
  • Voice & Audio Balance: We initially experimented with browser Text-to-Speech (window.speechSynthesis) for spoken dialogue, but quickly realized robotic system voices broke the warm, cozy atmosphere of the village. We pivoted to Animal Crossing-style musical frequency profiles where each villager speaks with a distinct, warm instrument pitch.

Accomplishments that we're proud of

  • True World Reactivity: Watching Havenwood transform from an empty, littered village with dry soil beds into a vibrant community filled with blooming flowers, shared feasts, clean streets, and golden lanterns feels genuinely rewarding.
  • Tactile Gameplay Variety: Moving beyond simple fetch quests to include physical walk-over broom sweeping, leaking tap repairs, and polite dialogue choices that reward empathy.
  • Rewarding Feedback Loop: Designing the 🎁 Claim Rewards celebration where golden hearts (💛) physically fly across the screen into the player's score counter with rising musical chimes.
  • 100% Self-Contained Reliability: Because all textures and audio are procedurally generated and synthesized in code, the entire production bundle loads almost instantaneously with zero missing-asset bugs.

What we learned

  • Designing for Empathy Requires Immediate Visual Feedback: Players connect with social-good themes much more deeply when they see their environment improve immediately after an action, paired with a concise real-world takeaway card.
  • Accessibility is Multiplier Design: Features we built for beginners—like the orbiting golden guide arrow (➤), context-specific action keys, and draggable mobile controls—made the game significantly more enjoyable for experienced players and time-constrained reviewers too.
  • Decoupling Game Physics from DOM UI: Bridging Phaser 3 and vanilla DOM elements through a lightweight EventBus gave us the best of both worlds: 60 FPS 2D spatial gameplay and crisp, accessible CSS interfaces.

What's next for Kindness Quest

  • 🐾 Level 4 (Animal Shelter & Wildlife) & 💻 Level 5 (Digital Kindness): Expanding the playable Level Map nodes to cover compassion for stray animals, habitat building, and standing up against cyberbullying in school environments.
  • Classroom & Educator Dashboard: Allowing teachers to assign specific levels to students and spark classroom discussions around the Real-World Impact cards.
  • Community "Kindness Ripple" Board: Adding an optional cloud-backed pledge wall where players can share one real-world act of kindness they completed in their own neighborhood after finishing the game.

Built With

Share this project:

Updates

Submission history