Flap N Fight

Flap N Fight: Flappy Bird meets bullet hell. Tap to fly and shoot, build infinite combos, unleash devastating beam attacks. Survive the chaos, beat your best, dominate the leaderboard.

Comment

Inspiration

What it does

Flap N Fight: Building a Revolutionary Reddit Game

🎯 The Inspiration

The idea for Flap N Fight came from a simple question: What if we could bring arcade-quality gaming directly into Reddit posts?

I wanted to create something that felt familiar yet fresh - taking the addictive one-tap mechanics of endless scrollers and combining them with strategic combat systems. The goal was to build a game that:

  • Works seamlessly on Reddit's platform without leaving the feed
  • Feels natural on mobile devices (where most Reddit users play)
  • Offers depth beyond simple reaction-based gameplay
  • Creates moments worth sharing with the community

The vision was clear: a bird character fighting through an endless forest, with a unique automatic-charging Super Beam system that creates rhythm-based strategic gameplay. No complex controls, just pure skill and timing.

🚀 What I Built

Flap N Fight is a fully responsive endless scroller built with Phaser 3 and TypeScript for Reddit's Devvit platform. The game features:

Core Gameplay

  • One-tap control system: Tap anywhere to flap upward and fire projectiles simultaneously
  • Automatic Super Beam charging: Heat fills at 100 units/second in the background - click the READY button when it glows to unleash a devastating horizontal beam attack
  • Infinite combo system: Build massive combos that never expire (only reset when you take damage!)
  • Progressive difficulty stages: Three distinct stages (25s, 35s, 45s) before entering endless mode
  • Personal best tracking: Persistent high scores across sessions with global leaderboard integration

Technical Innovation

  • Revolutionary responsive design: Adapts to ANY screen size in real-time (288×320px to 1920×1080+) using Phaser's RESIZE scale mode
  • 70/30 split-screen layout: Gameplay in top 70%, cinematic fighter cockpit UI in bottom 30%
  • 10-layer parallax backgrounds: Multi-depth scrolling creates rich visual atmosphere
  • Professional sprite-based graphics: All entities use sprite assets with container-based architecture
  • Real-time commentary system: Dynamic flavor text reacts to gameplay events (combos, damage, stage transitions)
  • Strategic turret defense: Stationary StingerWasp enemies create fixed threats and tactical positioning challenges

Platform Integration

  • Reddit-native experience: Runs directly in Reddit posts via Devvit
  • Social sharing: Post high scores as Reddit comments with one click
  • Redis persistence: Leaderboards and personal bests stored server-side
  • Mobile-first design: Optimized for touch controls with 96×96px minimum touch targets

📚 What I Learned

1. Responsive Game Design is Hard (But Worth It)

Traditional games use fixed resolutions. I wanted Flap N Fight to work everywhere - from tiny Reddit blocks to massive desktop displays. This meant:

The Challenge: Phaser's default scale modes (FIT, ENVELOP) create black bars or crop content. Neither felt right for a Reddit game.

The Solution: I implemented a dynamic layout system using:

  • Phaser's RESIZE scale mode with width: '100%' and height: '100%'
  • A getLayoutConstants() function that calculates all positions as percentages/ratios
  • Real-time resize event handlers that recalculate layouts on window changes
  • Geometry masking to prevent backgrounds from bleeding between UI zones

The Result: The game fills any container perfectly, with zero black bars, and recalculates everything live if you resize your browser window.

2. Automatic Charging Creates Better Gameplay Than Manual Charging

Initially, I planned a traditional "hold to charge" Super Beam system. But playtesting revealed a problem: holding a button interrupts the flow of a one-tap game.

The Pivot: I redesigned the system to charge automatically in the background:

  • Heat fills at 100 units/second (1 second to full charge)
  • Button displays animated "READY" GIF when charged
  • Click to fire, then 10-second cooldown with countdown timer
  • Creates a predictable rhythm: one beam every ~12 seconds

The Impact: This transformed the Super Beam from a clunky interruption into a rhythm-based strategic resource. Players can plan their shots while maintaining the flow of tapping and dodging.

3. Infinite Combos Create Meaningful Risk/Reward

Most combo systems reset after a few seconds. I wanted something different - combos that never expire on their own.

The Design: Combos only reset when you take damage. This creates intense strategic depth:

  • Do you play it safe and preserve your combo?
  • Or push aggressively for higher multipliers?
  • Every decision matters because one mistake resets everything

The Learning: Time-based resets feel arbitrary. Damage-based resets create meaningful consequences that reward both offensive skill (building combos) and defensive mastery (avoiding damage).

