A high-performance Fruit Ninja-style monster slicing game with deep RPG progression, built with Phaser 3, TypeScript, and Supabase.

Monster Slayer is a fast-paced arcade game where you slice through waves of monsters using your mouse or touch. Progress through 5 unique worlds, defeat epic bosses, upgrade your weapons, and compete for high scores on global leaderboards.

• 🎯 Intuitive Slash Mechanics - Fast-paced mouse/touch slicing with visual feedback
• 👹 Diverse Monster Roster - Zombies, Vampires, and Ghosts with unique behaviors
• 🏰 5 Thematic Worlds - Graveyard → Haunted Village → Vampire Castle → Ghost Realm → Hell Dimension
• ⚔️ 6 Unique Weapons - Each with 3 upgrade tiers and special elemental effects
• 📈 RPG Progression - Character upgrades, weapon tiers, and skill customization
• 🏆 Endless Mode - Compete for global high scores on Supabase leaderboards
• 💾 Cloud Saves - Automatic save synchronization across devices
• 📱 Responsive Design - Optimized for desktop and mobile browsers
• 🎨 Dark Gothic Theme - Immersive visual style with atmospheric effects
• ♿ Accessibility - High contrast mode, reduced motion, keyboard navigation

• Node.js 20.0.0 or higher
• npm 9.0.0 or higher (or yarn)
• Modern browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

# Clone the repository
git clone https://github.com/yourusername/monster-slayer.git
cd monster-slayer

# Install dependencies
npm install

# Start development server
npm run dev

The game will open at http://localhost:3000

# Build for production
npm run build

# Preview production build locally
npm run preview

Built files will be in the dist/ folder, ready for deployment.

Monster Slayer follows a clean, modular architecture built on Phaser 3:

┌─────────────────────────────────────────────────────────────┐
│                     Game Loop                            │
├─────────────────────────────────────────────────────────────┤
│                      Scenes                             │
│  ┌───────────┐  ┌───────────┐  ┌───────────┐     │
│  │ Main Menu │  │ Gameplay  │  │   Shop    │     │
│  └───────────┘  └───────────┘  └───────────┘     │
├─────────────────────────────────────────────────────────────┤
│                     Managers                            │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐          │
│  │   Audio  │ │   Save   │ │   Shop   │          │
│  └──────────┘ └──────────┘ └──────────┘          │
├─────────────────────────────────────────────────────────────┤
│                    Systems                              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐          │
│  │  Slash   │ │  Spawn   │ │  Combo   │          │
│  └──────────┘ └──────────┘ └──────────┘          │
├─────────────────────────────────────────────────────────────┤
│                    Entities                             │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐          │
│  │ Monsters  │ │  Bosses  │ │ Powerups │          │
│  └──────────┘ └──────────┘ └──────────┘          │
├─────────────────────────────────────────────────────────────┤
│                      Services                           │
│  ┌──────────────────────────────────┐                  │
│  │          Supabase               │                  │
│  │   (Leaderboard, Cloud Save)     │                  │
│  └──────────────────────────────────┘                  │
└─────────────────────────────────────────────────────────────┘

For detailed architecture, see Architecture Documentation.

