/* The tilt maze, a wooden labyrinth game The old wooden toy: a maze board inside a box, two brass knobs on the front, a steel ball. Everything is CSS 3D: the pointer (or the arrow keys) tilts the board on two axes and the ball rolls with real physics: gravity projected on the tilted board, bounces off the walls, rolling friction, a lip round every hole that pulls it in. A hole swallows it with a small whirl and the ball drops back in at the start; the brass cup at the end sets off a burst of paper confetti and the toy shop's title. Left alone, an autopilot tilts the board and steers the ball along the line. */ /* ---- values to change ---- */ const MAX_TILT = 6; /* how far the board can tilt, in degrees */ const GRAVITY = 1; /* how heavy the ball feels: 0.6 slow and floaty, 1.6 fast */ const FRICTION = 1; /* how much the wood slows the ball down */ const BOUNCE = 0.34; /* how much speed the ball keeps when it hits a wall */ const VIEW = 34; /* how far the box leans away from you, in degrees */ const SHOP = 'Marlow & Pip Toyworks'; /* the toy shop on the box and on the title */ const TITLE = 'Rolled home!'; /* the title when the ball reaches the cup */ const CONFETTI = 72; /* how many strips of paper fly out */ (() => { /* ================================================================ the maze (pure physics, no page) */ /* core:start */ function createMaze(cfg) { const CELL = 90; const COLS = 6; const ROWS = 4; const FRAME = 20; const T = 10; const W = FRAME * 2 + CELL * COLS; const H = FRAME * 2 + CELL * ROWS; const R = 11; const HOLE = 16; const CUP = 17; const STEP = 1 / 240; /* rolling ball: 5/7 of the gravity along the slope */ const GR = 11000 * cfg.gravity * (5 / 7); const SIN_MAX = Math.sin((cfg.maxTilt * Math.PI) / 180); const DEG = 180 / Math.PI; /* the line through the maze, cell by cell, from the start (top left) to the cup (bottom right) */ const PATH = [[0, 0], [1, 0], [2, 0], [2, 1], [1, 1], [0, 1], [0, 2], [0, 3], [1, 3], [2, 3], [2, 2], [3, 2], [3, 1], [3, 0], [4, 0], [5, 0], [5, 1], [4, 1], [4, 2], [5, 2], [5, 3]]; /* the dead ends off the line */ const SIDE = [[[1, 3], [1, 2]], [[3, 2], [3, 3]], [[3, 3], [4, 3]]]; const key = (c, r) => c + ',' + r; const links = new Set(); const link = (a, b) => { links.add(key(a[0], a[1]) + '|' + key(b[0], b[1])); links.add(key(b[0], b[1]) + '|' + key(a[0], a[1])); }; for (let i = 0; i < PATH.length - 1; i++) link(PATH[i], PATH[i + 1]); SIDE.forEach(([a, b]) => link(a, b)); const open = (c1, r1, c2, r2) => links.has(key(c1, r1) + '|' + key(c2, r2)); /* the walls: every edge between two cells that are not linked, joined into long pieces */ const segs = []; for (let c = 0; c < COLS - 1; c++) { let from = -1; for (let r = 0; r <= ROWS; r++) { const wall = r < ROWS && !open(c, r, c + 1, r); if (wall && from < 0) from = r; if (!wall && from >= 0) { segs.push({ v: true, at: (c + 1) * CELL, a: from * CELL, b: r * CELL }); from = -1; } } } for (let r = 0; r < ROWS - 1; r++) { let from = -1; for (let c = 0; c <= COLS; c++) { const wall = c < COLS && !open(c, r, c, r + 1); if (wall && from < 0) from = c; if (!wall && from >= 0) { segs.push({ v: false, at: (r + 1) * CELL, a: from * CELL, b: c * CELL }); from = -1; } } } const walls = segs.map((s) => { const h = T / 2; const w = s.v ? { l: FRAME + s.at - h, t: FRAME + s.a - h, r: FRAME + s.at + h, b: FRAME + s.b + h } : { l: FRAME + s.a - h, t: FRAME + s.at - h, r: FRAME + s.b + h, b: FRAME + s.at + h }; /* a piece that touches the rim does not need to go into it */ w.l = Math.max(w.l, FRAME); w.t = Math.max(w.t, FRAME); w.r = Math.min(w.r, W - FRAME); w.b = Math.min(w.b, H - FRAME); w.kind = s.v ? 'v' : 'h'; return w; }); const rim = [ { l: 0, t: 0, r: W, b: FRAME, kind: 'rim' }, { l: 0, t: H - FRAME, r: W, b: H, kind: 'rim' }, { l: 0, t: FRAME, r: FRAME, b: H - FRAME, kind: 'rim' }, { l: W - FRAME, t: FRAME, r: W, b: H - FRAME, kind: 'rim' }, ]; const solids = walls.concat(rim); const at = (x, y) => ({ x: FRAME + x, y: FRAME + y }); const holes = [[135, 72], [70, 225], [135, 212], [383, 110], [522, 22], [244, 340], [414, 318], [340, 165], [246, 158]] .map(([x, y]) => at(x, y)); const cup = at(5 * CELL + 45, 3 * CELL + 45); const start = at(45, 45); const centre = (c, r) => at(c * CELL + 45, r * CELL + 45); /* the printed line runs through the middle of every cell */ const line = PATH.map(([c, r]) => centre(c, r)); /* the autopilot's waypoints: the middle of each cell, nudged away from the holes beside the line */ const NUDGE = { '1,0': [0, -8], '0,2': [-8, 0], '3,1': [-6, 0], '2,1': [-6, -6], '4,1': [8, 6], '2,3': [-6, -6] }; const safe = PATH.map(([c, r]) => { const p = centre(c, r); const n = NUDGE[key(c, r)]; return n ? { x: p.x + n[0], y: p.y + n[1] } : p; }); /* the first try of every round goes wrong on purpose: on the way down the left column it heads for the hole */ const TRAP = 6; const trap = safe.slice(0, TRAP).concat([holes[1]]); /* from a dead end, the way back to the line */ const BACK = { '1,2': [[1, 3]], '3,3': [[3, 2]], '4,3': [[3, 3], [3, 2]] }; const ball = { x: start.x, y: start.y, vx: 0, vy: 0 }; const tilt = { x: 0, y: 0 }; const route = { pts: safe, i: 0 }; let hit = 0; const cellOf = (x, y) => [Math.max(0, Math.min(COLS - 1, Math.floor((x - FRAME) / CELL))), Math.max(0, Math.min(ROWS - 1, Math.floor((y - FRAME) / CELL)))]; const reset = (tryNo) => { ball.x = start.x; ball.y = start.y; ball.vx = 0; ball.vy = 0; tilt.x = 0; tilt.y = 0; route.pts = tryNo === 1 ? trap : safe; route.i = 1; }; /* the autopilot takes over again from wherever the ball is */ const resume = () => { const [c, r] = cellOf(ball.x, ball.y); const k = key(c, r); const idx = PATH.findIndex(([pc, pr]) => pc === c && pr === r); if (idx >= 0) { route.pts = safe.slice(idx); route.i = 0; return; } const back = (BACK[k] || []).map(([bc, br]) => centre(bc, br)); const last = (BACK[k] || [[0, 0]]).slice(-1)[0]; const j = PATH.findIndex(([pc, pr]) => pc === last[0] && pr === last[1]); route.pts = back.concat(safe.slice(j + 1)); route.i = 0; }; /* one fixed step. input: { auto: true } or { tx, ty } in degrees (the hand on the board), or { rest: true } */ const step = (input) => { let wx = 0; let wy = 0; if (input.auto) { let p = route.pts[route.i]; const dx0 = p.x - ball.x; const dy0 = p.y - ball.y; if (route.i < route.pts.length - 1 && dx0 * dx0 + dy0 * dy0 < 20 * 20) { route.i++; p = route.pts[route.i]; } /* a spring towards the waypoint with a damper on the speed */ const ax = 34 * (p.x - ball.x) - 10.5 * ball.vx; const ay = 34 * (p.y - ball.y) - 10.5 * ball.vy; wy = Math.asin(Math.max(-SIN_MAX, Math.min(SIN_MAX, ax / GR))) * DEG; wx = -Math.asin(Math.max(-SIN_MAX, Math.min(SIN_MAX, ay / GR))) * DEG; } else if (!input.rest) { wx = Math.max(-cfg.maxTilt, Math.min(cfg.maxTilt, input.tx)); wy = Math.max(-cfg.maxTilt, Math.min(cfg.maxTilt, input.ty)); } /* the board follows the hand with a little lag, like a real one on its two axles */ const k = 1 - Math.exp(-STEP * 13); tilt.x += (wx - tilt.x) * k; tilt.y += (wy - tilt.y) * k; if (input.rest) return null; /* gravity projected on the board: the side that goes down pulls the ball */ let ax = GR * Math.sin(tilt.y / DEG); let ay = -GR * Math.sin(tilt.x / DEG); /* the lip of a hole: inside its rim the wood slopes down into it */ for (const h of holes) { const dx = h.x - ball.x; const dy = h.y - ball.y; const d = Math.hypot(dx, dy); if (d < HOLE && d > 0.01) { const f = 2600 * (1 - d / HOLE) + 400; ax += (dx / d) * f; ay += (dy / d) * f; } } { const dx = cup.x - ball.x; const dy = cup.y - ball.y; const d = Math.hypot(dx, dy); if (d < CUP && d > 0.01) { const f = 2600 * (1 - d / CUP) + 400; ax += (dx / d) * f; ay += (dy / d) * f; } } ball.vx += ax * STEP; ball.vy += ay * STEP; /* rolling friction (a steady brake) and a little air and wood drag */ const v = Math.hypot(ball.vx, ball.vy); if (v > 0) { const nv = Math.max(0, v - 42 * cfg.friction * STEP) * (1 - 0.35 * cfg.friction * STEP); const cap = Math.min(nv, 1300); ball.vx *= cap / v; ball.vy *= cap / v; } ball.x += ball.vx * STEP; ball.y += ball.vy * STEP; /* the walls: the closest point of each box; if it is inside the ball, out it goes and the speed bounces */ for (const s of solids) { if (ball.x < s.l - R || ball.x > s.r + R || ball.y < s.t - R || ball.y > s.b + R) continue; const cx = Math.max(s.l, Math.min(s.r, ball.x)); const cy = Math.max(s.t, Math.min(s.b, ball.y)); let nx = ball.x - cx; let ny = ball.y - cy; let d = Math.hypot(nx, ny); if (d >= R) continue; if (d < 0.0001) { /* the centre went inside: out by the shortest side */ const o = [ball.x - s.l, s.r - ball.x, ball.y - s.t, s.b - ball.y]; const m = o.indexOf(Math.min(...o)); nx = m === 0 ? -1 : m === 1 ? 1 : 0; ny = m === 2 ? -1 : m === 3 ? 1 : 0; d = 0; ball.x += nx * (o[m] + R); ball.y += ny * (o[m] + R); } else { nx /= d; ny /= d; ball.x += nx * (R - d); ball.y += ny * (R - d); } const vn = ball.vx * nx + ball.vy * ny; if (vn < 0) { ball.vx -= (1 + cfg.bounce) * vn * nx; ball.vy -= (1 + cfg.bounce) * vn * ny; /* the wall rubs a little speed off along it too */ const tx = -ny; const ty = nx; const vt = ball.vx * tx + ball.vy * ty; ball.vx -= vt * 0.04 * tx; ball.vy -= vt * 0.04 * ty; if (-vn > hit) { hit = -vn; step.nx = nx; step.ny = ny; } } } /* into a hole, or into the cup */ for (let i = 0; i < holes.length; i++) { if (Math.hypot(holes[i].x - ball.x, holes[i].y - ball.y) < HOLE - R * 0.42) return { type: 'hole', i }; } if (Math.hypot(cup.x - ball.x, cup.y - ball.y) < CUP - R * 0.62) return { type: 'cup' }; return null; }; /* the hardest knock since the last look (for the jolt of the board) */ const knock = () => { const h = hit; hit = 0; return { v: h, nx: step.nx || 0, ny: step.ny || 0 }; }; return { W, H, R, T, FRAME, CELL, HOLE, CUP, STEP, walls, rim, holes, cup, start, line, ball, tilt, route, step, reset, resume, knock }; } /* core:end */ if (typeof document === 'undefined') { if (typeof module !== 'undefined') module.exports = { createMaze }; return; } /* ================================================================ the page */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const TOUCH = matchMedia('(hover: none)').matches; const maze = createMaze({ gravity: Math.max(0.2, GRAVITY), friction: Math.max(0, FRICTION), bounce: Math.max(0, Math.min(0.95, BOUNCE)), maxTilt: Math.min(12, Math.max(1, MAX_TILT)) }); const { W, H, R, FRAME } = maze; const WALL_H = 18; const RIM_H = 24; const BOX_GAP = 12; const BOX_SIDE = 28; /* the box is as deep as the board's lowest corner can go at full tilt on both axes (plus its thickness and some air): a floor any higher would cut through the tilted board and show as a dark wedge over it */ const BOX_H = 18 + Math.ceil(((W + H) / 2) * Math.sin((Math.min(12, Math.max(1, MAX_TILT)) * Math.PI) / 180) + 14 + 8); const BW = W + 2 * (BOX_GAP + BOX_SIDE); const BH = H + 2 * (BOX_GAP + BOX_SIDE); const $ = (s, el = document) => el.querySelector(s); const stage = $('[data-stage]'); const scene = $('[data-scene]'); const fit = $('[data-fit]'); const intro = $('[data-intro]'); const table = $('[data-table]'); const box = $('[data-box]'); const lift = $('[data-lift]'); const board = $('[data-board]'); const top = $('[data-top]'); const art = $('[data-art]'); const holesEl = $('[data-holes]'); const shadow = $('[data-shadow]'); const ballEl = $('[data-ball]'); const whirl = $('[data-whirl]'); const hint = $('[data-hint]'); const shopEls = document.querySelectorAll('[data-shop]'); const win = $('[data-win]'); const winTitle = $('[data-win-title]'); const confettiEl = $('[data-confetti]'); const knobs = document.querySelectorAll('[data-knob]'); shopEls.forEach((el) => { el.textContent = SHOP; }); table.style.setProperty('--view', VIEW + 'deg'); const SVGNS = 'http://www.w3.org/2000/svg'; const make = (tag, cls, parent) => { const el = document.createElement(tag); if (cls) el.className = cls; if (parent) parent.appendChild(el); return el; }; const svg = (tag, attrs, parent) => { const el = document.createElementNS(SVGNS, tag); for (const k in attrs) el.setAttribute(k, attrs[k]); if (parent) parent.appendChild(el); return el; }; /* ---- a box with five faces: the top and the four sides (the ones turned away are never drawn) ---- */ function block(parent, x, y, w, h, z0, height, cls) { const el = make('div', 'block ' + cls, parent); el.style.left = x + 'px'; el.style.top = y + 'px'; el.style.width = w + 'px'; el.style.height = h + 'px'; el.style.setProperty('--z0', z0 + 'px'); el.style.setProperty('--hgt', height + 'px'); ['top', 'n', 's', 'e', 'w'].forEach((f) => make('i', 'face face--' + f, el)); return el; } /* ---- the board: wood, grain, the printed line, the holes, the start ring and the cup ---- */ board.style.width = W + 'px'; board.style.height = H + 'px'; board.style.left = BOX_SIDE + BOX_GAP + 'px'; board.style.top = BOX_SIDE + BOX_GAP + 'px'; box.style.width = BW + 'px'; box.style.height = BH + 'px'; fit.style.width = BW + 'px'; fit.style.height = BH + 'px'; fit.style.margin = `${-BH / 2}px 0 0 ${-BW / 2}px`; art.setAttribute('viewBox', `0 0 ${W} ${H}`); /* the grain: long wavy lines that drift across the board, always the same */ const grain = svg('g', { class: 'grain' }, art); for (let i = 0; i < 26; i++) { const y0 = (i + 0.5) * (H / 26); let d = `M -10 ${y0.toFixed(1)}`; for (let x = 0; x <= W + 20; x += 40) { const y = y0 + Math.sin(x * 0.011 + i * 1.7) * 5 + Math.sin(x * 0.031 + i) * 1.6 + (i % 3 === 0 ? Math.exp(-(((x - 120 - i * 17) % 400) ** 2) / 900) * 7 : 0); d += ` L ${x} ${y.toFixed(1)}`; } svg('path', { d, class: i % 4 === 0 ? 'grain__dark' : 'grain__line' }, grain); } /* the line, with soft corners */ const L = maze.line; let ld = `M ${L[0].x} ${L[0].y}`; for (let i = 1; i < L.length - 1; i++) { const a = L[i - 1]; const b = L[i]; const c = L[i + 1]; const turn = (b.x - a.x) * (c.y - b.y) - (b.y - a.y) * (c.x - b.x) !== 0; if (!turn) { ld += ` L ${b.x} ${b.y}`; continue; } const k = 22; const ux = Math.sign(b.x - a.x); const uy = Math.sign(b.y - a.y); const vx = Math.sign(c.x - b.x); const vy = Math.sign(c.y - b.y); ld += ` L ${b.x - ux * k} ${b.y - uy * k} Q ${b.x} ${b.y} ${b.x + vx * k} ${b.y + vy * k}`; } ld += ` L ${L[L.length - 1].x} ${L[L.length - 1].y}`; const lineEl = svg('path', { d: ld, class: 'line', pathLength: 1 }, art); /* the words printed on the wood */ const startText = svg('text', { x: maze.start.x, y: maze.start.y - 22, class: 'printed', 'text-anchor': 'middle' }, art); startText.textContent = 'START'; const startRing = make('i', 'start-ring', holesEl); startRing.style.left = maze.start.x + 'px'; startRing.style.top = maze.start.y + 'px'; const holeEls = maze.holes.map((h) => { const el = make('i', 'hole', holesEl); el.style.left = h.x + 'px'; el.style.top = h.y + 'px'; el.style.setProperty('--r', maze.HOLE + 'px'); return el; }); const cupEl = make('i', 'hole hole--cup', holesEl); cupEl.style.left = maze.cup.x + 'px'; cupEl.style.top = maze.cup.y + 'px'; cupEl.style.setProperty('--r', maze.CUP + 'px'); /* the walls and the rim of the board */ const wallEls = maze.walls.map((w) => block(board, w.l, w.t, w.r - w.l, w.b - w.t, 0, WALL_H + (w.kind === 'v' ? 0.6 : 0), 'wall')); const rimEls = [ block(board, 0, 0, W, FRAME, 0, RIM_H, 'rim'), block(board, 0, H - FRAME, W, FRAME, 0, RIM_H, 'rim'), block(board, 0, FRAME, FRAME, H - 2 * FRAME, 0, RIM_H + 0.6, 'rim'), block(board, W - FRAME, FRAME, FRAME, H - 2 * FRAME, 0, RIM_H + 0.6, 'rim'), ]; /* the thickness of the board, under its top */ block(board, 0, 0, W, H, -14, 14, 'slab'); /* the box round it: four sides that stay still while the board tilts inside */ block(box, 0, 0, BW, BOX_SIDE, -BOX_H + 18, BOX_H, 'side'); block(box, 0, BH - BOX_SIDE, BW, BOX_SIDE, -BOX_H + 18, BOX_H, 'side side--front'); block(box, 0, BOX_SIDE, BOX_SIDE, BH - 2 * BOX_SIDE, -BOX_H + 18, BOX_H + 0.6, 'side'); block(box, BW - BOX_SIDE, BOX_SIDE, BOX_SIDE, BH - 2 * BOX_SIDE, -BOX_H + 18, BOX_H + 0.6, 'side'); /* the floor of the box, far below */ const floor = make('i', 'box-floor', box); floor.style.transform = `translateZ(${-BOX_H + 18}px)`; /* the two knobs live on the front face of the box */ const front = $('.side--front .face--s', box); knobs.forEach((k) => front.appendChild(k)); const brand = make('span', 'box-brand', front); brand.textContent = SHOP; /* ---- the size: the whole box fits the stage, on a phone too ---- */ let scale = 1; const fitNow = () => { const r = stage.getBoundingClientRect(); const head = $('.shop').getBoundingClientRect().height + hint.getBoundingClientRect().height; const freeW = r.width - 32; const freeH = r.height - head - 60; const v = (VIEW * Math.PI) / 180; scale = Math.max(0.2, Math.min(freeW / (BW * 1.16), freeH / (BH * Math.cos(v) + (BOX_H + 30) * Math.sin(v) + 30), 1.6)); fit.style.transform = `scale(${scale})`; scene.style.perspective = Math.round(1700 * scale) + 'px'; }; fitNow(); addEventListener('resize', fitNow); /* ---- drawing a frame ---- */ const jolt = { x: 0, y: 0 }; const drop = { z: 0, s: 1, o: 1, b: 1, dx: 0, dy: 0 }; const show = () => { const tx = maze.tilt.x + jolt.x; const ty = maze.tilt.y + jolt.y; board.style.transform = `rotateX(${tx.toFixed(3)}deg) rotateY(${ty.toFixed(3)}deg)`; const x = maze.ball.x + drop.dx; const y = maze.ball.y + drop.dy; const z = R + drop.z; /* the ball always faces you: the board's turns, undone */ ballEl.style.transform = `translate3d(${(x - R).toFixed(2)}px, ${(y - R).toFixed(2)}px, ${z.toFixed(2)}px) rotateY(${(-ty).toFixed(3)}deg) rotateX(${(-tx - VIEW).toFixed(3)}deg) scale(${drop.s.toFixed(3)})`; ballEl.style.opacity = drop.o; ballEl.style.setProperty('--dim', drop.b); /* the shadow on the wood: further off and softer when the ball is in the air */ const up = Math.max(0, drop.z); shadow.style.transform = `translate(${(x + 3 + up * 0.05).toFixed(2)}px, ${(y + 5 + up * 0.08).toFixed(2)}px) scale(${(drop.s * (1 + up / 140)).toFixed(3)})`; shadow.style.opacity = (drop.o * Math.max(0.2, 1 - up / 190) * (drop.z < -2 ? Math.max(0, 1 + drop.z / 10) : 1)).toFixed(3); knobs[0].style.setProperty('--turn', (ty * 15).toFixed(2) + 'deg'); knobs[1].style.setProperty('--turn', (tx * -15).toFixed(2) + 'deg'); }; /* ---- the hint under the box, which changes with a little roll of its words ---- */ const HINT_START = TOUCH ? 'Drag to tilt the board. Roll the ball home.' : 'Move your pointer to tilt the board. Roll the ball home.'; const HINT_HOLE = 'Swallowed! The ball is back at the start.'; const HINT_HOME = 'Rolled home. A new ball is on its way.'; let hintNow = ''; const setHint = (text, now) => { if (text === hintNow) return; hintNow = text; const fill = () => { hint.textContent = ''; text.split(' ').forEach((w, i) => { const s = make('span', 'hint__word', hint); s.textContent = w; if (i < text.split(' ').length - 1) hint.appendChild(document.createTextNode(' ')); }); }; if (now || REDUCED) { fill(); return; } const old = hint.querySelectorAll('.hint__word'); gsap.killTweensOf(old); const tl = gsap.timeline(); if (old.length) tl.to(old, { yPercent: -110, opacity: 0, duration: 0.22, stagger: 0.02, ease: 'power2.in' }); tl.add(() => { fill(); gsap.from(hint.querySelectorAll('.hint__word'), { yPercent: 110, opacity: 0, duration: 0.6, stagger: 0.035, ease: 'back.out(2.2)' }); }); }; /* ---- the confetti: strips of paper ---- */ let seed = 1; const rand = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }; const COLOURS = ['--paper-1', '--paper-2', '--paper-3', '--paper-4', '--paper-5']; const strips = []; for (let i = 0; i < Math.max(0, Math.round(CONFETTI)); i++) { const s = make('i', 'strip', confettiEl); s.style.setProperty('--c', `var(${COLOURS[i % COLOURS.length]})`); strips.push(s); } const burst = () => { if (!strips.length) return; seed = 7; const r = cupEl.getBoundingClientRect(); const sr = stage.getBoundingClientRect(); const ox = r.left + r.width / 2 - sr.left; const oy = r.top + r.height / 2 - sr.top; const reach = Math.min(sr.width, sr.height); strips.forEach((s, i) => { const a = -Math.PI / 2 - 0.4 + (rand() - 0.5) * 2.2; const sp = reach * (0.32 + rand() * 0.42); const bx = ox + Math.cos(a) * sp; const by = oy + Math.sin(a) * sp; const fall = sr.height - by + 60 + rand() * 80; const sway = (14 + rand() * 30) * (rand() < 0.5 ? -1 : 1); const flips = 2 + Math.floor(rand() * 4); const dur = 2.4 + rand() * 1.4; gsap.killTweensOf(s); gsap.set(s, { x: ox, y: oy, rotation: rand() * 360, rotationX: 0, scale: 0.7 + rand() * 0.5, opacity: 1, visibility: 'visible' }); gsap.timeline() .to(s, { x: bx, y: by, duration: 0.55 + rand() * 0.25, ease: 'power3.out' }) .to(s, { y: `+=${fall}`, duration: dur, ease: 'sine.in' }, '>-0.05') .to(s, { x: `+=${sway}`, duration: 0.45 + rand() * 0.3, ease: 'sine.inOut', yoyo: true, repeat: Math.ceil(dur / 0.5) }, '<') .to(s, { rotationX: 360 * flips, rotation: `+=${(rand() - 0.5) * 400}`, duration: dur + 0.6, ease: 'none' }, 0) .to(s, { opacity: 0, duration: 0.4 }, `>-0.4`) .set(s, { visibility: 'hidden' }); }); }; /* ---- the title of the toy shop ---- */ winTitle.textContent = ''; const letters = Array.from(TITLE).map((ch) => { const s = make('span', 'win__letter', winTitle); s.textContent = ch === ' ' ? String.fromCharCode(160) : ch; return s; }); winTitle.setAttribute('aria-label', TITLE); /* ================================================================ the game */ let phase = 'off'; let tryNo = 1; let hand = null; let handUntil = 0; let keys = { x: 0, y: 0 }; let acc = 0; let clock = 0; let keepAlive = null; let hintTimer = null; /* the ball drops in at the start, bouncing on the wood */ const dropIn = () => { phase = 'off'; maze.reset(tryNo); acc = 0; jolt.x = 0; jolt.y = 0; Object.assign(drop, { z: 170, s: 1, o: 1, b: 1, dx: 0, dy: 0 }); const tl = gsap.timeline({ onComplete: () => { phase = 'play'; acc = 0; if (keepAlive) keepAlive.kill(); /* a long empty tween keeps the direction open while the ball rolls (the preview video waits for GSAP) */ keepAlive = gsap.delayedCall(30, () => {}); }, }); tl.fromTo(drop, { o: 0 }, { o: 1, duration: 0.15 }, 0) .to(drop, { z: 0, duration: 0.95, ease: 'bounce.out' }, 0) .fromTo(startRing, { scale: 1 }, { scale: 1.35, duration: 0.16, ease: 'power2.out', yoyo: true, repeat: 1 }, 0.38); return tl; }; /* a hole swallows the ball: a little whirl, the ball spirals in and goes dark */ const swallow = (i) => { phase = 'off'; const h = maze.holes[i]; const b = maze.ball; const r0 = Math.hypot(b.x - h.x, b.y - h.y); const a0 = Math.atan2(b.y - h.y, b.x - h.x); const dir = (b.x - h.x) * b.vy - (b.y - h.y) * b.vx >= 0 ? 1 : -1; const bx = b.x; const by = b.y; const sink = { k: 0 }; whirl.style.left = h.x + 'px'; whirl.style.top = h.y + 'px'; tryNo = 2; const tl = gsap.timeline(); tl.to(sink, { k: 1, duration: 0.75, ease: 'power1.in', onUpdate: () => { const k = sink.k; const a = a0 + dir * Math.PI * 2.2 * k; const r = r0 * Math.pow(1 - k, 1.3); drop.dx = h.x + Math.cos(a) * r - bx; drop.dy = h.y + Math.sin(a) * r - by; drop.z = -R * 1.8 * k * k; drop.s = 1 - 0.45 * k; drop.b = 1 - 0.75 * k; }, }, 0) .fromTo(whirl, { opacity: 0, scale: 1.5, rotation: 0 }, { opacity: 1, scale: 0.9, duration: 0.3, ease: 'power2.out' }, 0) .to(whirl, { rotation: dir * 540, duration: 1.05, ease: 'power2.inOut' }, 0) .to(whirl, { opacity: 0, scale: 0.2, duration: 0.4, ease: 'power2.in' }, 0.65) .fromTo(holeEls[i], { scale: 1 }, { scale: 1.16, duration: 0.18, ease: 'power2.out', yoyo: true, repeat: 1 }, 0.62) .add(() => setHint(HINT_HOLE), 0.3) .add(() => { drop.o = 0; }, 0.8) .add(() => { dropIn(); }, 1.15); }; /* the ball rolls into the cup: it settles, the cup rings, the paper flies, the shop says so */ const home = () => { phase = 'festa'; const b = maze.ball; const c = maze.cup; const bx = b.x; const by = b.y; const sink = { k: 0 }; const tl = gsap.timeline(); tl.to(sink, { k: 1, duration: 0.5, ease: 'back.out(2)', onUpdate: () => { drop.dx = (c.x - bx) * sink.k; drop.dy = (c.y - by) * sink.k; drop.z = -4 * sink.k; }, }, 0) .fromTo(cupEl, { scale: 1 }, { scale: 1.3, duration: 0.14, ease: 'power2.out' }, 0.18) .to(cupEl, { scale: 1, duration: 0.9, ease: 'elastic.out(1.1, 0.35)' }, 0.32) .add(burst, 0.25) .add(() => setHint(HINT_HOME), 0.4) .set(win, { visibility: 'visible' }, 0.35) .fromTo(win, { opacity: 0, scale: 0.6, rotation: -9, y: 40 }, { opacity: 1, scale: 1, rotation: -3, y: 0, duration: 0.85, ease: 'elastic.out(1, 0.5)' }, 0.35) .fromTo(letters, { yPercent: 120, rotation: (i) => (i % 2 ? 14 : -14), opacity: 0 }, { yPercent: 0, rotation: 0, opacity: 1, duration: 0.7, stagger: 0.04, ease: 'back.out(2.6)' }, 0.5) .to(letters, { yPercent: -16, duration: 0.18, stagger: 0.04, ease: 'power1.out', yoyo: true, repeat: 1 }, 1.9) .to(letters, { yPercent: -60, opacity: 0, duration: 0.35, stagger: 0.02, ease: 'power2.in' }, 4.1) .to(win, { opacity: 0, scale: 0.85, rotation: 2, duration: 0.45, ease: 'power2.in' }, 4.25) .set(win, { visibility: 'hidden' }, 4.7) /* the ball comes up out of the cup and goes */ .to(drop, { z: 40, o: 0, s: 0.8, duration: 0.45, ease: 'power2.in' }, 4.0) .add(() => { tryNo = 1; setHint(HINT_START); }, 4.5) .add(() => { dropIn(); }, 4.75); }; /* the clock: physics in fixed steps of 1/240 s, inside GSAP's own ticker so it keeps time with the tweens */ const tick = (time, dms) => { clock = time; const dt = Math.min(0.1, dms / 1000); acc += dt; const n = Math.floor(acc / maze.STEP + 1e-6); acc -= n * maze.STEP; const auto = !hand && !keys.x && !keys.y && clock > handUntil; for (let i = 0; i < n; i++) { let input; if (phase !== 'play') input = { rest: true }; else if (keys.x || keys.y) input = { tx: -keys.y * MAX_TILT, ty: keys.x * MAX_TILT }; else if (hand) input = hand; else if (auto) input = { auto: true }; else input = { rest: true }; if (phase !== 'play' && phase !== 'festa') input = { rest: true }; const ev = maze.step(input); if (phase === 'play' && ev) { if (ev.type === 'hole') swallow(ev.i); else home(); break; } } /* a hard knock makes the board shudder for a moment */ const k = maze.knock(); if (k.v > 160 && phase === 'play') { const p = Math.min(1, (k.v - 160) / 600) * 0.9; gsap.fromTo(jolt, { x: k.ny * p, y: -k.nx * p }, { x: 0, y: 0, duration: 0.5, ease: 'elastic.out(1, 0.3)', overwrite: true }); } show(); }; /* ---- the hand: the pointer over the stage, a finger, the arrow keys ---- */ const handFrom = (ev) => { const r = table.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const nx = Math.max(-1, Math.min(1, (ev.clientX - cx) / (r.width * 0.42))); const ny = Math.max(-1, Math.min(1, (ev.clientY - cy) / (r.height * 0.42))); hand = { tx: -ny * MAX_TILT, ty: nx * MAX_TILT }; }; const letGo = () => { if (!hand) return; hand = null; /* the autopilot waits a little, then picks the ball up from where it is */ handUntil = clock + 2.2; maze.resume(); }; if (!REDUCED) { stage.addEventListener('pointermove', (ev) => { if (ev.pointerType === 'touch' && !ev.buttons && ev.pressure === 0) return; handFrom(ev); }); stage.addEventListener('pointerdown', (ev) => { handFrom(ev); if (ev.pointerType === 'touch') stage.setPointerCapture(ev.pointerId); }); stage.addEventListener('pointerup', (ev) => { if (ev.pointerType === 'touch') letGo(); }); stage.addEventListener('pointercancel', letGo); stage.addEventListener('pointerleave', letGo); const AX = { ArrowLeft: ['x', -1], ArrowRight: ['x', 1], ArrowUp: ['y', -1], ArrowDown: ['y', 1] }; addEventListener('keydown', (ev) => { const a = AX[ev.key]; if (!a) return; ev.preventDefault(); keys[a[0]] = a[1]; }); addEventListener('keyup', (ev) => { const a = AX[ev.key]; if (!a) return; if (keys[a[0]] === a[1]) keys[a[0]] = 0; if (!keys.x && !keys.y) { handUntil = clock + 2.2; maze.resume(); } }); } /* ================================================================ opening */ setHint(HINT_START, true); gsap.set(win, { visibility: 'hidden', opacity: 0, xPercent: -50, yPercent: -50 }); gsap.set(strips, { visibility: 'hidden', transformPerspective: 500 }); gsap.set(whirl, { opacity: 0 }); if (REDUCED) { /* no travel: the toy is already done, the ball resting in the cup, and it all simply fades in */ maze.ball.x = maze.cup.x; maze.ball.y = maze.cup.y; drop.z = -4; show(); setHint('Rolled home. The steel ball is resting in the cup.', true); gsap.set(win, { visibility: 'visible', rotation: -3 }); gsap.fromTo([scene, win], { opacity: 0 }, { opacity: 1, duration: 0.8, stagger: 0.3, ease: 'power1.out' }); return; } drop.o = 0; show(); gsap.ticker.add(tick); const open = gsap.timeline({ delay: 0.15 }); open.fromTo(scene, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: 'power1.out' }, 0) .fromTo(intro, { y: 90, rotationZ: -3 }, { y: 0, rotationZ: 0, duration: 1.2, ease: 'back.out(1.5)' }, 0) .fromTo(lift, { z: 120 }, { z: 0, duration: 1, ease: 'back.out(1.8)' }, 0.35) .fromTo(wallEls.concat(rimEls), { '--rise': 0.02 }, { '--rise': 1, duration: 0.7, ease: 'back.out(2.4)', stagger: { each: 0.03, from: 'center' } }, 0.6) .fromTo(lineEl, { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 1.3, ease: 'power2.inOut' }, 0.9) .fromTo(holeEls.concat([cupEl, startRing]), { scale: 0 }, { scale: 1, duration: 0.55, ease: 'back.out(2.2)', stagger: 0.05 }, 1) .fromTo(knobs, { rotation: -120 }, { rotation: 0, duration: 1, ease: 'elastic.out(1, 0.45)', stagger: 0.1 }, 0.8) .fromTo('.shop', { yPercent: -60, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.7, ease: 'back.out(2)' }, 0.3) .fromTo(hint, { yPercent: 60, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.7, ease: 'back.out(2)' }, 0.5) .add(() => { dropIn(); }, 2.2); })();