HTML Game Code: Free Games You Can Copy, Paste and Play

Q: Can I copy and paste these games into my website?

Yes. Upload the .html file to your site and link to it, or show it inside a page with an . Our guide to embedding an HTML5 game in a website covers WordPress, Wix and Google Sites.

Every game here is complete HTML game code in one file: HTML, CSS and JavaScript, no libraries. Pick a game, press Copy code, save it as a .html file and open it in your browser, or paste it into the runner below. All of it is free to use under the MIT license, including in commercial projects.

Free games with full code

2048 Game in HTML5: Full JavaScript Code and Tutorial
Play a 2048 sliding-tile puzzle built with HTML5 canvas, then copy the free code and learn the slide and merge rules, animations, swipes and game over.
Beginner · 261 lines
Board Games in HTML5: Tic-Tac-Toe Code, Plus How Chess and Ludo Work
Play tic-tac-toe with an unbeatable AI on an HTML5 canvas, copy the free code, and learn how chess, ludo and other board games are structured.
Intermediate · 314 lines
Breakout (Brick Breaker) Game in HTML5: Full Code and Tutorial
Play a brick breaker made with HTML5 canvas, then copy the free code and learn the bouncing ball physics, brick collisions, levels and lives step by step.
Beginner · 252 lines
Card Game in HTML5: Golf Solitaire Code and Tutorial
Play a complete Golf Solitaire card game made with HTML5 canvas, then copy the free source code and learn the deck, shuffle, rules and tap controls.
Beginner · 259 lines
Slot Machine and Casino Games in HTML5: Free Code (No Real Money)
A free HTML5 slot machine that uses play credits only: copy the source code and learn how reels, paylines, paytables, RTP and fair randomness work.
Intermediate · 324 lines
Clicker and Idle Game in HTML5: Full Code and Tutorial
Play a complete HTML5 clicker and idle game, then copy the free code and learn how rising costs, passive income, big numbers and prestige work.
Beginner · 251 lines
Drag-and-Drop Game in HTML5: Code, Tutorial and Template
Play a drag-and-drop sorting game built on HTML5 canvas and Pointer Events, then copy the free code and learn how picking up, dropping and snap-back work.
Intermediate · 300 lines
Dress-Up Game in HTML5: Full Code and Step-by-Step Tutorial
Play a dress-up game made with HTML5 canvas, then copy the free code and learn how clothing slots, colours, layering and outfit rating work.
Beginner · 341 lines
Endless Runner in HTML5 Canvas: Full Runner Game Code
Play a free endless runner made with HTML5 canvas, then copy the code and learn how jumping, ducking, obstacle spawning and rising speed work.
Beginner · 293 lines
Conway's Game of Life in HTML5 Canvas: Full Code and How It Works
Run Conway's Game of Life on an HTML5 canvas: draw cells, play, pause and step, try famous patterns, then copy the free code and see how it works.
Beginner · 285 lines
Match-3 Game in HTML5: Gem-Matching Code and Tutorial
Play a complete match-3 game made with HTML5 canvas, then copy the free code and learn how swaps, matches, gravity, refills and cascades work.
Intermediate · 383 lines
Maze Game in HTML5 Canvas: Full Source Code and Tutorial
Play a random maze game made with HTML5 canvas, then copy the free source code and learn how maze generation, grid movement and the timer work.
Intermediate · 364 lines
Memory Match Game in HTML5: Full Code and Tutorial
Play a memory match game built on HTML5 canvas, then copy the free MIT code and learn how the shuffle, card flips, pair checks and scoring work.
Beginner · 265 lines
HTML5 Platformer Game: Full Code and Side-Scrolling Tutorial
Play a Mario-style platformer made with HTML5 canvas, then copy the free code and learn tile collision, jumping, scrolling and enemies step by step.
Advanced · 398 lines
Pong Game in HTML5 Canvas: Full JavaScript Code and Tutorial
Play a Pong-style game built with HTML5 canvas, then copy the free JavaScript and learn how the paddles, ball physics, computer player and scoring work.
Beginner · 251 lines
Puzzle Games in HTML5: Sliding, Jigsaw and Sudoku Code
Play a free sliding puzzle made with HTML5 canvas, copy the code and learn how to create puzzle games, with notes on jigsaw and sudoku versions.
Beginner · 243 lines
Quiz and Trivia Game in HTML5: Code and Template
Play a quiz and trivia game built with HTML5 and real buttons, then copy the free code and learn how the questions, timer, 50:50 and scoring work.
Beginner · 247 lines
Car Racing Game in HTML5 Canvas: Full Code and Tutorial
Play a pseudo-3D car racing game made with HTML5 canvas, then copy the free code and learn how the road, curves, hills, traffic and lap timer work.
Intermediate · 320 lines
Snake Game in HTML5 Canvas: Full Code and Tutorial
Play a complete Snake game made with HTML5 canvas and JavaScript, then copy the free code and learn how the loop, input, collisions and scoring work.
Beginner · 176 lines
Space Shooter in HTML5 Canvas: Full Code and Tutorial
Play a free space shooter made with HTML5 canvas and JavaScript, then learn how its waves, bullets, homing missiles and collisions work, step by step.
Intermediate · 357 lines
Sports Games in HTML5: Basketball Code, Plus Soccer, Golf and Pool
Play a basketball shooting game made with HTML5 canvas, copy the free source code, and learn the physics behind soccer, golf and pool games too.
Intermediate · 295 lines
Tetris-Style Game in HTML5: Full Code and Tutorial
Play a Tetris-style falling-blocks game made with HTML5 canvas, then copy the free code and learn rotation, wall kicks, line clears and lock delay.
Intermediate · 354 lines
Tower Defense in HTML5: Full Game Code and Tutorial
Play a complete tower defense game made with HTML5 canvas, then copy the free code and learn paths, waves, targeting, three tower types and upgrades.
Intermediate · 348 lines
Whack-a-Mole in HTML5: Full Game Code and Tutorial
Play a whack-a-mole game made with HTML5 canvas, then copy the free code and learn how the pop-up timing, rising speed, hit boxes and scoring work.
Beginner · 309 lines
Word Search and Word Games in HTML5: Code and Tutorial
Play a word search game built on HTML5 canvas, then copy the free source code and learn how words are placed, dragged, checked and turned into hangman.
Intermediate · 281 lines