monster-slayer/
├── docs/                      # Complete documentation
│   ├── ARCHITECTURE.md         # Technical architecture
│   ├── GAME_SPEC.md            # Game design document
│   ├── SETUP_GUIDE.md          # Development setup
│   ├── PERFORMANCE_GUIDE.md    # Performance optimization
│   └── ...
├── public/                    # Static assets
│   ├── assets/                # Game assets (sprites, audio, backgrounds)
│   └── offline.html           # PWA offline page
├── scripts/                   # Utility scripts
│   ├── linear/                # Linear integration
│   └── notion/                # Notion sync utilities
├── src/
│   ├── config/                # Game configuration
│   │   ├── constants.ts       # Game constants
│   │   ├── theme.ts          # Dark Gothic theme configuration
│   │   └── types.ts          # TypeScript type definitions
│   ├── data/                  # JSON game data
│   │   ├── levels.json        # Level configurations
│   │   ├── updates.json       # Update notes
│   │   ├── upgrades.json      # Upgrade definitions
│   │   └── weapons.json      # Weapon definitions
│   ├── entities/              # Game entities
│   │   ├── BaseEntity.ts     # Base entity class
│   │   ├── Monster.ts        # Monster entity
│   │   ├── Boss.ts           # Boss entity
│   │   └── ...
│   ├── managers/              # Singleton managers
│   │   ├── AudioManager.ts    # Audio playback management
│   │   ├── SaveManager.ts    # Save/load game data
│   │   ├── ShopManager.ts    # Shop transactions
│   │   ├── LevelManager.ts   # Level management
│   │   ├── ThemeManager.ts   # Theme management
│   │   └── ...
│   ├── scenes/                # Phaser scenes
│   │   ├── BaseScene.ts      # Base scene class
│   │   ├── BootScene.ts      # Boot and initialization
│   │   ├── MainMenuScene.ts  # Main menu
│   │   ├── GameplayScene.ts   # Core gameplay
│   │   └── ...
│   ├── services/              # External services
│   │   └── SupabaseService.ts
│   ├── systems/               # Game systems
│   │   ├── SlashSystem.ts    # Slash detection
│   │   ├── SpawnSystem.ts    # Monster spawning
│   │   ├── ComboSystem.ts    # Combo tracking
│   │   └── ...
│   ├── ui/                    # UI components
│   │   ├── DashboardCard.ts   # Main menu cards
│   │   ├── Button.ts         # Reusable button
│   │   ├── HUD.ts            # Heads-up display
│   │   └── ...
│   ├── utils/                 # Utility functions
│   │   ├── helpers.ts        # Helper functions
│   │   ├── TextureGenerator.ts
│   │   ├── ResponsiveUtils.ts
│   │   └── ...
│   └── main.ts                # Application entry point
├── supabase/                 # Database schema
│   └── schema.sql            # SQL schema
├── .eslintrc.js             # ESLint configuration
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite build configuration
└── package.json            # Project dependencies

• Architecture - Technical architecture and patterns
• Game Design Spec - Complete game design document
• Development Plan - Phase-by-phase development tasks
• Quick Reference - Common values and constants

• Setup Guide - Development environment setup
• Performance Guide - Optimization strategies
• Asset Requirements - Art and audio asset specifications
• Asset Tools Guide - Recommended asset creation tools
• Balance Guide - Game balance considerations

• Theme System - Dark Gothic theme implementation
• Theme Visual Guide - Visual design guidelines
• Architecture V1.0 - Architecture documentation

• Contributing - Contribution guidelines
• Code of Conduct - Community guidelines
• Deployment Guide - Deployment instructions
• Troubleshooting - Common issues and solutions
• API Reference - Complete API documentation

# Development
npm run dev                # Start development server with hot reload
npm run build              # Build for production (outputs to dist/)
npm run preview            # Preview production build locally

# Code Quality
npm run lint               # Run ESLint code linting
npm run lint:fix          # Fix ESLint issues automatically
npm run typecheck         # Run TypeScript type checking
npm run format            # Format code with Prettier

# Notion Integration (optional)
npm run notion:sync-docs      # Sync documentation to Notion
npm run notion:sync-game-data  # Sync game data to Notion
npm run notion:sync-todos     # Sync todos to Notion
npm run notion:sync-all       # Sync everything to Notion

# Linear Integration (optional)
npm run linear:start       # Start Linear MCP server
npm run linear:test        # Test Linear connection

The project maintains strict code quality standards:

• TypeScript - Full type safety, no any types except where necessary
• ESLint - Enforced code style and best practices
• Prettier - Consistent code formatting
• Husky - Pre-commit hooks for quality checks

Follow conventional commits:

