// Palm Cove Cannons - MCPity Web Engine game. A sunny seaside carnival cannon // knockdown. Single-file, Three.js. The ONLY bare import is "three" (the /play // bundler marks it external and resolves it via an import map to // esm.sh/three@0.168.0). Everything else lives here. No template literals // (backticks) and no template interpolation anywhere, so the exact bytes embed // verbatim inside a String.raw constant + the staged publish SQL dollar-quote // literal. // // The game: a third-person cannon at a bright beach carnival aims at a pedestal // stacked with striped tin cans, clay jars, and heavy stone blocks. Drag to set // aim and power - a live dotted trajectory arc shows the shot - then release to // fire. Cans topple easily, clay jars shatter on a solid hit, stone blocks resist // and need force or a chain reaction. Knock everything off the pedestal before you // run out of shots. Custom lightweight arcade physics (gravity, impulse transfer, // tumbling, chain reactions) so it always bundles - no wasm physics engine. // // Harness contract: // - mounts into #mcpity-root (fallback document.body); NEVER sets // root.style.position (the host stylesheet already positions it). // - posts a ready beacon on boot (try/catch). // - desktop: drag with the mouse to aim, release to fire. mobile: drag with a // finger, release to fire. // - gates play on window.__mcpityStarted (the shell splash sets it on Play). // // Optional harness shims (all guarded; absent means a plain single-player game): // - window.MCPityAssets : slot to GLB registry (section 171 asset auto-wire). // - window.MCPityEntitlements : advisory Season Pass gating (section 167). // - window.MCPityShell / MCPityMusic : splash + settings + audio (inlined below). import * as THREE from "three"; var W = window as any; // =========================================================================== // ASSETS - optional Meshy/GLB slot registry (section 171). Every prop has a // procedural fallback so the game is fully playable and pretty with ZERO assets. // Named slots the founder can fill with Meshy GLB URLs: cannon, can, jar, block, // palm. // =========================================================================== function getSlot(name: string): THREE.Object3D | null { try { var reg = W && W.MCPityAssets; if (reg && typeof reg.getModel === "function") { var m = reg.getModel(name); return m || null; } } catch (_e) {} return null; } // Fit a GLB into a target height (meters), recenter on its base, cast shadows. function fitModel(obj: THREE.Object3D, targetH: number): THREE.Object3D { var bbox = new THREE.Box3().setFromObject(obj); var size = new THREE.Vector3(); bbox.getSize(size); var s = size.y > 0.0001 ? targetH / size.y : 1; obj.scale.setScalar(s); obj.updateMatrixWorld(true); var b2 = new THREE.Box3().setFromObject(obj); var ctr = new THREE.Vector3(); b2.getCenter(ctr); obj.position.x -= ctr.x; obj.position.z -= ctr.z; obj.position.y -= b2.min.y; // sit its base on local y=0 return obj; } // =========================================================================== // COMMERCE - inline MCPityEntitlements shim (section 167). Advisory Season Pass // snapshot relayed from the authed parent over the coop seam under the __ent tag. // Client entitlement is UX-only; the server holds the real gate. Free play (the // five base levels + the default cannon) is ALWAYS available. // =========================================================================== var ENT = (function () { if (W.MCPityEntitlements) return W.MCPityEntitlements; var changeCbs: ((s: any) => void)[] = []; var state = { ready: false, season_pass: false, expires_at: null as string | null, cosmetics: [] as string[] }; var api = { get ready() { return state.ready; }, get season_pass() { return state.season_pass; }, get expires_at() { return state.expires_at; }, get cosmetics() { return state.cosmetics.slice(); }, has: function (sku: string) { return state.cosmetics.indexOf(sku) >= 0; }, snapshot: function () { return { season_pass: state.season_pass, cosmetics: state.cosmetics.slice(), expires_at: state.expires_at }; }, on: function (evt: string, cb: (s: any) => void) { if (evt === "change") changeCbs.push(cb); }, }; W.MCPityEntitlements = api; window.addEventListener("message", function (ev: MessageEvent) { var d: any = ev && ev.data; if (!d || d.mcpity !== true || d.dir !== "studio->game" || d.type !== "coop-apply") return; var p: any = d.payload; if (!p || p.__ent !== 1) return; state.season_pass = !!p.season_pass; state.expires_at = (typeof p.expires_at === "string") ? p.expires_at : null; state.cosmetics = Array.isArray(p.cosmetics) ? p.cosmetics.slice() : []; state.ready = true; for (var i = 0; i < changeCbs.length; i++) { try { changeCbs[i](api.snapshot()); } catch (_e) {} } }); try { if (window.parent && window.parent !== window) { window.parent.postMessage({ mcpity: true, dir: "game->studio", type: "coop-event", payload: { __ent: 1, k: "hello" } }, "*"); } } catch (_e) {} return api; })(); function hasPass(): boolean { try { return !!(ENT && ENT.season_pass); } catch (_e) { return false; } } // =========================================================================== // SHELL CONFIG - branding for the reusable MCPity Game Shell (set BEFORE the // shell block below runs). Bright, sunny, on-brand for Palm Cove Cannons. // =========================================================================== W.__MCPITY_SHELL_CONFIG = { title: "Palm Cove Cannons", tagline: "Load the cannon, aim your shot, and knock every can, jar, and block clean off the pedestal at the sunny seaside carnival.", accent: "#ff7a45", panel: "#152a33", ink: "#f4f0e6", subink: "#bcd0d6", controls: [ "Drag anywhere to aim. Pull back further for more power.", "The dotted arc shows exactly where your ball will fly.", "Release to fire. Each shot uses one ball.", "Cans topple, clay jars shatter, stone blocks resist - use chain reactions.", "Knock every target off the pedestal before you run out of shots.", ], }; // ---- MCPITY GAME SHELL - BEGIN ---- // CONFIG (set window.__MCPITY_SHELL_CONFIG before this block runs): // { title, tagline, accent, panel, ink, subink, // quality?: { label, get:()=>boolean, set:(on:boolean)=>void }, // controls?: string[], credit? } (function () { var SW = window as any; if (SW.__mcpityShellInstalled) return; SW.__mcpityShellInstalled = true; var CFG = SW.__MCPITY_SHELL_CONFIG || {}; var TITLE = CFG.title || "MCPity Game"; var TAGLINE = CFG.tagline || ""; var ACCENT = CFG.accent || "#c8843c"; var PANEL = CFG.panel || "#241b13"; var INK = CFG.ink || "#f4ece0"; var SUBINK = CFG.subink || "#c7b6a2"; var CREDIT = CFG.credit || "Made by MCPity"; var CONTROLS: string[] = Array.isArray(CFG.controls) ? CFG.controls : []; var QUALITY = CFG.quality || null; // ---- audio bus (reused if a prior block installed it) ---- var AC = SW.AudioContext || SW.webkitAudioContext; var existingAudio = SW.MCPityAudio; var ctx: AudioContext = existingAudio ? existingAudio.context : (AC ? new AC() : null); function mkBus(initial: number, parent: AudioNode) { var g = ctx.createGain(); g.gain.value = Math.max(0, Math.min(1, initial)); g.connect(parent); return { gain: g, set: function (v: number) { g.gain.setTargetAtTime(Math.max(0, Math.min(1, v)), ctx.currentTime, 0.02); }, get value() { return g.gain.value; } }; } var master: any, music: any, sfxBus: any; if (existingAudio) { master = existingAudio.bus.master; music = existingAudio.bus.music; sfxBus = existingAudio.bus.sfx; } else if (ctx) { master = mkBus(0.85, ctx.destination); music = mkBus(0.55, master.gain); sfxBus = mkBus(0.9, master.gain); SW.MCPityAudio = { context: ctx, bus: { master: master, music: music, sfx: sfxBus } }; } var resumed = false; function resume() { if (!ctx || resumed) return; if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } resumed = ctx.state === "running"; } // ---- cozy procedural music bed + one-shot SFX (reused if present) ---- var musicOn = true, playing = false, chords: number[][] = [[0, 4, 7], [9, 12, 16], [5, 9, 12], [7, 11, 14]]; var voices: OscillatorNode[] = [], lfo: OscillatorNode | null = null, mgain: GainNode | null = null, chordTimer: any = null, chordIdx = 0; var ROOT = 174.6; // F3, warm function hz(semi: number) { return ROOT * Math.pow(2, semi / 12); } function startMusic() { if (!ctx || playing || !musicOn) return; resume(); if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } playing = true; mgain = ctx.createGain(); mgain.gain.value = 0.32; mgain.connect(music ? music.gain : ctx.destination); lfo = ctx.createOscillator(); var lg = ctx.createGain(); lfo.frequency.value = 0.13; lg.gain.value = 0.06; lfo.connect(lg); lg.connect(mgain.gain); lfo.start(); var voiceFor = function (chord: number[]) { for (var i = 0; i < voices.length; i++) { try { voices[i].stop(); } catch (e) {} } voices = []; for (var j = 0; j < chord.length; j++) { var osc = ctx.createOscillator(); osc.type = "triangle"; osc.frequency.value = hz(chord[j]); var vg = ctx.createGain(); vg.gain.value = 0.3; osc.connect(vg); vg.connect(mgain!); osc.start(); voices.push(osc); } }; voiceFor(chords[chordIdx]); chordTimer = setInterval(function () { if (!playing) return; chordIdx = (chordIdx + 1) % chords.length; voiceFor(chords[chordIdx]); }, 3400); } function stopMusic() { if (!playing) return; playing = false; if (chordTimer) { clearInterval(chordTimer); chordTimer = null; } for (var i = 0; i < voices.length; i++) { try { voices[i].stop(); } catch (e) {} } voices = []; if (lfo) { try { lfo.stop(); } catch (e) {} lfo = null; } if (mgain) { try { mgain.disconnect(); } catch (e) {} mgain = null; } } function sfx(name: string) { if (!ctx) return; if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } var now = ctx.currentTime, osc = ctx.createOscillator(), g = ctx.createGain(); osc.connect(g); g.connect(sfxBus ? sfxBus.gain : ctx.destination); var dur = 0.12; if (name === "snap") { osc.type = "triangle"; osc.frequency.setValueAtTime(520, now); osc.frequency.exponentialRampToValueAtTime(880, now + 0.08); dur = 0.12; } else if (name === "win") { osc.type = "triangle"; osc.frequency.setValueAtTime(523, now); osc.frequency.setValueAtTime(659, now + 0.11); osc.frequency.setValueAtTime(784, now + 0.22); dur = 0.4; } else if (name === "soft") { osc.type = "sine"; osc.frequency.setValueAtTime(330, now); osc.frequency.exponentialRampToValueAtTime(260, now + 0.1); dur = 0.12; } else { osc.type = "sine"; osc.frequency.setValueAtTime(760, now); dur = 0.06; } g.gain.setValueAtTime(0.0001, now); g.gain.exponentialRampToValueAtTime(0.22, now + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, now + dur); osc.start(now); osc.stop(now + dur + 0.02); } if (!SW.MCPityMusic) { SW.MCPityMusic = { get playing() { return playing; }, start: function () { startMusic(); }, stop: function () { stopMusic(); }, setEnabled: function (on: boolean) { musicOn = on; if (!on) stopMusic(); else if (SW.__mcpityStarted) startMusic(); }, sfx: sfx, }; } // ---- shared DOM helpers ---- function el(tag: string, css: string, txt?: string) { var e = document.createElement(tag); e.style.cssText = css; if (txt !== undefined) e.textContent = txt; return e; } var FONT = "system-ui,-apple-system,Segoe UI,Roboto,sans-serif"; function brandMark(size: number) { // a tasteful "Made by MCPity" lockup: a small warm gem glyph + wordmark. var wrap = el("div", "display:inline-flex;align-items:center;gap:7px;font-family:" + FONT); var gem = el("span", "width:" + size + "px;height:" + size + "px;border-radius:6px;background:linear-gradient(135deg," + ACCENT + ",#e7b878);box-shadow:0 2px 8px rgba(0,0,0,.35);display:inline-block"); var word = el("span", "font-size:" + (size - 1) + "px;font-weight:700;letter-spacing:.3px;color:" + SUBINK, CREDIT); wrap.appendChild(gem); wrap.appendChild(word); return wrap; } // ---- settings overlay ---- var soundOn = true; var settingsEl: HTMLDivElement | null = null; function buildSettings() { if (settingsEl) return; settingsEl = el("div", "position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;background:rgba(10,7,4,.72);font-family:" + FONT + ";color:" + INK) as HTMLDivElement; var card = el("div", "background:" + PANEL + ";border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;width:min(92vw,420px);max-height:86vh;overflow:auto;box-shadow:0 26px 80px rgba(0,0,0,.55)"); var head = el("div", "display:flex;align-items:center;justify-content:space-between;margin-bottom:14px"); head.appendChild(el("div", "font-size:18px;font-weight:800;letter-spacing:.3px", "Settings")); var x = el("button", "background:transparent;border:0;color:" + INK + ";font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px", "✕"); x.addEventListener("click", function () { closeSettings(); }); head.appendChild(x); card.appendChild(head); function sectionLabel(t: string) { return el("div", "font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:" + SUBINK + ";margin:14px 0 8px;font-weight:700", t); } function toggleRow(label: string, get: () => boolean, set: (on: boolean) => void) { var row = el("div", "display:flex;align-items:center;justify-content:space-between;padding:7px 0"); row.appendChild(el("label", "font-size:14px;color:" + INK, label)); var btn = el("button", "") as HTMLButtonElement; var paint = function () { var on = get(); btn.textContent = on ? "On" : "Off"; btn.style.cssText = "border:0;border-radius:99px;padding:6px 16px;font-size:13px;font-weight:700;cursor:pointer;background:" + (on ? ACCENT : "#3a2f24") + ";color:" + (on ? "#241b13" : SUBINK); }; paint(); btn.addEventListener("click", function () { set(!get()); paint(); }); row.appendChild(btn); return row; } function sliderRow(label: string, get: () => number, set: (v: number) => void) { var row = el("div", "display:flex;align-items:center;gap:12px;padding:7px 0"); row.appendChild(el("label", "min-width:84px;font-size:14px;color:" + INK, label)); var input = document.createElement("input"); input.type = "range"; input.min = "0"; input.max = "1"; input.step = "0.01"; input.value = String(get()); input.style.cssText = "flex:1;accent-color:" + ACCENT; var val = el("span", "min-width:40px;font-size:12px;color:" + SUBINK + ";text-align:right", Math.round(get() * 100) + "%"); input.addEventListener("input", function () { var v = parseFloat(input.value); set(v); val.textContent = Math.round(v * 100) + "%"; }); row.appendChild(input); row.appendChild(val); return row; } card.appendChild(sectionLabel("Audio")); card.appendChild(toggleRow("Music", function () { return musicOn; }, function (on) { musicOn = on; if (SW.MCPityMusic) SW.MCPityMusic.setEnabled(on); })); card.appendChild(toggleRow("Sound effects", function () { return soundOn; }, function (on) { soundOn = on; })); card.appendChild(sliderRow("Volume", function () { return master ? master.value : 0.85; }, function (v) { if (master) master.set(v); })); if (QUALITY && typeof QUALITY.get === "function" && typeof QUALITY.set === "function") { card.appendChild(sectionLabel("Display")); card.appendChild(toggleRow(QUALITY.label || "High quality", function () { return !!QUALITY.get(); }, function (on) { QUALITY.set(on); })); } if (CONTROLS.length) { card.appendChild(sectionLabel("How to play")); var list = el("div", "font-size:13px;line-height:1.55;color:" + SUBINK); for (var i = 0; i < CONTROLS.length; i++) { var line = el("div", "padding:2px 0", CONTROLS[i]); list.appendChild(line); } card.appendChild(list); } var credit = el("div", "margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center"); credit.appendChild(brandMark(15)); card.appendChild(credit); settingsEl.appendChild(card); settingsEl.addEventListener("click", function (ev) { if (ev.target === settingsEl) closeSettings(); }); document.body.appendChild(settingsEl); } function openSettings() { buildSettings(); settingsEl!.style.display = "flex"; } function closeSettings() { if (settingsEl) settingsEl.style.display = "none"; } SW.MCPitySettings = { open: openSettings, close: closeSettings }; // expose the "is sound on" flag for game SFX gating SW.__mcpitySoundOn = function () { return soundOn; }; // ---- persistent badge (settings gear + small brand) ---- function mountBadge() { if (document.getElementById("mcpity-shell-badge")) return; var badge = el("div", "position:fixed;right:12px;bottom:12px;z-index:99000;display:flex;align-items:center;gap:8px;font-family:" + FONT); badge.id = "mcpity-shell-badge"; var gear = el("button", "width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(20,14,9,.72);color:" + INK + ";font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center", "⚙") as HTMLButtonElement; gear.title = "Settings"; gear.addEventListener("mouseenter", function () { gear.style.background = "rgba(20,14,9,.94)"; }); gear.addEventListener("mouseleave", function () { gear.style.background = "rgba(20,14,9,.72)"; }); gear.addEventListener("click", function () { if (soundOn) sfx("click"); openSettings(); }); var mark = el("div", "padding:5px 9px;border-radius:9px;background:rgba(20,14,9,.6);border:1px solid rgba(255,255,255,.1)"); mark.appendChild(brandMark(13)); badge.appendChild(mark); badge.appendChild(gear); document.body.appendChild(badge); } // ---- splash / title screen ---- var startCbs: Array<() => void> = []; function doStart() { SW.__mcpityStarted = true; resume(); if (musicOn && SW.MCPityMusic) SW.MCPityMusic.start(); if (soundOn) sfx("click"); window.dispatchEvent(new CustomEvent("mcpity:game-new")); for (var i = 0; i < startCbs.length; i++) { try { startCbs[i](); } catch (e) {} } } function mountSplash() { var sp = el("div", "position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:" + FONT + ";color:" + INK + ";background:radial-gradient(ellipse at 50% 38%, #3a2b1d 0%, #211610 62%, #160e08 100%)") as HTMLDivElement; sp.id = "mcpity-shell-splash"; var gem = el("div", "width:66px;height:66px;border-radius:18px;margin-bottom:18px;background:linear-gradient(135deg," + ACCENT + ",#e7b878);box-shadow:0 12px 34px rgba(200,132,60,.4),inset 0 2px 6px rgba(255,255,255,.4)"); sp.appendChild(gem); var title = el("div", "font-size:38px;font-weight:800;letter-spacing:.4px;line-height:1.1;max-width:9ch", TITLE); sp.appendChild(title); if (TAGLINE) sp.appendChild(el("div", "margin-top:10px;font-size:15px;color:" + SUBINK + ";max-width:24ch;line-height:1.4", TAGLINE)); var play = el("button", "margin-top:26px;background:" + ACCENT + ";color:#241b13;border:0;border-radius:14px;padding:15px 42px;font-size:19px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 28px rgba(200,132,60,.36);min-width:200px", "Play") as HTMLButtonElement; play.addEventListener("mouseenter", function () { play.style.transform = "scale(1.03)"; }); play.addEventListener("mouseleave", function () { play.style.transform = ""; }); play.addEventListener("click", function () { sp.remove(); doStart(); }); sp.appendChild(play); var settingsBtn = el("button", "margin-top:12px;background:transparent;color:" + INK + ";border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 22px;font-size:14px;font-weight:600;cursor:pointer;min-width:200px", "Settings") as HTMLButtonElement; settingsBtn.addEventListener("click", function () { openSettings(); }); sp.appendChild(settingsBtn); var footer = el("div", "position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center"); footer.appendChild(brandMark(16)); sp.appendChild(footer); document.body.appendChild(sp); } SW.MCPityShell = { get started() { return !!SW.__mcpityStarted; }, onStart: function (cb: () => void) { startCbs.push(cb); }, openSettings: openSettings, }; function boot() { mountBadge(); mountSplash(); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot(); })(); // ---- MCPITY GAME SHELL - END ---- // =========================================================================== // BOOT - renderer / scene / camera. Sizes to #mcpity-root and fills it. // =========================================================================== var root: HTMLElement = document.getElementById("mcpity-root") || document.body; var HIGH_QUALITY = !/Edg\//.test(navigator.userAgent); // Edge -> simpler pipeline var renderer = new THREE.WebGLRenderer({ antialias: HIGH_QUALITY, alpha: false, powerPreference: "high-performance" }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); if (HIGH_QUALITY) { renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; } renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.06; renderer.outputColorSpace = THREE.SRGBColorSpace; var canvas = renderer.domElement; canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.touchAction = "none"; root.appendChild(canvas); var scene = new THREE.Scene(); scene.background = new THREE.Color(0x8fd6ef); // bright sky scene.fog = new THREE.Fog(0xbfe8f4, 42, 96); var camera = new THREE.PerspectiveCamera(52, 1, 0.1, 240); var CAM_BASE = new THREE.Vector3(0, 4.0, 10.5); var CAM_LOOK = new THREE.Vector3(0, 2.3, -11); camera.position.copy(CAM_BASE); camera.lookAt(CAM_LOOK); function sizeRenderer() { var w = root.clientWidth || window.innerWidth; var h = root.clientHeight || window.innerHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); } sizeRenderer(); if (typeof ResizeObserver !== "undefined") { try { new ResizeObserver(sizeRenderer).observe(root); } catch (_e) {} } window.addEventListener("resize", sizeRenderer); function mat(color: number, rough: number, metal: number): THREE.Material { if (HIGH_QUALITY) return new THREE.MeshStandardMaterial({ color: color, roughness: rough, metalness: metal }); return new THREE.MeshLambertMaterial({ color: color }); } function box(w: number, h: number, d: number, m: THREE.Material): THREE.Mesh { var mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); if (HIGH_QUALITY) { mesh.castShadow = true; mesh.receiveShadow = true; } return mesh; } // ---- lighting: bright sun + warm sky fill ---- var ambient = new THREE.AmbientLight(0xbfe0ff, 0.72); scene.add(ambient); var hemi = new THREE.HemisphereLight(0xdff4ff, 0xe6cfa0, 0.55); scene.add(hemi); var sun = new THREE.DirectionalLight(0xfff4dc, 1.35); sun.position.set(8, 16, 10); if (HIGH_QUALITY) { sun.castShadow = true; sun.shadow.mapSize.set(2048, 2048); sun.shadow.camera.left = -22; sun.shadow.camera.right = 22; sun.shadow.camera.top = 22; sun.shadow.camera.bottom = -22; sun.shadow.camera.near = 1; sun.shadow.camera.far = 60; sun.shadow.bias = -0.0005; } scene.add(sun); // =========================================================================== // ENVIRONMENT - sunny beach: sand, sea, palm trees, striped huts, bunting. // =========================================================================== var GROUND_Y = 0; // sand var sand = new THREE.Mesh(new THREE.PlaneGeometry(240, 240), mat(0xecd9a6, 0.98, 0)); sand.rotation.x = -Math.PI / 2; sand.position.y = GROUND_Y; if (HIGH_QUALITY) sand.receiveShadow = true; scene.add(sand); // a sea band in the distance var sea = new THREE.Mesh(new THREE.PlaneGeometry(240, 90), mat(0x2fa9c9, 0.6, 0.1)); sea.rotation.x = -Math.PI / 2; sea.position.set(0, 0.02, -70); scene.add(sea); // warm sun disc in the sky var sunDisc = new THREE.Mesh(new THREE.CircleGeometry(6, 32), new THREE.MeshBasicMaterial({ color: 0xfff2c4 })); sunDisc.position.set(18, 26, -80); scene.add(sunDisc); function buildPalm(): THREE.Object3D { var g = new THREE.Group(); var trunkM = mat(0x9c6b3a, 0.9, 0); for (var i = 0; i < 6; i++) { var seg = new THREE.Mesh(new THREE.CylinderGeometry(0.22 - i * 0.02, 0.26 - i * 0.02, 0.9, 10), trunkM); seg.position.set(Math.sin(i * 0.5) * 0.18, 0.45 + i * 0.86, 0); seg.rotation.z = Math.sin(i * 0.5) * 0.06; if (HIGH_QUALITY) { seg.castShadow = true; } g.add(seg); } var leafM = mat(0x3fa14a, 0.85, 0); for (var j = 0; j < 7; j++) { var leaf = new THREE.Mesh(new THREE.ConeGeometry(0.34, 2.6, 6), leafM); var a = (j / 7) * Math.PI * 2; leaf.position.set(Math.cos(a) * 1.1 + Math.sin(5 * 0.5) * 0.18, 5.5, Math.sin(a) * 1.1); leaf.rotation.z = Math.PI / 2 - 0.5; leaf.rotation.y = -a; leaf.scale.set(0.5, 1, 1.6); if (HIGH_QUALITY) leaf.castShadow = true; g.add(leaf); } return g; } function placePalm(x: number, z: number, s: number) { var m = getSlot("palm"); var obj: THREE.Object3D; if (m) { obj = fitModel(m, 6.2 * s); obj.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) o.castShadow = true; }); } else { obj = buildPalm(); obj.scale.setScalar(s); } obj.position.set(x, GROUND_Y, z); obj.rotation.y = Math.random() * Math.PI * 2; scene.add(obj); } placePalm(-14, -6, 1.0); placePalm(15, -9, 1.15); placePalm(-17, -20, 1.3); placePalm(19, -22, 1.05); // striped beach huts function buildHut(c1: number, c2: number): THREE.Object3D { var g = new THREE.Group(); var wall = box(3.0, 2.4, 3.0, mat(0xf3ede0, 0.9, 0)); wall.position.y = 1.2; g.add(wall); // striped awning roof var roofM1 = mat(c1, 0.7, 0), roofM2 = mat(c2, 0.7, 0); for (var i = 0; i < 6; i++) { var slat = new THREE.Mesh(new THREE.BoxGeometry(0.52, 0.12, 3.6), (i % 2 === 0 ? roofM1 : roofM2)); slat.position.set(-1.3 + i * 0.52, 2.75 - Math.abs(i - 2.5) * 0.08, 0.2); slat.rotation.x = -0.18; if (HIGH_QUALITY) slat.castShadow = true; g.add(slat); } var door = box(1.0, 1.6, 0.1, mat(0x3a6d7a, 0.8, 0)); door.position.set(0, 0.8, 1.52); g.add(door); return g; } var hutA = buildHut(0xff5d5d, 0xffffff); hutA.position.set(-9.5, 0, -13); hutA.rotation.y = 0.5; scene.add(hutA); var hutB = buildHut(0x3fa9ff, 0xffffff); hutB.position.set(10, 0, -14); hutB.rotation.y = -0.6; scene.add(hutB); // bunting: a swag of little triangle flags strung between two poles behind the pedestal function buildBunting() { var g = new THREE.Group(); var poleM = mat(0xb89055, 0.85, 0); var lp = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 6, 8), poleM); lp.position.set(-8, 3, -17); g.add(lp); var rp = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 6, 8), poleM); rp.position.set(8, 3, -17); g.add(rp); var cols = [0xff5d5d, 0xffd23f, 0x3fa9ff, 0x53d769, 0xff8fce]; var N = 22; for (var i = 0; i <= N; i++) { var t = i / N; var x = -7.6 + t * 15.2; var sag = Math.sin(t * Math.PI) * 1.5; var y = 5.7 - sag; var flag = new THREE.Mesh(new THREE.ConeGeometry(0.26, 0.6, 3), new THREE.MeshBasicMaterial({ color: cols[i % cols.length] })); flag.position.set(x, y - 0.3, -17); flag.rotation.x = Math.PI; // point down g.add(flag); } return g; } scene.add(buildBunting()); // =========================================================================== // PEDESTAL - the raised platform the targets sit on. Knocking a target off its // footprint (or shattering it) clears it. // =========================================================================== var PED_CX = 0, PED_CZ = -12; var PED_HALF_W = 3.1, PED_HALF_D = 2.1, PED_H = 2.4; var PED_TOP = GROUND_Y + PED_H; var pedGroup = new THREE.Group(); var pedBody = box(PED_HALF_W * 2, PED_H, PED_HALF_D * 2, mat(0xcaa46a, 0.9, 0)); pedBody.position.set(PED_CX, PED_H / 2, PED_CZ); pedGroup.add(pedBody); var pedTopPlate = box(PED_HALF_W * 2 + 0.3, 0.2, PED_HALF_D * 2 + 0.3, mat(0x8f6a3d, 0.8, 0.05)); pedTopPlate.position.set(PED_CX, PED_TOP - 0.1, PED_CZ); pedGroup.add(pedTopPlate); // striped skirt for carnival flair for (var si = 0; si < 12; si++) { var stripe = box(0.5, PED_H * 0.9, 0.06, mat(si % 2 === 0 ? 0xff5d5d : 0xf6efe2, 0.85, 0)); stripe.position.set(PED_CX - PED_HALF_W + 0.28 + si * 0.5, PED_H / 2, PED_CZ + PED_HALF_D + 0.02); pedGroup.add(stripe); } scene.add(pedGroup); function onPedestal(x: number, z: number): boolean { return Math.abs(x - PED_CX) < PED_HALF_W - 0.12 && Math.abs(z - PED_CZ) < PED_HALF_D - 0.12; } function supportYAt(x: number, z: number, restH: number): number { if (onPedestal(x, z)) return PED_TOP + restH; return GROUND_Y + restH; } // =========================================================================== // TARGETS - striped cans, clay jars, stone blocks. Each is a lightweight rigid // body: center position, linear velocity, orientation quaternion, and world // angular velocity. A bounding sphere drives collisions (robust for a knockdown // game); the visual mesh tumbles by the quaternion so it reads as real physics. // Durability tiers differ by mass, angular damping, and shatter behavior. // =========================================================================== type Tier = "can" | "jar" | "block"; interface Target { tier: Tier; mesh: THREE.Object3D; pos: THREE.Vector3; vel: THREE.Vector3; quat: THREE.Quaternion; angVel: THREE.Vector3; mass: number; radius: number; // bounding sphere for collisions restH: number; // center-to-base when upright (for resting on a surface) angDamp: number; // per-second angular damping (blocks high = resist tumble) shatterAt: number; // impact speed above which a jar shatters (Infinity = never) alive: boolean; cleared: boolean; onPed: boolean; // still resting within the pedestal footprint restTimer: number; } var targets: Target[] = []; function tierColor(tier: Tier): number { if (tier === "can") return 0xff6a4d; if (tier === "jar") return 0xcf7a4a; return 0x8d97a3; } function buildCanMesh(): THREE.Object3D { var g = new THREE.Group(); var bodyM = mat(0xf0efe8, 0.55, 0.15); var body = new THREE.Mesh(new THREE.CylinderGeometry(0.42, 0.42, 1.0, 20), bodyM); if (HIGH_QUALITY) { body.castShadow = true; body.receiveShadow = true; } g.add(body); // painted stripes var sM = mat(0xff5d4a, 0.5, 0.1); for (var i = 0; i < 3; i++) { var ring = new THREE.Mesh(new THREE.CylinderGeometry(0.425, 0.425, 0.16, 20), sM); ring.position.y = -0.3 + i * 0.3; g.add(ring); } var rimM = mat(0xbcbcc4, 0.4, 0.6); var top = new THREE.Mesh(new THREE.CylinderGeometry(0.43, 0.43, 0.06, 20), rimM); top.position.y = 0.5; g.add(top); var bot = new THREE.Mesh(new THREE.CylinderGeometry(0.43, 0.43, 0.06, 20), rimM); bot.position.y = -0.5; g.add(bot); return g; } function buildJarMesh(): THREE.Object3D { var g = new THREE.Group(); var m = mat(0xcf7a4a, 0.75, 0.05); var belly = new THREE.Mesh(new THREE.SphereGeometry(0.5, 18, 14), m); belly.scale.set(1, 1.05, 1); if (HIGH_QUALITY) belly.castShadow = true; g.add(belly); var neck = new THREE.Mesh(new THREE.CylinderGeometry(0.24, 0.32, 0.34, 14), m); neck.position.y = 0.5; g.add(neck); var lip = new THREE.Mesh(new THREE.TorusGeometry(0.26, 0.06, 8, 14), m); lip.position.y = 0.66; lip.rotation.x = Math.PI / 2; g.add(lip); return g; } function buildBlockMesh(): THREE.Object3D { var g = new THREE.Group(); var m = mat(0x8d97a3, 0.95, 0.02); var b = new THREE.Mesh(new THREE.BoxGeometry(1.0, 1.0, 1.0), m); if (HIGH_QUALITY) { b.castShadow = true; b.receiveShadow = true; } g.add(b); // chiseled seam lines var seamM = mat(0x6f7883, 0.95, 0); var s1 = new THREE.Mesh(new THREE.BoxGeometry(1.02, 0.05, 1.02), seamM); s1.position.y = 0.02; g.add(s1); var s2 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 1.02, 1.02), seamM); s2.position.x = 0.02; g.add(s2); return g; } function tierMesh(tier: Tier): THREE.Object3D { var slot = getSlot(tier); if (slot) { var h = tier === "block" ? 1.0 : (tier === "jar" ? 1.2 : 1.05); var fitted = fitModel(slot, h); // fitModel sits base at y=0; recenter to center for rigid-body use var bb = new THREE.Box3().setFromObject(fitted); var sz = new THREE.Vector3(); bb.getSize(sz); var wrap = new THREE.Group(); fitted.position.y -= sz.y / 2; fitted.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.castShadow = true; o.receiveShadow = true; } }); wrap.add(fitted); return wrap; } if (tier === "can") return buildCanMesh(); if (tier === "jar") return buildJarMesh(); return buildBlockMesh(); } function makeTarget(tier: Tier, x: number, y: number, z: number): Target { var mesh = tierMesh(tier); scene.add(mesh); var spec = tier === "can" ? { mass: 0.55, radius: 0.52, restH: 0.5, angDamp: 0.6, shatterAt: Infinity } : tier === "jar" ? { mass: 0.85, radius: 0.55, restH: 0.6, angDamp: 0.9, shatterAt: 12.5 } : { mass: 3.4, radius: 0.7, restH: 0.5, angDamp: 5.0, shatterAt: Infinity }; var t: Target = { tier: tier, mesh: mesh, pos: new THREE.Vector3(x, y, z), vel: new THREE.Vector3(0, 0, 0), quat: new THREE.Quaternion(), angVel: new THREE.Vector3(0, 0, 0), mass: spec.mass, radius: spec.radius, restH: spec.restH, angDamp: spec.angDamp, shatterAt: spec.shatterAt, alive: true, cleared: false, onPed: onPedestal(x, z), restTimer: 0, }; mesh.position.copy(t.pos); targets.push(t); return t; } function clearTargets() { for (var i = 0; i < targets.length; i++) { scene.remove(targets[i].mesh); disposeObj(targets[i].mesh); } targets = []; } function disposeObj(o: THREE.Object3D) { o.traverse(function (c: any) { if (c.geometry) { try { c.geometry.dispose(); } catch (_e) {} } if (c.material) { var mm = c.material; if (Array.isArray(mm)) { for (var k = 0; k < mm.length; k++) { try { mm[k].dispose(); } catch (_e) {} } } else { try { mm.dispose(); } catch (_e) {} } } }); } // =========================================================================== // CANNON - procedural (recolorable for Season Pass skins). If a "cannon" Meshy // GLB slot is filled it replaces the barrel visual and is tinted per skin. The // barrel is oriented analytically to the launch direction so the muzzle, arc, // and ball all agree. // =========================================================================== var UP = new THREE.Vector3(0, 1, 0); var CANNON_PIVOT = new THREE.Vector3(0, 1.0, 6.2); var BARREL_LEN = 1.9; interface Skin { id: string; name: string; premium: boolean; barrel: number; band: number; } var SKINS: Skin[] = [ { id: "harbor", name: "Harbor Steel", premium: false, barrel: 0x3a5a6b, band: 0xffcf5d }, { id: "sunset_gold", name: "Sunset Gold", premium: true, barrel: 0xc9962f, band: 0xfff0b0 }, { id: "carnival", name: "Carnival Stripe", premium: true, barrel: 0xd8443f, band: 0xffffff }, ]; var currentSkin: Skin = SKINS[0]; var cannonGroup = new THREE.Group(); scene.add(cannonGroup); // a little sandy platform + carriage under the cannon var carriage = new THREE.Group(); var carriageBody = box(1.7, 0.5, 1.2, mat(0x7a5636, 0.85, 0)); carriageBody.position.set(0, 0.5, 0); carriage.add(carriageBody); var wheelM = mat(0x4a3320, 0.8, 0.05); var wl = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 0.16, 16), wheelM); wl.rotation.z = Math.PI / 2; wl.position.set(-0.85, 0.5, 0); carriage.add(wl); var wr = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 0.16, 16), wheelM); wr.rotation.z = Math.PI / 2; wr.position.set(0.85, 0.5, 0); carriage.add(wr); carriage.position.copy(CANNON_PIVOT); carriage.position.y = 0; if (HIGH_QUALITY) carriage.traverse(function (o: any) { if (o.isMesh) o.castShadow = true; }); cannonGroup.add(carriage); // the barrel group is oriented each frame to the aim direction var barrelGroup = new THREE.Group(); barrelGroup.position.copy(CANNON_PIVOT); cannonGroup.add(barrelGroup); var barrelMeshes: THREE.Object3D | null = null; function buildBarrel() { if (barrelMeshes) { barrelGroup.remove(barrelMeshes); disposeObj(barrelMeshes); barrelMeshes = null; } var slot = getSlot("cannon"); var g = new THREE.Group(); if (slot) { var fitted = fitModel(slot, BARREL_LEN); fitted.traverse(function (o: any) { if (o.isMesh) { if (HIGH_QUALITY) o.castShadow = true; o.material = o.material && o.material.clone ? o.material.clone() : o.material; if (o.material && o.material.color) o.material.color = new THREE.Color(currentSkin.barrel); } }); // fitModel sits base at y=0; the group's +Y is the muzzle direction g.add(fitted); } else { var bMat = mat(currentSkin.barrel, 0.45, 0.55); var tube = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.36, BARREL_LEN, 20), bMat); // geometry default is centered; shift so base at y=0, muzzle at +Y*len tube.geometry.translate(0, BARREL_LEN / 2, 0); if (HIGH_QUALITY) tube.castShadow = true; g.add(tube); var muzzleRim = new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.34, 0.22, 20), mat(currentSkin.band, 0.4, 0.6)); muzzleRim.position.y = BARREL_LEN - 0.02; g.add(muzzleRim); var band = new THREE.Mesh(new THREE.CylinderGeometry(0.38, 0.38, 0.16, 20), mat(currentSkin.band, 0.4, 0.6)); band.position.y = BARREL_LEN * 0.45; g.add(band); var breech = new THREE.Mesh(new THREE.SphereGeometry(0.4, 18, 14), bMat); breech.position.y = 0.0; if (HIGH_QUALITY) breech.castShadow = true; g.add(breech); } barrelMeshes = g; barrelGroup.add(g); } buildBarrel(); // ---- aim state (drag sets aim direction + power) ---- var aimYaw = 0; // radians, + = aim right var aimPitch = 0.44; // radians above horizontal var power = 0.55; // 0..1 var MAX_YAW = 0.62, MIN_PITCH = 0.1, MAX_PITCH = 1.02; var MIN_SPEED = 16, MAX_SPEED = 41; function aimDir(): THREE.Vector3 { var cp = Math.cos(aimPitch), sp = Math.sin(aimPitch); return new THREE.Vector3(Math.sin(aimYaw) * cp, sp, -Math.cos(aimYaw) * cp).normalize(); } function shotSpeed(): number { return MIN_SPEED + power * (MAX_SPEED - MIN_SPEED); } function muzzlePos(): THREE.Vector3 { return CANNON_PIVOT.clone().addScaledVector(aimDir(), BARREL_LEN + 0.15); } function orientBarrel() { barrelGroup.quaternion.setFromUnitVectors(UP, aimDir()); } orientBarrel(); // =========================================================================== // TRAJECTORY PREVIEW - a dotted parabola integrated with the SAME gravity the // ball uses, so the arc is truly predictive. Updated live while aiming. // =========================================================================== var G = 27; // gravity for ball + preview + targets var ARC_N = 30; var arcGeo = new THREE.BufferGeometry(); var arcPos = new Float32Array(ARC_N * 3); arcGeo.setAttribute("position", new THREE.BufferAttribute(arcPos, 3)); var arcMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.16, transparent: true, opacity: 0.9, depthWrite: false }); var arcPoints = new THREE.Points(arcGeo, arcMat); arcPoints.visible = false; scene.add(arcPoints); // a small ghost marker where the arc first meets the pedestal / ground var arcHit = new THREE.Mesh(new THREE.RingGeometry(0.22, 0.34, 20), new THREE.MeshBasicMaterial({ color: 0xffdf6a, transparent: true, opacity: 0.85, side: THREE.DoubleSide })); arcHit.rotation.x = -Math.PI / 2; arcHit.visible = false; scene.add(arcHit); function updateArc() { var p = muzzlePos(); var v = aimDir().multiplyScalar(shotSpeed()); var dt = 0.055; var hit = false; for (var i = 0; i < ARC_N; i++) { arcPos[i * 3] = p.x; arcPos[i * 3 + 1] = p.y; arcPos[i * 3 + 2] = p.z; // step v.y -= G * dt; p.addScaledVector(v, dt); if (!hit) { var surfY = onPedestal(p.x, p.z) ? PED_TOP : GROUND_Y; if (p.y <= surfY + 0.02) { arcHit.position.set(p.x, surfY + 0.03, p.z); arcHit.visible = true; hit = true; // freeze remaining points at the hit for a clean look for (var j = i + 1; j < ARC_N; j++) { arcPos[j * 3] = p.x; arcPos[j * 3 + 1] = surfY + 0.03; arcPos[j * 3 + 2] = p.z; } break; } } } if (!hit) arcHit.visible = false; (arcGeo.getAttribute("position") as THREE.BufferAttribute).needsUpdate = true; } // =========================================================================== // BALL - the fired projectile. Custom lightweight physics: gravity + bounce + // sphere-vs-box (pedestal) + sphere-vs-sphere (targets). One ball in play. // =========================================================================== var BALL_R = 0.42, BALL_MASS = 1.25; var ballMesh = new THREE.Mesh(new THREE.SphereGeometry(BALL_R, 24, 18), mat(0x2b2b30, 0.35, 0.25)); if (HIGH_QUALITY) ballMesh.castShadow = true; ballMesh.visible = false; scene.add(ballMesh); var ballPos = new THREE.Vector3(); var ballVel = new THREE.Vector3(); var ballActive = false; var ballLife = 0; // seconds in flight var ballGrounded = 0; // seconds resting/low on ground function fireBall() { if (ballActive || !W.__mcpityStarted) return; if (shotsLeft <= 0 || levelWon || levelLost) return; ballPos.copy(muzzlePos()); ballVel.copy(aimDir()).multiplyScalar(shotSpeed()); ballMesh.position.copy(ballPos); ballMesh.visible = true; ballActive = true; ballLife = 0; ballGrounded = 0; shotsLeft--; updateHud(); playSfx("fire"); // muzzle puff + a punch of camera shake puff(muzzlePos(), aimDir()); shake(0.35); } // sphere vs axis-aligned box (pedestal) - resolve + reflect function collideBallPedestal() { var minX = PED_CX - PED_HALF_W, maxX = PED_CX + PED_HALF_W; var minZ = PED_CZ - PED_HALF_D, maxZ = PED_CZ + PED_HALF_D; var minY = GROUND_Y, maxY = PED_TOP; var cx = Math.max(minX, Math.min(ballPos.x, maxX)); var cy = Math.max(minY, Math.min(ballPos.y, maxY)); var cz = Math.max(minZ, Math.min(ballPos.z, maxZ)); var dx = ballPos.x - cx, dy = ballPos.y - cy, dz = ballPos.z - cz; var d2 = dx * dx + dy * dy + dz * dz; if (d2 < BALL_R * BALL_R && d2 > 1e-8) { var d = Math.sqrt(d2); var nx = dx / d, ny = dy / d, nz = dz / d; var pen = BALL_R - d; ballPos.x += nx * pen; ballPos.y += ny * pen; ballPos.z += nz * pen; var vn = ballVel.x * nx + ballVel.y * ny + ballVel.z * nz; if (vn < 0) { ballVel.x -= (1.4) * vn * nx; ballVel.y -= (1.4) * vn * ny; ballVel.z -= (1.4) * vn * nz; ballVel.multiplyScalar(0.62); } } } // =========================================================================== // PHYSICS STEP - integrate ball + targets, resolve collisions, chain reactions. // Runs in fixed substeps for a stable fast ball. // =========================================================================== var tmpQ = new THREE.Quaternion(); var tmpV = new THREE.Vector3(); function integrateTarget(t: Target, dt: number) { if (!t.alive) return; // gravity t.vel.y -= G * dt; t.pos.addScaledVector(t.vel, dt); // orientation from angular velocity var av = t.angVel; var spd = av.length(); if (spd > 1e-5) { tmpV.copy(av).multiplyScalar(1 / spd); tmpQ.setFromAxisAngle(tmpV, spd * dt); t.quat.premultiply(tmpQ); t.quat.normalize(); } // angular damping var adamp = Math.max(0, 1 - t.angDamp * dt); t.angVel.multiplyScalar(adamp); // is it still on the pedestal footprint? t.onPed = onPedestal(t.pos.x, t.pos.z); var surfY = t.onPed ? PED_TOP : GROUND_Y; var restY = surfY + t.restH; if (t.pos.y <= restY) { t.pos.y = restY; if (t.vel.y < 0) t.vel.y *= -0.22; // ground friction t.vel.x *= Math.max(0, 1 - 3.2 * dt); t.vel.z *= Math.max(0, 1 - 3.2 * dt); // extra tumble->settle damping near rest t.angVel.multiplyScalar(Math.max(0, 1 - 2.4 * dt)); } // cleared? off the pedestal (fell below its top), shattered handled elsewhere, // or toppled far over. if (!t.cleared) { var tilt = tiltAngle(t.quat); var fellOff = t.pos.y < PED_TOP - 0.5; var toppled = tilt > (t.tier === "block" ? 1.15 : 1.02); // ~59-66 degrees if (fellOff || toppled) markCleared(t); } } function tiltAngle(q: THREE.Quaternion): number { // angle between local up and world up tmpV.set(0, 1, 0).applyQuaternion(q); var d = Math.max(-1, Math.min(1, tmpV.y)); return Math.acos(d); } function markCleared(t: Target) { if (t.cleared) return; t.cleared = true; clearedCount++; updateHud(); playSfx("clear"); } function shatterJar(t: Target, at: THREE.Vector3) { t.alive = false; t.cleared = true; clearedCount++; scene.remove(t.mesh); disposeObj(t.mesh); makeShatter(at, tierColor("jar")); playSfx("shatter"); shake(0.5); updateHud(); } // ball vs targets function collideBallTargets() { for (var i = 0; i < targets.length; i++) { var t = targets[i]; if (!t.alive) continue; tmpV.copy(t.pos).sub(ballPos); var d = tmpV.length(); var mind = BALL_R + t.radius; if (d < mind && d > 1e-6) { var n = tmpV.multiplyScalar(1 / d); // from ball -> target // separate var pen = mind - d; ballPos.addScaledVector(n, -pen * 0.5); t.pos.addScaledVector(n, pen * 0.5); // impact speed of ball along n var vn = ballVel.x * n.x + ballVel.y * n.y + ballVel.z * n.z; var impact = Math.max(0, vn); // impulse to target (mass-weighted); heavier tiers move less var kick = (impact * BALL_MASS) / t.mass; t.vel.x += n.x * kick * 0.9; t.vel.y += n.y * kick * 0.9 + kick * 0.18; // slight pop up t.vel.z += n.z * kick * 0.9; // spin from off-axis hit (tangential component) var tang = new THREE.Vector3(ballVel.x - n.x * vn, ballVel.y - n.y * vn, ballVel.z - n.z * vn); var torque = new THREE.Vector3().crossVectors(n, tang).multiplyScalar((4.2) / t.mass); t.angVel.add(torque); t.restTimer = 0; // ball loses energy + deflects ballVel.addScaledVector(n, -vn * 1.35); ballVel.multiplyScalar(0.52); // effects impactBurst(ballPos.clone().addScaledVector(n, BALL_R), t.tier); var big = impact > 9; playSfx(t.tier === "block" ? "thud" : (big ? "whack" : "tap")); shake(big ? 0.5 : 0.28); if (impact >= t.shatterAt) shatterJar(t, t.pos.clone()); } } } // target vs target (chain reactions) - only pairs where at least one is moving function collideTargetPairs(dt: number) { for (var i = 0; i < targets.length; i++) { var a = targets[i]; if (!a.alive) continue; var aMoving = a.vel.lengthSq() > 0.6 || a.angVel.lengthSq() > 0.6; for (var j = i + 1; j < targets.length; j++) { var b = targets[j]; if (!b.alive) continue; var bMoving = b.vel.lengthSq() > 0.6 || b.angVel.lengthSq() > 0.6; if (!aMoving && !bMoving) continue; tmpV.copy(b.pos).sub(a.pos); var d = tmpV.length(); var mind = a.radius + b.radius; if (d < mind && d > 1e-6) { var n = tmpV.multiplyScalar(1 / d); // a -> b var pen = mind - d; var invA = 1 / a.mass, invB = 1 / b.mass, invSum = invA + invB; // positional separation weighted by inverse mass a.pos.addScaledVector(n, -pen * (invA / invSum)); b.pos.addScaledVector(n, pen * (invB / invSum)); // relative velocity along n var rvx = b.vel.x - a.vel.x, rvy = b.vel.y - a.vel.y, rvz = b.vel.z - a.vel.z; var vn = rvx * n.x + rvy * n.y + rvz * n.z; if (vn < 0) { var e = 0.32; // restitution var jimp = -(1 + e) * vn / invSum; a.vel.addScaledVector(n, -jimp * invA); b.vel.addScaledVector(n, jimp * invB); // impart some tumble to the struck body var mag = Math.abs(jimp); b.angVel.add(new THREE.Vector3((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5)).multiplyScalar(mag * invB * 1.4)); a.angVel.add(new THREE.Vector3((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5)).multiplyScalar(mag * invA * 1.0)); a.restTimer = 0; b.restTimer = 0; if (mag > 3.5) playSfx("clack"); // a chain hit can shatter a clay jar too if (b.tier === "jar" && Math.abs(vn) >= b.shatterAt) shatterJar(b, b.pos.clone()); if (a.tier === "jar" && Math.abs(vn) >= a.shatterAt) shatterJar(a, a.pos.clone()); } } } } } function physicsStep(dt: number) { // ball if (ballActive) { ballVel.y -= G * dt; ballPos.addScaledVector(ballVel, dt); collideBallPedestal(); collideBallTargets(); // ground bounce if (ballPos.y < BALL_R) { ballPos.y = BALL_R; if (ballVel.y < 0) ballVel.y *= -0.34; ballVel.x *= 0.72; ballVel.z *= 0.72; } ballLife += dt; var slow = ballVel.lengthSq() < 0.7; var low = ballPos.y <= BALL_R + 0.05; if (slow && low) ballGrounded += dt; else ballGrounded = 0; } // targets for (var i = 0; i < targets.length; i++) integrateTarget(targets[i], dt); collideTargetPairs(dt); } // =========================================================================== // SPARKS / SHARDS / PUFFS - juicy impact + shatter + muzzle particles. // =========================================================================== interface Burst { pts: THREE.Points; vel: Float32Array; life: number; max: number; grav: number; } var bursts: Burst[] = []; function spawnBurst(x: number, y: number, z: number, count: number, spread: number, up: number, cA: number, cB: number, size: number, grav: number, life: number) { var geo = new THREE.BufferGeometry(); var pos = new Float32Array(count * 3); var vel = new Float32Array(count * 3); var col = new Float32Array(count * 3); var a = new THREE.Color(cA), b = new THREE.Color(cB); for (var i = 0; i < count; i++) { pos[i * 3] = x; pos[i * 3 + 1] = y; pos[i * 3 + 2] = z; var ang = Math.random() * 6.283, sp = Math.random() * spread; var el = (Math.random() - 0.2); vel[i * 3] = Math.cos(ang) * sp; vel[i * 3 + 1] = up * (0.5 + Math.random()) + el; vel[i * 3 + 2] = Math.sin(ang) * sp; var m = a.clone().lerp(b, Math.random()); col[i * 3] = m.r; col[i * 3 + 1] = m.g; col[i * 3 + 2] = m.b; } geo.setAttribute("position", new THREE.BufferAttribute(pos, 3)); geo.setAttribute("color", new THREE.BufferAttribute(col, 3)); var pm = new THREE.PointsMaterial({ size: size, vertexColors: true, transparent: true, opacity: 1, depthWrite: false }); var pts = new THREE.Points(geo, pm); scene.add(pts); bursts.push({ pts: pts, vel: vel, life: 0, max: life, grav: grav }); } function impactBurst(p: THREE.Vector3, tier: Tier) { var cA = tier === "block" ? 0xb8bcc4 : (tier === "jar" ? 0xe0a06a : 0xffe6a8); var cB = tier === "block" ? 0x7a828c : (tier === "jar" ? 0xc06a3a : 0xff9d4a); spawnBurst(p.x, p.y, p.z, 20, 3.2, 2.0, cA, cB, 0.16, 8.0, 0.7); } function makeShatter(p: THREE.Vector3, color: number) { spawnBurst(p.x, p.y, p.z, 46, 4.4, 3.2, color, 0xf4d9b0, 0.2, 10.0, 1.1); } function puff(p: THREE.Vector3, dir: THREE.Vector3) { spawnBurst(p.x, p.y, p.z, 18, 1.4, 0.6, 0xffffff, 0xd9d0c0, 0.26, 3.0, 0.5); } function confetti() { for (var i = 0; i < 6; i++) { (function (k: number) { setTimeout(function () { spawnBurst(PED_CX + (Math.random() - 0.5) * 6, PED_TOP + 3, PED_CZ + (Math.random() - 0.5) * 3, 60, 3.6, 3.4, 0xff5d5d, 0x3fa9ff, 0.2, 7.0, 1.4); }, k * 150); })(i); } } function updateBursts(dt: number) { for (var i = bursts.length - 1; i >= 0; i--) { var s = bursts[i]; s.life += dt; var pos = (s.pts.geometry.getAttribute("position") as THREE.BufferAttribute).array as Float32Array; var n = pos.length / 3; for (var j = 0; j < n; j++) { s.vel[j * 3 + 1] -= s.grav * dt; pos[j * 3] += s.vel[j * 3] * dt; pos[j * 3 + 1] += s.vel[j * 3 + 1] * dt; pos[j * 3 + 2] += s.vel[j * 3 + 2] * dt; if (pos[j * 3 + 1] < 0.04) { pos[j * 3 + 1] = 0.04; s.vel[j * 3 + 1] *= -0.3; s.vel[j * 3] *= 0.7; s.vel[j * 3 + 2] *= 0.7; } } (s.pts.geometry.getAttribute("position") as THREE.BufferAttribute).needsUpdate = true; (s.pts.material as THREE.PointsMaterial).opacity = Math.max(0, 1 - s.life / s.max); if (s.life >= s.max) { scene.remove(s.pts); s.pts.geometry.dispose(); (s.pts.material as THREE.Material).dispose(); bursts.splice(i, 1); } } } // ---- camera shake ---- var shakeAmt = 0; function shake(a: number) { shakeAmt = Math.min(1.0, shakeAmt + a); } // =========================================================================== // LEVELS - layouts of cans / jars / blocks on the pedestal. Free base levels // plus Season Pass bonus levels. Positions are (x, z) offsets from the pedestal // center; y is derived from the surface + rest height (and a per-target stack // height for stacking). // =========================================================================== interface Spawn { tier: Tier; x: number; z: number; stack?: number; } interface Level { name: string; premium: boolean; shots: number; build: () => Spawn[]; } function rowOf(tier: Tier, z: number, xs: number[]): Spawn[] { var out: Spawn[] = []; for (var i = 0; i < xs.length; i++) out.push({ tier: tier, x: xs[i], z: z }); return out; } var LEVELS: Level[] = [ { name: "Warm Up", premium: false, shots: 4, build: function () { return rowOf("can", -0.4, [-1.4, -0.5, 0.4, 1.3]).concat( rowOf("can", 0.6, [-0.9, 0.0, 0.9])); }, }, { name: "Clay Day", premium: false, shots: 4, build: function () { return rowOf("can", -0.6, [-1.5, -0.5, 0.5, 1.5]).concat( [{ tier: "jar", x: -1.0, z: 0.6 }, { tier: "jar", x: 0.0, z: 0.6 }, { tier: "jar", x: 1.0, z: 0.6 }] as Spawn[]); }, }, { name: "Stone Wall", premium: false, shots: 5, build: function () { return ([ { tier: "block", x: -1.3, z: 0.2 }, { tier: "block", x: 0, z: 0.2 }, { tier: "block", x: 1.3, z: 0.2 }, { tier: "block", x: -0.65, z: 0.2, stack: 1 }, { tier: "block", x: 0.65, z: 0.2, stack: 1 }, ] as Spawn[]).concat(rowOf("can", -0.8, [-1.3, 0, 1.3])); }, }, { name: "Tower Trouble", premium: false, shots: 5, build: function () { return [ { tier: "block", x: 0, z: 0 }, { tier: "block", x: 0, z: 0, stack: 1 }, { tier: "jar", x: 0, z: 0, stack: 2 }, { tier: "can", x: -1.6, z: 0.3 }, { tier: "can", x: -1.6, z: 0.3, stack: 1 }, { tier: "can", x: 1.6, z: 0.3 }, { tier: "can", x: 1.6, z: 0.3, stack: 1 }, { tier: "jar", x: -1.6, z: 0.3, stack: 2 }, { tier: "jar", x: 1.6, z: 0.3, stack: 2 }, ]; }, }, { name: "Pyramid Cove", premium: false, shots: 6, build: function () { return [ { tier: "block", x: -1.2, z: 0.1 }, { tier: "block", x: 0, z: 0.1 }, { tier: "block", x: 1.2, z: 0.1 }, { tier: "jar", x: -0.6, z: 0.1, stack: 1 }, { tier: "jar", x: 0.6, z: 0.1, stack: 1 }, { tier: "can", x: 0, z: 0.1, stack: 2 }, { tier: "can", x: -1.7, z: 0.7 }, { tier: "can", x: 1.7, z: 0.7 }, ]; }, }, // ---- Season Pass bonus levels ---- { name: "Fortress (Pass)", premium: true, shots: 6, build: function () { return [ { tier: "block", x: -1.6, z: -0.2 }, { tier: "block", x: -0.55, z: -0.2 }, { tier: "block", x: 0.55, z: -0.2 }, { tier: "block", x: 1.6, z: -0.2 }, { tier: "block", x: -1.1, z: -0.2, stack: 1 }, { tier: "block", x: 0, z: -0.2, stack: 1 }, { tier: "block", x: 1.1, z: -0.2, stack: 1 }, { tier: "jar", x: -0.55, z: -0.2, stack: 2 }, { tier: "jar", x: 0.55, z: -0.2, stack: 2 }, { tier: "can", x: 0, z: -0.2, stack: 3 }, ]; }, }, { name: "Jar Jamboree (Pass)", premium: true, shots: 5, build: function () { return [ { tier: "jar", x: -1.6, z: 0 }, { tier: "jar", x: -0.8, z: 0 }, { tier: "jar", x: 0, z: 0 }, { tier: "jar", x: 0.8, z: 0 }, { tier: "jar", x: 1.6, z: 0 }, { tier: "jar", x: -1.2, z: 0, stack: 1 }, { tier: "jar", x: -0.4, z: 0, stack: 1 }, { tier: "jar", x: 0.4, z: 0, stack: 1 }, { tier: "jar", x: 1.2, z: 0, stack: 1 }, { tier: "block", x: -1.9, z: 0.7 }, { tier: "block", x: 1.9, z: 0.7 }, ]; }, }, { name: "Grand Finale (Pass)", premium: true, shots: 7, build: function () { return [ { tier: "block", x: -1.8, z: -0.3 }, { tier: "block", x: 1.8, z: -0.3 }, { tier: "block", x: -1.8, z: -0.3, stack: 1 }, { tier: "block", x: 1.8, z: -0.3, stack: 1 }, { tier: "block", x: 0, z: -0.3 }, { tier: "block", x: 0, z: -0.3, stack: 1 }, { tier: "block", x: 0, z: -0.3, stack: 2 }, { tier: "jar", x: -0.9, z: 0.1 }, { tier: "jar", x: 0.9, z: 0.1 }, { tier: "jar", x: -0.9, z: 0.1, stack: 1 }, { tier: "jar", x: 0.9, z: 0.1, stack: 1 }, { tier: "can", x: -1.8, z: 0.8 }, { tier: "can", x: 1.8, z: 0.8 }, { tier: "can", x: 0, z: 0.9 }, ]; }, }, ]; var levelIndex = 0; var shotsLeft = 0; var clearedCount = 0; var totalCount = 0; var levelWon = false, levelLost = false; var resolveTimer = 0; // small delay before evaluating win/lose after a shot function stackHeightFor(tier: Tier): number { if (tier === "block") return 1.0; if (tier === "jar") return 1.22; return 1.02; } function loadLevel(idx: number) { clearTargets(); levelIndex = idx; var lvl = LEVELS[idx]; var spawns = lvl.build(); for (var i = 0; i < spawns.length; i++) { var s = spawns[i]; var stack = s.stack || 0; // compute y: rest on pedestal top plus any stack below it var below = 0; // approximate stacked height: each stack level adds the stack-tier height. // Since stacks are authored top-down conceptually, use the spawn's own tier // height per level (uniform enough for arcade stacking). for (var q = 0; q < stack; q++) below += stackHeightFor(s.tier); var restH = s.tier === "block" ? 0.5 : (s.tier === "jar" ? 0.6 : 0.5); var y = PED_TOP + restH + below; makeTarget(s.tier, PED_CX + s.x, y, PED_CZ + s.z); } totalCount = targets.length; clearedCount = 0; shotsLeft = lvl.shots; levelWon = false; levelLost = false; resolveTimer = 0; ballActive = false; ballMesh.visible = false; hideOverlay(); updateHud(); updateLevelChips(); } // =========================================================================== // HUD - level, shots, targets cleared, aim/power readout, level + skin pickers, // win / lose overlays. Season Pass gating on bonus levels + premium skins. // =========================================================================== var css = document.createElement("style"); css.textContent = "#pc-ui{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#0e2a33;user-select:none;-webkit-user-select:none}" + "#pc-top{position:absolute;top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto;max-width:min(94vw,560px)}" + ".pc-stat{background:rgba(255,255,255,.86);border:1px solid rgba(14,42,51,.14);border-radius:13px;padding:8px 13px;font-weight:800;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px);font-size:14px}" + ".pc-stat .lab{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#5a7883;font-weight:800}" + "#pc-panel{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;max-width:min(84vw,260px)}" + ".pc-card{background:rgba(255,255,255,.9);border:1px solid rgba(14,42,51,.12);border-radius:14px;padding:10px 11px;backdrop-filter:blur(4px)}" + ".pc-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#5a7883;font-weight:800;margin-bottom:7px}" + ".pc-row{display:flex;flex-wrap:wrap;gap:6px}" + ".pc-chip{border:1px solid rgba(14,42,51,.16);background:rgba(255,255,255,.7);color:#0e2a33;border-radius:99px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}" + ".pc-chip.on{background:#ff7a45;border-color:#ff7a45;color:#fff}" + ".pc-chip.lock{opacity:.72}" + ".pc-chip .k{font-size:10px;opacity:.85;margin-left:4px}" + "#pc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}" + ".pc-btn{border:1px solid rgba(14,42,51,.16);background:rgba(255,255,255,.9);color:#0e2a33;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:800;cursor:pointer;pointer-events:auto}" + ".pc-btn.pri{background:#ff7a45;border-color:#ff7a45;color:#fff}" + "#pc-power{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(70vw,320px);pointer-events:none;text-align:center}" + "#pc-powerbar{height:12px;border-radius:99px;background:rgba(255,255,255,.55);border:1px solid rgba(14,42,51,.2);overflow:hidden}" + "#pc-powerfill{height:100%;width:0%;background:linear-gradient(90deg,#ffd23f,#ff7a45,#ff3d3d)}" + "#pc-hint{margin-top:6px;font-size:13px;font-weight:700;color:#0e2a33;text-shadow:0 1px 3px rgba(255,255,255,.7)}" + "#pc-toast{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);background:rgba(14,42,51,.92);color:#f4f0e6;border-radius:11px;padding:9px 15px;font-size:14px;max-width:82%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}" + "#pc-toast.show{opacity:1}" + "#pc-over{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(9,34,44,.62);pointer-events:auto;padding:24px;color:#f4f0e6}" + "#pc-over.on{display:flex}" + "#pc-over .big{font-size:34px;font-weight:900;letter-spacing:.3px}" + "#pc-over .sub{font-size:15px;color:#cfe4ea;max-width:26ch}" + "#pc-fire{position:absolute;right:16px;bottom:104px;width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(255,122,69,.92);color:#fff;font-size:14px;font-weight:900;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(255,122,69,.5)}"; document.head.appendChild(css); var ui = document.createElement("div"); ui.id = "pc-ui"; ui.innerHTML = "

