import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; export default function sketch({ scene, camera, renderer, gui, size, canvas, sfx }) { const params = { aiSkill: 0.75, power: 5.0, guide: true, felt: '#0f6b4e', wood: '#4a2614', sound: 0.8, newGame: () => showMenu() }; // ---------- sound ---------- const SND = { cue: 'sfx_WSSY5aiByEZl', clack: 'sfx_Qs6fzucinlsd', cush: 'sfx_QfhdESmNd5Tk', pocket: 'sfx_R4cwxK1lYAgn', room: 'sfx_14HvJM44Gb97', win: 'sfx_0Cgva6QMtMzx' }; const lastPlay = {}; function snd(id, vol, x, y, gapMs = 30, rate = 1) { if (!sfx || vol < 0.02) return; const now = performance.now(); if (lastPlay[id] && now - lastPlay[id] < gapMs) return; lastPlay[id] = now; const portrait = size.width < size.height; const pan = Math.max(-0.7, Math.min(0.7, portrait ? (y || 0) / 0.635 * 0.6 : (x || 0) / 1.27 * 0.6)); sfx.play(id, { volume: Math.min(1, vol), rate: rate * (0.9 + Math.random() * 0.2), pan }); } if (sfx) { sfx.volume = params.sound; sfx.loop(SND.room, { volume: 0.22 }); } const TW = 2.54, TH = 1.27, R = 0.0286, RAIL = 0.13, CUSH = 0.045, RAIL_H = 0.058; const COLORS = ['#f5f1e8', '#f2c230', '#1d4fb8', '#d0302b', '#5b2d8e', '#f07a1e', '#1c8a4a', '#7a1f1f', '#111111']; const touchScreen = matchMedia('(pointer: coarse)').matches; const pockets = [ [-TW / 2 - 0.012, -TH / 2 - 0.012, 0.058, 0.064], [0, -TH / 2 - 0.035, 0.052, 0.055], [TW / 2 + 0.012, -TH / 2 - 0.012, 0.058, 0.064], [-TW / 2 - 0.012, TH / 2 + 0.012, 0.058, 0.064], [0, TH / 2 + 0.035, 0.052, 0.055], [TW / 2 + 0.012, TH / 2 + 0.012, 0.058, 0.064]]; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const gauss = () => { let u = 0; while (!u) u = Math.random(); return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * Math.random()); }; // ---------- renderer & lights ---------- renderer.toneMapping = THREE.AgXToneMapping; renderer.toneMappingExposure = 1.0; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; scene.background = new THREE.Color('#050608'); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.28; const spot = new THREE.SpotLight('#ffe9cf', 17, 0, 0.75, 1.0, 2); spot.position.set(0, 2.6, 0); spot.target.position.set(0, 0, 0); spot.castShadow = true; spot.shadow.mapSize.set(2048, 2048); spot.shadow.radius = 5; spot.shadow.camera.near = 1; spot.shadow.camera.far = 5; spot.shadow.bias = -0.0003; spot.shadow.normalBias = 0.01; scene.add(spot, spot.target); const lampA = new THREE.PointLight('#ffdcb0', 1.1, 0, 2); lampA.position.set(-0.8, 1.3, 0); const lampB = new THREE.PointLight('#ffdcb0', 1.1, 0, 2); lampB.position.set(0.8, 1.3, 0); scene.add(lampA, lampB, new THREE.HemisphereLight('#7a88a8', '#140a04', 0.35)); // ---------- procedural textures ---------- function feltTexture() { const c = document.createElement('canvas'); c.width = c.height = 256; const g = c.getContext('2d'); const img = g.createImageData(256, 256); for (let i = 0; i < 256 * 256; i++) { const v = 226 + Math.random() * 29 - (Math.random() < 0.04 ? 14 : 0); img.data[i * 4] = img.data[i * 4 + 1] = img.data[i * 4 + 2] = v; img.data[i * 4 + 3] = 255; } g.putImageData(img, 0, 0); const t = new THREE.CanvasTexture(c); t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(10, 5); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 4; return t; } function woodTexture() { const c = document.createElement('canvas'); c.width = 1024; c.height = 128; const g = c.getContext('2d'); const img = g.createImageData(1024, 128); for (let y = 0; y < 128; y++) for (let x = 0; x < 1024; x++) { const n = Math.sin(y * 0.33 + Math.sin(x * 0.004 + y * 0.02) * 4 + Math.sin(x * 0.013) * 1.4); const v = 205 + n * 26 + Math.random() * 10; const i = (y * 1024 + x) * 4; img.data[i] = v; img.data[i + 1] = v * 0.97; img.data[i + 2] = v * 0.94; img.data[i + 3] = 255; } g.putImageData(img, 0, 0); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 4; return t; } function ballTexture(n) { const c = document.createElement('canvas'); c.width = 512; c.height = 256; const g = c.getContext('2d'); if (n === 0) { g.fillStyle = '#f4f0e6'; g.fillRect(0, 0, 512, 256); g.fillStyle = '#c0282a'; [128, 384].forEach(x => { g.beginPath(); g.arc(x, 128, 9, 0, Math.PI * 2); g.fill(); }); } else { g.fillStyle = n > 8 ? '#f4f0e6' : COLORS[n]; g.fillRect(0, 0, 512, 256); if (n > 8) { g.fillStyle = COLORS[n - 8]; g.fillRect(0, 72, 512, 112); } [128, 384].forEach(x => { g.fillStyle = '#fbfaf5'; g.beginPath(); g.ellipse(x, 128, 44, 40, 0, 0, Math.PI * 2); g.fill(); g.fillStyle = '#151515'; g.font = 'bold 50px sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(String(n), x, 131); if (n === 6 || n === 9) g.fillRect(x - 12, 156, 24, 4); }); } const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 4; return t; } // ---------- table ---------- const feltMat = new THREE.MeshStandardMaterial({ color: params.felt, map: feltTexture(), roughness: 0.95 }); const cushMat = new THREE.MeshStandardMaterial({ color: params.felt, roughness: 0.9 }); const woodMat = new THREE.MeshPhysicalMaterial({ color: params.wood, map: woodTexture(), roughness: 0.35, clearcoat: 0.8, clearcoatRoughness: 0.2 }); const blackMat = new THREE.MeshStandardMaterial({ color: '#020202', roughness: 1 }); const leatherMat = new THREE.MeshStandardMaterial({ color: '#1a120c', roughness: 0.5, metalness: 0.2 }); const updateFeltColors = () => { feltMat.color.set(params.felt); cushMat.color.set(params.felt).multiplyScalar(0.7); }; updateFeltColors(); const floor = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: '#0a0b0e', roughness: 1 })); floor.rotation.x = -Math.PI / 2; floor.position.y = -0.5; floor.receiveShadow = true; scene.add(floor); const felt = new THREE.Mesh(new THREE.PlaneGeometry(TW + CUSH * 2, TH + CUSH * 2), feltMat); felt.rotation.x = -Math.PI / 2; felt.receiveShadow = true; scene.add(felt); const OL = TW + CUSH * 2 + RAIL * 2, OS = TH + CUSH * 2 + RAIL * 2; const addBox = (w, h, d, x, y, z, mat) => { const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), mat); m.position.set(x, y, z); m.castShadow = m.receiveShadow = true; scene.add(m); return m; }; addBox(OL, 0.3, RAIL, 0, RAIL_H - 0.15, -(TH / 2 + CUSH + RAIL / 2), woodMat); addBox(OL, 0.3, RAIL, 0, RAIL_H - 0.15, TH / 2 + CUSH + RAIL / 2, woodMat); addBox(RAIL, 0.3, TH + CUSH * 2, -(TW / 2 + CUSH + RAIL / 2), RAIL_H - 0.15, 0, woodMat); addBox(RAIL, 0.3, TH + CUSH * 2, TW / 2 + CUSH + RAIL / 2, RAIL_H - 0.15, 0, woodMat); addBox(OL - 0.05, 0.3, OS - 0.05, 0, -0.32, 0, woodMat); const CH = 0.04, gap = 0.07; [[-TW / 2 + gap, -gap], [gap, TW / 2 - gap]].forEach(([a, b]) => { addBox(b - a, CH, CUSH, (a + b) / 2, CH / 2, -(TH / 2 + CUSH / 2), cushMat); addBox(b - a, CH, CUSH, (a + b) / 2, CH / 2, TH / 2 + CUSH / 2, cushMat); }); addBox(CUSH, CH, TH - gap * 2, -(TW / 2 + CUSH / 2), CH / 2, 0, cushMat); addBox(CUSH, CH, TH - gap * 2, TW / 2 + CUSH / 2, CH / 2, 0, cushMat); const punchMat = new THREE.ShaderMaterial({ vertexShader: 'void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }', fragmentShader: 'void main(){ gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); gl_FragDepth = 1.0; }', depthFunc: THREE.AlwaysDepth, depthWrite: true, }); const wellMat = new THREE.MeshStandardMaterial({ color: '#0b0806', roughness: 1, side: THREE.BackSide }); const WELL_D = RAIL_H + 0.14; for (const p of pockets) { const punch = new THREE.Mesh(new THREE.CircleGeometry(p[3], 48), punchMat); punch.rotation.x = -Math.PI / 2; punch.position.set(p[0], RAIL_H + 0.003, p[1]); punch.renderOrder = 1; scene.add(punch); const well = new THREE.Mesh(new THREE.CylinderGeometry(p[3], p[3] * 0.85, WELL_D, 40, 1, true), wellMat); well.position.set(p[0], RAIL_H - WELL_D / 2, p[1]); well.renderOrder = 2; well.receiveShadow = true; scene.add(well); const bottom = new THREE.Mesh(new THREE.CircleGeometry(p[3] * 0.85, 32), blackMat); bottom.rotation.x = -Math.PI / 2; bottom.position.set(p[0], RAIL_H - WELL_D + 0.001, p[1]); bottom.renderOrder = 2; scene.add(bottom); const ring = new THREE.Mesh(new THREE.TorusGeometry(p[3] + 0.006, 0.008, 10, 40), leatherMat); ring.rotation.x = Math.PI / 2; ring.position.set(p[0], RAIL_H + 0.002, p[1]); scene.add(ring); } const diaMat = new THREE.MeshStandardMaterial({ color: '#efe6c8', roughness: 0.3, metalness: 0.3 }); const diaGeo = new THREE.SphereGeometry(0.008, 12, 8); const addDia = (x, z) => { const m = new THREE.Mesh(diaGeo, diaMat); m.position.set(x, RAIL_H, z); m.scale.y = 0.3; scene.add(m); }; const rz = TH / 2 + CUSH + RAIL * 0.5, rx = TW / 2 + CUSH + RAIL * 0.5; for (let i = 1; i < 8; i++) { if (i === 4) continue; const x = -TW / 2 + i * TW / 8; addDia(x, -rz); addDia(x, rz); } for (let i = 1; i < 4; i++) { const z = -TH / 2 + i * TH / 4; addDia(-rx, z); addDia(rx, z); } const spotMark = new THREE.Mesh(new THREE.CircleGeometry(0.006, 16), new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.35 })); spotMark.rotation.x = -Math.PI / 2; spotMark.position.set(TW / 4, 0.001, 0); scene.add(spotMark); const headLine = new THREE.Mesh(new THREE.PlaneGeometry(0.003, TH), new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.12 })); headLine.rotation.x = -Math.PI / 2; headLine.position.set(-TW / 4, 0.001, 0); scene.add(headLine); // ---------- balls ---------- const ballGeo = new THREE.SphereGeometry(R, 40, 28); const meshes = []; for (let n = 0; n <= 15; n++) { const m = new THREE.Mesh(ballGeo, new THREE.MeshPhysicalMaterial({ map: ballTexture(n), roughness: 0.32, clearcoat: 0.7, clearcoatRoughness: 0.16, envMapIntensity: 0.8 })); m.castShadow = true; m.renderOrder = 2; scene.add(m); meshes[n] = m; } const blobTex = (() => { const c = document.createElement('canvas'); c.width = c.height = 64; const g = c.getContext('2d'); const gr = g.createRadialGradient(32, 32, 0, 32, 32, 32); gr.addColorStop(0, 'rgba(0,0,0,0.75)'); gr.addColorStop(0.45, 'rgba(0,0,0,0.4)'); gr.addColorStop(1, 'rgba(0,0,0,0)'); g.fillStyle = gr; g.fillRect(0, 0, 64, 64); return new THREE.CanvasTexture(c); })(); const blobMat = new THREE.MeshBasicMaterial({ map: blobTex, transparent: true, depthWrite: false }); const blobGeo = new THREE.PlaneGeometry(R * 2.6, R * 2.6); const blobs = meshes.map(() => { const s = new THREE.Mesh(blobGeo, blobMat); s.rotation.x = -Math.PI / 2; s.renderOrder = 1; scene.add(s); return s; }); let balls = [], cue, state = 'aim', player = 0, groups = [null, null], ballInHand = false; let aimA = 0, pressA = 0, pressing = false, pressT = [0, 0], pull = 0, dragCue = false; let firstHit = null, pocketedNow = [], msg = '', msgT = 0, aiT = 0, aiShot = null, shotAnim = 0, winner = -1; function newGame() { balls = []; cue = { n: 0, x: -TW / 4, y: 0, vx: 0, vy: 0, in: false }; balls.push(cue); const nums = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13, 14, 15]; for (let i = nums.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [nums[i], nums[j]] = [nums[j], nums[i]]; } let k = 0; for (let row = 0; row < 5; row++) for (let c = 0; c <= row; c++) { const n = (row === 2 && c === 1) ? 8 : nums[k++]; balls.push({ n, x: TW / 4 + row * R * 1.75, y: (c - row / 2) * R * 2.02, vx: 0, vy: 0, in: false }); } for (const b of balls) { const m = meshes[b.n]; m.visible = true; m.quaternion.setFromEuler(new THREE.Euler(Math.random() * 6, Math.random() * 6, Math.random() * 6)); } state = 'aim'; player = 0; groups = [null, null]; ballInHand = false; winner = -1; aiShot = null; say('Your break'); } function say(m) { msg = m; msgT = 2.5; } const isStripe = n => n > 8, isSolid = n => n > 0 && n < 8; function remaining(p) { const g = groups[p]; if (!g) return 7; return balls.filter(b => !b.in && (g === 'solid' ? isSolid(b.n) : isStripe(b.n))).length; } function legal(p, n) { const g = groups[p]; if (!g) return n !== 8 && n !== 0; if (remaining(p) === 0) return n === 8; return g === 'solid' ? isSolid(n) : isStripe(n); } // ---------- physics ---------- const axis = new THREE.Vector3(), qTmp = new THREE.Quaternion(); function step(dt) { for (const b of balls) { if (b.in) continue; const v = Math.hypot(b.vx, b.vy); if (v > 0) { const nv = Math.max(0, v - 0.28 * dt) * (1 - 0.12 * dt); b.vx *= nv / v; b.vy *= nv / v; if (nv > 0) { axis.set(b.vy, 0, -b.vx).normalize(); qTmp.setFromAxisAngle(axis, nv * dt / R); meshes[b.n].quaternion.premultiply(qTmp); } } b.x += b.vx * dt; b.y += b.vy * dt; const mouthY = Math.abs(b.y) > TH / 2 - 0.06, mouthX = Math.abs(b.x) > TW / 2 - 0.06 || Math.abs(b.x) < 0.05; if (!mouthY) { if (b.x > TW / 2 - R) { if (b.vx > 0) snd(SND.cush, b.vx * 0.3, b.x, b.y, 40); b.x = TW / 2 - R; b.vx = -Math.abs(b.vx) * 0.78; b.vy *= 0.95; } if (b.x < -TW / 2 + R) { if (b.vx < 0) snd(SND.cush, -b.vx * 0.3, b.x, b.y, 40); b.x = -TW / 2 + R; b.vx = Math.abs(b.vx) * 0.78; b.vy *= 0.95; } } if (!mouthX) { if (b.y > TH / 2 - R) { if (b.vy > 0) snd(SND.cush, b.vy * 0.3, b.x, b.y, 40); b.y = TH / 2 - R; b.vy = -Math.abs(b.vy) * 0.78; b.vx *= 0.95; } if (b.y < -TH / 2 + R) { if (b.vy < 0) snd(SND.cush, -b.vy * 0.3, b.x, b.y, 40); b.y = -TH / 2 + R; b.vy = Math.abs(b.vy) * 0.78; b.vx *= 0.95; } } for (const p of pockets) if (!b.in && Math.hypot(b.x - p[0], b.y - p[1]) < p[2]) pocket(b); if (!b.in && (Math.abs(b.x) > TW / 2 + 0.05 || Math.abs(b.y) > TH / 2 + 0.05)) pocket(b); } for (let i = 0; i < balls.length; i++) { const a = balls[i]; if (a.in) continue; for (let j = i + 1; j < balls.length; j++) { const b = balls[j]; if (b.in) continue; const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy); if (d < 2 * R && d > 1e-6) { const nx = dx / d, ny = dy / d, ov = (2 * R - d) / 2; a.x -= nx * ov; a.y -= ny * ov; b.x += nx * ov; b.y += ny * ov; const vn = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny; if (vn < 0) { const jm = -(1 + 0.95) * vn / 2; a.vx -= jm * nx; a.vy -= jm * ny; b.vx += jm * nx; b.vy += jm * ny; snd(SND.clack, Math.pow(-vn / 4, 0.7) * 0.9, (a.x + b.x) / 2, (a.y + b.y) / 2, 22, 0.95 + Math.min(0.15, -vn * 0.03)); if (firstHit === null && (a === cue || b === cue)) firstHit = a === cue ? b.n : a.n; } } } } } function pocket(b) { let pi = 0, bd = 1e9; pockets.forEach((p, i) => { const d = Math.hypot(b.x - p[0], b.y - p[1]); if (d < bd) { bd = d; pi = i; } }); b.in = true; b.fall = { p: pi, t: 0, h: R, vh: 0, vx: b.vx * 0.6, vy: b.vy * 0.6 }; snd(SND.pocket, 0.55 + Math.min(0.4, Math.hypot(b.vx, b.vy) * 0.15), pockets[pi][0], pockets[pi][1], 60); b.vx = b.vy = 0; pocketedNow.push(b.n); } function updateFall(b, dt) { const f = b.fall, p = pockets[f.p]; f.t += dt; f.vx += (p[0] - b.x) * 40 * dt; f.vy += (p[1] - b.y) * 40 * dt; const damp = Math.max(0, 1 - 5 * dt); f.vx *= damp; f.vy *= damp; b.x += f.vx * dt; b.y += f.vy * dt; const k = clamp((R - f.h) / (R * 1.2), 0, 1); const lim = (p[2] + 0.01) * (1 - k) + (p[3] - R * 1.02) * k; const dx = b.x - p[0], dy = b.y - p[1], d = Math.hypot(dx, dy); if (d > lim && d > 1e-6) { b.x = p[0] + dx / d * lim; b.y = p[1] + dy / d * lim; } f.vh -= 4.5 * dt; f.h += f.vh * dt; const floorH = RAIL_H - WELL_D + R; if (f.h < floorH) { f.h = floorH; f.vh = -f.vh * 0.25; } const sp = Math.hypot(f.vx, f.vy); if (sp > 1e-4) { axis.set(f.vy, 0, -f.vx).normalize(); qTmp.setFromAxisAngle(axis, sp * dt / R); meshes[b.n].quaternion.premultiply(qTmp); } } const moving = () => balls.some(b => (!b.in && Math.hypot(b.vx, b.vy) > 0.004) || (b.fall && b.fall.t < 0.7)); function shoot(angle, speed) { cue.vx = Math.cos(angle) * speed; cue.vy = Math.sin(angle) * speed; firstHit = null; pocketedNow = []; state = 'moving'; ballInHand = false; shotAnim = 0.12; snd(SND.cue, 0.25 + Math.min(0.75, speed / 6), cue.x, cue.y, 80, 1.05 - Math.min(0.15, speed * 0.02)); } function endShot() { for (const b of balls) b.vx = b.vy = 0; const p = player, scratch = cue.in, hadRemaining = remaining(p); const foul = scratch || firstHit === null || !legal(p, firstHit); const potted = pocketedNow.filter(n => n !== 0 && n !== 8); if (pocketedNow.includes(8)) { const clearedBefore = groups[p] && hadRemaining === 0; winner = (!foul && clearedBefore) ? p : 1 - p; state = 'over'; say(winner === 0 ? 'You win!' : 'AI wins'); if (winner === 0) setTimeout(() => snd(SND.win, 0.7, 0, 0, 500), 500); return; } if (!groups[p] && !foul && potted.length) { groups[p] = isSolid(potted[0]) ? 'solid' : 'stripe'; groups[1 - p] = groups[p] === 'solid' ? 'stripe' : 'solid'; } const own = groups[p] ? potted.filter(n => groups[p] === 'solid' ? isSolid(n) : isStripe(n)).length : 0; if (scratch) { cue.in = false; cue.fall = null; placeFree(cue, -TW / 4, 0); } if (foul) { player = 1 - p; ballInHand = true; say((scratch ? 'Scratch! ' : 'Foul! ') + (player === 0 ? 'Ball in hand' : 'AI has ball in hand')); } else if (own > 0) say(p === 0 ? 'Nice! Shoot again' : 'AI continues'); else { player = 1 - p; say(player === 0 ? 'Your turn' : 'AI\'s turn'); } state = player === 0 ? 'aim' : 'ai'; aiT = 0; aiShot = null; } function freeAt(x, y, ignore) { if (Math.abs(x) > TW / 2 - R || Math.abs(y) > TH / 2 - R) return false; return balls.every(b => b === ignore || b.in || Math.hypot(b.x - x, b.y - y) > 2 * R + 0.002); } function placeFree(b, x, y) { for (let r = 0; r < 0.6; r += 0.01) for (let a = 0; a < Math.PI * 2; a += 0.5) { const px = x + Math.cos(a) * r, py = y + Math.sin(a) * r; if (freeAt(px, py, b)) { b.x = px; b.y = py; return; } } } // ---------- AI ---------- function segClear(ax, ay, bx, by, ig1, ig2) { const dx = bx - ax, dy = by - ay, L2 = dx * dx + dy * dy || 1e-9; for (const b of balls) { if (b.in || b === ig1 || b === ig2) continue; const t = clamp(((b.x - ax) * dx + (b.y - ay) * dy) / L2, 0, 1); if (Math.hypot(ax + dx * t - b.x, ay + dy * t - b.y) < 2 * R - 0.001) return false; } return true; } function bestShot(cx0, cy0) { let best = null; for (const t of balls) { if (t.in || t === cue || !legal(1, t.n)) continue; for (const p of pockets) { const px = p[0] * 0.985, py = p[1] * 0.985; let dx = px - t.x, dy = py - t.y; const d2 = Math.hypot(dx, dy) || 1e-6; dx /= d2; dy /= d2; const gx = t.x - dx * 2 * R, gy = t.y - dy * 2 * R; let ax = gx - cx0, ay = gy - cy0; const d1 = Math.hypot(ax, ay); if (d1 < 1e-4) continue; ax /= d1; ay /= d1; const c = ax * dx + ay * dy; if (c < 0.3) continue; if (!segClear(cx0, cy0, gx, gy, cue, t) || !segClear(t.x, t.y, px, py, t, cue)) continue; const side = p[0] === 0 ? Math.max(0, 1 - Math.abs(dy) * 1.2) : 1; const score = c * c * side / (0.6 + d1 + d2 * 1.3); if (!best || score > best.score) best = { score, angle: Math.atan2(ay, ax), speed: clamp(1.1 + (d1 + d2 / Math.max(c, 0.35)) * 1.25, 1.0, params.power) }; } } return best; } function fallbackShot() { let best = null, bd = 1e9; for (const t of balls) if (!t.in && t !== cue && legal(1, t.n)) { const d = Math.hypot(t.x - cue.x, t.y - cue.y) + (segClear(cue.x, cue.y, t.x, t.y, cue, t) ? 0 : 5); if (d < bd) { bd = d; best = { angle: Math.atan2(t.y - cue.y, t.x - cue.x), speed: Math.min(params.power, 2.8) }; } } return best || { angle: 0, speed: 2 }; } function planAI() { if (ballInHand) { let bestPos = null, bs = -1; for (let i = 0; i < 60; i++) { const x = (Math.random() - 0.5) * (TW - 2 * R), y = (Math.random() - 0.5) * (TH - 2 * R); if (!freeAt(x, y, cue)) continue; const sh = bestShot(x, y); if (sh && sh.score > bs) { bs = sh.score; bestPos = [x, y]; } } if (bestPos) { cue.x = bestPos[0]; cue.y = bestPos[1]; } } let sh = bestShot(cue.x, cue.y) || fallbackShot(); if (balls.filter(b => !b.in).length === 16 && sh.speed < 4) sh = { angle: Math.atan2(balls[1].y - cue.y, balls[1].x - cue.x), speed: params.power }; sh.angle += gauss() * ((1 - params.aiSkill) * 0.045 + 0.002); sh.speed *= 1 + gauss() * 0.08 * (1 - params.aiSkill); aiShot = sh; } // ---------- cue stick & guide ---------- const cueGroup = new THREE.Group(); scene.add(cueGroup); let cueElev = 0.06, cueLift = 0; const shaftGeo = new THREE.CylinderGeometry(0.009, 0.0062, 0.95, 20); shaftGeo.rotateZ(Math.PI / 2); shaftGeo.translate(-0.475, 0, 0); const buttGeo = new THREE.CylinderGeometry(0.0145, 0.009, 0.55, 20); buttGeo.rotateZ(Math.PI / 2); buttGeo.translate(-0.95 - 0.275, 0, 0); const tipGeo = new THREE.CylinderGeometry(0.0062, 0.0062, 0.012, 16); tipGeo.rotateZ(Math.PI / 2); tipGeo.translate(-0.006, 0, 0); const ferGeo = new THREE.CylinderGeometry(0.0065, 0.0065, 0.022, 16); ferGeo.rotateZ(Math.PI / 2); ferGeo.translate(-0.023, 0, 0); const bandGeo = new THREE.CylinderGeometry(0.0095, 0.0095, 0.02, 20); bandGeo.rotateZ(Math.PI / 2); bandGeo.translate(-0.95, 0, 0); [[shaftGeo, new THREE.MeshPhysicalMaterial({ color: '#e8d7b0', roughness: 0.3, clearcoat: 0.6 })], [buttGeo, new THREE.MeshPhysicalMaterial({ color: '#3a1608', roughness: 0.25, clearcoat: 1 })], [tipGeo, new THREE.MeshStandardMaterial({ color: '#2f5fc8', roughness: 0.8 })], [ferGeo, new THREE.MeshStandardMaterial({ color: '#f6f6f2', roughness: 0.3 })], [bandGeo, new THREE.MeshStandardMaterial({ color: '#c9a34a', metalness: 1, roughness: 0.25 })] ].forEach(([g, m]) => { const me = new THREE.Mesh(g, m); me.castShadow = true; me.renderOrder = 3; cueGroup.add(me); }); const lineMat = new THREE.LineDashedMaterial({ color: '#ffffff', transparent: true, opacity: 0.55, dashSize: 0.02, gapSize: 0.014 }); const aimGeo = new THREE.BufferGeometry().setAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const aimLine = new THREE.Line(aimGeo, lineMat); aimLine.frustumCulled = false; scene.add(aimLine); const objMat = new THREE.LineBasicMaterial({ color: '#fff0c8', transparent: true, opacity: 0.85 }); const objGeo = new THREE.BufferGeometry().setAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const objLine = new THREE.Line(objGeo, objMat); objLine.frustumCulled = false; scene.add(objLine); const tanGeo = new THREE.BufferGeometry().setAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const tanLine = new THREE.Line(tanGeo, new THREE.LineBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.3 })); tanLine.frustumCulled = false; scene.add(tanLine); const ghost = new THREE.Mesh(new THREE.RingGeometry(R * 0.9, R, 40), new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.6 })); ghost.rotation.x = -Math.PI / 2; scene.add(ghost); const handRing = new THREE.Mesh(new THREE.RingGeometry(R * 1.5, R * 1.7, 40), new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.6 })); handRing.rotation.x = -Math.PI / 2; scene.add(handRing); const setSeg = (geo, ax, ay, bx, by, h) => { const a = geo.attributes.position.array; a[0] = ax; a[1] = h; a[2] = ay; a[3] = bx; a[4] = h; a[5] = by; geo.attributes.position.needsUpdate = true; }; function updateGuide() { const show = state === 'aim' && player === 0 && params.guide && !dragCue; aimLine.visible = ghost.visible = show; objLine.visible = tanLine.visible = false; if (!show) return; const dx = Math.cos(aimA), dy = Math.sin(aimA); let tMin = 10, hit = null; for (const b of balls) { if (b.in || b === cue) continue; const ox = b.x - cue.x, oy = b.y - cue.y, proj = ox * dx + oy * dy; if (proj <= 0) continue; const perp2 = ox * ox + oy * oy - proj * proj, rr = 4 * R * R; if (perp2 > rr) continue; const t = proj - Math.sqrt(rr - perp2); if (t < tMin) { tMin = t; hit = b; } } const tx = dx > 1e-6 ? (TW / 2 - R - cue.x) / dx : dx < -1e-6 ? (-TW / 2 + R - cue.x) / dx : 10; const ty = dy > 1e-6 ? (TH / 2 - R - cue.y) / dy : dy < -1e-6 ? (-TH / 2 + R - cue.y) / dy : 10; const wallT = Math.min(tx, ty), t = Math.max(0, Math.min(tMin, wallT)); const gx = cue.x + dx * t, gy = cue.y + dy * t; setSeg(aimGeo, cue.x, cue.y, gx, gy, 0.003); aimLine.computeLineDistances(); ghost.position.set(gx, 0.003, gy); if (hit && tMin <= wallT) { let nx = hit.x - gx, ny = hit.y - gy; const d = Math.hypot(nx, ny) || 1; nx /= d; ny /= d; objMat.color.set(legal(0, hit.n) ? '#fff0c8' : '#ff5050'); setSeg(objGeo, hit.x, hit.y, hit.x + nx * 0.25, hit.y + ny * 0.25, 0.003); const c = dx * nx + dy * ny; setSeg(tanGeo, gx, gy, gx + (dx - nx * c) * 0.18, gy + (dy - ny * c) * 0.18, 0.003); objLine.visible = tanLine.visible = true; } } // ---------- HUD ---------- const hud = document.createElement('div'); hud.style.cssText = 'position:absolute;left:0;top:0;right:0;pointer-events:none;font-family:system-ui,sans-serif;color:#ddd;user-select:none;z-index:5'; const center = document.createElement('div'); center.style.cssText = 'position:absolute;left:0;right:0;top:46%;text-align:center;font:bold 30px system-ui,sans-serif;color:#ffd98c;text-shadow:0 2px 14px #000;pointer-events:none;z-index:5'; const bar = document.createElement('div'); bar.style.cssText = 'position:absolute;left:50%;bottom:22px;width:220px;max-width:50%;height:10px;transform:translateX(-50%);background:rgba(0,0,0,.55);border-radius:6px;overflow:hidden;pointer-events:none;z-index:5;display:none'; const barFill = document.createElement('div'); barFill.style.cssText = 'height:100%;width:0;border-radius:6px'; bar.appendChild(barFill); const host = canvas.parentElement || document.body; if (getComputedStyle(host).position === 'static') host.style.position = 'relative'; host.append(hud, center, bar); let lastHud = ''; function drawHUD() { const side = p => { const active = player === p && state !== 'over'; const list = groups[p] ? balls.filter(b => b.n > 0 && b.n !== 8 && (groups[p] === 'solid' ? isSolid(b.n) : isStripe(b.n))) : []; const dots = list.map(b => { const c = COLORS[b.n > 8 ? b.n - 8 : b.n]; const bg = b.n > 8 ? `linear-gradient(#f4f0e6 25%,${c} 25%,${c} 75%,#f4f0e6 75%)` : c; return ``; }).join(''); return `

${active ? '● ' : ''}${p ? 'AI' + (diffName ? ' ' + diffName : '') : 'YOU'}${groups[p] ? ' · ' + groups[p].toUpperCase() + 'S' : ''}

${dots}

`; }; let line2 = msgT > 0 ? msg : ''; if (!line2 && state === 'aim' && player === 0) line2 = ballInHand ? (touchScreen ? 'Drag cue ball, then aim' : 'Drag cue ball to place, then aim') : (touchScreen ? 'Touch to aim · slide sideways to turn · drag back to shoot' : 'Aim with mouse · press, nudge sideways, pull back'); else if (!line2 && state === 'ai') line2 = 'AI is lining up…'; if (state === 'over') line2 = ''; const html = `

${side(0)}

${line2}

${side(1)}

`; if (html !== lastHud) { hud.innerHTML = html; lastHud = html; } const ct = state === 'over' ? (winner === 0 ? 'You win!' : 'AI wins') + `

${touchScreen ? 'Tap' : 'Click'} to play again

` : ''; if (center.innerHTML !== ct) center.innerHTML = ct; bar.style.display = pressing && pull > 0 ? 'block' : 'none'; barFill.style.width = (pull * 100) + '%'; barFill.style.background = `rgb(${120 + 135 * pull},${220 - 140 * pull},${140 - 80 * pull})`; } // ---------- difficulty menu ---------- const LEVELS = [ { name: 'Easy', skill: 0.2, tag: 'Casual rival', desc: 'Loose aim, misses often', pips: 1, c: '#7fd49a', ball: 'radial-gradient(circle at 35% 30%,#7fe0a0,#1c8a4a 55%,#0b3a20)' }, { name: 'Medium', skill: 0.62, tag: 'Club player', desc: 'Solid shot-maker', pips: 2, c: '#ffd98c', ball: 'radial-gradient(circle at 35% 30%,#ffe9a0,#f2c230 55%,#7a5a08)' }, { name: 'Pro', skill: 0.97, tag: 'Hustler', desc: 'Rarely leaves a chance', pips: 3, c: '#ff7a5c', ball: 'radial-gradient(circle at 35% 30%,#666,#111 55%,#000)' }]; let diffName = ''; const menu = document.createElement('div'); menu.style.cssText = 'position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,rgba(4,10,8,.55),rgba(0,0,0,.88));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10;font-family:system-ui,sans-serif;color:#eee;user-select:none;padding:20px;box-sizing:border-box;touch-action:manipulation'; menu.innerHTML = `

Eight Ball

8 Ball Vibes

Choose your opponent

`; const wrap = menu.querySelector('.mf-wrap'); for (const L of LEVELS) { const b = document.createElement('button'); b.className = 'mf-tile'; b.style.setProperty('--c', L.c); b.innerHTML = `

${L.name}

${L.tag}

${L.desc}

${[1, 2, 3].map(i => ``).join('')}

`; b.addEventListener('click', () => pick(L)); wrap.appendChild(b); } host.append(menu); function pick(L) { params.aiSkill = L.skill; if (skillCtl && skillCtl.updateDisplay) skillCtl.updateDisplay(); diffName = L.name.toUpperCase(); menu.style.display = 'none'; newGame(); } function showMenu() { state = 'menu'; pressing = false; dragCue = false; pull = 0; activeId = null; msgT = 0; menu.style.display = 'flex'; } // ---------- camera ---------- function fitCamera() { const aspect = size.width / Math.max(1, size.height), tanH = Math.tan(THREE.MathUtils.degToRad(25)); const L = OL / 2 + 0.03, S = OS / 2 + 0.03; let hh; if (aspect >= 1) { camera.up.set(0, 0, -1); hh = Math.max(S * 1.22, L / aspect * 1.04); } else { camera.up.set(1, 0, 0); hh = Math.max(L * 1.15, S / aspect * 1.04); } camera.position.set(0, hh / tanH, aspect >= 1 ? 0.02 : 0); camera.lookAt(0, 0, aspect >= 1 ? 0.02 : 0); if (aspect < 1) camera.position.x = 0.02; camera.updateProjectionMatrix(); } fitCamera(); // ---------- input ---------- const ray = new THREE.Raycaster(), ndc = new THREE.Vector2(), plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -R), hitP = new THREE.Vector3(); let hover = null; function toTable(e) { const r = canvas.getBoundingClientRect(); ndc.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1); ray.setFromCamera(ndc, camera); return ray.ray.intersectPlane(plane, hitP) ? [hitP.x, hitP.z] : [cue.x + 1, cue.y]; } let activeId = null; function onDown(e) { if (state === 'menu') return; if (state === 'over') { showMenu(); return; } if (state !== 'aim' || player !== 0 || activeId !== null) return; activeId = e.pointerId; try { canvas.setPointerCapture(e.pointerId); } catch (_) {} const [x, y] = toTable(e); if (ballInHand && Math.hypot(x - cue.x, y - cue.y) < R * 4) { dragCue = true; return; } if (Math.hypot(x - cue.x, y - cue.y) > 1e-4) aimA = Math.atan2(y - cue.y, x - cue.x); pressA = aimA; pressing = true; pressT = [x, y]; pull = 0; } function onMove(e) { const [x, y] = toTable(e); if (e.pointerType === 'mouse') hover = [x, y]; if (e.pointerId !== activeId) return; if (dragCue) { if (freeAt(x, y, cue)) { cue.x = x; cue.y = y; } return; } if (pressing) { const mx = x - pressT[0], my = y - pressT[1]; const ca = Math.cos(pressA), sa = Math.sin(pressA); const back = -(mx * ca + my * sa), side = -mx * sa + my * ca; aimA = pressA + side * (e.pointerType === 'mouse' ? 0.6 : 0.8); pull = clamp(back / 0.5, 0, 1); } } function onUp(e) { if (e.pointerId !== activeId) return; activeId = null; if (dragCue) { dragCue = false; return; } if (pressing) { pressing = false; if (pull > 0.04 && e.type === 'pointerup') shoot(aimA, pull * pull * 0.85 * params.power + pull * 0.15 * params.power); pull = 0; } } const onLeave = () => { hover = null; }; canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onUp); canvas.addEventListener('pointerleave', onLeave); canvas.style.touchAction = 'none'; const skillCtl = gui.add(params, 'aiSkill', 0, 1, 0.01).name('AI Skill').onChange(() => { diffName = 'CUSTOM'; }); gui.add(params, 'power', 2.5, 7, 0.1).name('Max Power'); gui.add(params, 'guide').name('Aim Guide'); gui.addColor(params, 'felt').name('Felt').onChange(updateFeltColors); gui.addColor(params, 'wood').name('Wood').onChange(v => woodMat.color.set(v)); gui.add(params, 'sound', 0, 1, 0.01).name('Sound').onChange(v => { if (sfx) sfx.volume = v; }); gui.add(params, 'newGame').name('New Game'); newGame(); showMenu(); return { update({ time, delta }) { const dt = Math.min(delta, 1 / 30); msgT -= dt; if (state === 'moving') { for (let i = 0; i < 12; i++) step(dt / 12); if (!moving()) endShot(); } else if (state === 'ai') { aiT += dt; if (!aiShot && aiT > 0.5) planAI(); if (aiShot) { let da = aiShot.angle - aimA; da = Math.atan2(Math.sin(da), Math.cos(da)); aimA += da * Math.min(1, dt * 5); if (aiT > 1.4) pull = Math.min(1, (aiT - 1.4) * 2) * Math.min(1, aiShot.speed / params.power); if (aiT > 2.0) { shoot(aiShot.angle, aiShot.speed); pull = 0; } } } else if (state === 'aim' && player === 0 && !pressing && !dragCue && hover) { if (Math.hypot(hover[0] - cue.x, hover[1] - cue.y) > 1e-3) aimA = Math.atan2(hover[1] - cue.y, hover[0] - cue.x); } shotAnim = Math.max(0, shotAnim - dt); for (const b of balls) { const m = meshes[b.n]; if (b.in && b.fall) { updateFall(b, dt); m.visible = b.fall.t < 1.2; m.position.set(b.x, b.fall.h, b.y); m.material.color.setScalar(clamp(1 - (R - b.fall.h) / 0.1, 0.12, 1)); } else { m.visible = !b.in; m.position.set(b.x, R, b.y); m.material.color.setScalar(1); } const bl = blobs[b.n]; bl.visible = !b.in; bl.position.set(b.x, 0.0015, b.y); } const showCue = (state === 'aim' && player === 0 && !dragCue) || (state === 'ai' && aiShot); cueGroup.visible = !!showCue; if (showCue) { const back = R * 1.3 + pull * 0.28; const ca = Math.cos(aimA), sa = Math.sin(aimA); const tx = cue.x - ca * back, ty = cue.y - sa * back, ddx = -ca, ddy = -sa; const exitDist = (ex, ey) => { let t = 1e9; if (Math.abs(ddx) > 1e-6) t = Math.min(t, ((ddx > 0 ? ex : -ex) - tx) / ddx); if (Math.abs(ddy) > 1e-6) t = Math.min(t, ((ddy > 0 ? ey : -ey) - ty) / ddy); return t; }; const h0 = R + 0.012, clr = 0.02; const obst = [[TW / 2 - 0.004, TH / 2 - 0.004, CH], [TW / 2 + CUSH - 0.01, TH / 2 + CUSH - 0.01, RAIL_H + 0.012]]; let lift = 0; for (const o of obst) if (exitDist(o[0], o[1]) < 0.04) lift = Math.max(lift, o[2] + clr - h0); let elev = 0.06; for (const o of obst) { const s = Math.max(0.04, exitDist(o[0], o[1])); elev = Math.max(elev, Math.atan2(o[2] + clr - h0 - lift, s)); } elev = Math.min(elev, 0.75); const k = Math.min(1, dt * 14); cueElev += (elev - cueElev) * k; cueLift += (lift - cueLift) * k; cueGroup.position.set(tx, h0 + cueLift, ty); cueGroup.rotation.set(0, -aimA, 0, 'YXZ'); cueGroup.rotateZ(-cueElev); } handRing.visible = ballInHand && state === 'aim' && player === 0; handRing.position.set(cue.x, 0.003, cue.y); handRing.material.opacity = 0.45 + 0.3 * Math.sin(time * 5); updateGuide(); drawHUD(); }, resize() { fitCamera(); }, dispose() { canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onUp); canvas.removeEventListener('pointerleave', onLeave); hud.remove(); center.remove(); bar.remove(); menu.remove(); pmrem.dispose(); }, }; }