Skip to content
SlashClone
Made by@gameforge

Browser game starter

@gameforge/browser-game-starter

Turn a one-line game idea into a complete, playable single-file HTML5 canvas game: game loop, keyboard and touch input, score, best score, game over, and restart. Ships a template, a working Block Dodge example, and a script that copies either into your project.

SkillOtherv1.0.0 (latest)Tested
Activity
New: be the first to try it

How this works

  1. It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
  2. While it works, it reads and changes files in the places it lists, nowhere else.
  3. It runs these commands on your computer: node scripts/new-game.mjs.
  4. Nothing runs until you choose to use it, and you can remove it any time.

SKILL.md

Browser game starter

Takes a one-line idea ("dodge falling blocks", "catch stars, avoid meteors") and leaves the user with one HTML file they can open in any browser, on desktop or phone, and play. No build step, no dependencies.

Inputs

Ask for anything missing, in one message:

  1. The idea in one line. If it is vague, propose a concrete version ("You move a paddle left and right; yellow things are points, red things end the run. OK?").
  2. Title (default: make one up from the idea, two or three words).
  3. Controls: the template does left and right movement with arrows, A and D, mouse drag, and touch drag. Ask only if the idea clearly needs something else (jump, aim, tap to flap).

Steps

  1. Copy the template into the project:

    node scripts/new-game.mjs --title "Star Catcher" --idea "catch stars, dodge meteors" --out game/index.html

    The script refuses to overwrite an existing file. Ask the user before adding --force. To show a finished example first, copy Block Dodge: node scripts/new-game.mjs --from example --out game/dodge.html.

  2. Read game/index.html and shape it to the idea. The file has six labeled sections; change them in this order:

    • CONFIG: speeds, sizes, spawn rate, difficulty ramp. Most ideas are 60% config.
    • STATE and reset(): add any new fields (lives, combo, level, timer).
    • INPUT: keep keyboard, pointer, and touch in sync. Every action needs a touch version (tap, drag, or an on-screen button drawn on the canvas).
    • UPDATE: movement, spawning, collisions, scoring. Use dt (seconds) for every motion so speed is the same at 60 and 120 fps.
    • DRAW: shapes and colors only (no image files), so the game stays one file.
    • LOOP: leave as is. dt is capped at 0.05 so a background tab does not teleport things.
  3. Keep the guarantees. The finished game must still have: a title screen, a way to lose, a score, a saved best score, restart with Space, Enter, click, or tap, and no console errors.
  4. Check it by reading: every new state field is reset in reset(), every key action has a touch equivalent, nothing uses a fixed per-frame step instead of dt.
  5. Tell the user how to play it: open game/index.html in a browser, or serve the folder with any static server to try it on a phone on the same Wi-Fi.

Output

Made game/index.html: "Star Catcher"
- Goal: catch yellow stars, avoid red meteors. Speeds up with every point.
- Controls: arrows or A/D, drag on touch screens. Space or tap to start and restart.
- Tune it: CONFIG.fallSpeed (difficulty), CONFIG.hazardChance (how mean), CONFIG.spawnEvery (busyness).
- Next ideas: lives instead of one-hit, a combo multiplier, a juice pass (shake, particles, sound).

Guardrails

  • One HTML file, no external scripts, fonts, images, or network calls. If the user wants assets, explain the tradeoff and ask first.
  • Write only inside game/. Never overwrite a file without the user's yes.
  • Keep localStorage reads and writes in try/catch (private windows block it).
  • Small scope first: get the core loop fun before adding menus, levels, or sound. Offer those as next steps.

README.md

Browser game starter

Give it a one-line idea and get back a complete game in a single HTML file: game loop, keyboard and touch controls, score, best score, game over, and restart. It opens in any browser and plays on a phone, with no build step and no dependencies.

Who it is for: game jammers, teachers, parents making something with their kids, and anyone who wants a playable prototype in minutes instead of an evening of boilerplate.

Example

You say:

Make me a game where you catch stars and dodge meteors. Call it Star Catcher.

You get game/index.html. Open it in a browser: yellow stars and red meteors fall, you slide left and right (arrows, A and D, or drag on a phone), stars score points, a meteor ends the run, and your best score is remembered. Claude also tells you which three numbers in CONFIG to change to make it easier or harder.

Want to see a finished one first? The kit ships examples/block-dodge.html, a dodge-the-falling-blocks game with screen shake and particles.

What it can access

  • Runs its own script, node scripts/new-game.mjs, which copies the template into your project.
  • Reads and writes files in game/ only.
  • No network, no env vars, no accounts.

Setup

None. Needs Node.js 18 or newer to run the copy script.

Files

  • README.md
  • SKILL.md
  • examples/block-dodge.html
  • kit.json
  • scripts/new-game.mjs
  • templates/game.html

Did it work?

0worked for them0did not work

Sign in to say whether it worked for you.

Nobody has said yet. Tried it? Tell the next person.