Spaces:
Paused
Paused
| import { hash, mix } from "./util.js"; | |
| import { effects, Centerline, buildCenterline } from "./snakeMotion.js"; | |
| let stage = null, g = null, S = null, prefs = null; | |
| const MARGIN = 1.3; | |
| let VW = 800, VH = 500; | |
| const C = { ready: false, tilt: 0, F: 1, ox: 0, oy: 0, fx: 0, fy: 0, sin: 0, cos: 1, D: 40 }; | |
| // Fits the scene canvas to its box at the device pixel ratio. | |
| function sizeStage() { | |
| const w = stage.parentElement.clientWidth; | |
| const h = Math.round(Math.max(340, Math.min(w * 0.64, window.innerHeight - 140))); | |
| const dpr = window.devicePixelRatio || 1; | |
| if (stage.width !== Math.round(w * dpr) || stage.height !== Math.round(h * dpr)) { | |
| stage.width = Math.round(w * dpr); stage.height = Math.round(h * dpr); | |
| } | |
| stage.style.height = h + "px"; | |
| VW = w; VH = h; | |
| } | |
| // Projects a world point (cells, z up) to screen pixels; `s` is pixels per cell at that depth. | |
| function P(x, y, z) { | |
| const X = x - C.fx, Y = y - C.fy; | |
| const sy = Y * C.cos - z * C.sin; | |
| const k = C.F / (C.D - Y * C.sin - z * C.cos); | |
| return { x: C.ox + X * k, y: C.oy + sy * k, s: k }; | |
| } | |
| // Fills a polygon given in world coordinates. | |
| function poly(pts, fill) { | |
| g.beginPath(); | |
| pts.forEach(([x, y, z], i) => { const p = P(x, y, z); i ? g.lineTo(p.x, p.y) : g.moveTo(p.x, p.y); }); | |
| g.closePath(); g.fillStyle = fill; g.fill(); | |
| } | |
| // Adds a flat ellipse lying on the ground (or at height z) to the current path. | |
| function groundBlob(x, y, r, z = 0) { | |
| const p = P(x, y, z), rx = r * p.s, ry = Math.max(0.5, r * p.s * (C.cos + 0.08)); | |
| g.moveTo(p.x + rx, p.y); g.ellipse(p.x, p.y, rx, ry, 0, 0, Math.PI * 2); | |
| } | |
| // Draws an axis-aligned block with its top, front and camera-facing side. | |
| function block(x0, y0, x1, y1, z0, z1, top, front, side) { | |
| const sx = (x0 + x1) / 2 > C.fx ? x0 : x1; | |
| poly([[sx, y0, z0], [sx, y1, z0], [sx, y1, z1], [sx, y0, z1]], side); | |
| poly([[x0, y1, z0], [x1, y1, z0], [x1, y1, z1], [x0, y1, z1]], front); | |
| poly([[x0, y0, z1], [x1, y0, z1], [x1, y1, z1], [x0, y1, z1]], top); | |
| } | |
| // Moves the camera toward the fitted overview, or toward the snake's head when following. | |
| function updateCamera(dt, head) { | |
| const W = S.width, H = S.height, M = MARGIN; | |
| const a = C.ready ? 1 - Math.exp(-dt / 180) : 1; | |
| const tiltT = 0; | |
| C.tilt += (tiltT - C.tilt) * a; | |
| if (Math.abs(C.tilt - tiltT) < 1e-3) C.tilt = tiltT; | |
| C.sin = Math.sin(C.tilt); C.cos = Math.cos(C.tilt); | |
| C.D = Math.max(W, H) * 1.7 + 8; | |
| const keep = { F: C.F, ox: C.ox, oy: C.oy, fx: C.fx, fy: C.fy }; | |
| Object.assign(C, { F: 1, ox: 0, oy: 0, fx: W / 2, fy: H / 2 }); | |
| let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; | |
| for (const [x, y, z] of [[-M, -M, 0], [W + M, -M, 0], [-M, H + M, 0], [W + M, H + M, 0], [-M, -M, 1.2], [W + M, -M, 1.2]]) { | |
| const p = P(x, y, z); | |
| x0 = Math.min(x0, p.x); x1 = Math.max(x1, p.x); y0 = Math.min(y0, p.y); y1 = Math.max(y1, p.y); | |
| } | |
| Object.assign(C, keep); | |
| const fit = Math.min(VW / (x1 - x0), VH / (y1 - y0)); | |
| const T = { F: fit, fx: W / 2, fy: H / 2, ox: VW / 2 - fit * (x0 + x1) / 2, oy: VH / 2 - fit * (y0 + y1) / 2 }; | |
| if (prefs.follow && head) { | |
| Object.assign(T, { F: fit * Math.max(1.4, Math.min(2.6, Math.max(W, H) / 12)), fx: head.x, fy: head.y, ox: VW / 2, oy: VH / 2 }); | |
| } | |
| for (const k of ["F", "fx", "fy", "ox", "oy"]) { | |
| C[k] += (T[k] - C[k]) * a; | |
| if (Math.abs(T[k] - C[k]) < 1e-3) C[k] = T[k]; | |
| } | |
| C.ready = true; | |
| } | |
| /* scenery that only depends on the board size */ | |
| let decor = { key: "", bushes: [], blades: [], flowers: [], lanterns: [] }; | |
| // Scatters bushes, grass and flowers around the yard for the current board size. | |
| function buildDecor(W, H) { | |
| const key = W + "x" + H; | |
| if (decor.key === key) return decor; | |
| const M = MARGIN, bushes = [], blades = [], flowers = []; | |
| const ring = (x, y) => x < -0.35 || y < -0.35 || x > W + 0.35 || y > H + 0.35; | |
| let i = 0; | |
| for (let t = 0; t < 2 * (W + H) + 8; t += 0.8, i++) { | |
| const r1 = hash(i, 7), r2 = hash(i, 11), r3 = hash(i, 13); | |
| if (r1 < 0.3) continue; | |
| const off = 0.55 + r2 * (M - 0.35); | |
| let x, y; | |
| if (t < W + 2) { x = t - 1; y = -off; } | |
| else if (t < W + H + 4) { x = W + off; y = t - (W + 2) - 1; } | |
| else if (t < 2 * W + H + 6) { x = W + 1 - (t - (W + H + 4)); y = H + off; } | |
| else { x = -off; y = H + 1 - (t - (2 * W + H + 6)); } | |
| if (!ring(x, y)) continue; | |
| const r = 0.28 + r3 * 0.34; | |
| const parts = []; | |
| for (let k = 0; k < 4; k++) parts.push([(hash(i, 20 + k) - 0.5) * r * 1.3, (hash(i, 30 + k) - 0.5) * r * 0.9, r * (0.55 + hash(i, 40 + k) * 0.45)]); | |
| const hue = hash(i, 50); | |
| bushes.push({ x, y, r, parts, dark: hue < 0.5 ? "#1e3a17" : "#23421b", mid: hue < 0.5 ? "#2f5a22" : "#3b6526", light: hue < 0.5 ? "#4f8233" : "#5f8f35", | |
| bloom: hash(i, 60) < 0.35 ? (hash(i, 61) < 0.5 ? "#f3a6c8" : "#fff3d6") : null }); | |
| } | |
| for (let k = 0; k < (W + H) * 14; k++) { | |
| const x = -M + hash(k, 71) * (W + 2 * M), y = -M + hash(k, 73) * (H + 2 * M); | |
| if (!ring(x, y)) continue; | |
| blades.push([x, y, (hash(k, 75) - 0.5) * 0.12, 0.08 + hash(k, 77) * 0.14, hash(k, 79) < 0.5]); | |
| } | |
| for (let k = 0; k < (W + H) * 1.2; k++) { | |
| const x = -M + hash(k, 81) * (W + 2 * M), y = -M + hash(k, 83) * (H + 2 * M); | |
| if (ring(x, y)) flowers.push([x, y, ["#f7b6d2", "#fff5dc", "#ffd66b", "#c9b6ff"][Math.floor(hash(k, 85) * 4)]]); | |
| } | |
| const lanterns = [[0, 0], [W, 0], [0, H], [W, H]]; | |
| decor = { key, bushes, blades, flowers, lanterns }; | |
| return decor; | |
| } | |
| /* ground layer, cached while the camera and board stand still */ | |
| const groundCv = document.createElement("canvas"); | |
| const gctx = groundCv.getContext("2d"); | |
| let groundKey = ""; | |
| // Paints the yard, the paving stones, rock shadows and grass into the cached ground layer. | |
| function paintGround(W, H, dpr) { | |
| const key = [VW, VH, dpr, C.F.toFixed(3), C.ox.toFixed(2), C.oy.toFixed(2), C.fx.toFixed(3), C.fy.toFixed(3), C.tilt.toFixed(4), prefs.grid, W, H, S.obstacles.join(";")].join("|"); | |
| if (key === groundKey) return; | |
| groundKey = key; | |
| if (groundCv.width !== stage.width || groundCv.height !== stage.height) { groundCv.width = stage.width; groundCv.height = stage.height; } | |
| gctx.setTransform(dpr, 0, 0, dpr, 0, 0); | |
| withCtx(gctx, () => { | |
| const M = MARGIN, d = buildDecor(W, H); | |
| const bg = g.createLinearGradient(0, 0, 0, VH); | |
| bg.addColorStop(0, "#15260f"); bg.addColorStop(1, "#0e1b0b"); | |
| g.fillStyle = bg; g.fillRect(0, 0, VW, VH); | |
| poly([[-M - 3, -M - 3, 0], [W + M + 3, -M - 3, 0], [W + M + 3, H + M + 3, 0], [-M - 3, H + M + 3, 0]], "#2a4a1d"); | |
| poly([[-M, -M, 0], [W + M, -M, 0], [W + M, H + M, 0], [-M, H + M, 0]], "#3a6128"); | |
| g.lineCap = "round"; | |
| for (const [x, y, lean, h, light] of d.blades) { | |
| const a = P(x, y, 0), b = P(x + lean, y, h); | |
| g.strokeStyle = light ? "rgba(150,200,90,.55)" : "rgba(20,45,12,.55)"; | |
| g.lineWidth = Math.max(0.6, a.s * 0.035); | |
| g.beginPath(); g.moveTo(a.x, a.y); g.lineTo(b.x, b.y); g.stroke(); | |
| } | |
| for (const [x, y, c] of d.flowers) { g.beginPath(); groundBlob(x, y, 0.05, 0.02); g.fillStyle = c; g.fill(); } | |
| poly([[-0.08, -0.08, 0], [W + 0.08, -0.08, 0], [W + 0.08, H + 0.08, 0], [-0.08, H + 0.08, 0]], prefs.grid ? "#2b3322" : "#4a4a3f"); | |
| const L = []; | |
| for (let j = 0; j <= H; j++) { const row = []; for (let i = 0; i <= W; i++) row.push(P(i, j, 0)); L.push(row); } | |
| const inset = prefs.grid ? 0.06 : 0.018; | |
| for (let j = 0; j < H; j++) for (let i = 0; i < W; i++) { | |
| const q = [L[j][i], L[j][i + 1], L[j + 1][i + 1], L[j + 1][i]]; | |
| const cx = (q[0].x + q[1].x + q[2].x + q[3].x) / 4, cy = (q[0].y + q[1].y + q[2].y + q[3].y) / 4; | |
| const r = hash(i, j, 1), r2 = hash(i, j, 2); | |
| const l = 36 + r * 14, sat = 6 + r2 * 10, hue = 30 + hash(i, j, 3) * 40; | |
| g.beginPath(); | |
| q.forEach((p, k) => { const x = p.x + (cx - p.x) * inset * 2, y = p.y + (cy - p.y) * inset * 2; k ? g.lineTo(x, y) : g.moveTo(x, y); }); | |
| g.closePath(); | |
| g.fillStyle = `hsl(${hue},${sat}%,${l}%)`; g.fill(); | |
| g.strokeStyle = `hsla(${hue},${sat}%,${l + 14}%,.35)`; g.lineWidth = Math.max(0.5, q[0].s * 0.03); | |
| g.beginPath(); g.moveTo(q[3].x + (cx - q[3].x) * inset * 2, q[3].y + (cy - q[3].y) * inset * 2); | |
| g.lineTo(q[0].x + (cx - q[0].x) * inset * 2, q[0].y + (cy - q[0].y) * inset * 2); | |
| g.lineTo(q[1].x + (cx - q[1].x) * inset * 2, q[1].y + (cy - q[1].y) * inset * 2); g.stroke(); | |
| if (hash(i, j, 4) < 0.12) { g.beginPath(); groundBlob(i + 0.2 + hash(i, j, 5) * 0.6, j + 0.2 + hash(i, j, 6) * 0.6, 0.06 + hash(i, j, 7) * 0.08); g.fillStyle = "rgba(0,0,0,.12)"; g.fill(); } | |
| } | |
| g.fillStyle = "rgba(92,140,52,.85)"; | |
| g.beginPath(); | |
| for (let j = 0; j <= H; j++) for (let i = 0; i <= W; i++) if (hash(i, j, 8) < 0.28) groundBlob(i, j, 0.07 + hash(i, j, 9) * 0.09, 0.005); | |
| g.fill(); | |
| g.fillStyle = "rgba(0,0,0,.32)"; | |
| g.beginPath(); | |
| for (const [x, y] of S.obstacles) { | |
| const p = [[x + 0.1, y + 0.2], [x + 1.25, y + 0.2], [x + 1.25, y + 1.3], [x + 0.1, y + 1.3]].map(([a, b]) => P(a, b, 0)); | |
| p.forEach((q, k) => k ? g.lineTo(q.x, q.y) : g.moveTo(q.x, q.y)); g.closePath(); | |
| } | |
| g.fill(); | |
| }); | |
| } | |
| // Runs a drawing callback with the shared helpers pointed at another context. | |
| function withCtx(ctx, fn) { const prev = g; g = ctx; try { fn(); } finally { g = prev; } } | |
| const SKIN = Array.from({ length: 33 }, (_, i) => { | |
| const base = mix("#86c94a", "#3d7426", i / 32); | |
| return { base, dark: mix(base, "#0b1a06", 0.55), light: mix(base, "#f1ffd0", 0.5), spot: mix(base, "#14290b", 0.62) }; | |
| }); | |
| const FUR = [["#f5f0e8", "#d9cfc0"], ["#ead6b8", "#c8ab86"], ["#c9a07a", "#9c7550"], ["#9a8f86", "#6f655c"]]; | |
| // Draws a sleeping rabbit (a piece of food) standing on the given cell. | |
| function drawRabbit(fx, fy, now) { | |
| const seed = hash(fx, fy, 17), p = P(fx + 0.5, fy + 0.62, 0), u = p.s * 1.35; | |
| const flip = seed < 0.5 ? -1 : 1, [fur, shade] = FUR[Math.floor(hash(fx, fy, 19) * FUR.length)]; | |
| const br = 1 + 0.04 * Math.sin(now / 540 + seed * 30); | |
| g.save(); g.translate(p.x, p.y); g.scale(flip, 1); | |
| g.fillStyle = "rgba(0,0,0,.3)"; g.beginPath(); g.ellipse(0.02 * u, 0, 0.38 * u, 0.12 * u, 0, 0, Math.PI * 2); g.fill(); | |
| const body = g.createRadialGradient(-0.1 * u, -0.34 * u, 0.03 * u, 0, -0.18 * u, 0.42 * u); | |
| body.addColorStop(0, "#ffffff"); body.addColorStop(0.35, fur); body.addColorStop(1, shade); | |
| g.fillStyle = body; g.beginPath(); g.ellipse(-0.05 * u, -0.19 * u * br, 0.34 * u, 0.22 * u * br, 0, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = "#fffaf2"; g.beginPath(); g.arc(-0.37 * u, -0.2 * u, 0.075 * u, 0, Math.PI * 2); g.fill(); | |
| for (const [dx, dy] of [[0.02, -0.36], [0.07, -0.31]]) { | |
| g.save(); g.translate(dx * u, dy * u * br); g.rotate(-0.28); | |
| g.fillStyle = shade; g.beginPath(); g.ellipse(0, 0, 0.21 * u, 0.06 * u, 0, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = "#efb3b3"; g.beginPath(); g.ellipse(0.01 * u, 0.005 * u, 0.15 * u, 0.028 * u, 0, 0, Math.PI * 2); g.fill(); | |
| g.restore(); | |
| } | |
| const head = g.createRadialGradient(0.2 * u, -0.33 * u, 0.02 * u, 0.24 * u, -0.26 * u, 0.2 * u); | |
| head.addColorStop(0, "#ffffff"); head.addColorStop(0.4, fur); head.addColorStop(1, shade); | |
| g.fillStyle = head; g.beginPath(); g.ellipse(0.24 * u, -0.25 * u, 0.16 * u, 0.14 * u, 0, 0, Math.PI * 2); g.fill(); | |
| g.strokeStyle = "#3a2a22"; g.lineWidth = Math.max(0.7, 0.02 * u); g.lineCap = "round"; | |
| g.beginPath(); g.arc(0.27 * u, -0.28 * u, 0.035 * u, 0.15 * Math.PI, 0.85 * Math.PI); g.stroke(); | |
| g.fillStyle = "#e58f9b"; g.beginPath(); g.arc(0.39 * u, -0.24 * u, 0.022 * u, 0, Math.PI * 2); g.fill(); | |
| g.restore(); | |
| g.textAlign = "center"; g.textBaseline = "middle"; | |
| for (let k = 0; k < 3; k++) { | |
| const ph = ((now / 1000 + seed * 5 + k * 0.8) % 2.4) / 2.4; | |
| g.globalAlpha = Math.sin(ph * Math.PI) * 0.9; | |
| g.fillStyle = "#ffffff"; | |
| g.font = `700 ${Math.max(6, (0.16 + 0.12 * ph) * u)}px ui-sans-serif, system-ui, sans-serif`; | |
| g.fillText("z", p.x + flip * (0.2 + ph * 0.3) * u, p.y - (0.5 + ph * 0.55) * u); | |
| } | |
| g.globalAlpha = 1; | |
| } | |
| // Draws one stone block of an obstacle with moss on top. | |
| function drawRock(x, y) { | |
| const h = 0.72 + hash(x, y, 21) * 0.26, i = 0.03, t = hash(x, y, 23); | |
| const l = 34 + t * 9, hue = 30 + hash(x, y, 37) * 25; | |
| const pt = P(x + 0.5, y + 0.5, h), pb = P(x + 0.5, y + 1, 0); | |
| const fg = g.createLinearGradient(pt.x, pt.y, pb.x, pb.y); | |
| fg.addColorStop(0, `hsl(${hue},8%,${l - 2}%)`); fg.addColorStop(1, `hsl(${hue},9%,${l - 14}%)`); | |
| const tg = g.createLinearGradient(pt.x - pt.s * 0.5, pt.y - pt.s * 0.4, pt.x + pt.s * 0.5, pt.y + pt.s * 0.3); | |
| tg.addColorStop(0, `hsl(${hue},7%,${l + 16}%)`); tg.addColorStop(1, `hsl(${hue},8%,${l + 4}%)`); | |
| block(x + i, y + i, x + 1 - i, y + 1 - i, 0, h, tg, fg, `hsl(${hue},10%,${l - 18}%)`); | |
| g.fillStyle = "rgba(0,0,0,.18)"; | |
| for (let k = 0; k < 5; k++) { | |
| const sp = P(x + 0.12 + hash(x, y, 40 + k) * 0.76, y + 1 - i, h * (0.1 + hash(x, y, 50 + k) * 0.8)); | |
| g.beginPath(); g.arc(sp.x, sp.y, Math.max(0.6, sp.s * 0.03), 0, Math.PI * 2); g.fill(); | |
| } | |
| const e0 = P(x + i, y + 1 - i, h), e1 = P(x + 1 - i, y + 1 - i, h); | |
| g.strokeStyle = `hsla(${hue},10%,${l + 24}%,.55)`; g.lineWidth = Math.max(0.6, e0.s * 0.025); | |
| g.beginPath(); g.moveTo(e0.x, e0.y); g.lineTo(e1.x, e1.y); g.stroke(); | |
| const p0 = P(x + 0.2, y + 1 - i, h * 0.7), p1 = P(x + 0.45, y + 1 - i, h * 0.45), p2 = P(x + 0.4, y + 1 - i, h * 0.15); | |
| g.strokeStyle = "rgba(0,0,0,.28)"; g.lineWidth = Math.max(0.6, p0.s * 0.02); | |
| g.beginPath(); g.moveTo(p0.x, p0.y); g.lineTo(p1.x, p1.y); g.lineTo(p2.x, p2.y); g.stroke(); | |
| g.beginPath(); | |
| groundBlob(x + 0.3 + hash(x, y, 25) * 0.4, y + 0.3 + hash(x, y, 27) * 0.4, 0.16 + hash(x, y, 29) * 0.12, h + 0.001); | |
| if (hash(x, y, 31) < 0.6) groundBlob(x + 0.2 + hash(x, y, 33) * 0.6, y + 0.25 + hash(x, y, 35) * 0.5, 0.1, h + 0.001); | |
| g.fillStyle = "rgba(88,132,46,.92)"; g.fill(); | |
| g.beginPath(); groundBlob(x + 0.5, y + 1.02, 0.12 + t * 0.1, 0.01); g.fillStyle = "rgba(70,120,40,.9)"; g.fill(); | |
| } | |
| // Draws a wooden fence post (taller with a lantern on the corners). | |
| function drawPost(x, y, lantern, lit) { | |
| const w = lantern ? 0.13 : 0.08, h = lantern ? 1.25 : 0.82; | |
| block(x - w, y - w, x + w, y + w, 0, h, "#8d6a45", "#5f432a", "#4a331f"); | |
| if (!lantern) return; | |
| block(x - 0.2, y - 0.2, x + 0.2, y + 0.2, h, h + 0.05, "#3b2a1c", "#2d2016", "#241a12"); | |
| block(x - 0.15, y - 0.15, x + 0.15, y + 0.15, h + 0.05, h + 0.42, lit ? "#ffe3a0" : "#d8cfb8", lit ? "#ffc864" : "#bdb39b", lit ? "#f0a848" : "#a39a84"); | |
| const f = P(x, y + 0.151, h + 0.24); | |
| g.strokeStyle = "#2d2016"; g.lineWidth = Math.max(0.8, f.s * 0.03); | |
| const a = P(x, y + 0.151, h + 0.05), b = P(x, y + 0.151, h + 0.42); | |
| g.beginPath(); g.moveTo(a.x, a.y); g.lineTo(b.x, b.y); g.stroke(); | |
| block(x - 0.22, y - 0.22, x + 0.22, y + 0.22, h + 0.42, h + 0.5, "#4a3423", "#33241a", "#2a1e15"); | |
| } | |
| // Draws a pair of fence rails between two posts. | |
| function drawRails(ax, ay, bx, by) { | |
| for (const z of [0.36, 0.66]) { | |
| const a = P(ax, ay, z), b = P(bx, by, z); | |
| g.lineCap = "butt"; | |
| g.strokeStyle = "#4c3521"; g.lineWidth = Math.max(1, a.s * 0.1); | |
| g.beginPath(); g.moveTo(a.x, a.y + a.s * 0.02); g.lineTo(b.x, b.y + b.s * 0.02); g.stroke(); | |
| g.strokeStyle = "#7d5b3a"; g.lineWidth = Math.max(0.8, a.s * 0.06); | |
| g.beginPath(); g.moveTo(a.x, a.y - a.s * 0.015); g.lineTo(b.x, b.y - b.s * 0.015); g.stroke(); | |
| } | |
| } | |
| // Draws one leafy bush, optionally flowering. | |
| function drawBush(b) { | |
| for (const [dx, dy, r] of b.parts) { | |
| const p = P(b.x + dx, b.y + dy, r * 0.75), R = r * p.s; | |
| g.fillStyle = b.dark; g.beginPath(); g.arc(p.x, p.y, R, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = b.mid; g.beginPath(); g.arc(p.x - R * 0.12, p.y - R * 0.16, R * 0.8, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = b.light; g.beginPath(); g.arc(p.x - R * 0.3, p.y - R * 0.36, R * 0.38, 0, Math.PI * 2); g.fill(); | |
| if (b.bloom) { | |
| g.fillStyle = b.bloom; | |
| for (let k = 0; k < 3; k++) { g.beginPath(); g.arc(p.x + (k - 1) * R * 0.45, p.y - R * (0.25 + 0.2 * (k % 2)), Math.max(1, R * 0.12), 0, Math.PI * 2); g.fill(); } | |
| } | |
| } | |
| } | |
| // Collects the snake's body samples and head as depth-sorted drawables. | |
| function snakeItems(cl, items, now) { | |
| const total = Math.max(0.001, cl.total); | |
| const R = 0.36; | |
| const rad = (d) => { const t = d / total; return R * (t < 0.5 ? 1 : 1 - (t - 0.5) / 0.5 * 0.65); }; | |
| let lastD = -1; | |
| for (let i = cl.n - 1; i >= 0; i--) { | |
| const q = { x: cl.x[i], y: cl.y[i], d: cl.d[i] }; | |
| if (lastD >= 0 && lastD - q.d < 0.1 && i > 0) continue; | |
| lastD = q.d; | |
| const r = rad(q.d), sk = SKIN[Math.round(Math.min(1, q.d / Math.max(total, 4)) * 32)]; | |
| const spot = Math.floor(q.d / 0.45) % 2 === 1 && q.d > 0.5; | |
| items.push({ k: q.y + r + (1 - q.d / total) * 1e-3, f: () => { | |
| const p = P(q.x, q.y, r), pr = r * p.s; | |
| g.fillStyle = sk.dark; g.beginPath(); g.arc(p.x, p.y, pr, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = sk.base; g.beginPath(); g.arc(p.x - pr * 0.05, p.y - pr * 0.1, pr * 0.86, 0, Math.PI * 2); g.fill(); | |
| if (spot) { g.fillStyle = sk.spot; g.beginPath(); g.ellipse(p.x, p.y - pr * 0.18, pr * 0.42, pr * 0.3, 0, 0, Math.PI * 2); g.fill(); } | |
| g.fillStyle = sk.light; g.beginPath(); g.ellipse(p.x - pr * 0.3, p.y - pr * 0.42, pr * 0.28, pr * 0.16, -0.4, 0, Math.PI * 2); g.fill(); | |
| } }); | |
| } | |
| const h = { x: cl.x[0], y: cl.y[0] }, k4 = Math.min(cl.n - 1, 4), nx = { x: cl.x[k4], y: cl.y[k4] }; | |
| let dx = h.x - nx.x, dy = h.y - nx.y; | |
| if (cl.n < 2 || Math.hypot(dx, dy) < 1e-6) [dx, dy] = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0] }[S.direction] || [1, 0]; | |
| const len = Math.hypot(dx, dy); dx /= len; dy /= len; | |
| items.push({ k: h.y + 0.4 + 2e-3, f: () => drawHead(h.x, h.y, dx, dy, now) }); | |
| } | |
| // Draws the snake's head: skull, snout, eyes, nostrils and a flicking tongue. | |
| function drawHead(x, y, dx, dy, now) { | |
| const px = -dy, py = dx, sk = SKIN[0]; | |
| const flick = (now % 2600) < 360 && !S.game_over; | |
| if (flick) { | |
| const out = 0.62 + 0.2 * Math.sin((now % 2600) / 360 * Math.PI); | |
| const a = P(x + dx * 0.4, y + dy * 0.4, 0.2), b = P(x + dx * out, y + dy * out, 0.2); | |
| const f1 = P(x + dx * (out + 0.12) + px * 0.07, y + dy * (out + 0.12) + py * 0.07, 0.2); | |
| const f2 = P(x + dx * (out + 0.12) - px * 0.07, y + dy * (out + 0.12) - py * 0.07, 0.2); | |
| g.strokeStyle = "#d42a4c"; g.lineWidth = Math.max(1, a.s * 0.035); g.lineCap = "round"; | |
| g.beginPath(); g.moveTo(a.x, a.y); g.lineTo(b.x, b.y); g.lineTo(f1.x, f1.y); g.moveTo(b.x, b.y); g.lineTo(f2.x, f2.y); g.stroke(); | |
| } | |
| const skull = P(x - dx * 0.02, y - dy * 0.02, 0.38), snout = P(x + dx * 0.24, y + dy * 0.24, 0.34); | |
| const back = skull.y < snout.y ? [skull, 0.44] : [snout, 0.34], front = skull.y < snout.y ? [snout, 0.34] : [skull, 0.44]; | |
| for (const [p, r] of [back, front]) { | |
| const pr = r * p.s; | |
| g.fillStyle = sk.dark; g.beginPath(); g.arc(p.x, p.y, pr, 0, Math.PI * 2); g.fill(); | |
| const gr = g.createRadialGradient(p.x - pr * 0.3, p.y - pr * 0.4, pr * 0.1, p.x, p.y, pr); | |
| gr.addColorStop(0, sk.light); gr.addColorStop(0.5, sk.base); gr.addColorStop(1, sk.dark); | |
| g.fillStyle = gr; g.beginPath(); g.arc(p.x - pr * 0.04, p.y - pr * 0.08, pr * 0.9, 0, Math.PI * 2); g.fill(); | |
| } | |
| for (const s of [1, -1]) { | |
| const n = P(x + dx * 0.5 + px * 0.09 * s, y + dy * 0.5 + py * 0.09 * s, 0.46); | |
| g.fillStyle = "#16300c"; g.beginPath(); g.arc(n.x, n.y, Math.max(0.8, n.s * 0.025), 0, Math.PI * 2); g.fill(); | |
| } | |
| const eyes = [1, -1].map((s) => P(x + dx * 0.12 + px * 0.25 * s, y + dy * 0.12 + py * 0.25 * s, 0.6)).sort((a, b) => a.y - b.y); | |
| for (const e of eyes) { | |
| const er = Math.max(1.8, e.s * 0.115); | |
| g.fillStyle = "#1a1a10"; g.beginPath(); g.arc(e.x, e.y, er * 1.15, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = "#f2d45c"; g.beginPath(); g.arc(e.x, e.y, er, 0, Math.PI * 2); g.fill(); | |
| if (S.game_over) { | |
| g.strokeStyle = "#111"; g.lineWidth = Math.max(1, er * 0.35); | |
| g.beginPath(); g.moveTo(e.x - er * 0.7, e.y - er * 0.7); g.lineTo(e.x + er * 0.7, e.y + er * 0.7); | |
| g.moveTo(e.x + er * 0.7, e.y - er * 0.7); g.lineTo(e.x - er * 0.7, e.y + er * 0.7); g.stroke(); | |
| } else { | |
| const sx = P(x + dx * 0.2, y + dy * 0.2, 0.6), ang = Math.atan2(sx.y - e.y, sx.x - e.x); | |
| g.fillStyle = "#0d0d0a"; g.beginPath(); g.ellipse(e.x + Math.cos(ang) * er * 0.25, e.y + Math.sin(ang) * er * 0.25, er * 0.28, er * 0.8, ang, 0, Math.PI * 2); g.fill(); | |
| g.fillStyle = "rgba(255,255,255,.9)"; g.beginPath(); g.arc(e.x - er * 0.35, e.y - er * 0.4, er * 0.28, 0, Math.PI * 2); g.fill(); | |
| } | |
| } | |
| } | |
| // Tints the finished frame for the time of day and lights the lanterns. | |
| function lighting(now) { | |
| const tod = prefs.tod, d = decor; | |
| g.globalCompositeOperation = "multiply"; | |
| const lg = g.createLinearGradient(0, 0, VW, VH); | |
| if (tod === "golden") { lg.addColorStop(0, "#ffe7b8"); lg.addColorStop(1, "#d8935a"); } | |
| else if (tod === "night") { lg.addColorStop(0, "#6a7db0"); lg.addColorStop(1, "#2f3a66"); } | |
| else { lg.addColorStop(0, "#ffffff"); lg.addColorStop(1, "#e9eee0"); } | |
| g.fillStyle = lg; g.fillRect(0, 0, VW, VH); | |
| g.globalCompositeOperation = "screen"; | |
| if (tod !== "night") { | |
| const sun = g.createRadialGradient(VW * 0.08, -VH * 0.15, 0, VW * 0.08, -VH * 0.15, VW * 0.95); | |
| sun.addColorStop(0, tod === "golden" ? "rgba(255,186,100,.42)" : "rgba(255,250,225,.22)"); sun.addColorStop(1, "rgba(0,0,0,0)"); | |
| g.fillStyle = sun; g.fillRect(0, 0, VW, VH); | |
| } | |
| if (tod !== "day") { | |
| g.globalCompositeOperation = "lighter"; | |
| const flicker = 1 + 0.05 * Math.sin(now / 90) + 0.03 * Math.sin(now / 37); | |
| for (const [x, y] of d.lanterns) { | |
| const p = P(x, y, 1.45), R = p.s * (tod === "night" ? 5.5 : 3.2) * flicker; | |
| const gl = g.createRadialGradient(p.x, p.y, 0, p.x, p.y, R); | |
| gl.addColorStop(0, tod === "night" ? "rgba(255,176,80,.55)" : "rgba(255,170,80,.32)"); gl.addColorStop(1, "rgba(255,150,60,0)"); | |
| g.fillStyle = gl; g.fillRect(p.x - R, p.y - R, 2 * R, 2 * R); | |
| } | |
| } | |
| g.globalCompositeOperation = "source-over"; | |
| const v = g.createRadialGradient(VW / 2, VH / 2, Math.min(VW, VH) * 0.35, VW / 2, VH / 2, Math.hypot(VW, VH) * 0.62); | |
| v.addColorStop(0, "rgba(0,0,0,0)"); v.addColorStop(1, "rgba(0,0,0,.5)"); | |
| g.fillStyle = v; g.fillRect(0, 0, VW, VH); | |
| } | |
| // Draws the sparkle burst where food was just eaten. | |
| function drawEffects(now) { | |
| for (let i = effects.length - 1; i >= 0; i--) { | |
| const e = effects[i], t = (now - e.at) / 750; | |
| if (t >= 1) { effects.splice(i, 1); continue; } | |
| const c = P(e.x, e.y, 0.4 + t * 0.6), a = 1 - t; | |
| g.fillStyle = `rgba(255,220,120,${a})`; | |
| for (let k = 0; k < 10; k++) { | |
| const ang = k / 10 * Math.PI * 2, r = c.s * (0.2 + t * 0.7); | |
| g.beginPath(); g.arc(c.x + Math.cos(ang) * r, c.y + Math.sin(ang) * r * 0.7, Math.max(1, c.s * 0.05 * a), 0, Math.PI * 2); g.fill(); | |
| } | |
| g.font = `700 ${Math.max(10, c.s * 0.4)}px ui-sans-serif, system-ui, sans-serif`; | |
| g.textAlign = "center"; g.fillStyle = `rgba(255,236,160,${a})`; | |
| g.fillText("+1", c.x, c.y - c.s * (0.5 + t * 0.5)); | |
| } | |
| } | |
| let lastFrame = 0; | |
| const CL = new Centerline(); | |
| // Renders one frame of the yard: ground, then every object back to front, then lighting. | |
| function frame(now) { | |
| if (!S) return; | |
| const dt = lastFrame ? Math.min(100, now - lastFrame) : 16; | |
| lastFrame = now; | |
| const W = S.width, H = S.height, dpr = window.devicePixelRatio || 1; | |
| const path = S.snake.length ? buildCenterline(S, now, CL) : null; | |
| updateCamera(dt, path && { x: path.x[0], y: path.y[0] }); | |
| const d = buildDecor(W, H); | |
| g.setTransform(dpr, 0, 0, dpr, 0, 0); | |
| paintGround(W, H, dpr); | |
| g.setTransform(1, 0, 0, 1, 0, 0); | |
| g.drawImage(groundCv, 0, 0); | |
| g.setTransform(dpr, 0, 0, dpr, 0, 0); | |
| if (path) { | |
| const total = Math.max(0.001, path.total); | |
| g.fillStyle = "rgba(0,0,0,.26)"; g.beginPath(); | |
| for (let i = 0; i < path.n; i += 3) { | |
| const t = path.d[i] / total, r = 0.36 * (t < 0.5 ? 1 : 1 - (t - 0.5) / 0.5 * 0.65); | |
| groundBlob(path.x[i] + 0.1, path.y[i] + 0.14, r); | |
| } | |
| g.fill(); | |
| } | |
| const lit = prefs.tod !== "day"; | |
| const items = []; | |
| for (const b of d.bushes) items.push({ k: b.y + b.r, f: () => drawBush(b) }); | |
| for (let i = 0; i <= W; i++) { | |
| for (const y of [0, H]) { | |
| const corner = i === 0 || i === W; | |
| items.push({ k: y + 0.1, f: () => drawPost(i, y, corner, lit) }); | |
| if (i < W) items.push({ k: y + 0.02, f: () => drawRails(i, y, i + 1, y) }); | |
| } | |
| } | |
| for (let j = 0; j < H; j++) { | |
| for (const x of [0, W]) { | |
| if (j > 0) items.push({ k: j + 0.1, f: () => drawPost(x, j, false, lit) }); | |
| items.push({ k: j + 1.02, f: () => drawRails(x, j, x, j + 1) }); | |
| } | |
| } | |
| for (const [x, y] of S.obstacles) items.push({ k: y + 0.96 - Math.abs(x + 0.5 - C.fx) * 1e-4, f: () => drawRock(x, y) }); | |
| for (const [x, y] of S.foods) items.push({ k: y + 0.8, f: () => drawRabbit(x, y, now) }); | |
| if (path) snakeItems(path, items, now); | |
| items.sort((a, b) => a.k - b.k); | |
| for (const it of items) it.f(); | |
| lighting(now); | |
| drawEffects(now); | |
| if (S.game_over) { g.fillStyle = "rgba(140,10,10,.18)"; g.fillRect(0, 0, VW, VH); } | |
| } | |
| // The flat top-down board, drawn with the 2D canvas API. | |
| export class CanvasRenderer { | |
| constructor(canvas, viewPrefs) { | |
| stage = canvas; g = canvas.getContext("2d"); prefs = viewPrefs; | |
| } | |
| // Takes a new server snapshot. | |
| update(state) { | |
| const first = !S || S.width !== state.width || S.height !== state.height; | |
| S = state; | |
| if (first) sizeStage(); | |
| } | |
| // Draws one frame. | |
| render(now) { frame(now); } | |
| // Refits the canvas to its box. | |
| resize() { sizeStage(); groundKey = ""; } | |
| // Called when another renderer takes over; the camera snaps into place next time. | |
| deactivate() { C.ready = false; lastFrame = 0; } | |
| destroy() {} | |
| } | |