4. Stationary Enemies Add Tactical Depth

DiveCrow enemies (homing, mobile) were fun but predictable. Adding StingerWasp turrets changed everything:

The Innovation: Stationary enemies that:

  • Spawn at fixed positions (right edge: top, middle, bottom)
  • Fire projectiles from their mouth position every 2 seconds
  • Respawn 4 seconds after destruction
  • Create "no-fly zones" that require positioning strategy

The Result: The game evolved from pure reaction-based to tactical positioning. Players must identify safe zones, time their movements, and decide whether to destroy turrets or focus on mobile threats.

5. Devvit's Architecture Requires Different Thinking

Building for Devvit taught me about serverless constraints:

What Works:

  • Express endpoints with /api/ prefix for client-server communication
  • Redis for persistent data (leaderboards, personal bests)
  • Standard web frameworks (React, Phaser, Vue)
  • Fetch calls from client to server

What Doesn't:

  • Long-running processes or websockets
  • Filesystem access or native dependencies
  • External API calls from client (must proxy through server)
  • Streaming or chunked responses

The Adaptation: I designed around these constraints by:

  • Using Redis for all persistence
  • Keeping endpoints fast and stateless
  • Implementing client-side game logic with server-side data storage
  • Optimizing asset sizes to stay under 4MB payload limit

6. Performance Optimization is Critical for Mobile

Reddit users play on phones. The game needed to run at 60 FPS on mobile devices.

Optimizations Implemented:

  • Object pooling: Reuse projectile and enemy instances instead of creating/destroying
  • Spatial partitioning: 4×8 grid system for efficient collision detection
  • Tween conflict prevention: Atomic operations prevent visual glitches
  • Optimized animation timing: Reduced unnecessary sprite updates
  • Container-based entities: Efficient sprite management with proper cleanup

The Result: Smooth 60 FPS gameplay even with 20+ enemies and projectiles on screen.

7. User Feedback Drives Better Design

The cinematic bottom panel went through multiple iterations based on playtesting:

Version 1: Cluttered with labels, instructions, and separator lines Version 2: Removed labels, added animated GIF states for button Version 3: Increased spacing, removed separator line, added synchronized pulse effects Final Version: Clean, minimalist design with maximum 30% viewport height and proper component spacing

The Lesson: Less is more. Players don't need labels when visual feedback is clear. Animated sprites (Charging.gif, Ready.gif, countdown PNGs) communicate state better than text.

🛠️ How I Built It

Technology Stack

  • Phaser 3.88.2: 2D game engine with Arcade Physics
  • TypeScript: Type-safe development with strict checking
  • Vite: Fast build tool for client and server bundles
  • Express: Server-side API endpoints
  • Redis: Persistent data storage via Devvit
  • Devvit Platform: Reddit's developer platform for embedded apps

Architecture

src/
├── client/              # Phaser game (runs in browser)
│   ├── game/
│   │   ├── scenes/      # MainMenu, Game, GameOver, UIScene
│   │   ├── entities/    # Player, SuperBeam, DiveCrow, StingerWasp
│   │   ├── systems/     # WaveManager, ScoreManager, AudioManager
│   │   ├── ui/          # ChargeButton, CinematicBottomPanel
│   │   └── utils/       # ScaleManager, PerformanceManager
│   └── main.ts          # Phaser initialization
├── server/              # Express API (runs on Devvit)
│   ├── routes/          # Leaderboard endpoints
│   └── services/        # Redis operations
└── shared/              # Shared types between client/server
    └── types/           # API interfaces

Development Workflow

  1. Spec-Driven Development: Used Kiro's spec system to plan features

    • Requirements documents with EARS patterns
    • Design documents with architecture decisions
    • Task lists with incremental implementation steps

  2. Iterative Implementation: Built features in logical order

    • Core gameplay mechanics first (player, enemies, projectiles)
    • Combat systems (Super Beam, combos, damage)
    • UI/UX polish (responsive design, animations, feedback)
    • Platform integration (leaderboards, Reddit posting)

  3. Testing Strategy:

    • Manual playtesting on multiple devices (mobile, tablet, desktop)
    • Performance profiling to maintain 60 FPS
    • Reddit playtest environment (npm run dev)
    • Iterative balancing based on gameplay feel

Key Implementation Decisions

1. Container-Based Entity System

  • All entities (player, enemies) use Phaser containers
  • Enables dual-axis flipping for proper sprite orientation
  • Accurate projectile firing from mouth positions
  • Clean separation of visual and logical components

