(() => { 'use strict'; const registry = window.ArcadeGames = window.ArcadeGames || {}; const W = 600, H = 360; const clamp = (v, min, max) => Math.max(min, Math.min(max, v)); const rand = (min, max) => min + Math.random() * (max - min); const round = (ctx, x, y, w, h, r, color) => { ctx.fillStyle = color; ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(x, y, w, h, r); else ctx.rect(x, y, w, h); ctx.fill(); }; function shell(container, options, config) { const opts = options || {}; const root = document.createElement('div'); root.className = 'arc-shell'; root.style.setProperty('--arc-accent', config.accent); root.innerHTML = `

Ready when you are

${config.title}

Your best score stays on this device.

${config.help}

`; container.replaceChildren(root); const canvas = root.querySelector('canvas'); const ctx = canvas.getContext('2d'); const overlay = root.querySelector('.arc-overlay'); const startButton = root.querySelector('.arc-start'); const cleanups = []; let frame = 0, previous = 0, destroyed = false; const h = { root, canvas, ctx, controls: root.querySelector('.arc-controls'), running: false, paused: false, listen(target, event, handler, config) { target.addEventListener(event, handler, config); cleanups.push(() => target.removeEventListener(event, handler, config)); }, score(value) { if (opts.onScore) opts.onScore(value); }, status(value) { if (opts.onStatus) opts.onStatus(value); }, sound(value) { if (opts.sound) opts.sound(value); }, hud(left, right) { root.querySelector('.arc-hud-left').textContent = left; root.querySelector('.arc-hud-right').textContent = right; }, show(title, description, button, kicker) { root.querySelector('.arc-kicker').textContent = kicker || 'One more round?'; root.querySelector('h3').textContent = title; overlay.querySelector('p').textContent = description; startButton.textContent = button || 'Play again ↗'; overlay.hidden = false; }, begin() { h.running = true; h.paused = false; overlay.hidden = true; canvas.focus({ preventScroll: true }); h.status('Playing'); }, finish(title, description, won) { h.running = false; h.show(title, description, 'Play again ↗', won ? 'Nicely done' : 'Good game'); h.status(won ? 'You won!' : 'Game over'); h.sound(won ? 'win' : 'hit'); }, launch(update, draw) { function tick(now) { if (destroyed) return; const dt = previous ? Math.min((now - previous) / 1000, .04) : 0; previous = now; if (h.running && !h.paused && !document.hidden) update(dt); draw(); frame = requestAnimationFrame(tick); } frame = requestAnimationFrame(tick); }, point(event) { const r = canvas.getBoundingClientRect(); return { x: (event.clientX - r.left) * W / r.width, y: (event.clientY - r.top) * H / r.height }; }, lifecycle(start, resetKeys) { return { pause() { h.paused = true; if (resetKeys) resetKeys(); h.status('Paused'); }, resume() { h.paused = false; h.status(h.running ? 'Playing' : 'Ready'); }, restart() { if (resetKeys) resetKeys(); start(); }, destroy() { destroyed = true; cancelAnimationFrame(frame); cleanups.forEach(fn => fn()); root.remove(); } }; } }; overlay.querySelector('p').textContent = config.description; h.listen(startButton, 'click', () => { h.sound('click'); h.onStart(); }); h.status('Ready'); return h; } function dpad(h, change) { h.controls.className = 'arc-controls arc-pad'; h.controls.innerHTML = ''; h.controls.querySelectorAll('button').forEach(button => h.listen(button, 'pointerdown', event => { event.preventDefault(); if (h.running && !h.paused) change(button.dataset.dir); })); } function axisControls(h, keys) { h.controls.className = 'arc-controls arc-horizontal'; h.controls.innerHTML = ''; h.controls.querySelectorAll('button').forEach(button => { const dir = button.dataset.dir; h.listen(button, 'pointerdown', event => { event.preventDefault(); if (h.running && !h.paused) { keys[dir] = true; button.setPointerCapture(event.pointerId); } }); const release = () => { keys[dir] = false; }; h.listen(button, 'pointerup', release); h.listen(button, 'pointercancel', release); h.listen(button, 'lostpointercapture', release); }); } function background(ctx, grid) { ctx.fillStyle = '#12111e'; ctx.fillRect(0, 0, W, H); if (grid) { ctx.strokeStyle = '#ffffff06'; ctx.lineWidth = 1; ctx.beginPath(); for (let x = 0; x <= W; x += grid) { ctx.moveTo(x + .5, 0); ctx.lineTo(x + .5, H); } for (let y = 0; y <= H; y += grid) { ctx.moveTo(0, y + .5); ctx.lineTo(W, y + .5); } ctx.stroke(); } } registry.snake = { mount(container, options) { const h = shell(container, options, { title: 'Snake', accent: '#9bf0cf', description: 'A little snack. A longer snake. Collect fruit and keep your tail out of trouble.', help: 'Arrow keys or W A S D to turn.
On touch, swipe the board or use the arrows.' }); const size = 24, cols = 25, rows = 15; const vectors = { up: { x: 0, y: -1 }, down: { x: 0, y: 1 }, left: { x: -1, y: 0 }, right: { x: 1, y: 0 } }; let snake, direction, queue, food, score, elapsed, pulse = 0; function nextFood() { const vacant = []; for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) { if (!snake.some(s => s.x === x && s.y === y)) vacant.push({ x, y }); } return vacant.length ? vacant[Math.floor(Math.random() * vacant.length)] : null; } function reset() { snake = [{ x: 8, y: 7 }, { x: 7, y: 7 }, { x: 6, y: 7 }, { x: 5, y: 7 }]; direction = vectors.right; queue = []; score = 0; elapsed = 0; food = { x: 17, y: 7 }; h.score(0); h.hud('EAT · GROW · REPEAT', '0 snacks'); } function start() { reset(); h.begin(); } function turn(name) { const next = vectors[name], last = queue.length ? queue[queue.length - 1] : direction; if (queue.length < 2 && (next.x !== last.x || next.y !== last.y) && !(next.x === -last.x && next.y === -last.y)) queue.push(next); } const keymap = { ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right', w: 'up', s: 'down', a: 'left', d: 'right' }; h.listen(window, 'keydown', event => { const key = keymap[event.key] || keymap[event.key.toLowerCase()]; if (key && h.running && !h.paused && !event.ctrlKey && !event.metaKey) { event.preventDefault(); turn(key); } }); dpad(h, turn); let touchOrigin = null; h.listen(h.canvas, 'pointerdown', event => { touchOrigin = h.point(event); h.canvas.setPointerCapture(event.pointerId); }); h.listen(h.canvas, 'pointermove', event => { if (!touchOrigin || !h.running || h.paused) return; const p = h.point(event), dx = p.x - touchOrigin.x, dy = p.y - touchOrigin.y; if (Math.max(Math.abs(dx), Math.abs(dy)) > 16) { turn(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up')); touchOrigin = p; } }); h.listen(h.canvas, 'pointerup', () => { touchOrigin = null; }); h.listen(h.canvas, 'pointercancel', () => { touchOrigin = null; }); function update(dt) { elapsed += dt; pulse += dt; const interval = Math.max(.07, .15 - score * .00035); while (elapsed >= interval && h.running) { elapsed -= interval; if (queue.length) direction = queue.shift(); const next = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; const eats = food && next.x === food.x && next.y === food.y; const body = eats ? snake : snake.slice(0, -1); if (next.x < 0 || next.x >= cols || next.y < 0 || next.y >= rows || body.some(s => s.x === next.x && s.y === next.y)) { h.finish('A little tangled.', `You collected ${score / 10} ${score === 10 ? 'snack' : 'snacks'} for ${score} points. Ready for another bite?`); return; } snake.unshift(next); if (eats) { score += 10; food = nextFood(); h.score(score); h.sound('point'); h.hud('EAT · GROW · REPEAT', `${score / 10} ${score === 10 ? 'snack' : 'snacks'}`); if (!food) h.finish('The whole board!', `A perfect snake. You earned ${score} points.`, true); } else snake.pop(); } } function draw() { const c = h.ctx; background(c, size); if (food) { const fx = food.x * size + size / 2, fy = food.y * size + size / 2; c.fillStyle = '#ff987c1b'; c.beginPath(); c.arc(fx, fy, 15 + Math.sin(pulse * 4) * 2, 0, Math.PI * 2); c.fill(); round(c, fx - 7, fy - 6, 14, 14, 5, '#ff987c'); c.strokeStyle = '#c7faac'; c.lineWidth = 2; c.beginPath(); c.moveTo(fx, fy - 6); c.quadraticCurveTo(fx, fy - 12, fx + 5, fy - 11); c.stroke(); } snake.slice().reverse().forEach((s, i, reversed) => { const head = i === reversed.length - 1; round(c, s.x * size + 2, s.y * size + 2, size - 4, size - 4, head ? 7 : 5, head ? '#c7ffe7' : '#8ce2bd'); if (head) { const cx = s.x * size + 12, cy = s.y * size + 12; const px = -direction.y, py = direction.x; c.fillStyle = '#16291f'; [-1, 1].forEach(sign => { c.beginPath(); c.arc(cx + direction.x * 4 + px * 4 * sign, cy + direction.y * 4 + py * 4 * sign, 1.8, 0, Math.PI * 2); c.fill(); }); } }); } reset(); h.onStart = start; h.launch(update, draw); return h.lifecycle(start, () => { touchOrigin = null; queue = []; }); } }; registry.breaker = { mount(container, options) { const h = shell(container, options, { title: 'Brick Breaker', accent: '#c3a6ff', description: 'Keep the ball alive. Clear the bricks. Find your rhythm.', help: '← → or A D to move.
Move your mouse or drag the paddle on touch.' }); const keys = { left: false, right: false }; let paddle, ball, bricks, lives, score, level, serve, particles; const colors = ['#c3a6ff', '#ff90b3', '#ffa780', '#e4ee93', '#91dfcb']; function createBricks() { bricks = []; for (let row = 0; row < 5; row++) for (let col = 0; col < 10; col++) { bricks.push({ x: 28 + col * 55, y: 38 + row * 25, w: 49, h: 18, color: colors[row], alive: true }); } } function newBall() { paddle = { x: 250, y: 326, w: 100, h: 10 }; ball = { x: 300, y: 312, r: 6, vx: 130 + level * 10, vy: -210 - level * 18, trail: [] }; serve = 1; } function hud() { h.hud(`LEVEL ${level} · ${bricks.filter(b => b.alive).length} BRICKS LEFT`, `${lives} ${lives === 1 ? 'life' : 'lives'}`); } function reset() { keys.left = keys.right = false; score = 0; level = 1; lives = 3; particles = []; createBricks(); newBall(); h.score(0); hud(); } function start() { reset(); h.begin(); } h.listen(window, 'keydown', event => { if (!h.running || h.paused || event.ctrlKey || event.metaKey) return; const key = event.key.toLowerCase(); if (key === 'arrowleft' || key === 'a') { keys.left = true; event.preventDefault(); } if (key === 'arrowright' || key === 'd') { keys.right = true; event.preventDefault(); } }); h.listen(window, 'keyup', event => { const key = event.key.toLowerCase(); if (key === 'arrowleft' || key === 'a') keys.left = false; if (key === 'arrowright' || key === 'd') keys.right = false; }); h.listen(window, 'blur', () => { keys.left = keys.right = false; }); axisControls(h, keys); let dragging = false; const pointer = event => { if (!h.running || h.paused) return; if (event.pointerType === 'mouse' || dragging) paddle.x = clamp(h.point(event).x - paddle.w / 2, 6, W - paddle.w - 6); }; h.listen(h.canvas, 'pointerdown', event => { dragging = true; h.canvas.setPointerCapture(event.pointerId); pointer(event); }); h.listen(h.canvas, 'pointermove', pointer); h.listen(h.canvas, 'pointerup', () => { dragging = false; }); h.listen(h.canvas, 'pointercancel', () => { dragging = false; }); function burst(x, y, color) { for (let i = 0; i < 9; i++) particles.push({ x, y, vx: rand(-80, 80), vy: rand(-85, 65), life: .45, color }); } function update(dt) { paddle.x = clamp(paddle.x + (Number(keys.right) - Number(keys.left)) * 420 * dt, 6, W - paddle.w - 6); particles.forEach(p => { p.x += p.vx * dt; p.y += p.vy * dt; p.life -= dt; }); particles = particles.filter(p => p.life > 0); if (serve > 0) { serve -= dt; ball.x = paddle.x + paddle.w / 2; ball.y = paddle.y - 10; return; } ball.trail.unshift({ x: ball.x, y: ball.y }); if (ball.trail.length > 9) ball.trail.pop(); const steps = Math.max(1, Math.ceil(Math.hypot(ball.vx, ball.vy) * dt / 4)); const step = dt / steps; for (let i = 0; i < steps; i++) { const oldX = ball.x, oldY = ball.y; ball.x += ball.vx * step; ball.y += ball.vy * step; if (ball.x - ball.r < 0) { ball.x = ball.r; ball.vx = Math.abs(ball.vx); } if (ball.x + ball.r > W) { ball.x = W - ball.r; ball.vx = -Math.abs(ball.vx); } if (ball.y - ball.r < 0) { ball.y = ball.r; ball.vy = Math.abs(ball.vy); } if (ball.vy > 0 && oldY + ball.r <= paddle.y + 3 && ball.y + ball.r >= paddle.y && ball.x + ball.r >= paddle.x && ball.x - ball.r <= paddle.x + paddle.w) { const offset = clamp((ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2), -1, 1); const speed = Math.min(430, Math.hypot(ball.vx, ball.vy) + 2); const angle = offset * Math.PI / 3; ball.vx = speed * Math.sin(angle); ball.vy = -speed * Math.cos(angle); ball.y = paddle.y - ball.r; h.sound('click'); } for (const brick of bricks) { if (!brick.alive) continue; const nearestX = clamp(ball.x, brick.x, brick.x + brick.w), nearestY = clamp(ball.y, brick.y, brick.y + brick.h); if ((ball.x - nearestX) ** 2 + (ball.y - nearestY) ** 2 < ball.r ** 2) { brick.alive = false; if (oldY + ball.r <= brick.y || oldY - ball.r >= brick.y + brick.h) ball.vy *= -1; else if (oldX + ball.r <= brick.x || oldX - ball.r >= brick.x + brick.w) ball.vx *= -1; else ball.vy *= -1; ball.x = oldX; ball.y = oldY; score += 10 * level; h.score(score); h.sound('point'); burst(brick.x + brick.w / 2, brick.y + brick.h / 2, brick.color); hud(); break; } } if (ball.y - ball.r > H) { lives--; hud(); if (!lives) h.finish('That was a good run.', `${score} points across ${level} ${level === 1 ? 'level' : 'levels'}. There are more bricks with your name on them.`); else { h.sound('hit'); newBall(); } return; } } if (bricks.every(b => !b.alive)) { level++; createBricks(); newBall(); h.sound('win'); hud(); } } function draw() { const c = h.ctx; background(c); c.fillStyle = '#ffffff04'; for (let x = 20; x < W; x += 24) for (let y = 18; y < H; y += 24) c.fillRect(x, y, 2, 2); bricks.forEach(b => { if (!b.alive) return; round(c, b.x, b.y + 3, b.w, b.h, 4, '#0005'); round(c, b.x, b.y, b.w, b.h, 4, b.color); round(c, b.x + 4, b.y + 3, b.w - 8, 2, 1, '#ffffff30'); }); particles.forEach(p => { c.globalAlpha = Math.max(0, p.life / .45); round(c, p.x, p.y, 4, 4, 1, p.color); }); c.globalAlpha = 1; ball.trail.forEach((p, i) => { c.globalAlpha = (1 - i / 9) * .18; c.fillStyle = '#c3a6ff'; c.beginPath(); c.arc(p.x, p.y, ball.r * (1 - i / 13), 0, Math.PI * 2); c.fill(); }); c.globalAlpha = 1; round(c, paddle.x - 3, paddle.y - 3, paddle.w + 6, paddle.h + 6, 8, '#c3a6ff15'); round(c, paddle.x, paddle.y, paddle.w, paddle.h, 6, '#c3a6ff'); c.fillStyle = '#fff5ef'; c.beginPath(); c.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2); c.fill(); if (serve > 0 && h.running) { c.fillStyle = '#aaa3c5'; c.font = '12px system-ui'; c.textAlign = 'center'; c.fillText('Get ready…', W / 2, H - 70); } } reset(); h.onStart = start; h.launch(update, draw); return h.lifecycle(start, () => { keys.left = keys.right = false; dragging = false; }); } }; registry.orbit = { mount(container, options) { const h = shell(container, options, { title: 'Orbit Dodge', accent: '#ffad80', description: 'A tiny ship. A big universe. Dodge asteroids and collect the little stars.', help: '← → or A D to steer.
Move your mouse or drag your ship on touch.' }); const keys = { left: false, right: false }; const stars = Array.from({ length: 64 }, () => ({ x: rand(0, W), y: rand(0, H), r: rand(.5, 1.8), speed: rand(15, 45), alpha: rand(.15, .65) })); let player, rocks, pickups, particles, seconds, score, lives, spawnClock, starClock, invincible, collected; function hud() { h.hud(`${Math.floor(seconds)}s IN ORBIT · ${collected} STARS`, `${lives} ${lives === 1 ? 'shield' : 'shields'}`); } function reset() { keys.left = keys.right = false; player = { x: W / 2, y: H - 48, r: 12 }; rocks = []; pickups = []; particles = []; seconds = 0; score = 0; lives = 3; spawnClock = .5; starClock = 1; invincible = 0; collected = 0; h.score(0); hud(); } function start() { reset(); h.begin(); } h.listen(window, 'keydown', event => { if (!h.running || h.paused || event.ctrlKey || event.metaKey) return; const key = event.key.toLowerCase(); if (key === 'arrowleft' || key === 'a') { keys.left = true; event.preventDefault(); } if (key === 'arrowright' || key === 'd') { keys.right = true; event.preventDefault(); } }); h.listen(window, 'keyup', event => { const key = event.key.toLowerCase(); if (key === 'arrowleft' || key === 'a') keys.left = false; if (key === 'arrowright' || key === 'd') keys.right = false; }); h.listen(window, 'blur', () => { keys.left = keys.right = false; }); axisControls(h, keys); let dragging = false; const pointer = event => { if (!h.running || h.paused) return; if (event.pointerType === 'mouse' || dragging) player.x = clamp(h.point(event).x, 18, W - 18); }; h.listen(h.canvas, 'pointerdown', event => { dragging = true; h.canvas.setPointerCapture(event.pointerId); pointer(event); }); h.listen(h.canvas, 'pointermove', pointer); h.listen(h.canvas, 'pointerup', () => { dragging = false; }); h.listen(h.canvas, 'pointercancel', () => { dragging = false; }); function spark(x, y, color, count) { for (let i = 0; i < count; i++) particles.push({ x, y, vx: rand(-90, 90), vy: rand(-90, 90), life: .45, color }); } function update(dt) { seconds += dt; const nextScore = Math.floor(seconds * 5) + collected * 50; if (nextScore !== score) { score = nextScore; h.score(score); } player.x = clamp(player.x + (Number(keys.right) - Number(keys.left)) * 360 * dt, 18, W - 18); stars.forEach(s => { s.y += s.speed * dt; if (s.y > H) { s.y = 0; s.x = rand(0, W); } }); invincible = Math.max(0, invincible - dt); spawnClock -= dt; starClock -= dt; if (spawnClock <= 0) { const r = rand(12, 24); rocks.push({ x: rand(r, W - r), y: -r - 5, r, speed: rand(95, 150) + Math.min(seconds * 2, 150), vx: rand(-20, 20), angle: rand(0, Math.PI), spin: rand(-1, 1), shape: Array.from({ length: 9 }, () => rand(.7, 1)) }); spawnClock = Math.max(.24, .75 - seconds * .008); } if (starClock <= 0) { pickups.push({ x: rand(30, W - 30), y: -15, r: 10 }); starClock = rand(1.4, 2.4); } for (const rock of rocks) { rock.x += rock.vx * dt; rock.y += rock.speed * dt; rock.angle += rock.spin * dt; if (!invincible && Math.hypot(rock.x - player.x, rock.y - player.y) < rock.r * .82 + player.r) { lives--; invincible = 1.45; rock.y = H + 50; spark(player.x, player.y, '#ffad80', 22); h.sound('hit'); if (lives <= 0) { hud(); h.finish('Back to Earth.', `${Math.floor(seconds)} seconds in orbit and ${collected} stars. Your mission earned ${score} points.`); return; } } } for (const star of pickups) { star.y += (110 + Math.min(seconds, 50)) * dt; if (Math.hypot(star.x - player.x, star.y - player.y) < star.r + player.r + 5) { collected++; star.y = H + 30; score = Math.floor(seconds * 5) + collected * 50; h.score(score); h.sound('point'); spark(player.x, player.y - 14, '#f4e49d', 12); } } rocks = rocks.filter(r => r.y < H + 40); pickups = pickups.filter(s => s.y < H + 20); particles.forEach(p => { p.x += p.vx * dt; p.y += p.vy * dt; p.life -= dt; }); particles = particles.filter(p => p.life > 0); hud(); } function drawStar(c, x, y, r) { c.beginPath(); for (let i = 0; i < 10; i++) { const angle = -Math.PI / 2 + i * Math.PI / 5, radius = i % 2 ? r * .46 : r; const px = x + Math.cos(angle) * radius, py = y + Math.sin(angle) * radius; i ? c.lineTo(px, py) : c.moveTo(px, py); } c.closePath(); c.fill(); } function draw() { const c = h.ctx; background(c); const glow = c.createRadialGradient(300, -60, 0, 300, -60, 450); glow.addColorStop(0, '#3a294a65'); glow.addColorStop(1, '#17132200'); c.fillStyle = glow; c.fillRect(0, 0, W, H); stars.forEach(s => { c.fillStyle = `rgba(224,217,249,${s.alpha})`; c.beginPath(); c.arc(s.x, s.y, s.r, 0, Math.PI * 2); c.fill(); }); rocks.forEach(rock => { c.save(); c.translate(rock.x, rock.y); c.rotate(rock.angle); c.beginPath(); rock.shape.forEach((radius, i) => { const angle = i * Math.PI * 2 / rock.shape.length; const x = Math.cos(angle) * rock.r * radius, y = Math.sin(angle) * rock.r * radius; i ? c.lineTo(x, y) : c.moveTo(x, y); }); c.closePath(); c.fillStyle = '#605065'; c.fill(); c.strokeStyle = '#9c798a'; c.lineWidth = 1.5; c.stroke(); c.fillStyle = '#443746'; c.beginPath(); c.arc(-rock.r * .2, -rock.r * .1, rock.r * .22, 0, Math.PI * 2); c.fill(); c.restore(); }); pickups.forEach(s => { c.fillStyle = '#f4e49d15'; c.beginPath(); c.arc(s.x, s.y, 19, 0, Math.PI * 2); c.fill(); c.fillStyle = '#f4e49d'; drawStar(c, s.x, s.y, s.r); }); particles.forEach(p => { c.globalAlpha = p.life / .45; round(c, p.x, p.y, 3, 3, 1, p.color); }); c.globalAlpha = 1; if (!invincible || Math.floor(invincible * 12) % 2 === 0) { c.save(); c.translate(player.x, player.y); c.fillStyle = '#ffad8030'; c.beginPath(); c.arc(0, 0, 25, 0, Math.PI * 2); c.fill(); if (h.running) { c.fillStyle = '#ffad80'; c.beginPath(); c.moveTo(-5, 9); c.lineTo(0, 21 + Math.sin(seconds * 30) * 4); c.lineTo(5, 9); c.closePath(); c.fill(); } c.fillStyle = '#e7ddff'; c.beginPath(); c.moveTo(0, -18); c.lineTo(16, 13); c.lineTo(0, 7); c.lineTo(-16, 13); c.closePath(); c.fill(); c.fillStyle = '#9c7acf'; c.beginPath(); c.moveTo(0, -10); c.lineTo(5, 3); c.lineTo(-5, 3); c.closePath(); c.fill(); if (invincible) { c.strokeStyle = '#ffad8080'; c.lineWidth = 1; c.beginPath(); c.arc(0, 0, 27, 0, Math.PI * 2); c.stroke(); } c.restore(); } } reset(); h.onStart = start; h.launch(update, draw); return h.lifecycle(start, () => { keys.left = keys.right = false; dragging = false; }); } }; })(); (function () { 'use strict'; window.ArcadeGames = window.ArcadeGames || {}; const arrowIcon = ''; const flagIcon = ''; const mineIcon = ''; function callbacks(options) { return { score: function (n) { if (options.onScore) options.onScore(n); }, status: function (s) { if (options.onStatus) options.onStatus(s); }, sound: function (s) { if (options.sound) options.sound(s); } }; } function shuffle(values) { const result = values.slice(); for (let i = result.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const saved = result[i]; result[i] = result[j]; result[j] = saved; } return result; } function collapseLine(line) { const values = line.filter(Boolean), result = []; let gained = 0; for (let i = 0; i < values.length; i++) { if (i + 1 < values.length && values[i] === values[i + 1]) { const merged = values[i] * 2; result.push(merged); gained += merged; i++; } else result.push(values[i]); } while (result.length < 4) result.push(0); return { line: result, gained: gained }; } function slideBoard(board, direction) { const result = board.slice(); let gained = 0; for (let lane = 0; lane < 4; lane++) { const positions = []; for (let n = 0; n < 4; n++) { if (direction === 'left') positions.push(lane * 4 + n); if (direction === 'right') positions.push(lane * 4 + 3 - n); if (direction === 'up') positions.push(n * 4 + lane); if (direction === 'down') positions.push((3 - n) * 4 + lane); } const collapsed = collapseLine(positions.map(function (i) { return board[i]; })); gained += collapsed.gained; positions.forEach(function (i, n) { result[i] = collapsed.line[n]; }); } return { board: result, gained: gained, changed: result.some(function (v, i) { return v !== board[i]; }) }; } function mergeHasMoves(board) { if (board.includes(0)) return true; return board.some(function (v, i) { return (i % 4 < 3 && v === board[i + 1]) || (i < 12 && v === board[i + 4]); }); } function around(index) { const result = [], row = Math.floor(index / 9), column = index % 9; for (let dr = -1; dr <= 1; dr++) for (let dc = -1; dc <= 1; dc++) { if (!dr && !dc) continue; const r = row + dr, c = column + dc; if (r >= 0 && r < 9 && c >= 0 && c < 9) result.push(r * 9 + c); } return result; } function plantMines(firstIndex) { const safe = new Set([firstIndex].concat(around(firstIndex))); const positions = shuffle(Array.from({ length: 81 }, function (_, i) { return i; }).filter(function (i) { return !safe.has(i); })); const mines = new Set(positions.slice(0, 10)); return Array.from({ length: 81 }, function (_, i) { return { mine: mines.has(i), count: around(i).filter(function (n) { return mines.has(n); }).length }; }); } // Mount 2048. window.ArcadeGames.merge = { mount: function (container, options) { const report = callbacks(options || {}); let board, score, paused = false, alive = true, acknowledgedWin, overlay, fresh, swipe = null; container.innerHTML = '

' + '

One more merge.Highest 2

' + '

Use arrow keys / WASD, swipe, or tap the arrows.
Matching tiles combine. Aim for 2048.

'; const root = container.firstElementChild, grid = root.querySelector('.pg-merge-grid'); const over = root.querySelector('.pg-overlay'), highest = root.querySelector('.pg-highest'); const continueButton = root.querySelector('.pg-continue'); const directions = Array.from(root.querySelectorAll('[data-direction]')); const tiles = Array.from({ length: 16 }, function (_, i) { const tile = document.createElement('div'); tile.className = 'pg-tile'; tile.setAttribute('role', 'gridcell'); tile.dataset.position = i; grid.appendChild(tile); return tile; }); function spawn() { const empty = board.map(function (value, i) { return value ? -1 : i; }).filter(function (i) { return i >= 0; }); if (!empty.length) return; fresh = empty[Math.floor(Math.random() * empty.length)]; board[fresh] = Math.random() < 0.9 ? 2 : 4; } function render() { tiles.forEach(function (tile, i) { tile.textContent = board[i] || ''; tile.dataset.value = board[i]; tile.dataset.fresh = i === fresh ? 'true' : 'false'; tile.setAttribute('aria-label', 'Row ' + (Math.floor(i / 4) + 1) + ', column ' + (i % 4 + 1) + ': ' + (board[i] || 'empty')); tile.classList.toggle('pg-tile-large', board[i] >= 16384); }); highest.textContent = Math.max.apply(null, board); directions.forEach(function (button) { button.disabled = paused || !!overlay; }); over.hidden = !overlay; if (overlay) { const won = overlay === 'win'; over.querySelector('.pg-overline').textContent = won ? 'NICE WORK' : 'ONE MORE ROUND?'; over.querySelector('h3').textContent = won ? 'You made 2048!' : 'No moves left'; over.querySelector('p').textContent = won ? 'Keep the streak going and see how high you can climb.' : 'You scored ' + score.toLocaleString() + ' points. Try a fresh board.'; continueButton.hidden = !won || !mergeHasMoves(board); } } function move(direction) { if (!alive || paused || overlay) return; const result = slideBoard(board, direction); if (!result.changed) return; board = result.board; score += result.gained; spawn(); report.score(score); report.sound(result.gained ? 'point' : 'click'); if (!acknowledgedWin && Math.max.apply(null, board) >= 2048) { overlay = 'win'; report.sound('win'); report.status('2048! Keep going or start a fresh board.'); } else if (!mergeHasMoves(board)) { overlay = 'over'; report.sound('hit'); report.status('No moves left. Final score: ' + score + '.'); } else report.status(result.gained ? '+' + result.gained + ' points. Keep the tiles moving.' : 'Build matching tiles. Every merge adds points.'); render(); } function restart() { if (!alive) return; board = Array(16).fill(0); score = 0; overlay = ''; acknowledgedWin = false; paused = false; fresh = -1; swipe = null; spawn(); spawn(); report.score(0); report.status('Slide matching tiles together. Aim for 2048.'); render(); } function onClick(event) { const direction = event.target.closest('[data-direction]'); if (direction) move(direction.dataset.direction); if (event.target.closest('.pg-again')) restart(); if (event.target.closest('.pg-continue') && !paused) { acknowledgedWin = true; overlay = ''; report.status('2048 reached. How far can you go?'); render(); grid.focus(); } } function onKey(event) { if (event.altKey || event.ctrlKey || event.metaKey || /^(INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable) return; const keys = { ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', ArrowDown: 'down', a: 'left', d: 'right', w: 'up', s: 'down' }; const direction = keys[event.key] || keys[event.key.toLowerCase()]; if (direction) { event.preventDefault(); move(direction); } } function pointerDown(event) { if (paused || overlay || (event.pointerType === 'mouse' && event.button !== 0)) return; swipe = { x: event.clientX, y: event.clientY, id: event.pointerId }; grid.setPointerCapture(event.pointerId); } function pointerUp(event) { if (!swipe || swipe.id !== event.pointerId) return; const dx = event.clientX - swipe.x, dy = event.clientY - swipe.y; swipe = null; if (Math.max(Math.abs(dx), Math.abs(dy)) < 18) return; move(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up')); } function pointerCancel() { swipe = null; } root.addEventListener('click', onClick); document.addEventListener('keydown', onKey); grid.addEventListener('pointerdown', pointerDown); grid.addEventListener('pointerup', pointerUp); grid.addEventListener('pointercancel', pointerCancel); restart(); return { pause: function () { paused = true; swipe = null; render(); }, resume: function () { if (alive) { paused = false; render(); } }, restart: restart, destroy: function () { alive = false; root.removeEventListener('click', onClick); document.removeEventListener('keydown', onKey); grid.removeEventListener('pointerdown', pointerDown); grid.removeEventListener('pointerup', pointerUp); grid.removeEventListener('pointercancel', pointerCancel); root.remove(); } }; } }; window.ArcadeGames.mines = { mount: function (container, options) { const report = callbacks(options || {}); let field, flags, revealed, planted, finished, flagMode = false, paused = false, alive = true, exploded = -1; container.innerHTML = '

' + '' + '

' + '

Your first reveal is always safe.

' + '' + '

Tap to reveal. Right-click or turn on flag mode to mark mines.
Numbers count nearby mines. Find all 71 safe tiles to win.

'; const root = container.firstElementChild, grid = root.querySelector('.pg-mine-grid'); const flagButton = root.querySelector('.pg-flag-mode'), status = root.querySelector('.pg-mine-status'); const flagCounter = root.querySelector('.pg-flags'), result = root.querySelector('.pg-result'); const buttons = Array.from({ length: 81 }, function (_, i) { const button = document.createElement('button'); button.className = 'pg-mine'; button.dataset.cell = i; button.type = 'button'; grid.appendChild(button); return button; }); function say(text) { status.textContent = text; report.status(text); } function render() { flagCounter.textContent = (10 - flags) + ' flag' + (10 - flags === 1 ? '' : 's') + ' left'; flagButton.setAttribute('aria-pressed', String(flagMode)); flagButton.disabled = paused || !!finished; grid.classList.toggle('pg-flagging', flagMode); result.hidden = !finished; buttons.forEach(function (button, i) { const tile = field[i], row = Math.floor(i / 9) + 1, col = i % 9 + 1; const showMine = finished === 'lost' && tile.mine; const wrongFlag = finished === 'lost' && tile.flagged && !tile.mine; button.dataset.state = i === exploded ? 'exploded' : tile.revealed || showMine ? 'open' : 'closed'; button.dataset.count = tile.count; button.classList.toggle('pg-flagged', tile.flagged); button.classList.toggle('pg-wrong-flag', !!wrongFlag); button.disabled = paused || !!finished || tile.revealed; let description = 'hidden'; if (showMine) { button.innerHTML = mineIcon; description = 'mine'; } else if (wrongFlag) { button.textContent = '×'; description = 'incorrect flag'; } else if (tile.flagged) { button.innerHTML = flagIcon; description = 'flagged'; } else if (tile.revealed) { button.textContent = tile.count || ''; description = tile.count ? tile.count + ' nearby mines' : 'empty'; } else button.textContent = ''; button.setAttribute('aria-label', 'Row ' + row + ', column ' + col + ': ' + description); }); } function toggleFlag(index) { if (paused || finished || !alive || field[index].revealed) return; const tile = field[index]; if (!tile.flagged && flags === 10) { say('All ten flags are in use. Remove a flag to place another.'); return; } tile.flagged = !tile.flagged; flags += tile.flagged ? 1 : -1; report.sound('click'); say(flagMode ? 'Flag mode is on. Tap a tile to place or remove a flag.' : 'Keep an eye on the numbers. They count nearby mines.'); render(); } function reveal(index) { if (paused || finished || !alive || field[index].flagged || field[index].revealed) return; if (!planted) { const layout = plantMines(index); field.forEach(function (tile, i) { tile.mine = layout[i].mine; tile.count = layout[i].count; }); planted = true; } if (field[index].mine) { exploded = index; finished = 'lost'; field[index].revealed = true; report.sound('hit'); say('A mine! You found ' + revealed + ' safe tiles. Try a fresh field.'); render(); return; } const queue = [index]; while (queue.length) { const current = queue.pop(), tile = field[current]; if (tile.revealed || tile.flagged || tile.mine) continue; tile.revealed = true; revealed++; if (!tile.count) around(current).forEach(function (n) { if (!field[n].revealed) queue.push(n); }); } report.score(revealed); if (revealed === 71) { finished = 'won'; field.forEach(function (tile) { if (tile.mine) tile.flagged = true; }); flags = 10; report.sound('win'); say('Field cleared! All 71 safe tiles found.'); } else { report.sound('point'); say(revealed + ' of 71 safe tiles found. One point per safe tile.'); } render(); } function restart() { if (!alive) return; field = Array.from({ length: 81 }, function () { return { mine: false, count: 0, revealed: false, flagged: false }; }); flags = 0; revealed = 0; planted = false; finished = ''; flagMode = false; paused = false; exploded = -1; report.score(0); say('Your first reveal is always safe.'); render(); } function onClick(event) { if (event.target.closest('.pg-again')) { restart(); return; } if (paused || finished) return; if (event.target.closest('.pg-flag-mode')) { flagMode = !flagMode; say(flagMode ? 'Flag mode is on. Tap a tile to place or remove a flag.' : 'Reveal mode is on. Tap a tile to uncover it.'); render(); return; } const tile = event.target.closest('[data-cell]'); if (!tile) return; if (flagMode || event.shiftKey) toggleFlag(Number(tile.dataset.cell)); else reveal(Number(tile.dataset.cell)); } function onContext(event) { const tile = event.target.closest('[data-cell]'); if (!tile) return; event.preventDefault(); toggleFlag(Number(tile.dataset.cell)); } root.addEventListener('click', onClick); grid.addEventListener('contextmenu', onContext); restart(); return { pause: function () { paused = true; render(); }, resume: function () { if (alive) { paused = false; render(); } }, restart: restart, destroy: function () { alive = false; root.removeEventListener('click', onClick); grid.removeEventListener('contextmenu', onContext); root.remove(); } }; } }; const memorySymbols = [ { name: 'sun', color: '#f7c773', path: '' }, { name: 'moon', color: '#c6b1ff', path: '' }, { name: 'bolt', color: '#b9f565', path: '' }, { name: 'heart', color: '#ffa69e', path: '' }, { name: 'diamond', color: '#7dd7f2', path: '' }, { name: 'leaf', color: '#8ee0bd', path: '' }, { name: 'planet', color: '#ffbe8e', path: '' }, { name: 'spark', color: '#e8a8e9', path: '' } ]; const backSymbol = ''; window.ArcadeGames.memory = { mount: function (container, options) { const report = callbacks(options || {}); let cards, open, matches, moves, score, finished, locked, paused = false, alive = true; let timer = null, pending = null, due = 0, remaining = 0; container.innerHTML = '

' + '

0 moves0 / 8 pairs

' + '

Pick two cards. Find their match.

' + '' + '

100 points for every pair.
Finish in fewer than 24 moves for a bonus.

'; const root = container.firstElementChild, grid = root.querySelector('.pg-memory-grid'); const status = root.querySelector('.pg-memory-status'), movesText = root.querySelector('.pg-memory-moves'); const pairsText = root.querySelector('.pg-memory-pairs'), result = root.querySelector('.pg-result'); const buttons = Array.from({ length: 16 }, function (_, i) { const button = document.createElement('button'); button.type = 'button'; button.className = 'pg-memory-card'; button.dataset.card = i; grid.appendChild(button); return button; }); function say(text) { status.textContent = text; report.status(text); } function cancelPending() { if (timer !== null) window.clearTimeout(timer); timer = null; pending = null; remaining = 0; } function defer(fn, delay) { if (timer !== null) window.clearTimeout(timer); timer = null; pending = fn; remaining = delay; if (paused) return; due = performance.now() + delay; timer = window.setTimeout(function () { timer = null; const action = pending; pending = null; remaining = 0; if (alive && !paused && action) action(); }, delay); } function render() { movesText.textContent = moves + ' move' + (moves === 1 ? '' : 's'); pairsText.textContent = matches + ' / 8 pairs'; result.hidden = !finished; buttons.forEach(function (button, i) { const card = cards[i], symbol = memorySymbols[card.type], shown = card.matched || open.includes(i); button.dataset.state = card.matched ? 'matched' : shown ? 'open' : 'hidden'; button.style.setProperty('--card-accent', symbol.color); button.innerHTML = shown ? '' : backSymbol; button.disabled = paused || locked || card.matched || open.includes(i) || finished; button.setAttribute('aria-label', 'Card ' + (i + 1) + ': ' + (shown ? symbol.name + (card.matched ? ', matched' : '') : 'face down')); button.setAttribute('aria-pressed', String(shown)); }); } function choose(index) { if (paused || !alive || locked || finished || cards[index].matched || open.includes(index)) return; open.push(index); report.sound('click'); if (open.length === 1) { say('Choose one more card.'); render(); return; } moves++; const first = open[0], second = open[1]; if (cards[first].type === cards[second].type) { cards[first].matched = true; cards[second].matched = true; matches++; score += 100; open = []; if (matches === 8) { finished = true; const bonus = Math.max(0, 24 - moves) * 25; score += bonus; report.sound('win'); say('All matched in ' + moves + ' moves!' + (bonus ? ' +' + bonus + ' finish bonus.' : ' Lovely work.')); } else { report.sound('point'); say('A match! ' + (8 - matches) + ' pairs to go.'); } report.score(score); render(); } else { locked = true; say('Remember these two. Try another pair.'); render(); defer(function () { open = []; locked = false; say('Pick two cards. Find their match.'); render(); }, 850); } } function restart() { if (!alive) return; cancelPending(); cards = shuffle([0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7]).map(function (type) { return { type: type, matched: false }; }); open = []; matches = 0; moves = 0; score = 0; finished = false; locked = false; paused = false; report.score(0); say('Pick two cards. Find their match.'); render(); } function onClick(event) { if (event.target.closest('.pg-again')) { restart(); return; } const button = event.target.closest('[data-card]'); if (button) choose(Number(button.dataset.card)); } root.addEventListener('click', onClick); restart(); return { pause: function () { if (paused || !alive) return; paused = true; if (timer !== null) { remaining = Math.max(0, due - performance.now()); window.clearTimeout(timer); timer = null; } render(); }, resume: function () { if (!paused || !alive) return; paused = false; if (pending) defer(pending, remaining); render(); }, restart: restart, destroy: function () { alive = false; cancelPending(); root.removeEventListener('click', onClick); root.remove(); } }; } }; })(); (function () { 'use strict'; window.ArcadeGames = window.ArcadeGames || {}; const winLines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]; function ticResult(board) { for (const line of winLines) if (board[line[0]] && line.every(i => board[i] === board[line[0]])) return {winner:board[line[0]],line}; return board.every(Boolean) ? {winner:'draw',line:[]} : null; } function bestTicMove(board) { function minimax(b, turn) { const end=ticResult(b); if(end) return end.winner==='O'?10:end.winner==='X'?-10:0; const scores=[]; for(let i=0;i<9;i++) if(!b[i]){b[i]=turn;scores.push(minimax(b,turn==='O'?'X':'O'));b[i]='';} return turn==='O'?Math.max(...scores):Math.min(...scores); } let best=-Infinity,moves=[];for(let i=0;i<9;i++) if(!board[i]){board[i]='O';const value=minimax(board,'X');board[i]='';if(value>best){best=value;moves=[i];}else if(value===best)moves.push(i);}return moves[Math.floor(Math.random()*moves.length)]; } window.ArcadeGames.tictac = {mount(container, options={}){ let board=Array(9).fill(''),turn='X',mode='solo',finished=false,paused=false,alive=true,thinking=false,timer=null,wins=0; const signal=t=>{if(options.onStatus)options.onStatus(t);}; const score=v=>{if(options.onScore)options.onScore(v);}; const beep=t=>{if(options.sound)options.sound(t);}; container.innerHTML='

Choose a square. Get three in a row.
Score counts rounds you win in this session.

'; const grid=container.querySelector('.ttt-grid'),status=container.querySelector('.board-status'),message=container.querySelector('.board-message'); for(let i=0;i<9;i++){const b=document.createElement('button');b.className='ttt-cell';b.dataset.index=i;b.setAttribute('aria-label','Row '+(Math.floor(i/3)+1)+', column '+(i%3+1)+', empty');grid.append(b);} const cells=[...grid.children]; function render(){cells.forEach((c,i)=>{c.textContent=board[i];c.dataset.mark=board[i];c.disabled=finished||paused||thinking||!!board[i];c.setAttribute('aria-label','Row '+(Math.floor(i/3)+1)+', column '+(i%3+1)+', '+(board[i]||'empty'));});if(!finished)status.textContent=thinking?'Computer is choosing…':mode==='solo'?'Your turn · X':turn+'’s turn';} function evaluate(){const end=ticResult(board);if(!end)return false;finished=true;thinking=false;end.line.forEach(i=>cells[i].classList.add('winner'));let text;if(end.winner==='draw'){text='A perfect tie. Another round?';beep('click');}else{const won=mode==='two'||end.winner==='X';text=mode==='solo'?(won?'You won! Nicely played.':'Computer wins. Try a new strategy.'):(end.winner+' wins the round!');if(won){wins++;score(wins);}beep(won?'win':'hit');}status.textContent=text;signal(text);message.innerHTML='';render();return true;} function scheduleComputer(){if(!alive||paused||finished||mode!=='solo'||turn!=='O')return;thinking=true;render();clearTimeout(timer);timer=setTimeout(()=>{timer=null;if(!alive||paused||finished)return;const move=bestTicMove(board);if(move===undefined)return;board[move]='O';thinking=false;beep('click');if(!evaluate()){turn='X';signal('Your turn · X');render();}},380);} function newRound(resetWins=false){clearTimeout(timer);timer=null;board=Array(9).fill('');turn='X';finished=false;thinking=false;message.innerHTML='';cells.forEach(c=>c.classList.remove('winner'));if(resetWins)wins=0;score(wins);signal(mode==='solo'?'Your turn · X':'X starts. Share the screen.');render();} function click(e){const modeButton=e.target.closest('[data-mode]');if(modeButton){mode=modeButton.dataset.mode;container.querySelectorAll('[data-mode]').forEach(b=>b.setAttribute('aria-pressed',String(b===modeButton)));newRound(true);return;}if(e.target.closest('.board-message button')){newRound();return;}const cell=e.target.closest('.ttt-cell');if(!cell||finished||paused||thinking)return;const i=Number(cell.dataset.index);if(board[i])return;board[i]=turn;beep('click');if(evaluate())return;turn=turn==='X'?'O':'X';render();if(mode==='solo'&&turn==='O')scheduleComputer();else signal(turn+'’s turn');} container.addEventListener('click',click);newRound(true); return {pause(){paused=true;clearTimeout(timer);timer=null;render();},resume(){paused=false;render();scheduleComputer();},restart(){newRound(true);},destroy(){alive=false;clearTimeout(timer);container.removeEventListener('click',click);container.innerHTML='';}}; }}; })();

Dashboard

Web resources

Activity library

YouTube videos

Movies

Anime

Pong

Four in a Row

YouTube

Pick a video. Settle in.

Choose a video

Featured videos

Have a video file?

Games

No games found

Movies

How to watch a movie

Anime

How to open a title

Back to the Future Part II