feat: add new weapon system
fix: resolve slash detection on mobile
docs: update API documentation
refactor: improve performance of spawn system
test: add unit tests for combo system
style: format code with prettier
chore: update dependencies

1. Create feature branch:

   git checkout -b feature/amazing-feature

2. Make changes:

   • Follow coding standards
   • Write tests when applicable
   • Update documentation

3. Commit changes:

   git add .
   git commit -m "feat: add amazing feature"

4. Run quality checks:

   npm run lint
   npm run typecheck

5. Push and create PR:

   git push origin feature/amazing-feature

Copy .env.example to .env and configure:

cp .env.example .env

# Supabase (required for leaderboards and cloud saves)
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

# Sentry (error tracking - optional)
VITE_SENTRY_DSN=your-sentry-dsn-here

Main game configuration is in src/config/:

• constants.ts - Game constants, physics, gameplay values
• theme.ts - Dark Gothic theme colors, fonts, animations
• types.ts - TypeScript type definitions

Level data is in src/data/levels.json with structure:

{
  "1-1": {
    "world": 1,
    "level": 1,
    "name": "Graveyard Awakening",
    "duration": 60,
    "minKills": 20,
    "spawnRate": 1.5,
    "monsterWeights": {
      "zombie": 70,
      "vampire": 20,
      "ghost": 10
    },
    "starThresholds": [500, 1000, 1500]
  }
}

The game uses a Dark Gothic theme with:

• Colors - Deep crimson, obsidian black, blood red, antique gold
• Fonts - Arial Black (primary), Georgia (secondary)
• Effects - Glows, shadows, particle systems
• Accessibility - High contrast mode support

Theme configuration in src/config/theme.ts can be customized.

# Run unit tests
npm run test

# Run with coverage
npm run test:coverage

# Watch mode
npm run test:watch

# Run integration tests
npm run test:integration

# Run E2E tests
npm run test:e2e

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod

# Build
npm run build

# Deploy with gh-pages
npm install -g gh-pages
gh-pages -d dist

1. Build the project: npm run build
2. Upload dist/ folder to your web server
3. Configure server to serve SPA (all routes to index.html)

The game is a Progressive Web App with offline support:

• Offline HTML page included
• Service worker for offline caching
• Web App Manifest for installation

For PWA deployment, ensure HTTPS is enabled.

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

# Regenerate type checking
npm run typecheck

• Check asset paths in src/data/
• Ensure files exist in public/assets/
• Verify case sensitivity (Linux is case-sensitive)

• Reduce quality settings in Settings menu
• Close other browser tabs
• Update graphics drivers

For more troubleshooting, see Troubleshooting Guide.

We welcome contributions! See Contributing Guide for details.

• Bug fixes - Report and fix issues
• New features - Propose new game mechanics
• Performance - Optimize existing systems
• Documentation - Improve guides and references
• Assets - Create sprites, sounds, or music
• Testing - Write tests and report bugs

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add/update tests
5. Update documentation
6. Submit a pull request

All PRs must pass:

• ESLint checks
• TypeScript compilation
• Unit tests
• Code review

This project is licensed under the MIT License - see LICENSE file for details.

• Inspired by Fruit Ninja by Halfbrick Studios
• Built with Phaser 3
• Backend powered by Supabase
• Error tracking by Sentry
• Font: Arial Black and Georgia (system fonts)

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@monsterslayer.com

See Development Plan and Improvement Roadmap for upcoming features.

• ✅ Core gameplay mechanics
• ✅ 6 weapons with upgrades
• ✅ 5 character upgrades
• ✅ 25 levels + 5 bosses
• ✅ Endless mode
• ✅ Leaderboards
• ✅ Cloud saves
• ✅ Responsive design
• ✅ Dark Gothic theme
• ✅ Accessibility features

• 🔲 Multiplayer mode
• 🔲 Daily challenges
• 🔲 Achievement system
• 🔲 More worlds and bosses
• 🔲 Mini-games
• 🔲 Trading card collection

Made with ❤️ and lots of slicing

⬆ Back to Top