GIF
How to Play
Splash Screen
Splash Screen
Main Menu
Game Modes
Global Leader Board

MojiMatch - Hackathon Submission

Inspiration

I've always been fascinated by games that look deceptively simple - the kind that make you think "oh, this is child's play" until you actually try them and realize they're genuinely challenging. Games like Tetris, Snake, or Spot It! have this beautiful simplicity on the surface, but they test your pattern recognition, reaction time, and strategic thinking in ways that surprise you.

That's exactly what I wanted to create with MojiMatch: a game that looks like a child's matching puzzle but is actually really tough to crack.

The concept is disarmingly simple - just find the matching emoji between two cards. How hard could that be? But then you start playing and realize: the emojis are different sizes, they're rotated at crazy angles, and in harder modes, they're actually moving across the screen. That cute little 🚀 you're looking for? It might be tiny and upside-down on one card, then huge and sideways on the other. And you have 30 seconds to find it while building combos for bonus time.

Simple games can be just as tough, and MojiMatch is one of them.

I wanted to prove that you don't need complex mechanics or fancy graphics to create a genuinely challenging experience. Sometimes the most engaging games are the ones that strip everything down to pure skill: pattern recognition under pressure, decision-making when your combo is on the line, and the mental stamina to maintain focus when emojis are drifting across the screen.

I also saw a perfect opportunity to build something native to Reddit's culture - quick, competitive, and community-driven. A 30-second game that you can play directly in your Reddit feed, with scores automatically tied to your username? That felt perfectly aligned with Reddit's UGC hackathon category.

What it does

MojiMatch is a lightning-fast visual puzzle game where you race against a 30-second timer to identify the one matching emoji between two cards. Each card displays 8-20 emojis (depending on difficulty) selected from a pool of 60 unique emojis, with every emoji having random sizes (0.7x-2.8x) and rotations (0-360°).

Core Gameplay:

Find the single matching emoji between two cards before time expires
Build combo streaks for escalating points (25 → 35 → 45 → 65 → 115+) and time bonuses (4-13+ seconds per match)
Choose from 4 difficulty levels: Easy (8 stationary emojis), Medium (12 stationary), Hard (16 moving emojis), GOD (20 fast-moving emojis)
Compete on three leaderboards: All-Time, Weekly, and GOD Mode

The Challenge: What makes MojiMatch genuinely difficult is the visual chaos. That same emoji looks completely different on each card - rotated, scaled, positioned differently. Your brain has to recognize the pattern and shape, not rely on size or orientation. In Hard and GOD modes, emojis drift smoothly in circular patterns, adding dynamic tracking on top of pattern recognition.

Reddit-Native Features:

Runs directly in Reddit posts using Devvit's webview
Custom animated splash screen showing current top player
Automatic Reddit username integration (no login needed)
Redis-backed leaderboards with real-time updates
Post-game emoji reveal with golden glow showing what you missed

How I built it

Technical Stack:

Kiro AI - End-to-end development from planning to execution
React 18 + TypeScript with HTML5 Canvas for 60 FPS rendering
Express.js server with Devvit SDK integration
Redis for leaderboards and persistent data
Web Audio API for dynamic sound effects
Vite for build tooling

Development with Kiro:

Here's the remarkable part: I didn't write a single line of code myself. This entire game - from initial concept to polished, production-ready app - was built end-to-end using Kiro as my AI development partner.

I started by discussing my vision with Kiro, which helped me create comprehensive specification documents breaking down the project into 21 structured tasks. Kiro then systematically built the entire codebase: the card generation algorithm with automated tests, 60 FPS Canvas rendering with complex transformations, custom React hooks for game state management, Web Audio API sound effects, physics-based collision detection, mobile optimization with touch events, and complete Reddit/Devvit integration.

