Source Code

<div class="th-app">
  <div class="th-header">
    <h2>Tower of Hanoi</h2>
    <div class="stats">
      <div class="stat"><span class="stat-label">Moves</span><span class="stat-val" id="th-moves">0</span></div>
      <div class="stat"><span class="stat-label">Minimum</span><span class="stat-val" id="th-min">7</span></div>
    </div>
  </div>

  <p class="th-goal">Move the whole stack to the last peg. A larger disk can never sit on a smaller one.</p>

  <div class="th-board" id="th-board"></div>

  <p class="th-feedback" id="th-feedback">Click a peg to pick up its top disk, then click another peg to drop it.</p>

  <div class="th-actions">
    <label class="th-select-wrap">
      Disks
      <select id="th-disks">
        <option value="3">3</option>
        <option value="4" selected>4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </label>
    <button class="ghost-btn" id="th-reset">Reset</button>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Tower of Hanoi Game — Free HTML CSS JS Snippet

Tower of Hanoi Game · Games · Plain HTML, CSS & JS · Live preview

TagsGames

What's included

Features

Board state modeled as three stack arrays with disk sizes from bottom to top
Click-to-select, click-to-drop interaction — no drag-and-drop required, fully touch-friendly
A single comparison (moving > target) enforces the entire no-larger-on-smaller legality rule
Live move counter alongside the mathematically exact minimum-moves value via 2^n - 1
Configurable disk count from 3 to 6 via a dropdown, rebuilding the board and target on change
Proportional disk-width rendering keeps size differences readable at any disk count
Clear inline feedback messages for illegal moves, empty-peg clicks, and win state
Selected-peg highlighting shows exactly which disk is currently picked up

About this UI Snippet

Tower of Hanoi Game — Click-to-Move Peg Puzzle with 2^n - 1 Minimum-Moves Tracking

Screenshot of the Tower of Hanoi Game snippet rendered live

Tower of Hanoi is one of the most famous puzzles in computer science: move an entire stack of differently-sized disks from one peg to another, using a spare peg, moving one disk at a time and never placing a larger disk on top of a smaller one. It is the canonical example used to teach recursion, and its minimum solution length follows the exact formula 2^n - 1 for n disks. This snippet implements the puzzle as a click-to-select, click-to-drop interaction — no drag-and-drop required — along with move counting and a live minimum-moves reference for whatever disk count is selected.

Representing the board as three stacks

The board state lives in a pegs array of three arrays, pegs[0], pegs[1], pegs[2], each holding disk sizes from bottom to top. reset() populates the first peg with every size from numDisks down to 1, pushed in descending order so the largest disk ends up at index 0 (the visual bottom) and the smallest ends up last (the visual top) — matching how Array.push/pop naturally model a stack where the "top" is always the last element.

Click-to-select instead of drag-and-drop

onPegClick(p) implements a two-click interaction: the first click on a non-empty peg sets selectedPeg and highlights it; a second click on a *different* peg attempts the move, while clicking the *same* peg again deselects it. This avoids the complexity and touch-device inconsistency of implementing real drag-and-drop for stacked, differently-sized elements, while still feeling direct and immediate to use.

The one rule that defines the entire puzzle

Before completing a move, the code compares moving (the top disk size of the source peg) against target (the top disk size of the destination peg, or undefined if empty). The move is rejected with visible feedback if target !== undefined && moving > target — in plain terms, if the destination isn't empty and the disk being placed is bigger than what's already there. This single comparison is the entire legality rule of Tower of Hanoi; every other mechanic in the game exists just to support it.

Live minimum-moves reference via 2^n - 1

minMoves(n) returns Math.pow(2, n) - 1, the proven-optimal number of moves required to solve an n-disk Hanoi puzzle (3 disks: 7 moves, 4 disks: 15 moves, and so on, growing exponentially). This value is shown live in the header stats and again in the win message, so the player has a concrete, mathematically exact benchmark to compare their own move count against — turning an abstract recursive result into something tangible during play.

Disk-count difficulty and rendering

The disk-count <select> lets the player choose between 3 and 6 disks, calling reset() on change to rebuild the stacks, recompute the minimum-moves target, and clear all game state. Disk widths are rendered proportionally (30 + (size / numDisks) * 65 percent) so larger disk counts still render a clearly readable size gradient across the stack.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why moving > target is sufficient to enforce every rule of Tower of Hanoi, and how the pegs array of three stacks models the board state so cleanly with just push and pop. It's also a great candidate for extension — ask the assistant to implement the classic recursive solver and animate it move-by-move as an auto-solve demonstration, add a step-by-step hint system based on that same recursive algorithm, or add keyboard controls (arrow keys plus Enter) as an alternative to clicking pegs.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a Tower of Hanoi puzzle game in plain HTML, CSS, and JavaScript — no libraries, no drag-and-drop, click-to-select interaction only.