HTML game code runner

Paste any single-file HTML game and press Run. It runs in a sandboxed frame with no access to this site.

HTML code

<!doctype html>


<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snake (HTML5 canvas)</title>
<style>
  html, body { margin: 0; height: 100%; background: #0b0f0c; color: #e8ffe8; font: 16px system-ui, sans-serif; overflow: hidden; touch-action: none; }
  canvas { display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
// ----- Settings -----
const COLS = 20, ROWS = 20;          // board size in cells
const START_SPEED = 7;               // moves per second at the start
const SPEED_STEP = 0.35;             // extra moves per second for each apple eaten
const COLORS = { board: "#101a12", grid: "#14231a", snake: "#19ef76", head: "#b6ffd2", apple: "#ff5c5c", text: "#e8ffe8" };

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let cell = 20;                       // pixel size of one cell, set by resize()
let offsetY = 0;                     // room at the top for the score

// ----- Sizing: fill the window, keep square cells, stay sharp on high-DPI screens -----
function resize() {
  const dpr = window.devicePixelRatio || 1;
  const hud = 40;
  cell = Math.max(8, Math.floor(Math.min(window.innerWidth / COLS, (window.innerHeight - hud) / ROWS)));
  const w = cell * COLS, h = cell * ROWS + hud;
  offsetY = hud;
  canvas.style.width = w + "px";
  canvas.style.height = h + "px";
  canvas.width = Math.round(w * dpr);
  canvas.height = Math.round(h * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  draw();
}

// ----- Game state -----
let snake, dir, nextDir, apple, score, best = 0, state, speed, timer = 0, last = 0;

// ----- One step of the simulation -----
function step() {
  dir = nextDir;
  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
  const hitsWall = head.x < 0 || head.y < 0 || head.x >= COLS || head.y >= ROWS;
  // The tail moves away this step, so only the rest of the body can be hit.
  const hitsSelf = snake.slice(0, -1).some((s) => s.x === head.x && s.y === head.y);
  if (hitsWall || hitsSelf) {
    state = "over";
    best = Math.max(best, score);
    return;
  }
  snake.unshift(head);
  if (head.x === apple.x && head.y === apple.y) {
    score++;
    speed += SPEED_STEP;
    if (snake.length === COLS * ROWS) { state = "over"; best = Math.max(best, score); return; }
    placeApple();
  } else {
    snake.pop();
  }
}

// ----- Drawing -----
function draw() {
  const w = cell * COLS;
  ctx.fillStyle = "#0b0f0c";
  ctx.fillRect(0, 0, w, offsetY);
  ctx.fillStyle = COLORS.board;
  ctx.fillRect(0, offsetY, w, cell * ROWS);
  ctx.fillStyle = COLORS.grid;
  for (let y = 0; y < ROWS; y++) for (let x = (y % 2); x < COLS; x += 2) ctx.fillRect(x * cell, offsetY + y * cell, cell, cell);

if (!snake) return;
  const pad = Math.max(1, Math.floor(cell * 0.08));
  ctx.fillStyle = COLORS.apple;
  ctx.beginPath();
  ctx.arc(apple.x * cell + cell / 2, offsetY + apple.y * cell + cell / 2, cell / 2 - pad, 0, Math.PI * 2);
  ctx.fill();
  snake.forEach((s, i) => {
    ctx.fillStyle = i === 0 ? COLORS.head : COLORS.snake;
    ctx.fillRect(s.x * cell + pad, offsetY + s.y * cell + pad, cell - pad * 2, cell - pad * 2);
  });

ctx.fillStyle = COLORS.text;
  ctx.font = `600 ${Math.min(20, Math.max(14, cell * 0.8))}px system-ui, sans-serif`;
  ctx.textBaseline = "middle";
  ctx.textAlign = "left";
  ctx.fillText(`Score ${score}`, 10, offsetY / 2);
  ctx.textAlign = "right";
  ctx.fillText(`Best ${best}`, w - 10, offsetY / 2);

if (state !== "playing") {
    ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
    ctx.fillRect(0, offsetY, w, cell * ROWS);
    ctx.fillStyle = COLORS.text;
    ctx.textAlign = "center";
    const cx = w / 2, cy = offsetY + (cell * ROWS) / 2;
    ctx.font = `700 ${Math.max(18, cell * 1.2)}px system-ui, sans-serif`;
    ctx.fillText(state === "over" ? "Game over" : "Snake", cx, cy - cell);
    ctx.font = `500 ${Math.max(13, cell * 0.7)}px system-ui, sans-serif`;
    ctx.fillText("Arrows / WASD or swipe to play", cx, cy + cell * 0.6);
  }
}

// ----- Main loop: fixed-rate steps, smooth drawing -----
function loop(now) {
  const dt = Math.min(0.25, (now - last) / 1000);
  last = now;
  if (state === "playing") {
    timer += dt;
    while (timer >= 1 / speed && state === "playing") { timer -= 1 / speed; step(); }
  }
  draw();
  requestAnimationFrame(loop);
}

// ----- Input: keyboard, swipe and tap -----
const KEYS = { ArrowUp: [0, -1], KeyW: [0, -1], ArrowDown: [0, 1], KeyS: [0, 1], ArrowLeft: [-1, 0], KeyA: [-1, 0], ArrowRight: [1, 0], KeyD: [1, 0] };
window.addEventListener("keydown", (e) => {
  const d = KEYS[e.code];
  if (d) { e.preventDefault(); turn(d[0], d[1]); }
  else if ((e.code === "Space" || e.code === "Enter") && state !== "playing") { e.preventDefault(); turn(dir.x, dir.y); }
});

window.addEventListener("resize", resize);
reset();
resize();
requestAnimationFrame((t) => { last = t; loop(t); });
</script>
</body>
</html>

Paste any single-file HTML game and press Run. It runs in a sandboxed frame with no access to this site.

How to use HTML game code

Copy-and-paste HTML game code works because a browser already contains everything a small game needs: a drawing surface (the <canvas> element), a clock (requestAnimationFrame) and input events for keys, mouse and touch. A single .html file can hold all three parts:

HTML: a <canvas> to draw on, plus a <title> and a viewport tag so it scales on phones.
CSS: a few lines that make the canvas fill the screen and stop the page from scrolling during play.
JavaScript: the game itself: state, a loop that updates and draws it, and listeners for input.

To run any game on this page, copy the code into a text editor, save it with a .html extension and double-click the file. No server, install or build step is involved, which is why these simple HTML5 game code examples make good starting points for learning, class projects and game jams.

HTML vs HTML5 game code

People search for "HTML game code" and "HTML5 game code" for the same thing. Strictly, HTML only describes the page; the game logic is JavaScript, and the drawing uses the HTML5 canvas API. When you see "HTML5 games", read "games that run in a browser without plugins", which replaced Flash games after 2020. Our guide What are HTML5 games? explains the technology in plain terms.

What makes these code examples different

Most free HTML games code you find online is either a fragment that needs other files, or a minified build nobody can read. Every game here follows the same rules:

Complete: one file, nothing to download or install, and it runs offline.
Readable: plain JavaScript with comments, usually 150 to 350 lines.
Works on phones: touch or swipe controls and a canvas that resizes with the screen.
Explained: each game has a tutorial that walks through the loop, input, collisions and drawing.
Tested: we play every game in a sandboxed frame at desktop and phone sizes before publishing it.
Free: MIT-licensed, so you can change it and ship it.

Simple games to start with

If you're new to game code, start with Snake and Pong: they teach the game loop, keyboard input and collision in under 200 lines. Breakout and the memory game add more objects and game states. The platformer, tower defense and match-3 examples show the patterns bigger games are built on, like gravity, pathing and grid logic.

Classic arcade ideas without their own page yet, like a Pac-Man-style maze chase, a fish-eating game or an avoider, use the same building blocks: start from the maze game or the space shooter and change the rules.

From free code to a finished game

Free game code teaches the core loop. A game you can sell, put on a portal or hand to a client needs much more: levels, original art and sound, saves, ad and portal SDK hooks, localisation, testing on real devices and documentation. That's what our catalog is for: every game ships as a buildable TypeScript project you can reskin and launch.

Browse HTML5 games with source code

To build your own from scratch instead, follow how to make an HTML5 game, or see the free and open-source HTML5 games collected from GitHub.

Frequently asked questions

Is this HTML game code really free?

Yes. Every game on this page is released under the MIT license. You can copy, change and use the code in personal and commercial projects as long as you keep the license line at the top of the file.

Can I copy and paste these games into my website?

Yes. Upload the .html file to your site and link to it, or show it inside a page with an <iframe>. Our guide to embedding an HTML5 game in a website covers WordPress, Wix and Google Sites.

How do I run HTML game code without saving a file?

Paste it into the code runner on this page and press Run. It runs in a sandboxed frame, so the code can't reach this site, your cookies or your storage.

Do I need to know JavaScript to use these games?

Not to play or host them. To change how a game plays, a little JavaScript helps: start with the settings at the top of each file (speeds, sizes, colours), then follow the tutorial on that game's page.

Can I download the game code as a zip?

Each game is a single file, so there's nothing to unzip: press Download .html on the game's page. For bigger projects with art, levels and tests, see our HTML5 games with full source code.