Build a Ludo Game from Scratch: Complete Single-File Implementation Guide

The Single-File Architecture

The entire game lives in a single index.html file under 350 lines. This is not a limitation — it is a deliberate design choice that lets you understand the complete game loop without navigating a complex project structure. The code is organized into three clearly separated sections: CSS for visual styling, HTML for the document structure and canvas element, and JavaScript for all game logic.

The rendering strategy uses an HTML5 Canvas 2D context rather than DOM elements for board squares. Canvas is the correct choice here because a Ludo board has 52+ track positions, 4 home quadrants, 16 home base slots, and 4 pieces that need pixel-perfect positioning. Manipulating individual DOM elements for each cell would be slow and error-prone. The canvas lets us redraw the entire board in a single requestAnimationFrame call.

The game state is centralized in a single game object that tracks the current player, dice value, game phase, piece positions, and win condition. This makes debugging straightforward — you can console.log(game) at any point and see the complete game snapshot.

Copy the file to index.html and open it in any modern browser — Chrome, Firefox, Safari, or Edge. No server, no build step, no npm install. For the complete source code, chat with us on WhatsApp.

Step-by-Step Implementation Breakdown

Step 1 — Board Geometry and Constants

The board uses a 15×15 grid where each cell is 40×40 pixels (600×600 total). The Ludo board consists of two distinct areas: the outer track (52 cells arranged in a clockwise loop) and the home quadrants (4 colored corners, each 7×7 cells). Every position on the board is stored as a coordinate pair [row, col] in the TRACK array. This coordinate-based approach means we never need to calculate pixel positions from logical positions — the TRACK array maps track index directly to canvas coordinates.

Safe positions are defined as a Set for O(1) lookup: [0, 8, 13, 21, 26, 34, 39, 47]. These are the cells where pieces cannot be captured. Entry points [0, 13, 26, 39] mark where each player's pieces enter the home column. Understanding this coordinate system is essential — every rendering and movement calculation depends on it.

Step 2 — Game State Object

The game object is the single source of truth for the entire game:

const game = {
  player: 0,       // 0=Red, 1=Green, 2=Yellow, 3=Blue
  dice: null,     // Current dice value (1-6)
  phase: 'roll',  // 'roll' | 'move' | 'next'
  sixes: 0,      // Consecutive sixes count
  done: false,   // Game over flag
  pieces: [0,1,2,3].map(p =>
    [0,1,2,3].map((_, i) => ({
      pid: p,        // Player ID (0-3)
      pos: -1,      // Track position (-1 = in base)
      fin: false   // Reached home
    }))
  )
};

Each piece's pos field uses a unified position system: -1 means the piece is in the home base, 0-51 represents positions on the outer track (relative to each player's entry point), and 52-56 represents the home column. Position 57 means the piece has reached the final home center. This unified system simplifies movement calculations — adding the dice value to pos works consistently across both the outer track and home column.

Step 3 — Rendering the Board

The draw() function clears the canvas and redraws everything from scratch on every state change. This is simple but sufficient for a game with discrete state changes. The drawing order is: board background → home quadrants with base circles → track cells → safe zone indicators → pieces. Home quadrants are drawn first as colored rectangles with globalAlpha: 0.15 for a subtle tint effect, then the four base circles are drawn on top at fixed offsets within each quadrant.

function getCoords(piece) {
  // Piece in home base — return base circle position
  if (piece.pos === -1) {
    const offsets = [[1,1],[1,4],[4,1],[4,4]];
    const [dr, dc] = offsets[piece.pid];
    const corners = [[0,0],[0,8],[8,0],[8,8]];
    const [cr, cc] = corners[piece.pid];
    return [(cr+dr)*CELL+CELL/2, (cc+dc)*CELL+CELL/2];
  }
  // Piece finished — center of the board
  if (piece.fin) return [300, 300];
  // Piece on track — convert unified position to track index
  const idx = (piece.pos + ENTRY[piece.pid]) % 52;
  const [r, c] = TRACK[idx];
  return [c*CELL+CELL/2, r*CELL+CELL/2];
}

Step 4 — Dice Rolling and Phase Transitions

The game uses a simple state machine with three phases: 'roll', 'move', and 'next'. In the 'roll' phase, clicking the dice button generates a random value 1–6 and transitions to either 'move' (if movable pieces exist) or 'next' (if no piece can move). The movable() function determines whether a specific piece can legally move: pieces in the base require a 6 to exit, and pieces on the track cannot exceed position 57 (the home). After rolling, the player selects a piece to move.

