POUNCE// README

Building a browser cat platformer with a hand-built tile level · play the game →

About Pounce

Pounce is a free browser side-scrolling platformer. The player picks one of four cats and bounds through a 240-tile hand-built level on the way to a cozy bed. Bonk red boxes for cat-food cans (grow bigger) or magic fish (unlock fishbone projectiles), stomp dogs and crawling kids, shoot or pounce the wasps that fly above. Vanilla HTML, CSS, and JavaScript on top of an HTML5 Canvas with Web Audio for both sound effects and a chiptune music loop. No build step, no framework, no runtime dependency beyond Google Fonts and Supabase for the global high-score leaderboard.

The project shares its DNA with cat-ski: same author, same plain-prose voice, same free deploy toolchain (GitHub → Vercel), same four cat palettes. Source is at github.com/ashtonmorrow/bros. The production URL is pounce.mike-lee.me.

Pounce sits alongside the other small browser experiments at mike-lee.me: cat-ski (a SkiFree tribute), pear, and go. They all share the same vanilla stack and ship-on-push deploy pattern.

How to play

The cat starts on a flat patch of grass. Walking right takes you through a 240-tile level structured in four acts: a tutorial, a development section with the first floating-platform challenges, a climax in the air across disconnected platforms, and a final stretch that recovers the pace before the goal staircase. The level ends at a cozy bed on a raised wooden plateau.

The cat starts small. Bonking a red ?-style box from below pops a cat-food can; eating it grows the cat to big, which absorbs one extra hit before death. Bonking another box while big pops a magic fish; eating it grants the shooter state and the X-key fishbone projectile that arcs, bounces off the floor up to four times, and one-shots any enemy on contact. Hits revert the cat all the way back to small, Mario-style.

Three obstacle animals oppose the cat. Dogs walk and patrol the ground, can be stomped from above or shot. Crawling children are shorter and slower; their hitbox is low enough that a normal jump usually clears them. Wasps fly in a sine wave and cannot be stomped from a regular jump — you have to either shoot them with a fishbone or come down on them with a down-pounce. Down-pounce one-shots anything, even wasps, and pays out 200 points instead of the standard 100 stomp bonus.

Score adds up across treats (10 each), yarn balls (50 each), pop-up cans (100), magic fish (500), stomps (100), pound-stomps (200), and projectile kills (200). Time bonus on the level-complete screen at 5 points per second remaining. A pit fall costs a life and respawns the cat at the start; the cat starts with three lives.

The top three high scores are global, backed by a Supabase table with a localStorage cache so the strip paints instantly even before the network has responded. If your final score cracks the top three, a five-character name prompt appears.

How the game is built

The game is split across four small JavaScript files plus an index.html entry point. There is no build step, no framework, and no runtime dependency. The constraint of staying on a vanilla stack is deliberate: it keeps the deploy pipeline as small as possible (a git push triggers an automatic Vercel rebuild that takes seconds), and it forces honest engineering decisions because no library is going to paper over a bad choice.

Designing the level

The level is 240 tiles wide and 15 tiles tall. Each tile is 32 × 32 pixels in the world, so the playable area is 7680 × 480. The horizontal camera scrolls to follow the cat and clamps at the world's left and right edges so the player can't walk off-screen behind the start or past the goal.

The level data is not a hand-typed ASCII grid. It is built programmatically in js/level.js through a thin builder API (ground, plat, ent) that writes features into a 2D char array. The final grid is exported as an array of 240-character strings for game.js to consume. This makes the level easier to reason about and to refactor when something needs to shift.

The structure follows the four-act kishōtenketsu framework popularised by Koichi Hayashida at Nintendo (intro → development → twist → conclusion), and each section is annotated with which of the six 2D platformer level design patterns it uses (Guidance, Foreshadowing, Safe Zone, Layering, Branching, Pace Breaking).

The cat's running jump can clear about five tiles flat (or six with a full variable-jump hold) and reach about five tiles vertically. Every pit in the level was sized to stay inside those bounds, with mid-air stepping platforms placed in any gap wider than five tiles. A static check verifies every entity has a solid tile underneath and no platform sits directly above another solid tile (a stacking trap that would have the cat clipping into a tile while standing on the one below).

The four cats

The player picks a cat on the title screen. Four palettes are available: SHADOW (black), WHISKERS (tabby), PATCHES (calico), and GINGER (orange). The drawing code is the same vector function used in cat-ski, parameterised by a palette object. A single set of geometry produces all four cats.

The cat is drawn front-facing rather than as a side-view sprite, so it doesn't flip when you change direction. That is a deliberate trade-off: the vector geometry doesn't survive a horizontal flip cleanly because markings and patches mirror with it. A front-facing chibi cat reads correctly to the player without the flip.

Working with Claude

The project was built with Claude as a coding collaborator, in roughly the same workflow used to build cat-ski: a long prompt at the start that lays out the constraints (vanilla stack, no copyrighted assets, original art, keep it small enough to swap in better art later), then iterating in short cycles where each cycle adds one feature, runs a verification step (node --check on every JS file plus a programmatic level sanity check), and ships.

The character picker is a useful example. The first version of the cat sprite was procedural pixel art drawn with fillRect. It read as "small orange thing" but not unmistakably as a cat. Rather than redo the pixel art, the fix was to share the existing vector drawCat function from cat-ski. Claude pulled the function and its four palettes from the cat-ski source, baked each palette × state combination into a small canvas at startup, and wired a swatch-and-arrow picker into the title screen. The change took one iteration because the constraint — "the cat needs to look like a cat at all four colours without forking the drawing code" — was the same constraint cat-ski had already solved.

How you can build this yourself

You don't need much. The toolchain Pounce uses is free or open source.

The single most useful constraint is to start without a framework. The surface area of vanilla HTML / Canvas / Web Audio is small enough to learn in an afternoon, and the resulting game is small enough that you can deploy a change in under a minute and reload to see it. If a feature starts asking for a framework, that's signal that the feature is too big for this kind of project; pick a smaller version of it.