🎮ArcadeLab
📐May 15, 2026

What is a good single-file HTML game template?

💡

Quick answer

A good single-file HTML game template is one HTML document with three parts: a full-window canvas, a game loop built on requestAnimationFrame, and keyboard or pointer input handling — all inline, no build step. Copy the skeleton below, hand it to an AI assistant to extend, and publish the result as-is. ArcadeLab runs single-file HTML games exactly like this with no changes.

The single-file format is the most reliable way to build and share a browser game. There is no toolchain to break, nothing to install, and the finished file is also the thing you publish. A clean template removes the blank-page problem — and gives an AI assistant a known structure to extend instead of guessing one.

What makes a good single-file game template?

  • Everything inline — HTML, CSS, and JavaScript in one document
  • A canvas sized to the window, with a resize handler
  • A clear update / draw split inside a requestAnimationFrame loop
  • Input handled in one place, so behavior is easy to find and change
  • An ARCADELAB header so it is publish-ready from the first save

A minimal template you can copy

This is a complete, working game: a green square you move with the arrow keys. It is deliberately small so the structure stays visible. Copy it, save it as a .html file, and open it — it runs immediately.

<!--ARCADELAB
title: My Game
description: A single-file HTML game
emoji: 🎮
color: blue
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Game</title>
<style>
  html, body { margin: 0; height: 100%; background: #10131a; overflow: hidden; }
  canvas { display: block; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
  const canvas = document.getElementById("game");
  const ctx = canvas.getContext("2d");
  function resize() { canvas.width = innerWidth; canvas.height = innerHeight; }
  addEventListener("resize", resize);
  resize();

  const keys = {};
  addEventListener("keydown", (e) => { keys[e.key] = true; });
  addEventListener("keyup", (e) => { keys[e.key] = false; });

  const player = { x: 100, y: 100, size: 30, speed: 4 };

  function update() {
    if (keys["ArrowLeft"])  player.x -= player.speed;
    if (keys["ArrowRight"]) player.x += player.speed;
    if (keys["ArrowUp"])    player.y -= player.speed;
    if (keys["ArrowDown"])  player.y += player.speed;
  }

  function draw() {
    ctx.fillStyle = "#10131a";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#5ad6a0";
    ctx.fillRect(player.x, player.y, player.size, player.size);
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }
  loop();
</script>
</body>
</html>

How do I extend the template?

Every game grows out of the same three functions. Add state — enemies, score, a goal — as plain objects near the player. Change how it moves in update. Change how it looks in draw. To extend it with an AI assistant, paste the whole template and describe one change at a time: "add a coin the player can collect" or "make the square fall with gravity." Small, specific requests against a clear skeleton produce the most reliable results.

How do I add a library like Phaser or p5.js?

The template uses the plain canvas API, which is enough for a lot of games. When you want more — a physics engine, a scene system, sound — add the library name to the ARCADELAB header (for example, libraries: phaser) and ArcadeLab injects it from a CDN at render time. You do not write a script tag for it. If you would rather start from a library-first skeleton, the Phaser without build tools guide covers that path.

How do I publish the finished game?

Because the template already carries an ARCADELAB header, it is publish-ready. Open arcadelab.ai/publish, paste the whole file, and click publish. You get a permanent URL with no signup. For a fuller walkthrough of the format, see where to publish a single-file HTML game.

Build on the template, then publish it at arcadelab.ai/publish.

Ready to publish? Paste your HTML file and get a URL.

🚀Publish your thing

Related guides