" + "

Level1

" + "

Shots0

" + "

Cleared0 / 0

" + "

Level

" + "

Cannon skin

" + "

" + "" + "

" + "

Drag to aim, release to fire

" + "

" + "" + "

"; root.appendChild(ui); function $(id: string): HTMLElement { return document.getElementById(id) as HTMLElement; } var elToast = $("pc-toast"), toastTimer: any = null; function toast(t: string) { elToast.textContent = t; elToast.classList.add("show"); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(function () { elToast.classList.remove("show"); }, 2600); } function levelLocked(i: number): boolean { return LEVELS[i].premium && !hasPass(); } function updateLevelChips() { var wrap = $("pc-levels"); wrap.innerHTML = ""; for (var i = 0; i < LEVELS.length; i++) { (function (idx: number) { var lvl = LEVELS[idx]; var chip = document.createElement("button"); var locked = levelLocked(idx); chip.className = "pc-chip" + (idx === levelIndex ? " on" : "") + (locked ? " lock" : ""); chip.innerHTML = (idx + 1) + (lvl.premium ? " ★" : ""); chip.title = lvl.name + (lvl.premium ? " (Season Pass)" : ""); chip.addEventListener("click", function () { if (locked) { toast(lvl.name + " is a Season Pass level. Unlock the Season Pass to play the bonus stages."); return; } playSfx("click"); loadLevel(idx); }); wrap.appendChild(chip); })(i); } } function skinLocked(s: Skin): boolean { return s.premium && !hasPass(); } function updateSkinChips() { var wrap = $("pc-skins"); wrap.innerHTML = ""; for (var i = 0; i < SKINS.length; i++) { (function (s: Skin) { var chip = document.createElement("button"); var locked = skinLocked(s); chip.className = "pc-chip" + (s === currentSkin ? " on" : "") + (locked ? " lock" : ""); chip.innerHTML = s.name + (s.premium ? " ★" : ""); chip.addEventListener("click", function () { if (locked) { toast(s.name + " is a Season Pass cannon skin. Unlock the Season Pass to equip it."); return; } currentSkin = s; playSfx("click"); buildBarrel(); orientBarrel(); updateSkinChips(); }); wrap.appendChild(chip); })(SKINS[i]); } } function updateHud() { $("pc-lvl").textContent = String(levelIndex + 1); $("pc-shots").textContent = String(shotsLeft); $("pc-clr").textContent = clearedCount + " / " + totalCount; } function updatePowerHud() { ($("pc-powerfill") as HTMLElement).style.width = Math.round(power * 100) + "%"; } function hideOverlay() { $("pc-over").classList.remove("on"); } function showOverlay(big: string, sub: string, btn: string, onBtn: () => void) { $("pc-over-big").textContent = big; $("pc-over-sub").textContent = sub; var b = $("pc-over-btn"); b.textContent = btn; var nb = b.cloneNode(true) as HTMLElement; b.parentNode!.replaceChild(nb, b); // clear old listeners nb.addEventListener("click", onBtn); $("pc-over").classList.add("on"); } $("pc-reset").addEventListener("click", function () { playSfx("click"); loadLevel(levelIndex); }); $("pc-fire").addEventListener("click", function () { fireBall(); }); try { ENT.on("change", function () { updateLevelChips(); updateSkinChips(); }); } catch (_e) {} function nextLevel() { var next = levelIndex + 1; while (next < LEVELS.length && levelLocked(next)) next++; if (next >= LEVELS.length) { // wrap to the first playable level next = 0; while (next < LEVELS.length && levelLocked(next)) next++; toast("You cleared every open stage. Round again!"); } loadLevel(next); } function winLevel() { if (levelWon) return; levelWon = true; playSfx("win"); confetti(); shake(0.7); var lastFree = true; for (var i = levelIndex + 1; i < LEVELS.length; i++) { if (!levelLocked(i)) { lastFree = false; break; } } var sub = lastFree ? "You cleared this stage with " + shotsLeft + " shot" + (shotsLeft === 1 ? "" : "s") + " to spare." : "Cleared with " + shotsLeft + " shot" + (shotsLeft === 1 ? "" : "s") + " left. On to the next stage!"; showOverlay("Stage cleared!", sub, "Next stage", function () { playSfx("click"); nextLevel(); }); } function loseLevel() { if (levelLost) return; levelLost = true; playSfx("lose"); showOverlay("Out of shots", "A few targets are still standing. Give it another go!", "Try again", function () { playSfx("click"); loadLevel(levelIndex); }); } // =========================================================================== // INPUT - drag to aim (sets yaw + pitch + power), release to fire. Works with // mouse and touch via pointer events. Buttons/HUD keep their own pointer events. // =========================================================================== var aiming = false; var dragStart = { x: 0, y: 0 }; var PULL_RANGE = 0.34; // fraction of min(screen) for full power var YAW_GAIN = 1.7; var PITCH_GAIN = 1.5; var BASE_PITCH = 0.42; function screenMin(): number { return Math.min(root.clientWidth || window.innerWidth, root.clientHeight || window.innerHeight); } function beginAim(x: number, y: number) { if (!W.__mcpityStarted || ballActive || levelWon || levelLost) return; aiming = true; dragStart.x = x; dragStart.y = y; arcPoints.visible = true; $("pc-hint").textContent = "Pull back to aim - release to fire"; } function moveAim(x: number, y: number) { if (!aiming) return; var m = screenMin(); var dxN = (x - dragStart.x) / m; var dyN = (y - dragStart.y) / m; var mag = Math.sqrt(dxN * dxN + dyN * dyN); power = Math.max(0.06, Math.min(1, mag / PULL_RANGE)); // slingshot: drag left -> aim right; drag down -> higher arc aimYaw = Math.max(-MAX_YAW, Math.min(MAX_YAW, -dxN * YAW_GAIN)); aimPitch = Math.max(MIN_PITCH, Math.min(MAX_PITCH, BASE_PITCH + dyN * PITCH_GAIN)); orientBarrel(); updateArc(); updatePowerHud(); } function endAim(fire: boolean) { if (!aiming) return; aiming = false; arcPoints.visible = false; arcHit.visible = false; $("pc-hint").textContent = "Drag to aim, release to fire"; if (fire && power > 0.06) fireBall(); } canvas.addEventListener("pointerdown", function (e: PointerEvent) { try { (canvas as any).setPointerCapture(e.pointerId); } catch (_e) {} beginAim(e.clientX, e.clientY); }); canvas.addEventListener("pointermove", function (e: PointerEvent) { moveAim(e.clientX, e.clientY); }); canvas.addEventListener("pointerup", function () { endAim(true); }); canvas.addEventListener("pointercancel", function () { endAim(false); }); // keyboard nicety on desktop: space fires with the current aim window.addEventListener("keydown", function (e: KeyboardEvent) { if (e.code === "Space") { e.preventDefault(); fireBall(); } }); function playSfx(name: string) { try { var soundOn = W.__mcpitySoundOn ? W.__mcpitySoundOn() : true; if (!soundOn) return; var mm = W.MCPityMusic; if (!mm || !mm.sfx) return; // map game events to the shell's small sfx palette if (name === "fire" || name === "whack" || name === "thud") mm.sfx("snap"); else if (name === "win") mm.sfx("win"); else if (name === "shatter" || name === "clear" || name === "clack") mm.sfx("snap"); else if (name === "lose" || name === "soft") mm.sfx("soft"); else mm.sfx("click"); } catch (_e) {} } // =========================================================================== // LOOP // =========================================================================== var last = 0; function frame(t: number) { requestAnimationFrame(frame); var dt = Math.min(0.05, (t - last) / 1000 || 0); last = t; if (W.__mcpityStarted) { // fixed substeps for stability var steps = 2; var sdt = dt / steps; for (var s = 0; s < steps; s++) physicsStep(sdt); // sync visuals if (ballActive) ballMesh.position.copy(ballPos); for (var i = 0; i < targets.length; i++) { var tg = targets[i]; tg.mesh.position.copy(tg.pos); tg.mesh.quaternion.copy(tg.quat); } // resolve the shot when the ball settles or leaves the field if (ballActive) { var gone = ballPos.y < -8 || ballLife > 7 || ballGrounded > 0.5 || (ballLife > 0.6 && Math.abs(ballPos.x) > 26); if (gone) { ballActive = false; ballMesh.visible = false; resolveTimer = 0.35; // let targets settle a touch before judging } } // win / lose evaluation if (!levelWon && !levelLost) { if (clearedCount >= totalCount && totalCount > 0) { // wait for things to settle a moment resolveTimer -= dt; if (resolveTimer <= 0 || !ballActive) winLevel(); } else if (!ballActive && shotsLeft <= 0) { if (resolveTimer > 0) { resolveTimer -= dt; } else if (settledEnough()) loseLevel(); } } } updateBursts(dt); // camera shake decay if (shakeAmt > 0.0001) { var k = shakeAmt * 0.5; camera.position.set(CAM_BASE.x + (Math.random() - 0.5) * k, CAM_BASE.y + (Math.random() - 0.5) * k, CAM_BASE.z + (Math.random() - 0.5) * k * 0.5); camera.lookAt(CAM_LOOK); shakeAmt = Math.max(0, shakeAmt - dt * 3.2); } else { camera.position.lerp(CAM_BASE, Math.min(1, dt * 6)); camera.lookAt(CAM_LOOK); } renderer.render(scene, camera); } function settledEnough(): boolean { for (var i = 0; i < targets.length; i++) { var t = targets[i]; if (t.alive && (t.vel.lengthSq() > 1.2 || t.angVel.lengthSq() > 1.5)) return false; } return true; } // build the first level behind the splash; play begins when the shell fires start updateSkinChips(); updateLevelChips(); loadLevel(0); updatePowerHud(); updateArc(); requestAnimationFrame(frame); if (W.MCPityShell && W.MCPityShell.onStart) { W.MCPityShell.onStart(function () { /* first shot ready */ toast("Drag anywhere to aim, then release to fire."); }); } // ready beacon (harness handshake; harmless if no parent) try { if (window.parent && window.parent !== window) { window.parent.postMessage({ type: "mcpity:web-engine:ready" }, "*"); } } catch (_e) {}