2. Event-Driven Architecture

  • Game scene emits events (damage, combo, stage transitions)
  • UIScene listens and updates HUD/panel
  • Clean separation between gameplay logic and UI rendering
  • Prevents tight coupling between systems

3. Dynamic Layout System

  • getLayoutConstants(width, height) calculates all positions
  • Returns percentages and ratios instead of fixed pixels
  • All scenes recalculate on resize events
  • Maintains proper spacing and minimum touch targets

4. Sprite-Based Visual Feedback

  • Animated GIFs for button states (Charging.gif, Ready.gif)
  • PNG countdown sprites (10s.png, 9s.png, ..., 1s.png)
  • Eliminates need for text labels
  • Creates clearer, more immediate feedback

💪 Challenges I Faced

Challenge 1: Scene Lifecycle Management

Problem: "Play Again" button caused blank screens and memory leaks.

Root Cause: Race conditions during scene transitions - new scene starting before old scene fully cleaned up.

Solution: Implemented atomic scene transitions:

// Shutdown current scene completely before starting new one
this.scene.stop('Game');
this.scene.stop('UIScene');
this.scene.start('MainMenu');

Learning: Phaser's scene lifecycle requires careful management. Always ensure complete cleanup before transitions.

Challenge 2: Button Interactivity After Restart

Problem: Charge button became unresponsive after restarting game.

Root Cause: Button scale factor tracking wasn't reset, causing input detection to fail.

Solution: Reset scale tracking in button initialization:

reset() {
  this.currentScaleFactor = 1.0;
  this.setScale(1.0);
  this.updateHitArea();
}

Learning: UI components need explicit reset methods when reused across game sessions.

Challenge 4: Responsive Layout Without Black Bars

Problem: Traditional scale modes (FIT, ENVELOP) created black bars or cropped content.

Solution: Custom responsive system with RESIZE mode:

  • Calculate all positions as percentages of viewport
  • Use geometry masks to prevent background bleeding
  • Recalculate layouts on resize events
  • Maintain minimum touch targets (96×96px)

Learning: True responsive design requires abandoning fixed coordinates entirely.

Challenge 5: Performance on Mobile Devices

Problem: Frame rate dropped below 30 FPS with many enemies on screen.

Solution: Multiple optimizations:

  • Object pooling for projectiles and enemies
  • Spatial partitioning (4×8 grid) for collision detection
  • Reduced animation updates for off-screen entities
  • Optimized tween usage to prevent conflicts

Learning: Mobile performance requires aggressive optimization. Profile early and often.

Challenge 6: Devvit Deployment Constraints

Problem: Initial build exceeded 4MB payload limit.

Solution: Asset optimization:

  • Compressed sprite sheets
  • Optimized background layers
  • Removed unused assets
  • Implemented lazy loading where possible

Learning: Platform constraints drive better optimization practices.

🎮 The Result

Flap N Fight is now a fully playable, production-ready game that:

✅ Runs smoothly at 60 FPS on all devices ✅ Adapts to any screen size without black bars ✅ Integrates seamlessly with Reddit's platform ✅ Tracks personal bests and global leaderboards ✅ Provides engaging, strategic gameplay with depth ✅ Offers social sharing via Reddit comments

Key Metrics

  • 3 progressive difficulty stages + endless mode
  • 10-layer parallax backgrounds for visual depth
  • Infinite combo system with no time limits
  • ~12 second Super Beam cycle (1s charge + 1s drain + 10s cooldown)
  • 60 FPS performance with 20+ entities on screen
  • 288×320px to 1920×1080+ responsive range

What Makes It Special

  1. Automatic charging system creates rhythm-based strategic gameplay
  2. Infinite combos reward both offense and defense equally
  3. Stationary turrets add tactical positioning layer
  4. True responsive design works everywhere without compromise
  5. Reddit-native experience with seamless platform integration

🚀 What's Next

Future enhancements could include:

  • Power-ups: Temporary shields, speed boosts, or weapon upgrades
  • Boss battles: Epic encounters at stage milestones
  • Daily challenges: Special modifiers for competitive play
  • Cosmetic unlocks: Skins for player character and projectiles
  • Multiplayer modes: Co-op or competitive gameplay

🙏 Acknowledgments

Built with:

  • Phaser 3 - Incredible 2D game engine
  • Devvit - Reddit's developer platform
  • Kiro AI - Spec-driven development workflow
  • Reddit Community - Playtesting and feedback

Play Flap N Fight on Reddit and see how long you can survive! 🎮🔥

Built with ❤️ for the Reddit gaming community

Built With

Share this project:

Updates