Snake and Ladders

—

Click "Roll Dice" to start

:root { --bg: #f5f2ea; --board-edge: #2f3e46; --panel-bg: rgba(255,255,255,0.9); --accent: #ff6b6b; } html, body, #app { height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #f0f8ff 0%, #e8f6f6 100%); color: #222; } #app { display: grid; grid-template-columns: 1fr 300px; gap: 12px; padding: 12px; box-sizing: border-box; height: 100%; align-items: stretch; } canvas { width: 100%; height: 100%; background: var(--bg); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); display: block; } #ui { display: flex; flex-direction: column; gap: 12px; height: 100%; } #players { background: var(--panel-bg); padding: 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06) inset; flex: 1 1 auto; overflow-y: auto; } .player-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)); } .token-dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.12); flex: 0 0 24px; } .player-name { font-weight: 600; flex: 1 1 auto; } #controls { background: var(--panel-bg); padding: 12px; border-radius: 8px; display: flex; gap: 8px; align-items: center; justify-content: space-between; } #rollBtn { background: var(--accent); color: white; border: none; padding: 10px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(255,107,107,0.18); } #rollBtn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } #dice { background: white; padding: 8px 10px; border-radius: 8px; min-width: 46px; text-align: center; font-weight: 800; font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } #message { font-size: 13px; color: #333; flex: 1 1 auto; margin-left: 8px; } @media (max-width: 900px) { #app { grid-template-columns: 1fr; grid-auto-rows: 1fr auto; } #ui { flex-direction: row; align-items: center; gap: 8px; } #players { display: none; } } import Game from './game.js'; // Initialize game const canvas = document.getElementById('boardCanvas'); const rollBtn = document.getElementById('rollBtn'); const diceEl = document.getElementById('dice'); const messageEl = document.getElementById('message'); const playersContainer = document.getElementById('players'); const game = new Game({ canvas, rollBtn, diceEl, messageEl, playersContainer }); // Start game.start(); // Expose for debugging window.game = game; export default class Board { constructor(opts = {}) { this.rows = 10; this.cols = 10; this.padding = 18; this.snakesAndLadders = opts.snakesAndLadders || Board.defaultSnakesAndLadders(); this.bgColor = opts.bgColor || '#ffffff'; this.gridStroke = opts.gridStroke || '#2f3e46'; this.labelColor = opts.labelColor || '#0f172a'; this.squareColors = ['#fef3c7', '#fff7ed']; } static defaultSnakesAndLadders() { return [ // ladders (from -> to) { from: 4, to: 14, type: 'ladder' }, { from: 9, to: 31, type: 'ladder' }, { from: 21, to: 42, type: 'ladder' }, { from: 28, to: 84, type: 'ladder' }, { from: 36, to: 44, type: 'ladder' }, { from: 51, to: 67, type: 'ladder' }, { from: 71, to: 91, type: 'ladder' }, { from: 80, to: 100, type: 'ladder' }, // snakes (from -> to) { from: 17, to: 7, type: 'snake' }, { from: 62, to: 19, type: 'snake' }, { from: 54, to: 34, type: 'snake' }, { from: 64, to: 60, type: 'snake' }, { from: 87, to: 24, type: 'snake' }, { from: 93, to: 73, type: 'snake' }, { from: 95, to: 75, type: 'snake' }, { from: 98, to: 79, type: 'snake' } ]; } setupCanvasScaling(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.resize(); window.addEventListener('resize', () => this.resize()); } resize() { const canvas = this.canvas; const dpr = Math.max(1, window.devicePixelRatio || 1); const rect = canvas.getBoundingClientRect(); canvas.width = Math.floor(rect.width * dpr); canvas.height = Math.floor(rect.height * dpr); canvas.style.width = rect.width + 'px'; canvas.style.height = rect.height + 'px'; this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0); this.width = rect.width; this.height = rect.height; this.gridSize = Math.min(this.width, this.height) - this.padding * 2; this.squareSize = this.gridSize / this.rows; this.originX = (this.width - this.gridSize) / 2; this.originY = (this.height - this.gridSize) / 2; } draw() { const ctx = this.ctx; ctx.clearRect(0, 0, this.width, this.height); // board background ctx.fillStyle = this.bgColor; roundRect(ctx, this.originX - 6, this.originY - 6, this.gridSize + 12, this.gridSize + 12, 10); ctx.fill(); // grid squares for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const x = this.originX + col * this.squareSize; const y = this.originY + row * this.squareSize; const id = this.cellNumberAt(row, col); ctx.fillStyle = this.squareColors[(row + col) % this.squareColors.length]; ctx.fillRect(x, y, this.squareSize, this.squareSize); ctx.strokeStyle = this.gridStroke; ctx.lineWidth = 1; ctx.strokeRect(x + 0.5, y + 0.5, this.squareSize - 1, this.squareSize - 1); ctx.fillStyle = this.labelColor; ctx.font = Math.max(10, this.squareSize * 0.12) + 'px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText(id, x + 6, y + 6); } } // draw snakes and ladders this.snakesAndLadders.forEach(s => { const fromPos = this.cellCenter(s.from); const toPos = this.cellCenter(s.to); if (s.type === 'ladder') { drawLadder(ctx, fromPos, toPos, '#2b8a3e'); } else { drawSnake(ctx, fromPos, toPos, '#9b2c2c'); } }); } // cell numbering: bottom-left is 1, bottom-right 10, then serpentine cellNumberAt(row, col) { // row 0 at top here; we want numbering bottom-up const r = this.rows - 1 - row; const base = r * this.cols; if (r % 2 === 0) { return base + col + 1; } else { return base + (this.cols - col); } } // return center coordinate for a given cell number (1-100) cellCenter(n) { n = Math.max(1, Math.min(this.rows * this.cols, n)); const index = n - 1; const r = Math.floor(index / this.cols); // 0..9 from bottom const rowFromBottom = r; const colIndexInRow = index % this.cols; let col; if (rowFromBottom % 2 === 0) { col = colIndexInRow; } else { col = this.cols - 1 - colIndexInRow; } // translate to canvas coords (row from top) const rowFromTop = this.rows - 1 - rowFromBottom; const x = this.originX + col * this.squareSize + this.squareSize / 2; const y = this.originY + rowFromTop * this.squareSize + this.squareSize / 2; return { x, y }; } } // helpers function roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } function drawLadder(ctx, from, to, color) { const dx = to.x - from.x; const dy = to.y - from.y; const angle = Math.atan2(dy, dx); const len = Math.hypot(dx, dy); const gap = 8; const railOffset = 10; ctx.save(); ctx.translate(from.x, from.y); ctx.rotate(angle); ctx.lineCap = 'round'; // rails ctx.strokeStyle = color; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(0, -railOffset); ctx.lineTo(len, -railOffset); ctx.moveTo(0, railOffset); ctx.lineTo(len, railOffset); ctx.stroke(); // steps ctx.strokeStyle = '#e6f4ea'; ctx.lineWidth = 3; for (let pos = gap; pos < len; pos += gap) { ctx.beginPath(); ctx.moveTo(pos, -railOffset); ctx.lineTo(pos, railOffset); ctx.stroke(); } ctx.restore(); } function drawSnake(ctx, from, to, color) { ctx.save(); ctx.lineWidth = 8; ctx.strokeStyle = color; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; const cp1 = { x: from.x, y: (from.y + to.y) / 2 - 30 }; const cp2 = { x: to.x, y: (from.y + to.y) / 2 + 30 }; ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, to.x, to.y); ctx.stroke(); // head const headSize = 12; const angle = Math.atan2(to.y - cp2.y, to.x - cp2.x); ctx.translate(to.x, to.y); ctx.rotate(angle); ctx.beginPath(); ctx.fillStyle = color; ctx.moveTo(0, 0); ctx.lineTo(-headSize, -headSize / 2); ctx.lineTo(-headSize, headSize / 2); ctx.closePath(); ctx.fill(); ctx.restore(); } export default class Dice { constructor(el) { this.el = el; this.current = 1; this.animating = false; this._animId = null; } roll(duration = 700) { if (this.animating) return Promise.reject('Already rolling'); this.animating = true; const start = performance.now(); return new Promise(resolve => { const frame = (t) => { const p = (t - start) / duration; if (p >= 1) { const final = Math.floor(Math.random() * 6) + 1; this.current = final; this.render(); this.animating = false; resolve(final); return; } // flicker numbers this.current = Math.floor(Math.random() * 6) + 1; this.render(); this._animId = requestAnimationFrame(frame); }; this._animId = requestAnimationFrame(frame); }); } render() { if (!this.el) return; this.el.textContent = this.current; } stop() { if (this._animId) cancelAnimationFrame(this._animId); this.animating = false; } } import Board from './board.js'; import Dice from './dice.js'; export default class Game { constructor(opts = {}) { this.canvas = opts.canvas; this.rollBtn = opts.rollBtn; this.diceEl = opts.diceEl; this.messageEl = opts.messageEl; this.playersContainer = opts.playersContainer; this.board = new Board(); this.board.setupCanvasScaling(this.canvas); this.ctx = this.board.ctx; this.players = [ { name: 'Player 1', color: '#ff6b6b', pos: 1, id: 0 }, { name: 'Player 2', color: '#3b82f6', pos: 1, id: 1 } ]; this.currentPlayer = 0; this.isAnimating = false; this.raf = null; this.dice = new Dice(this.diceEl); this.bindEvents(); this.updatePlayersUI(); } start() { this.board.draw(); this.loop(); } bindEvents() { this.rollBtn.addEventListener('click', async () => { if (this.isAnimating) return; this.rollBtn.disabled = true; this.message(`Rolling for ${this.players[this.currentPlayer].name}...`); try { const roll = await this.dice.roll(); this.message(`${this.players[this.currentPlayer].name} rolled a ${roll}`); await this.moveCurrentPlayerBy(roll); } catch (err) { console.warn(err); } if (!this.isAnimating) { this.advanceTurn(); this.rollBtn.disabled = false; } }); window.addEventListener('resize', () => { this.board.resize(); this.board.draw(); this.drawTokens(); }); } message(text) { if (this.messageEl) this.messageEl.textContent = text; } updatePlayersUI() { const container = this.playersContainer; container.innerHTML = ''; this.players.forEach((p, idx) => { const row = document.createElement('div'); row.className = 'player-row'; const dot = document.createElement('div'); dot.className = 'token-dot'; dot.style.background = p.color; const name = document.createElement('div'); name.className = 'player-name'; name.textContent = `${p.name} — ${p.pos}`; row.appendChild(dot); row.appendChild(name); if (idx === this.currentPlayer) { row.style.outline = '2px solid rgba(0,0,0,0.05)'; row.style.boxShadow = 'inset 0 2px 6px rgba(0,0,0,0.04)'; } container.appendChild(row); }); } async moveCurrentPlayerBy(steps) { this.isAnimating = true; const player = this.players[this.currentPlayer]; let target = player.pos + steps; // bounce back if overshoot if (target > 100) { target = 100 - (target - 100); } await this.animateMove(player, player.pos, target); // check snake or ladder const sl = this.board.snakesAndLadders.find(s => s.from === player.pos); if (sl) { await this.sleep(220); await this.animateMove(player, player.pos, sl.to); this.message(`${player.name} hit a ${sl.type}!`); } // check win if (player.pos === 100) { this.message(`${player.name} wins!`); this.rollBtn.disabled = true; this.isAnimating = false; this.updatePlayersUI(); return; } this.isAnimating = false; this.updatePlayersUI(); } animateMove(player, from, to) { return new Promise(resolve => { const path = this.buildPath(from, to); const durationPerStep = 220; let idx = 0; const stepAdvance = () => { if (idx >= path.length) { player.pos = to; this.updatePlayersUI(); resolve(); return; } const next = path[idx]; this.animateTokenTo(player, next, durationPerStep).then(() => { player.pos = next; this.updatePlayersUI(); idx++; setTimeout(stepAdvance, 80); }); }; stepAdvance(); }); } buildPath(from, to) { const path = []; if (from === to) return path; const step = from < to ? 1 : -1; for (let p = from + step; step > 0 ? p <= to : p >= to; p += step) { path.push(p); } return path; } animateTokenTo(player, cellNumber, duration) { return new Promise(resolve => { const start = performance.now(); const startPos = this.board.cellCenter(player.pos); const endPos = this.board.cellCenter(cellNumber); const frame = (t) => { const p = Math.min(1, (t - start) / duration); const eased = easeOutCubic(p); const x = lerp(startPos.x, endPos.x, eased); const y = lerp(startPos.y, endPos.y, eased); this.board.draw(); this.drawTokens({ override: { [player.id]: { x, y } } }); if (p < 1) { requestAnimationFrame(frame); } else { resolve(); } }; requestAnimationFrame(frame); }); } drawTokens(options = {}) { const override = (options.override) || {}; const ctx = this.ctx; this.players.forEach((p, idx) => { const o = override[p.id]; let center; if (o) center = { x: o.x, y: o.y }; else center = this.board.cellCenter(p.pos); // offset multiple tokens in same cell const offset = idx * 10 - (this.players.length - 1) * 5; const radius = Math.max(10, this.board.squareSize * 0.16); ctx.beginPath(); ctx.arc(center.x + offset, center.y + offset, radius, 0, Math.PI * 2); ctx.fillStyle = p.color; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#ffffff'; ctx.stroke(); // small label ctx.fillStyle = '#fff'; ctx.font = `${Math.max(10, radius * 0.9)}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(idx + 1, center.x + offset, center.y + offset); }); } loop() { this.board.draw(); this.drawTokens(); this.raf = requestAnimationFrame(() => this.loop()); } advanceTurn() { this.currentPlayer = (this.currentPlayer + 1) % this.players.length; this.message(`Turn: ${this.players[this.currentPlayer].name}`); this.updatePlayersUI(); } sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } destroy() { cancelAnimationFrame(this.raf); window.removeEventListener('resize', this.board.resize); } } // utils function lerp(a, b, t) { return a + (b - a) * t; } function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }