Skills / Build a game
Build a game
Build a playable browser game and ship it at a URL. A real loop, input, state, collision or rules, a juice pass, and friends actually playing it. Use when they say "I want to make a game", bring a game idea, or want a project that is fun to show people.
Use this skill. Nothing to install.
Don't have an agent? · Raw file: skills/build-a-game.md
Watch the first two minutes
This is how a session goes, including the part everyone is afraid of. Click through it.
Scripted example of a real session.
I can't do art, and I don't own an engine
Neither is required. The game is rectangles and emoji until it's fun, and free assets (or your own drawings) only after, because tuning a boring game's art is wasted work. There is no engine to download and nothing to pay for: canvas and plain JavaScript carry the whole thing, and every one of these started exactly that way.
What you end up with
A game at a live URL with a full loop: start, play, fail, restart. The file below is where the real work shows, because every number in it was changed by a playtest.
// tuning lives here, named, one screen from the top
const PLAYER_SPEED = 260; // was 180: felt mushy
const FALL_SPEED = 120; // starting px/sec
const FALL_RAMP = 6; // +6 px/sec each second
const SPAWN_EVERY_MS = 700; // was 400: unfair start
const SHAKE_ON_HIT_PX = 5; // juice pass, week 2
const state = { screen: "title", score: 0, best: 0 };
every frame: things fall, player moves with arrows/touch, collision ends the run, score is seconds survived, restart without reloading.
fix: show "arrow keys to move" on the title screen. she sat there waiting for it to start.
- The comments are playtest history. "was 180: felt mushy" is what tuning actually looks like: feel something bad, change the number, feel again.
- Delta time is in the loop. The game runs the same speed on any machine, explained in two sentences when the first shape moves.
- The last fix came from watching a real player. The skill ends with you handing the URL to a friend and fixing whatever confused them. Games get good in that step.
Questions people actually ask
Do I need Unity, Godot, or Unreal?
No. A browser game needs one HTML file, one script, and the canvas API. That keeps every line readable and makes shipping trivial. If you want a library like Kaplay or Phaser, the free CDN build works, but it's your call to add one.
What about art and sound?
Rectangles and emoji until the game is fun, then free assets (Kenney.nl, your own drawings) if you want them. Sounds can be blips you record yourself. Nothing is purchased.
Will it work on phones?
The skill ends with a phone check. Either touch controls go in, or the game says plainly on screen that it needs a keyboard. Shipping a keyboard game honestly labeled beats shipping a broken touch experience.
My idea is a huge RPG. Can we build that?
Not as a first game, and the skill will say so. One mechanic, finished, with your theme on it. A clone with your twist that friends actually play beats an epic that never becomes playable. The sequel repo is where mechanic two lives.
How do people play it?
At a URL you text them. The first playable moment gets deployed (ship on GitHub covers the how), and you redeploy as it improves. Watching your first real player is a required step, because their confusion drives the final fixes.
Where to go from here
Hooked? These games need a backend, which is the next skill anyway:
Speedrun game with a real leaderboard
Turn-based game two browsers can play
A daily puzzle for your niche
Cash the game in:
Ship on GitHub: the URL friends get
Backend basics: scores that persist
Build your resume: it's a strong line
Ideas to use it on
- An arcade game with your theme on it — A one-screen arcade game on a canvas: one verb (dodge, catch, shoot, jump), a threat that speeds up the longer you survive, a score, and a death.
- An idle game that respects the player — An incremental game where a number goes up: pick a resource from your life (loaves baked, laps swum, posters printed) and let the player click for it, then buy generators that produce it automatically, then buy upgrades that multiply the generators.
- A daily puzzle over your niche's vocabulary — A wordle-like guessing game where every answer comes from the vocabulary of your niche: climbing holds, fishing lures, K-pop groups, chess openings, whatever your group chat already argues about.
- A turn-based game two browsers can play — A turn-based game (connect-four, dots-and-boxes, battleship, or a small card duel) that two people play from two different machines.
- A physics toy that turned into a game — Start with a toy: things on a canvas that fall, bounce, stack, or swing, fun to poke with a mouse before there are any rules.
- A realtime quiz battle for your actual friends — A live quiz in the kahoot shape, but the questions are about what your friend group actually knows: your inside jokes, your team's season, your school, your server's lore.
- A two-player versus game on one keyboard — Two friends, one keyboard: WASD versus arrow keys, first to five rounds takes the match.
- A speedrun game with a real leaderboard — One short, skill-heavy level (a platformer sprint, a maze, a precision mouse course, a typing gauntlet) timed to the millisecond, where finishing posts your time to a leaderboard that lives on a server.
Curious? Read the full skill — the exact instructions your agent gets
--- name: build-a-game category: code description: Build a playable browser game and ship it at a URL. A real loop, input, state, collision or rules, a juice pass, and friends actually playing it. Use when they say "I want to make a game", bring a game idea, or want a project that is fun to show people. --- # build-a-game Make a small browser game with someone, playable at a URL they can text to a friend. A game teaches the update loop, input handling, and state faster than any other project because every bug is visible and every fix is felt. Keep the design tiny and finish it. ## Ground rules - One mechanic, finished. Dodge the falling things, jump the gaps, match the pairs, type the words in time, outgrow the snake. They pick the fantasy (theme, character, what the dots represent); you hold the line on scope. A clone with their twist beats an original epic that never becomes playable. - Canvas and plain JavaScript by default: one HTML file, one script, `requestAnimationFrame`. A library like Kaplay or Phaser only if they ask for one, and then the free CDN build. No engine downloads, no paid assets; art is rectangles and emoji until the game is fun, and free assets (Kenney.nl, their own drawings) only after. - Fun before features. Playtest every few minutes; when something feels bad (too fast, unfair, mushy) tune the number then and there. Tuning constants live at the top of the file with names. - Deploy the first playable moment (ship-on-github if needed) and redeploy often. Friends playing an ugly early build is worth more than a polished build nobody has touched. ## The path 1. Choose the mechanic and say the loop aloud: every frame, what moves, what the player controls, what ends the run. Sketch the states: playing, dead, restart. 2. Something moves: canvas up, one shape animating via the frame loop. Explain delta time in two sentences and use it, so the game runs the same speed on any machine. 3. Player control: keyboard or touch moves their thing. Feel check: is moving around already slightly fun? If not, tune until it is. 4. Stakes: the collision or rule check, a fail state, a score, and restart without reloading the page. Now it is a game; deploy it. 5. Juice pass: score on screen, a little screen shake or flash on hit, a sound effect or two (their own recorded blips count), difficulty that ramps. Each addition playtested immediately. 6. Real playtest: they hand the URL to at least one friend and watch the first play in person or over chat. Confusion observed there (unclear controls, unfair start) drives the last round of fixes. Phone check: if input is keyboard-only, say so on screen. ## Done - A game at a live URL with a full loop: start, play, fail, restart - One mechanic that is actually fun for a minute, tuned by playtests - Score or progress visible; at least two pieces of juice - Played by someone other than them, with one fix made because of it - They can explain the frame loop and game state in their own words Then: build-resume, since a shipped game with playtest iterations is a strong line, or a second mechanic in a sequel repo if they are hooked.