diceBtn.addEventListener('click', () => {
  if (game.phase !== 'roll') return;
  game.dice = Math.floor(Math.random() * 6) + 1;
  diceResultEl.textContent = `Rolled: ${game.dice}`;

  const canMove = game.pieces[game.player].filter(movable);
  game.phase = canMove.length ? 'move' : 'next';

  // No movable pieces — auto advance turn
  if (game.phase === 'next') {
    game.dice = null;
    nextTurn();
  }
  draw();
});

function movable(piece) {
  if (piece.fin || piece.pid !== game.player) return false;
  if (piece.pos === -1) return game.dice === 6;
  return piece.pos + game.dice <= 57;
}

Step 5 — Piece Movement and Canvas Click Detection

Piece selection uses pixel-distance detection. When the canvas is clicked, we calculate the mouse position relative to the canvas, then iterate through the current player's pieces. If the click falls within the piece's bounding circle (radius 20 pixels), that piece is selected. This approach works well because pieces are visually large enough to tap on both desktop and mobile screens.

canvas.addEventListener('click', e => {
  if (game.phase !== 'move') return;

  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;

  game.pieces[game.player].forEach((piece, i) => {
    if (!movable(piece)) return;
    const [px, py] = getCoords(piece);
    // Check if click is within piece radius (20px)
    if ((mx - px) ** 2 + (my - py) ** 2 <= 20 ** 2) {
      piece.pos += game.dice;
      // Check if piece reached home
      if (piece.pos >= 57) piece.fin = true;
      checkCapture(piece);
      checkWin(piece);
      // Six rule: roll again if dice is 6
      if (game.dice !== 6) nextTurn();
      else { game.phase = 'roll'; game.dice = null; }
      draw();
    }
  });
});

Step 6 — Capture and Collision Logic

The checkCapture() function handles the rule that landing on an opponent's piece sends it back to base — but only if the landing cell is not a safe zone. The capture detection converts each piece's unified pos to the corresponding track index and compares. Pieces in the home column (pos >= 52) cannot capture. The safe zone check uses the SAFE Set for fast lookup, preventing captures on protected cells.

Step 7 — Turn Management and Win Detection

The nextTurn() function cycles through players modulo 4. The win condition checks if all four pieces of a player have fin: true. The six rule — granting an extra roll when a 6 is rolled — is implemented by keeping the phase at 'roll' when dice === 6 instead of calling nextTurn(). This single rule dramatically affects game pacing and strategy.

Complete Source Code

