Browser game starter

Name: Browser game starter
Author: @gameforge

@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
Installs: 0 installs
Likes: 0 likes
Clones: 0 clones

1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6<title>{{TITLE}}</title>
7<style>
8 html, body { margin: 0; height: 100%; background: #10131a; color: #f2f4f8; font-family: system-ui, sans-serif; }
9 body { display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
10 canvas { background: #1b2030; border-radius: 8px; max-width: 100vw; max-height: 100vh; }
11</style>
12</head>
13<body>
14
15<canvas id="game" width="480" height="720"></canvas>
16<script>
17"use strict";
18// ---------------------------------------------------------------------------
19// {{TITLE}}: single-file HTML5 canvas game made with browser-game-starter.
20// Sections: CONFIG, STATE, INPUT, UPDATE, DRAW, LOOP. Change CONFIG first.
21// ---------------------------------------------------------------------------
22
23// CONFIG: tune the feel here.
24const CONFIG = {
25 playerSpeed: 320, // pixels per second
26 playerSize: 36,
27 itemSize: 22,
28 spawnEvery: 0.9, // seconds between items at the start
29 minSpawnEvery: 0.35, // fastest spawn rate
30 fallSpeed: 180, // starting fall speed, pixels per second
31 speedUpPerPoint: 4, // fall speed added per point
32 hazardChance: 0.25, // share of items that end the run
33};
34
35const canvas = document.getElementById("game");
36const ctx = canvas.getContext("2d");
37const W = canvas.width, H = canvas.height;
38
39// STATE
40let state;
41function reset() {
42 state = {
43 mode: "title", // title | playing | over
44 player: { x: W / 2, y: H - 70 },
45 items: [],
46 score: 0,
47 spawnTimer: 0,
48 best: loadBest(),
49 };
50}
51function loadBest() { try { return Number(localStorage.getItem("best:{{TITLE}}")) || 0; } catch { return 0; } }
52function saveBest(v) { try { localStorage.setItem("best:{{TITLE}}", String(v)); } catch { /* storage blocked */ } }
53
54// INPUT: keyboard, mouse, and touch all drive the same targetX.
55const keys = new Set();
56let pointerX = null;
57addEventListener("keydown", (e) => {
58 keys.add(e.key);
59 if (e.key === " " || e.key === "Enter") startOrRestart();
60});
61addEventListener("keyup", (e) => keys.delete(e.key));
62function toCanvasX(clientX) {
63 const r = canvas.getBoundingClientRect();
64 return ((clientX - r.left) / r.width) * W;
65}
66canvas.addEventListener("pointerdown", (e) => { pointerX = toCanvasX(e.clientX); startOrRestart(); });
67canvas.addEventListener("pointermove", (e) => { if (e.buttons || e.pointerType === "touch") pointerX = toCanvasX(e.clientX); });
68canvas.addEventListener("pointerup", () => { pointerX = null; });
69
70function startOrRestart() {
71 if (state.mode === "playing") return;
72 const best = state.best;
73 reset();
74 state.best = best;
75 state.mode = "playing";
76}
77
78// UPDATE
79function update(dt) {
80 if (state.mode !== "playing") return;
81 const p = state.player;
82 let dir = 0;
83 if (keys.has("ArrowLeft") || keys.has("a")) dir -= 1;
84 if (keys.has("ArrowRight") || keys.has("d")) dir += 1;
85 if (pointerX !== null) dir = Math.sign(pointerX - p.x) * Math.min(1, Math.abs(pointerX - p.x) / 20);
86 p.x = Math.max(CONFIG.playerSize / 2, Math.min(W - CONFIG.playerSize / 2, p.x + dir * CONFIG.playerSpeed * dt));
87
88 state.spawnTimer -= dt;
89 if (state.spawnTimer <= 0) {
90 state.spawnTimer = Math.max(CONFIG.minSpawnEvery, CONFIG.spawnEvery - state.score * 0.01);
91 state.items.push({
92 x: CONFIG.itemSize + Math.random() * (W - CONFIG.itemSize * 2),
93 y: -CONFIG.itemSize,
94 hazard: Math.random() < CONFIG.hazardChance,
95 });
96 }
97 const speed = CONFIG.fallSpeed + state.score * CONFIG.speedUpPerPoint;
98 for (const it of state.items) it.y += speed * dt;
99
100 const reach = (CONFIG.playerSize + CONFIG.itemSize) / 2;
101 for (const it of state.items) {
102 if (Math.abs(it.x - p.x) < reach && Math.abs(it.y - p.y) < reach) {
103 it.dead = true;
104 if (it.hazard) return gameOver();
105 state.score += 1;
106 }
107 }
108 state.items = state.items.filter((it) => !it.dead && it.y < H + CONFIG.itemSize);
109}
110function gameOver() {
111 state.mode = "over";
112 if (state.score > state.best) { state.best = state.score; saveBest(state.best); }
113}
114
115// DRAW
116function draw() {
117 ctx.clearRect(0, 0, W, H);
118 for (const it of state.items) {
119 ctx.fillStyle = it.hazard ? "#ff5d73" : "#ffd166";
120 ctx.beginPath();
121 ctx.arc(it.x, it.y, CONFIG.itemSize / 2, 0, Math.PI * 2);
122 ctx.fill();
123 }
124 const p = state.player, s = CONFIG.playerSize;
125 ctx.fillStyle = "#4cc9f0";
126 ctx.fillRect(p.x - s / 2, p.y - s / 2, s, s);
127
128 ctx.fillStyle = "#f2f4f8";
129 ctx.font = "bold 24px system-ui, sans-serif";
130 ctx.textAlign = "left";
131 ctx.fillText(`Score ${state.score}`, 16, 36);
132 ctx.textAlign = "right";
133 ctx.fillText(`Best ${state.best}`, W - 16, 36);
134
135 if (state.mode !== "playing") {
136 ctx.fillStyle = "rgba(16, 19, 26, 0.75)";
137 ctx.fillRect(0, 0, W, H);
138 ctx.fillStyle = "#f2f4f8";
139 ctx.textAlign = "center";
140 ctx.font = "bold 40px system-ui, sans-serif";
141 ctx.fillText(state.mode === "title" ? "{{TITLE}}" : "Game over", W / 2, H / 2 - 30);
142 ctx.font = "20px system-ui, sans-serif";
143 ctx.fillText("Catch yellow, avoid red", W / 2, H / 2 + 10);
144 ctx.fillText("Tap, click, or press Space to play", W / 2, H / 2 + 44);
145 }
146}
147
148// LOOP: fixed-ish timestep, capped so a background tab does not explode dt.
149let last = performance.now();
150function frame(now) {
151 const dt = Math.min(0.05, (now - last) / 1000);
152 last = now;
153 update(dt);
154 draw();
155 requestAnimationFrame(frame);
156}
157reset();
158requestAnimationFrame(frame);
159</script>
160</body>
161</html>

Use in Claude

Claude Code

/kit add @gameforge/browser-game-starter

CLI

slashclone add @gameforge/browser-game-starter

Codex

slashclone add @gameforge/browser-game-starter --agent codex

Not enforced. Codex does not enforce the permissions this kit declares.

Cursor

slashclone add @gameforge/browser-game-starter --agent cursor

Not enforced. Cursor does not enforce the permissions this kit declares.

claude.ai and the desktop app

Download for Claude

Not enforced. claude.ai and the Claude desktop app do not enforce the permissions this kit declares. How to upload it

As a file

Download .kit

One file with everything in it. slashclone add ./file.kit checks it against this page before installing.

Review before installing

Set up SlashClone in Claude

Health

No keep-alive checks yet

Checks run weekly once someone keeps the kit installed.

Run reports are off

Safety

Scan passed
Not reviewed yet
Tests pass (3 of 3)

This kit reads ./game/**, writes to ./game/** and runs node scripts/new-game.mjs. Install it?

Full scan and review

Similar kits

Game design doc
@gameforge
Write a one-page game design doc from a rough idea: the hook, core loop, controls, the one rule that makes it interesting, scope cut into must, nice, and later, and a first-playable plan. Short enough that you actually read it again, opinionated enough to stop scope creep.
Game juice pass
@gameforge
Make a working game feel good: an ordered juice pass that adds screen shake, hit stop, particles, squash and stretch, easing, score popups, flashes, and tiny Web Audio sounds to the moments that matter, each behind a config value and a reduced-motion setting. Ships dependency-free canvas snippets.
Playtest feedback
@gameforge
Turn messy playtest notes into a ranked list of what to fix next. Tags each note (bug, confusion, frustration, boredom, delight, idea), tallies them with a script, ranks issues by how many testers hit them and how badly, and lists the moments players loved so you protect them.
Level designer
@gameforge
Design tile-grid game levels as plain JSON and check them with a validator: equal-width rows, known tiles, one start, an exit you can actually reach (keys and doors included), reachable coins, and a closed border. Writes a JSON report you can keep in CI.

Link

https://slashclone.dev/@gameforge/browser-game-starter

README badge

[![Install with SlashClone](https://slashclone.dev/badge/gameforge/browser-game-starter.svg)](https://slashclone.dev/@gameforge/browser-game-starter)

Embed

<iframe src="https://slashclone.dev/embed/gameforge/browser-game-starter" width="480" height="200" title="@gameforge/browser-game-starter" loading="lazy"></iframe>

Share card image

More from @gameforge

Playtest feedback
Turn messy playtest notes into a ranked list of what to fix next. Tags each note (bug, confusion, frustration, boredom, delight, idea), tallies them with a script, ranks issues by how many testers hit them and how badly, and lists the moments players loved so you protect them.
Level designer
Design tile-grid game levels as plain JSON and check them with a validator: equal-width rows, known tiles, one start, an exit you can actually reach (keys and doors included), reachable coins, and a closed border. Writes a JSON report you can keep in CI.
Game juice pass
Make a working game feel good: an ordered juice pass that adds screen shake, hit stop, particles, squash and stretch, easing, score popups, flashes, and tiny Web Audio sounds to the moments that matter, each behind a config value and a reduced-motion setting. Ships dependency-free canvas snippets.
Game design doc
Write a one-page game design doc from a rough idea: the hook, core loop, controls, the one rule that makes it interesting, scope cut into must, nice, and later, and a first-playable plan. Short enough that you actually read it again, opinionated enough to stop scope creep.

See all of @gameforge's kits

Report this kit