Requirements:
- Model the board as three stacks (arrays) of disk sizes, with the puzzle starting fully stacked in descending size order (largest at the bottom) on the first peg, and the goal being to move the entire stack onto the third peg.
- Clicking a peg with at least one disk selects it as the source and visually highlights it; clicking the same peg again deselects it; clicking a different peg attempts to move the top disk from the selected source peg onto it.
- A move must be rejected with a clear inline message if the destination peg is not empty and its top disk is smaller than the disk being moved — this is the one rule of the game and must be enforced by a simple comparison between the two top disk sizes.
- Track and display a live move counter that increments only on legal, completed moves.
- Compute and display the mathematically optimal minimum number of moves for the current number of disks using the formula 2^n - 1, and show it next to the live move counter for comparison.
- Add a disk-count selector (e.g. 3 to 6 disks) that rebuilds the board, resets the move counter, and recalculates the minimum-moves value when changed, plus a separate Reset button that restarts the current disk count without changing it.
- Detect the win condition the instant all disks are stacked correctly on the third peg, and show a message confirming the puzzle was solved along with how many moves it took compared to the optimal count.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Click a peg to pick up its top diskClicking a peg with disks on it sets selectedPeg and highlights the peg and its top disk.
  2. 2
    Click a different peg to drop itThe move only succeeds if the destination peg is empty or its top disk is larger than the one you are moving — enforced by the moving > target check.
  3. 3
    Move the whole stack to the last pegcheckWin() watches pegs[2].length === numDisks, so the puzzle is solved the instant every disk sits on the rightmost peg.
  4. 4
    Compare against the minimumThe header shows the proven-optimal move count from minMoves(n) = 2^n - 1 for the current disk count, so you can measure your own efficiency.
  5. 5
    Change the disk countUse the Disks dropdown to pick 3 to 6 disks — this calls reset() and recalculates the minimum-moves target automatically.
  6. 6
    Reset at any timeClick Reset to rebuild the starting stack on the first peg and clear the move counter without changing the disk count.

Real-world uses

Common Use Cases

Teaching recursion and algorithmic complexity
Tower of Hanoi is the textbook recursion example. Pair this playable version with a recursive solver walkthrough to make the 2^n - 1 growth rate concrete rather than abstract.
Logic puzzle collections
A structurally different puzzle from stacking or matching games — this one rewards planning several moves ahead, similar in spirit to the maze runner game but with a stack-based constraint instead of pathfinding.
Reference implementation of stack-based state
The pegs array of three stacks, manipulated purely with push and pop, is a clean, minimal example of modeling constrained state transitions in vanilla JavaScript.
Interview and CS-education demo widget
Embed this in a coding-interview prep site or CS course page as an interactive companion to a Tower of Hanoi recursion lesson.
Peg-and-stack visual pattern reference
The tapered disk stack rendering is reusable for any UI that needs to visualize ordered, size-constrained stacking, such as a priority queue or z-index layering demo.

Got questions?

Frequently Asked Questions

A move is illegal only if the destination peg is not empty and its top disk is smaller than the disk being moved. This is checked with a single comparison: target !== undefined && moving > target, where moving and target are the top disk sizes of the source and destination pegs.

minMoves(n) returns Math.pow(2, n) - 1, the proven-optimal solution length for an n-disk Tower of Hanoi puzzle. For 4 disks (the default), that is 15 moves; for 6 disks, 63 moves.

Click-to-select (pick a source peg, then a destination peg) is simpler to implement correctly across mouse and touch devices than drag-and-drop with stacked, variably-sized elements, while still feeling direct — click once to pick up, click again to place.

Use the Disks dropdown in the actions row. Selecting a new value calls reset(), which rebuilds all three peg stacks from scratch on the first peg and recalculates the minimum-moves target for that disk count.

Yes — implement the classic recursive Hanoi algorithm (move n-1 disks to the spare peg, move the largest disk to the target, move the n-1 disks from the spare peg to the target) and step through the resulting move list, calling the same peg-to-peg move logic used by onPegClick.

Clicking the currently selected peg a second time deselects it (selectedPeg is set back to null) instead of attempting an invalid same-peg move, and the feedback message confirms the selection was cleared.