Cat Box Battle

Cat Box Battle is a small web game where players place cats on a 4×4 grid, lock in their lineup, and run a battle simulation against the computer.

Comment

🐱 Cat Box Battle

Inspiration

In the world of cats, there is an ancient legend:
when cats of different sizes are placed inside a mysterious formation called the Cat Box, their strength and fate begin to change.

We were inspired by auto-battlers and spatial puzzle games, especially the idea that position itself can be strategy.

What Makes Our Game Special

Many popular strategy auto-battlers on Steam, such as inventory-based battle games, are powerful but device-heavy — they require installation, high attention, and long play sessions.

Cat Box Battle reimagines this genre as a lightweight, web-based experience:

  • No installation, no downloads — runs directly in the browser
  • Short sessions that can be finished in minutes
  • Simple rules with meaningful depth through placement
  • Designed to be playable anytime, anywhere

By stripping away complex controls and focusing on spatial decision-making, we turn a traditionally heavy desktop game into a casual yet strategic web game that players can enjoy instantly.

What It Does

Cat Box Battle is a strategy game where players help cats prepare for a trial.

  • Players place cats of different sizes on a 4×4 grid
  • Each cat has a unique ability and synergy
  • Once placement is locked in, the battle is fully automatic
  • Cats fight based on their arrangement and interactions
  • If the battle is not over, players receive new cats and continue building their lineup

The core mechanic is simple:
no commands, no micromanagement — only placement matters.

How We Built It

We built Cat Box Battle as a full-stack web game using modern frontend and backend technologies.

Tech Stack

  • Next.js 16 with App Router (full-stack)
  • React 19 for UI
  • TypeScript for strict type safety
  • Tailwind CSS for styling
  • Monolithic architecture (frontend + backend in one app)

Backend

  • API routes under app/api/game/*
  • Turn-based battle simulation
  • Grid placement validation (bounds checking & overlap detection)
  • In-memory game state management
  • Clear separation between API layer and business logic

Frontend

  • Grid-based cat placement UI
  • Pre-battle preview and result pages
  • Reusable components (grid, cat cards, HP bars)
  • Type-safe API client with error handling

Challenges We Faced

  • Grid placement logic
    Supporting cats of different sizes (from 1×1 to 2×2 and 1×3) while preventing overlap or out-of-bounds placement.

  • Balancing simplicity and strategy
    Designing cat abilities that are easy to understand but still encourage meaningful positioning choices.

  • Battle determinism
    Ensuring the same placement always produces the same result, making strategy readable and fair.

Accomplishments We’re Proud Of

  • A complete, playable game loop built within hackathon time
  • A clean and extensible backend battle simulation
  • A placement system that naturally creates strategy without complex controls
  • Strong thematic coherence between story, mechanics, and visuals

What’s Next

If we continue developing Cat Box Battle, we would like to:

  • Add visual polish (damage numbers, effects, animated battles)
  • Introduce an economy system and item-equipped cats
  • Expand the cat roster with new shapes and synergies
  • Improve balance, difficulty scaling, and progression
  • Support persistent storage and scalable backend (e.g., Redis)

Closing

Cat Box Battle is a game about preparation, space, and quiet choices.

You don’t control the fight.
You simply decide where each cat belongs —
and let the legend prove itself.

Built With

  • nextjs
Share this project:

Updates