<!DOCTYPE html><html><head>
<style>
  body { background: #0d1424; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: system-ui, sans-serif; }
  .game { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  canvas { border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); cursor: pointer; }
  #diceBtn { padding: 12px 32px; background: linear-gradient(135deg,#6366f1,#818cf8); color: #fff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
  #diceBtn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(99,102,241,0.4); }
  #diceBtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  #turnIndicator { color: #94a3b8; font-size: 0.95rem; }
  #diceResult { font-size: 2rem; font-weight: 700; color: #f1f5f9; min-height: 2.5rem; }
</style></head><body>
<div class="game">
  <div id="turnIndicator">Red's turn</div>
  <div id="diceResult"></div>
  <canvas id="board" width="600" height="600"></canvas>
  <button id="diceBtn">Roll Dice</button>
</div>
<script>
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const diceBtn = document.getElementById('diceBtn');
const turnEl = document.getElementById('turnIndicator');
const diceResultEl = document.getElementById('diceResult');
const CELL = 40, C = ['#dc2626','#16a34a','#eab308','#2563eb'];
const SAFE = new Set([0,8,13,21,26,34,39,47]);
const ENTRY = [0,13,26,39];

const TRACK = [
  [6,9],[6,10],[6,11],[6,12],[6,13],[6,14],
  [5,14],[4,14],[3,14],[2,14],[1,14],[0,14],
  [0,13],[0,12],[0,11],[0,10],[0,9],[0,8],
  [0,7],[1,7],[2,7],[3,7],[4,7],[5,7],
  [6,7],[7,7],[8,7],[8,6],[8,0],
  [8,13],[9,7],[10,7],[11,7],[12,7],[13,7],[14,7],
  [14,6],[14,0],[14,8],[14,9],[14,10],[14,11],[14,12],[14,13],[14,14],
  [13,14],[12,14],[11,14],[10,14],[9,14],[8,14],
  [8,13]
];

const game = {
  player: 0, dice: null, phase: 'roll', sixes: 0, done: false,
  pieces: [0,1,2,3].map(p => [0,1,2,3].map((_,i) => ({ pid: p, pos: -1, fin: false })))
};

function draw() {
  ctx.fillStyle = '#111827'; ctx.fillRect(0,0,600,600);
  [[0,0,7,7,0],[0,8,7,7,1],[8,0,7,7,2],[8,8,7,7,3]].forEach(([r,c,w,h,pid]) => {
    ctx.fillStyle = C[pid]; ctx.globalAlpha=0.15;
    ctx.fillRect(c*CELL, r*CELL, w*CELL, h*CELL); ctx.globalAlpha=1;
    drawBase(c, r, pid);
  });
  TRACK.forEach(([r,c],i) => {
    ctx.fillStyle = '#1f2937'; ctx.fillRect(c*CELL+1, r*CELL+1, CELL-2, CELL-2);
    if (SAFE.has(i)) { ctx.fillStyle='#f59e0b'; ctx.beginPath(); ctx.arc(c*CELL+CELL/2, r*CELL+CELL/2, 8, 0, Math.PI*2); ctx.fill(); }
  });
  game.pieces.flat().forEach(drawPiece);
}

function drawBase(cx, cy, pid) {
  [[1,1],[1,4],[4,1],[4,4]].forEach(([r,c]) => {
    const px = (cx+c)*CELL+CELL/2, py = (cy+r)*CELL+CELL/2;
    ctx.fillStyle=C[pid]; ctx.beginPath(); ctx.arc(px,py,12,0,Math.PI*2); ctx.fill();
    ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(px,py,5,0,Math.PI*2); ctx.fill();
  });
}

function getCoords(piece) {
  if (piece.pos === -1) {
    const offsets = [[1,1],[1,4],[4,1],[4,4]]; const [dr,dc] = offsets[piece.pid];
    const corners = [[0,0],[0,8],[8,0],[8,8]]; const [cr,cc] = corners[piece.pid];
    return [(cr+dr)*CELL+CELL/2, (cc+dc)*CELL+CELL/2];
  }
  if (piece.fin) return [300,300];
  const idx = (piece.pos + ENTRY[piece.pid]) % 52;
  const [r,c] = TRACK[idx];
  return [c*CELL+CELL/2, r*CELL+CELL/2];
}

function drawPiece(piece) {
  const [px, py] = getCoords(piece);
  ctx.fillStyle=C[piece.pid]; ctx.beginPath(); ctx.arc(px,py,14,0,Math.PI*2); ctx.fill();
  ctx.fillStyle='rgba(255,255,255,0.9)'; ctx.beginPath(); ctx.arc(px,py,6,0,Math.PI*2); ctx.fill();
}

function movable(piece) {
  if (piece.fin || piece.pid !== game.player) return false;
  if (piece.pos === -1) return game.dice === 6;
  return piece.pos + game.dice <= 57;
}

diceBtn.addEventListener('click', () => {
  if (game.phase !== 'roll') return;
  game.dice = Math.floor(Math.random()*6)+1;
  diceResultEl.textContent = `Rolled: ${game.dice}`;
  const canMove = game.pieces[game.player].filter(movable);
  game.phase = canMove.length ? 'move' : 'next';
  if (game.phase === 'next') { game.dice=null; nextTurn(); }
  draw();
});

canvas.addEventListener('click', e => {
  if (game.phase !== 'move') return;
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX-rect.left, my = e.clientY-rect.top;
  game.pieces[game.player].forEach((piece, i) => {
    if (!movable(piece)) return;
    const [px, py] = getCoords(piece);
    if ((mx-px)**2+(my-py)**2 <= 20**2) {
      piece.pos += game.dice;
      if (piece.pos >= 57) piece.fin = true;
      checkCapture(piece);
      if ([0,1,2,3].every(i => game.pieces[game.player][i].fin)) {
        turnEl.textContent = `Player ${game.player} WINS!`;
        game.done = true; draw(); return;
      }
      if (game.dice !== 6) nextTurn(); else { game.phase='roll'; game.dice=null; }
      draw();
    }
  });
});

function checkCapture(piece) {
  if (piece.pos < 0 || piece.pos > 51) return;
  const trackIdx = (piece.pos + ENTRY[piece.pid]) % 52;
  if (SAFE.has(trackIdx)) return;
  [0,1,2,3].filter(pid => pid !== piece.pid).forEach(pid => {
    game.pieces[pid].forEach(opp => {
      if (opp.fin || opp.pos < 0) return;
      const oppTrackIdx = (opp.pos + ENTRY[pid]) % 52;
      if (oppTrackIdx === trackIdx) opp.pos = -1;
    });
  });
}

function nextTurn() { game.player = (game.player + 1) % 4; turnEl.textContent = `Player ${['Red','Green','Yellow','Blue'][game.player]}'s turn`; }

draw();
</script></body></html>

File Structure Evolution: From Single File to Production

The single-file game is the starting point, not the final form. As your game grows in complexity, the file structure should evolve to match. Here is the recommended progression:

Stage 1: Single File

One index.html with embedded CSS and JS. All game logic in one file. Best for prototyping, learning, and sharing via a single URL.

index.html  # 350 lines

Stage 2: Multi-Module

Separate files for board rendering, game logic, and UI. Use ES modules with import/export. Keeps concerns separated without a bundler.

index.html
src/
  board.js    # Canvas rendering
  game.js     # State & rules
  ui.js       # DOM interactions

Stage 3: Bundled Build

Add Vite or esbuild for fast builds, TypeScript for type safety, and a proper project scaffold. Supports hot reload during development.

src/
  board.ts    # With types
  game.ts
  ui.ts
  types.ts
package.json
vite.config.ts

Stage 4: Multiplayer

Split into client and server. Client renders the UI, server authoritative game state. Socket.IO synchronizes moves. See the Socket.IO multiplayer guide.

client/
  src/
server/
  index.js   # Express + Socket.IO
  game.js    # Authoritative state

Extension Patterns

Add a Socket.IO Client

Converting the single-file game to multiplayer requires moving the authoritative game state to a server and using Socket.IO for real-time synchronization. The client-side game logic stays almost identical — you just replace direct function calls with socket event emissions.

// Add at the top of your script section
const socket = io('wss://your-server.com');
let myPlayerId = null;

// Receive player assignment from server
socket.on('player-assigned', (data) => {
  myPlayerId = data.playerId;
  game.player = data.playerId;
  turnEl.textContent = `You are ${['Red','Green','Yellow','Blue'][myPlayerId]}`;
  draw();
});

// Receive game state updates from server
socket.on('game-state', (serverGame) => {
  Object.assign(game, serverGame);
  draw();
});

// Emit move to server instead of updating locally
canvas.addEventListener('click', e => {
  if (game.phase !== 'move' || game.player !== myPlayerId) return;
  // ... click detection code ...
  // Emit move event to server instead of direct mutation
  socket.emit('move', { pieceIndex: i, playerId: myPlayerId });
});

// Dice rolling: ask server for value (prevents cheating)
diceBtn.addEventListener('click', () => {
  if (game.player !== myPlayerId) return;
  socket.emit('roll-dice', { playerId: myPlayerId });
});

socket.on('dice-result', (data) => {
  game.dice = data.value;
  game.phase = data.canMove ? 'move' : 'next';
  draw();
});

The key principle: the server generates dice values and validates all moves. The client is a "dumb terminal" that renders whatever the server tells it. This prevents players from cheating by injecting fake dice rolls. The Socket.IO multiplayer guide covers the full server-side implementation.

Add an AI Opponent

AI in Ludo is a classic decision-making problem. The challenge is that the game has imperfect information (you cannot see opponent pieces on the track) and stochastic outcomes (dice rolls). A simple but effective approach is greedy evaluation: score every legal move and pick the highest.

function scoreMove(piece, dice) {
  const newPos = piece.pos + dice;
  let score = 0;

  // 1. Check if this move finishes the piece (+50)
  if (newPos >= 57) score += 50;

  // 2. Check if this captures an opponent (+40)
  if (piece.pos >= 0 && newPos <= 51) {
    const trackIdx = (newPos + ENTRY[piece.pid]) % 52;
    if (!SAFE.has(trackIdx)) {
      const captured = [0,1,2,3]
        .filter(pid => pid !== piece.pid)
        .some(pid => game.pieces[pid].some(opp => {
          if (opp.pos < 0 || opp.fin) return false;
          return (opp.pos + ENTRY[pid]) % 52 === trackIdx;
        }));
      if (captured) score += 40;
    }
  }

  // 3. Prefer exiting base on 6 (+20)
  if (piece.pos === -1 && dice === 6) score += 20;

  // 4. Prefer moving pieces already on the track (+piece.pos)
  if (piece.pos > -1) score += piece.pos * 0.5;

  // 5. Small random factor to add variety
  score += Math.random() * 2;

  return score;
}

// AI turn executor
function executeAITurn() {
  const movablePieces = game.pieces[game.player].filter(movable);
  if (movablePieces.length === 0) { nextTurn(); return; }

  // Find the piece with the highest score
  let best = movablePieces[0], bestScore = -Infinity;
  movablePieces.forEach(piece => {
    const score = scoreMove(piece, game.dice);
    if (score > bestScore) { bestScore = score; best = piece; }
  });

  // Execute the best move
  best.pos += game.dice;
  if (best.pos >= 57) best.fin = true;
  checkCapture(best);
  if ([0,1,2,3].every(i => game.pieces[game.player][i].fin)) {
    game.done = true; draw(); return;
  }
  if (game.dice !== 6) nextTurn();
  else { game.phase = 'roll'; game.dice = null; }
  draw();
}

For more advanced AI, consider Monte Carlo Tree Search (MCTS) which explores many random game continuations to evaluate move quality. The Python bot guide explores minimax and MCTS approaches in detail.

Add localStorage Persistence

Adding game state persistence with localStorage lets players close the browser and resume later. This is useful for long multi-session games or saving match history.

const STORAGE_KEY = 'ludo_game_state';

function saveGame() {
  const state = {
    player: game.player,
    phase: game.phase,
    dice: game.dice,
    pieces: game.pieces,
    done: game.done,
    savedAt: Date.now()
  };
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}

function loadGame() {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (!saved) return false;
  try {
    const state = JSON.parse(saved);
    Object.assign(game, state);
    draw();
    return true;
  } catch (e) {
    console.error('Failed to load saved game:', e);
    return false;
  }
}

// Auto-save after every state change
const origNextTurn = nextTurn;
nextTurn = () => { origNextTurn(); saveGame(); };

const origDraw = draw;
draw = () => { origDraw(); saveGame(); };

// Prompt to resume on page load
loadGame();

Debugging Tips

Debugging a canvas-based game requires a different mindset than DOM-based debugging. Since there are no DOM nodes representing board cells or pieces, you rely on console logging and overlay text.

The most effective debugging technique is to dump the game object to the console after every action: console.log('State:', JSON.stringify(game)). This gives you a complete snapshot. For pixel-position issues, add a temporary overlay that draws piece IDs and track indices directly on the canvas.

Common bugs in this implementation include: off-by-one errors in the TRACK array (the Ludo track is not a perfect rectangle — it has irregular corners that require careful coordinate mapping), incorrect capture detection when pieces from different players share the same track cell but have different pos values, and the home column positions (52–56) that should not trigger captures.

When a piece appears to move to the wrong position, add console.log(idx, TRACK[idx]) inside getCoords() to trace the track index calculation. A mismatch between expected and actual indices usually indicates the ENTRY point offsets are wrong for that player.

Common Modifications with Code

Add Piece Animation

const anim = { active: false, piece: null, fromX: 0, fromY: 0, toX: 0, toY: 0, frame: 0, total: 20 };

function lerp(a, b, t) { return a + (b - a) * t; }

function animateMove(piece, fromX, fromY, toX, toY) {
  anim.active = true; anim.piece = piece;
  anim.fromX = fromX; anim.fromY = fromY; anim.toX = toX; anim.toY = toY;
  anim.frame = 0;
  requestAnimationFrame(animLoop);
}

function animLoop() {
  if (!anim.active) return;
  anim.frame++;
  const t = anim.frame / anim.total;
  const cx = lerp(anim.fromX, anim.toX, t), cy = lerp(anim.fromY, anim.toY, t);
  // Render board
  draw();
  // Draw animated piece at intermediate position
  ctx.fillStyle = C[anim.piece.pid];
  ctx.beginPath(); ctx.arc(cx, cy, 14, 0, Math.PI * 2); ctx.fill();
  if (anim.frame < anim.total) requestAnimationFrame(animLoop);
  else { anim.active = false; draw(); }
}

Add Sound Effects

const audioCtx = new AudioContext();

function playDiceSound() {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain); gain.connect(audioCtx.destination);
  osc.type = 'sine';
  osc.frequency.setValueAtTime(800, audioCtx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(200, audioCtx.currentTime + 0.3);
  gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
  osc.start(); osc.stop(audioCtx.currentTime + 0.3);
}

// Call playDiceSound() inside the dice button click handler

Frequently Asked Questions

The executeAITurn() function demonstrates a greedy AI approach: score every legal move using a weighted evaluation (captures = +40, finishing = +50, exiting base on 6 = +20, progress = +0.5×position) and pick the highest. Wrap AI execution in a setTimeout(() => executeAITurn(), 800) after checking game.player !== humanPlayerId. For stronger AI, consider Monte Carlo Tree Search which simulates thousands of random game completions. See the Python bot guide and tutorial for detailed AI strategy coverage.

Yes. The refactoring process involves three steps: (1) extract the game state object into a shared module used by both client and server, (2) replace Math.random() dice generation with server-authoritative values emitted via socket.emit('roll-dice'), and (3) route piece movement events through Socket.IO instead of direct function calls. The server becomes the single source of truth — clients only render what the server tells them. This eliminates all client-side cheating. The Socket.IO guide provides the complete server-side implementation with room management, turn validation, and reconnection handling.

The phase field implements a finite state machine that enforces the turn-based rules of Ludo. Players must roll the dice before moving any piece. The click handler's first line — if (game.phase !== 'move') return; — ensures that only valid interactions occur. When the dice is rolled, phase transitions to 'move' if at least one piece can legally move, or 'next' if none can. After a piece is moved, phase reverts to 'roll' on a 6 (extra turn) or calls nextTurn() otherwise. This pattern of state → transition → side effects is fundamental to turn-based game programming and prevents every class of illegal-move bugs.

A production game layer on top of this foundation includes: multiplayer synchronization via WebSocket with server-authoritative state, AI opponents using MCTS or reinforcement learning, account systems with JWT authentication and bcrypt password hashing, persistent game history via PostgreSQL, leaderboards with ranked matchmaking, anti-cheat validation (server-side dice generation, move validation, rate limiting), analytics integration (event tracking, A/B testing), monetization (in-app purchases, rewarded ads, battle passes), and sound design with spatial audio. This single-file game demonstrates the core loop — every production feature extends these concepts. The API tutorial covers integrating with a backend service for multiplayer.

The requestAnimationFrame animation loop captures the piece's from-position and to-position, then interpolates between them over 15–20 frames. During animation, set anim.active = true and block input by returning early from the click handler. Render the board normally, then draw the animated piece at the interpolated coordinates. When the animation completes, set anim.active = false and call draw() once more. The code block in the "Common Modifications" section above provides a complete drop-in implementation using linear interpolation (lerp).

Absolutely — this is a pure HTML file. Upload it to any static host: GitHub Pages, Netlify, Vercel, Cloudflare Pages, or AWS S3. No server-side code is needed for single-player mode. For multiplayer, deploy a Node.js/Socket.IO backend alongside the static frontend. The deployment guide covers full production hosting with CI/CD pipelines, SSL certificates, domain configuration, and multi-server scaling using Redis pub/sub.

The home column is handled by the unified position system. Pieces on the outer track use positions 0–51 (relative to each player's entry point). Once a piece enters the home column, positions 52–56 represent the five steps toward the center, and 57+ means the piece has finished. The movable() check piece.pos + game.dice <= 57 ensures pieces cannot overshoot home. The getCoords() function returns the board center (300, 300) for finished pieces. The TRACK array only contains outer-track coordinates — home column coordinates are calculated by finding the center point and stepping inward, which is why the unified position system must be handled carefully in the rendering code.

Want the Complete Working Ludo Game?

Get the full single-file implementation with animations, sound effects, and multiplayer-ready architecture. Chat with us for the complete source code and implementation support.

Chat on WhatsApp Ludo Tutorial →

Build a Ludo Game from Scratch: Complete Single-File Implementation