Throughout development, Kiro maintained architectural consistency across 9 components, 2 hooks, and 3 utilities while automatically generating detailed documentation (README, changelogs, bug fix logs). When challenges arose - like mobile canvas rendering issues or game balance problems - Kiro systematically debugged, identified root causes, and implemented solutions across multiple files consistently. As a solo developer, Kiro was like having a senior full-stack engineer, game designer, and QA tester working alongside me, enabling me to focus on design decisions rather than implementation details.

Key Technical Implementations:

Seeded Random Generator (LCG) for deterministic card generation
Canvas rendering with circular motion using sine/cosine functions
Distance-based hit detection accounting for rotation and scale
Dynamic combo system with time bonuses (3 + combo level)
Overlap prevention with 60px minimum spacing
Responsive canvas with mobile touch optimization

Challenges I ran into

Mobile Canvas Rendering

The game worked perfectly on desktop but was blank on Reddit mobile apps. Through systematic debugging, I discovered the hardcoded 350px card width caused off-screen rendering on small phones. The solution required responsive dimensions with Math.min(canvasWidth - 40, 350) and updating all three position-calculation functions consistently.

Empty Canvas After Countdown

Canvas stayed empty for seconds after game start in Easy/Medium modes. The issue was a missing initial render - Hard/GOD modes worked because their animation loop forced continuous redraws. Added dedicated render useEffect and removed a duplicate return statement.

Game Balance

The original 150-second timer made games too long and low-stakes. Completely redesigned the timing: reduced to 30 seconds, implemented dynamic time bonuses (4-13s based on combo), increased wrong click penalty to -2s. This made combo-building essential for survival.

Touch Events

Mobile touches weren't registering reliably and the page would scroll during gameplay. Implemented proper coordinate conversion with getBoundingClientRect(), added touch-action: manipulation, ensured 60px hit areas, and prevented unwanted scrolling.

Accomplishments that I'm proud of

1. Built Entirely with Kiro Created a production-ready game with 3,000+ lines of code without writing a single line myself. This demonstrates what's possible when fully leveraging AI as a development partner.

2. Genuinely Challenging Simplicity Achieved my core goal: a game that looks simple but is tough to crack. The visual chaos from random transformations creates authentic difficulty without artificial complexity.

3. True Cross-Platform Experience One unified codebase works flawlessly on mobile apps and desktop browsers with responsive canvas, touch-optimized controls, and adaptive UI.

4. The Combo Snowball Effect Dynamic time bonuses let skilled players extend 30-second games indefinitely while maintaining high-stakes risk-reward dynamics.

5. Sophisticated Technical Implementation Seeded random generation, 60 FPS canvas rendering with circular motion, Web Audio API with zero audio files, physics-based collision detection, and Redis-backed leaderboards.

6. Clean, Maintainable Architecture Despite rapid development, the codebase maintains clean separation of concerns, comprehensive error handling, automated tests, and extensive documentation.

7. Solo Project Scope As a one-person team, completed a fully-featured game with 60-emoji pool, 4 difficulty modes, 3 leaderboards, moving animations, audio system, and Reddit integration.

What I learned

About AI-Assisted Development:

Kiro can handle end-to-end development from planning to execution with clear vision
AI pair programming enables rapid iteration without sacrificing code quality
Systematic debugging with AI is faster than trial-and-error
Documentation generated alongside code is more accurate and useful

Technical Learnings:

Canvas performance optimization with 60 FPS rendering and complex transformations
Responsive canvas requires updating all position calculations, not just dimensions
Touch events need coordinate conversion and proper hit areas
Web Audio API can generate rich sound effects without external files
Redis sorted sets are perfect for efficient leaderboard queries

Game Design:

Simplicity enables depth - one mechanic explored deeply beats many shallow mechanics
Constraints create fun - shorter timer made the game more engaging
Loss aversion is powerful - players take risks to avoid losing high combos
Feedback must be immediate, multi-sensory, and progressive
Progressive difficulty should introduce new mechanics, not just "more stuff"