A lightweight, browser-based arena survival game where you control a cat fighting off waves of enemies. Built with vanilla JavaScript and HTML5 Canvas, featuring an upgrade system, multiple abilities, and progressive difficulty scaling.
Catto is a top-down survival game where you control a cat character defending against waves of increasingly difficult enemies. Collect experience points, level up, and choose from various ability upgrades to survive longer and achieve higher scores.
- Survival Mechanics: Fight off waves of enemies while managing health and resources
- Progressive Difficulty: Enemy strength and spawn rates increase over time
- Wave System: New enemy types unlock as you progress through waves
- Experience System: Gain XP from defeated enemies to level up
- Claw Orbit: Rotating claws that deal continuous damage
- Whisker Whip: Forward-projecting whip attacks
- Hairball Burst: Random-direction projectile attacks
- Paw Slam: Area-of-effect ground slam attacks
- Cat Nap: Healing ability with temporary invulnerability
- Street Rat: Fast, weak enemies (early game)
- Stray Dog: Medium health and damage (mid game)
- Cursed Crow: High health, threatening enemies (late game)
- Sprite-based Graphics: Custom cat, enemy, and ability sprites
- Responsive Controls: WASD and arrow key support
- High Score Persistence: Local storage for score tracking
- Smooth Animation: 60 FPS gameplay with requestAnimationFrame
- Fallback Rendering: Graceful degradation if sprites fail to load
- W / ↑: Move up
- S / ↓: Move down
- A / ←: Move left
- D / →: Move right
- Pause: Game automatically pauses during level-up selection
- Modern web browser with HTML5 Canvas support
- No external dependencies or build tools required
- Clone or download the project files
- Open
index.htmlin your web browser - Wait for sprites to load
- Click "Start Game" to begin playing
catto/
├── index.html # Main HTML file with game UI
├── game.js # Core game logic and mechanics
├── styles.css # Game styling and UI layout
└── assets/ # Game sprites and images
├── neko.png # Player cat sprite
├── dog.png # Dog enemy sprite
├── crow.png # Crow enemy sprite
├── rat.png # Rat enemy sprite
└── paw.png # Claw/paw ability sprite
- Gain XP by defeating enemies
- Level up to unlock ability upgrades
- Choose from 2 random upgrades per level
- XP requirements scale progressively
- Wave-based: New enemy types unlock every 25 seconds
- Level-based: Enemy stats increase with player level
- Time-based: Spawn rates and enemy caps increase over time
- Capped scaling: Maximum limits prevent impossible difficulty
- Automatic abilities: Claw orbit and timed abilities activate automatically
- Manual positioning: Strategic movement to avoid enemy contact
- Invulnerability frames: Brief protection after taking damage
- Collision detection: Precise hitbox calculations for all entities
- Canvas-based rendering: 2D context for smooth graphics
- Entity-Component pattern: Separate arrays for different game object types
- State management: Centralized game state with immutable-like updates
- Event-driven input: Keyboard event listeners for responsive controls
- Modern browsers: Chrome, Firefox, Safari, Edge
- Canvas support: Requires HTML5 Canvas API
- Local storage: High score persistence
- No polyfills: Pure vanilla JavaScript implementation
- Adjust enemy stats in
enemyTypesobject - Modify ability scaling in
abilitiesconfiguration - Change XP requirements in
levelUp()function - Tune spawn rates in
spawnEnemies()function
- New abilities: Extend the
abilitiesobject - New enemies: Add to
enemyTypesand sprite loading - New mechanics: Implement in game loop functions
- UI elements: Extend HTML and CSS as needed
- Sprite dependency: Game requires all sprite files to be present
- Fixed resolution: Canvas size is hardcoded (1200x800)
- Local-only: No online multiplayer or cloud saves
- Mobile support: Designed for desktop keyboard input
Enjoy playing Catto! 🐾
Survive as long as you can, level up your abilities, and beat your high score!