Chase's Game Dev Guide

How Sky Leap and Obby Rush actually work, and how to use Claude Code to build your own games while learning real programming along the way.

1. The setup

You need two terminal windows open in the project folder:

# Terminal 1: run the site (reloads automatically when files change)
cd ~/claude-code/chase-website
nvm use          # switches to Node 22, which this project needs
npm run dev      # open http://localhost:5173

# Terminal 2: talk to Claude
cd ~/claude-code/chase-website
claude

Useful things inside Claude Code:

2. How this project is organized

The site uses SvelteKit, a web framework where every folder in src/routes becomes a page:

src/routes/+page.svelte          → /        (home page)
src/routes/jump/+page.svelte     → /jump    (Sky Leap)
src/routes/obby/+page.svelte     → /obby    (Obby Rush)
src/routes/learn/chase/...       → /learn/chase (this page)

src/lib/game/engine.ts      the game engine: physics, collisions, drawing
src/lib/game/levels.ts      Sky Leap levels + color themes
src/lib/game/obbyLevels.ts  Obby Rush levels
src/lib/game/Game.svelte    menus, HUD and touch buttons around the canvas
src/lib/game/audio.ts       sound effects, generated with code (no audio files)

Both games share one engine and just pass in different level data. That's a core idea in programming: separate the rules from the content. New levels don't need new code.

3. How a game engine works

The game loop

Every game is a loop that runs about 60 times a second: read input → update the world → draw the frame. In engine.ts, look for frame() and step(). Physics runs at a fixed 120 steps per second, so jumps feel the same on a fast or slow computer.

Physics

The player has a position (x, y) and a velocity (vx, vy). Each step:

vy += GRAVITY * dt   // gravity pulls you down
x  += vx * dt        // move by your speed
y  += vy * dt

Jumping just sets vy to a big negative number (up is negative on screens). Try changing GRAVITY, JUMP_V or RUN at the top of engine.ts and see how the game feels.

Collision

Everything solid is a rectangle. The engine moves the player on X, pushes it out of anything it overlaps, then does the same on Y. That's called AABB collision (axis-aligned bounding boxes). Landing on top of something sets grounded = true, which is what allows the next jump.

Game feel tricks

• Coyote time: you can still jump for 0.1 s after running off a ledge.
• Jump buffering: pressing jump slightly before landing still counts.
• Variable jump height: letting go of jump early cuts your upward speed.
• Squash and stretch, particles, screen shake: these do nothing for gameplay but make it feel alive.

Drawing

Everything is drawn with code on an HTML <canvas>: gradients, circles and paths. There are no image files. Background layers move slower than the foreground (parallax), which creates depth.

4. Working with Claude like a pro

Write good prompts

Compare these two:

make a racing game

Make a top-down racing game at /race. Arrow keys steer a car around an oval track. 3 laps, show a lap timer, and add a card for it on the home page. Reuse the look of the existing games. Use plan mode first.

The second one says what, where, controls, win condition and how it connects to the site.

The workflow

1. Plan: for anything big, use plan mode and read the plan. Push back if something's off.
2. Build small: get a basic playable version first, then add polish.
3. Test: play it after every change. Check it on your phone too.
4. Describe bugs precisely: what you did, what you expected, what actually happened.
5. Commit: when something works, save it with git (below).

Actually learn from it

The fastest way to get good is to ask questions about the code Claude writes:

Explain how updatePlayer() in engine.ts handles landing on a moving platform.

Don't write it for me. Give me hints so I can add a double jump myself.

Review the change I made to obbyLevels.ts. Is there a better way?

5. Git: your undo button

Git saves snapshots of your project. This project is already on GitHub.

git status                 # what changed?
git diff                   # show the exact changes
git add -A
git commit -m "Add lava level"
git push                   # upload to GitHub

Or just tell Claude "commit and push this". If an experiment goes badly, Claude can help you go back to the last commit. That's why committing often matters.

6. Ideas to build next

7. Put it on the internet

Right now the site only runs on this computer. To share it with friends, ask Claude: "Help me deploy this site to Vercel" (or Netlify). Both have free plans, and you'll need the account owner's help to sign up.