Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
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
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: browser-game-starter
  3. 3description: Scaffold a complete, playable single-file HTML5 canvas game from a one-line idea, with a game loop, keyboard and touch input, score, best score, game over, and restart. Use when the user says "make me a game", "build a browser game", "prototype this game idea", "a quick HTML5 game", "something playable on my phone", or wants a starting point for a game jam.
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# Browser game starter
  8. 8
  9. 9Takes 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.
  10. 10
  11. 11## Inputs
  12. 12
  13. 13Ask for anything missing, in one message:
  14. 14
  15. 151. **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?").
  16. 162. **Title** (default: make one up from the idea, two or three words).
  17. 173. **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).
  18. 18
  19. 19## Steps
  20. 20
  21. 211. **Copy the template** into the project:
  22. 22
  23. 23 ```bash
  24. 24 node scripts/new-game.mjs --title "Star Catcher" --idea "catch stars, dodge meteors" --out game/index.html
  25. 25 ```
  26. 26
  27. 27 The script refuses to overwrite an existing file. Ask the user before adding `--force`.
  28. 28 To show a finished example first, copy Block Dodge: `node scripts/new-game.mjs --from example --out game/dodge.html`.
  29. 29
  30. 302. **Read `game/index.html`** and shape it to the idea. The file has six labeled sections; change them in this order:
  31. 31 - `CONFIG`: speeds, sizes, spawn rate, difficulty ramp. Most ideas are 60% config.
  32. 32 - `STATE` and `reset()`: add any new fields (lives, combo, level, timer).
  33. 33 - `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).
  34. 34 - `UPDATE`: movement, spawning, collisions, scoring. Use `dt` (seconds) for every motion so speed is the same at 60 and 120 fps.
  35. 35 - `DRAW`: shapes and colors only (no image files), so the game stays one file.
  36. 36 - `LOOP`: leave as is. `dt` is capped at 0.05 so a background tab does not teleport things.
  37. 37
  38. 383. **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.
  39. 394. **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`.
  40. 405. **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.
  41. 41
  42. 42## Output
  43. 43
  44. 44```markdown
  45. 45Made game/index.html: "Star Catcher"
  46. 46- Goal: catch yellow stars, avoid red meteors. Speeds up with every point.
  47. 47- Controls: arrows or A/D, drag on touch screens. Space or tap to start and restart.
  48. 48- Tune it: CONFIG.fallSpeed (difficulty), CONFIG.hazardChance (how mean), CONFIG.spawnEvery (busyness).
  49. 49- Next ideas: lives instead of one-hit, a combo multiplier, a juice pass (shake, particles, sound).
  50. 50```
  51. 51
  52. 52## Guardrails
  53. 53
  54. 54- One HTML file, no external scripts, fonts, images, or network calls. If the user wants assets, explain the tradeoff and ask first.
  55. 55- Write only inside `game/`. Never overwrite a file without the user's yes.
  56. 56- Keep `localStorage` reads and writes in try/catch (private windows block it).
  57. 57- Small scope first: get the core loop fun before adding menus, levels, or sound. Offer those as next steps.
Sign in to comment on a line