How it works
Code to add
What the code does
Source editor
game.jsCtrl or Command + Enter runs the editor.
Canvas preview
Live state and console
Build and verify
Prompt an AI coding assistant
Paste this prompt with the relevant function from your editor. Read the patch, apply one change, and run the checks before keeping it.
Follow-up prompt for debugging
Here is the function, the input I tried, the expected result and the actual values from the live state. Explain the first step where the behavior diverges. Propose one small patch and one regression test. Keep the other mechanics unchanged.
How the game loop connects to your code
The preview and exported game supply the Canvas, keyboard adapter and timing loop. The editor supplies the game state, rules and drawing. This is the core of that contract.
const game = reset();
const dt = 1 / 60;
// Once per simulation tick:
update(game, input, dt);
// After advancing the simulation:
ctx.clearRect(0, 0, 640, 320);
draw(ctx, game);In a project you build from scratch, use requestAnimationFrame to schedule drawing. Accumulate elapsed time and call update in fixed-size steps. The runtime in the HTML download is a working example you can inspect.
AI prompt for a new game
Help me build a small JavaScript Canvas game with no libraries. Start by asking me to describe one player action, one obstacle and one win condition. Give me a minimal HTML file with a Canvas and a game.js file with reset, update and draw functions. Show one working mechanic at a time. For every patch, name the file and insertion point, explain the changed code, and give me one manual playtest before adding anything else.
Take your game further
Download the current editor as JavaScript or a playable HTML file. The HTML includes the Canvas, controls and game loop.