import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; const TAU = Math.PI * 2; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const rand = (a = 0, b = 1) => a + Math.random() * (b - a); function lerpAngle(a, b, t) { let d = ((b - a + Math.PI) % TAU + TAU) % TAU - Math.PI; return a + d * t; } export default async function sketch(ctx) { const { scene, camera, renderer, gui, size, canvas } = ctx; const pointer = ctx.pointer; const sfx = ctx.sfx || null; const touchScreen = typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches; const params = { volume: 0.7, zoom: 1.0, difficulty: 1.0, glow: 0.25, cloudDrift: 1.0, restart: () => resetGame(), exposure: 0.92, sunLight: 1.35, ambient: 1.4, reflections: 0.45, shadowSoft: 5, saturation: 0.9, haze: 0.14, sunColor: '#ffe2bc', skyColor: '#fff0e4', groundColor: '#e2c2b0', hazeColor: '#ffd9cc' }; // ---------- Sound ---------- const SND = { music: 'sfx_CQtpTOO07CM5', cannon: 'sfx_KSix2x7mOCBG', pop: 'sfx_JLbhvDrrieyB', gem: 'sfx_0Y9ehb6OIERI', portal: 'sfx_xUIyQsPqpyxB', build: 'sfx_h0auaa6ZC00j' }; const lastPlay = {}; let clock = 0; function play(name, vol = 1, rate = 1, gap = 0.06, pan = 0) { if (!sfx) return; const t = lastPlay[name] ?? -99; if (clock - t < gap) return; lastPlay[name] = clock; try { sfx.play(SND[name], { volume: vol * rand(0.9, 1.05), rate: rate * rand(0.92, 1.08), pan }); } catch (e) {} } if (sfx) { sfx.volume = params.volume; try { sfx.loop(SND.music, { volume: 0.32 }); } catch (e) {} } // ---------- Renderer / sky / light ---------- renderer.toneMapping = THREE.NeutralToneMapping; renderer.toneMappingExposure = 1.0; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; const sky = ctx.textures.get('tex_3RSXcRfHjzEJ'); scene.background = sky; function fitSky(w, h) { const img = sky.image; if (!img || !img.width || !h) return; const ia = img.width / img.height, ca = w / h; if (ca > ia) { sky.repeat.set(1, ia / ca); sky.offset.set(0, (1 - ia / ca) / 2); } else { sky.repeat.set(ca / ia, 1); sky.offset.set((1 - ca / ia) / 2, 0); } } fitSky(size.width, size.height); scene.fog = new THREE.Fog('#efb9b0', 48, 150); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.85; const hemi = new THREE.HemisphereLight(params.skyColor, params.groundColor, params.ambient); const sun = new THREE.DirectionalLight(params.sunColor, params.sunLight); sun.shadow.blurSamples = 12; sun.castShadow = true; sun.shadow.mapSize.set(2048, 2048); const sc = sun.shadow.camera; sc.left = -17; sc.right = 17; sc.top = 17; sc.bottom = -17; sc.near = 1; sc.far = 90; sun.shadow.bias = -0.0004; sun.shadow.normalBias = 0.04; const rim = new THREE.DirectionalLight('#c8b6ff', 0.45); scene.add(hemi, sun, sun.target, rim, rim.target); const SUN_OFF = new THREE.Vector3(-18, 26, 12); // ---------- Models ---------- const [islandM, heroM, slimeM, towerM] = await Promise.all([ ctx.assets.model('model_MBEmnAoiyyZn', { size: 16 }), ctx.assets.model('model_arjIgI6rXPMa', { size: 1.1 }), ctx.assets.model('model_cMLCENInu0NH', { size: 1.0 }), ctx.assets.model('model_cBXXTfudjBz6', { size: 2.6 }), ]); function prep(root, cast = true) { root.traverse((o) => { if (o.isMesh) { o.castShadow = cast; o.receiveShadow = true; } }); } prep(heroM.scene); prep(slimeM.scene); prep(towerM.scene); // ---------- Island height map ---------- const isl0 = islandM.scene; const horiz = Math.max(islandM.size.x, islandM.size.z) || 1; const fS = 15 / horiz; isl0.scale.multiplyScalar(fS); isl0.position.y = -(islandM.size.y * fS) / 2; prep(isl0); const tpl = new THREE.Group(); tpl.add(isl0); tpl.updateMatrixWorld(true); const NG = 34, E = 7.9, cell = (2 * E) / (NG - 1); const raw = new Float32Array(NG * NG).fill(NaN); { const rc = new THREE.Raycaster(); const DOWN = new THREE.Vector3(0, -1, 0); const org = new THREE.Vector3(); for (let j = 0; j < NG; j++) for (let i = 0; i < NG; i++) { org.set(-E + i * cell, 40, -E + j * cell); rc.set(org, DOWN); const hit = rc.intersectObject(tpl, true); if (hit.length) raw[j * NG + i] = hit[0].point.y; } } const cv = []; for (let j = 0; j < NG; j++) for (let i = 0; i < NG; i++) { const v = raw[j * NG + i]; const x = -E + i * cell, z = -E + j * cell; if (!isNaN(v) && Math.hypot(x, z) < E * 0.4) cv.push(v); } cv.sort((a, b) => a - b); const topRef = cv.length ? cv[Math.floor(cv.length / 2)] : 0; const HM = new Float32Array(NG * NG), VM = new Uint8Array(NG * NG); for (let k = 0; k < NG * NG; k++) { const v = raw[k]; if (!isNaN(v) && v > topRef - 1.1 && v < topRef + 2.5) { VM[k] = 1; HM[k] = v; } else HM[k] = topRef; } function validAt(x, z) { const i = Math.round((x + E) / cell), j = Math.round((z + E) / cell); if (i < 0 || j < 0 || i >= NG || j >= NG) return false; return VM[j * NG + i] === 1; } let walkR = 1; for (let r = 0.5; r < E; r += 0.2) { let ok = true; for (let k = 0; k < 28; k++) { const a = (k / 28) * TAU; if (!validAt(Math.cos(a) * r, Math.sin(a) * r)) { ok = false; break; } } if (!ok) break; walkR = r; } walkR = Math.max(3, walkR - 0.45); function hLocal(x, z) { const fx = clamp((x + E) / cell, 0, NG - 1.001), fz = clamp((z + E) / cell, 0, NG - 1.001); const i = Math.floor(fx), j = Math.floor(fz), tx = fx - i, tz = fz - j; const a = HM[j * NG + i], b = HM[j * NG + i + 1], c = HM[(j + 1) * NG + i], d = HM[(j + 1) * NG + i + 1]; return (a * (1 - tx) + b * tx) * (1 - tz) + (c * (1 - tx) + d * tx) * tz; } function edgeR(a) { for (let r = walkR; r < E; r += 0.1) if (!validAt(Math.cos(a) * r, Math.sin(a) * r)) return r; return E; } // ---------- Islands ---------- const names = ['Home Isle', 'Ember Isle', 'Willow Isle', 'Mist Isle']; const baseY = [0, 1.6, -1.4, 2.4]; const ISL_DIST = 28; const islands = []; for (let k = 0; k < 4; k++) { const g = k === 0 ? tpl : tpl.clone(); let px = 0, pz = 0; if (k > 0) { const a = 0.3 + (k - 1) * TAU / 3; px = Math.cos(a) * ISL_DIST; pz = Math.sin(a) * ISL_DIST; } g.position.set(px, baseY[k], pz); scene.add(g); islands.push({ group: g, pos: g.position, baseY: baseY[k], name: names[k], ang: Math.atan2(pz, px), feats: [], bob: 0 }); } function groundY(k, x, z) { const I = islands[k]; return I.pos.y + hLocal(x - I.pos.x, z - I.pos.z); } function clampIsland(k, o) { const I = islands[k]; const dx = o.x - I.pos.x, dz = o.z - I.pos.z; const d = Math.hypot(dx, dz); if (d > walkR) { o.x = I.pos.x + (dx / d) * walkR; o.z = I.pos.z + (dz / d) * walkR; return true; } return false; } function addLocal(k, obj, lx, lz, yOff = 0) { obj.position.set(lx, hLocal(lx, lz) + yOff, lz); islands[k].group.add(obj); return obj; } function freeSpot(k, rMin, rMax, clear) { for (let t = 0; t < 50; t++) { const a = rand(0, TAU), r = rand(rMin, rMax) * walkR; const x = Math.cos(a) * r, z = Math.sin(a) * r; if (!validAt(x, z)) continue; let ok = true; for (const f of islands[k].feats) if (Math.hypot(f.x - x, f.z - z) < f.r + clear) { ok = false; break; } if (ok) return [x, z]; } return null; } // ---------- Shared materials ---------- const crystalMat = new THREE.MeshStandardMaterial({ color: '#8ff6ff', emissive: '#29c9ff', emissiveIntensity: 0.55, roughness: 0.2, metalness: 0.0, flatShading: true }); const stoneMat = new THREE.MeshStandardMaterial({ color: '#b8b0a8', roughness: 0.9, flatShading: true }); const sandMat = new THREE.MeshStandardMaterial({ color: '#ecd29c', roughness: 1 }); const trunkMat = new THREE.MeshStandardMaterial({ color: '#8a5a35', roughness: 0.9, flatShading: true }); const leafMats = [new THREE.MeshStandardMaterial({ color: '#7cc444', roughness: 0.8, flatShading: true }), new THREE.MeshStandardMaterial({ color: '#5fa834', roughness: 0.8, flatShading: true })]; const trunkGeo = new THREE.CylinderGeometry(0.1, 0.16, 0.9, 6); const leafGeo = new THREE.IcosahedronGeometry(0.8, 1); const rockGeo = new THREE.DodecahedronGeometry(0.45, 0); const octGeo = new THREE.OctahedronGeometry(0.5, 0); function makeTree() { const g = new THREE.Group(); const trunk = new THREE.Mesh(trunkGeo, trunkMat); trunk.position.y = 0.45; trunk.castShadow = true; g.add(trunk); const n = 2 + Math.floor(Math.random() * 2); for (let i = 0; i < n; i++) { const m = new THREE.Mesh(leafGeo, leafMats[i % 2]); m.position.set(rand(-0.35, 0.35), 1.1 + i * 0.4, rand(-0.35, 0.35)); m.scale.setScalar(rand(0.6, 0.9)); m.castShadow = true; m.receiveShadow = true; g.add(m); } return g; } function makeRock() { const m = new THREE.Mesh(rockGeo, stoneMat); m.castShadow = true; m.receiveShadow = true; m.scale.set(rand(0.7, 1.4), rand(0.5, 0.9), rand(0.7, 1.4)); m.rotation.y = rand(0, TAU); return m; } // ---------- Waterfalls ---------- const fallMat = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, side: THREE.DoubleSide, uniforms: { uTime: { value: 0 } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `uniform float uTime; varying vec2 vUv; float h(float x){ return fract(sin(x * 91.7) * 437.5); } void main(){ float col = floor(vUv.x * 14.0); float sp = 0.9 + h(col) * 0.7; float s = fract(vUv.y * 3.0 + uTime * sp + h(col) * 5.0); float streak = smoothstep(0.0, 0.3, s) * smoothstep(1.0, 0.6, s); vec3 c = mix(vec3(0.5, 0.78, 1.0), vec3(0.97, 0.99, 1.0), streak); float edge = smoothstep(0.0, 0.18, vUv.x) * smoothstep(1.0, 0.82, vUv.x); float a = edge * smoothstep(0.0, 0.4, vUv.y) * (0.6 + 0.35 * streak); gl_FragColor = vec4(c * 1.1, a); }`, }); const fallGeo = new THREE.PlaneGeometry(1.15, 10, 1, 30); fallGeo.translate(0, -5, 0); { const pa = fallGeo.attributes.position; for (let i = 0; i < pa.count; i++) { const y = pa.getY(i); pa.setZ(i, 1.5 * (1 - Math.exp(y * 1.5))); } pa.needsUpdate = true; fallGeo.computeVertexNormals(); } const streamMat = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -3, polygonOffsetUnits: -3, uniforms: { uTime: { value: 0 } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `uniform float uTime; varying vec2 vUv; void main(){ float e = smoothstep(0.0, 0.22, vUv.x) * smoothstep(1.0, 0.78, vUv.x); float w = sin(vUv.y * 6.0 - uTime * 5.0 + sin(vUv.x * 9.0) * 1.5) * 0.5 + 0.5; float w2 = sin(vUv.y * 11.0 - uTime * 7.0 + vUv.x * 4.0) * 0.5 + 0.5; vec3 c = mix(vec3(0.3, 0.62, 0.9), vec3(0.85, 0.95, 1.0), smoothstep(0.7, 1.0, w * w2 + 0.25)); gl_FragColor = vec4(c, e * 0.92); }`, }); const mistMat = new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.35, depthWrite: false }); const mistGeo = new THREE.IcosahedronGeometry(0.7, 1); const mists = []; function addFall(k, a) { const er = edgeR(a); const r1 = er - 0.3, r0 = Math.max(walkR * 0.5, r1 - 3.2); const pts = []; for (let i = 0; i <= 4; i++) { const t = i / 4, rr = r0 + (r1 - r0) * t, aa = a + Math.sin(t * 3.0 + k) * 0.16 * (1 - t); pts.push([Math.cos(aa) * rr, Math.sin(aa) * rr]); } ribbon(k, pts, 1.05, 0.08, streamMat, 1.0, 2); const x = Math.cos(a) * r1, z = Math.sin(a) * r1; const m = new THREE.Mesh(fallGeo, fallMat); m.position.set(x, hLocal(x, z) + 0.06, z); m.rotation.y = Math.atan2(Math.cos(a), Math.sin(a)); islands[k].group.add(m); for (const sd of [-1, 1]) { const rk = makeRock(); rk.scale.multiplyScalar(0.7); const aa = a + sd * 0.7 / Math.max(1, r0); addLocal(k, rk, Math.cos(aa) * (r0 - 0.2), Math.sin(aa) * (r0 - 0.2), 0.05); } const ox = x + Math.cos(a) * 1.5, oz = z + Math.sin(a) * 1.5; for (let i = 0; i < 3; i++) { const s = new THREE.Mesh(mistGeo, mistMat); s.position.set(ox + rand(-0.5, 0.5), m.position.y - 9.5 + rand(-0.4, 0.4), oz + rand(-0.5, 0.5)); islands[k].group.add(s); mists.push({ m: s, ph: rand(0, TAU) }); } } // ---------- Clouds ---------- const NC = 160, PUFF = 5; const cloudMat = new THREE.MeshStandardMaterial({ color: '#ffffff', roughness: 1, flatShading: true, emissive: '#ff9f8a', emissiveIntensity: 0.15 }); const clouds = new THREE.InstancedMesh(new THREE.IcosahedronGeometry(1, 1), cloudMat, NC * PUFF); const cloudData = []; const cCols = [new THREE.Color('#ffe0d0'), new THREE.Color('#f3d2ff'), new THREE.Color('#ffd2b8'), new THREE.Color('#e6dcff')]; for (let c = 0; c < NC; c++) { const layer = c < 105 ? 0 : c < 130 ? 1 : 2; const cd = { x: rand(-115, 115), z: rand(-95, 95), y: layer === 0 ? rand(-17, -5) : layer === 1 ? rand(-3, 4) : rand(6, 15), s: layer === 0 ? rand(1.8, 4.2) : rand(1.4, 3.0), sp: rand(0.4, 1.1), puffs: [] }; if (layer === 1 && Math.abs(cd.z) < 44) cd.z = (cd.z < 0 ? -1 : 1) * rand(44, 90); if (layer === 2 && Math.hypot(cd.x, cd.z) < 40) cd.x += 60; for (let p = 0; p < PUFF; p++) { cd.puffs.push([rand(-1.8, 1.8), rand(-0.2, 0.7), rand(-1, 1), rand(0.7, 1.3)]); clouds.setColorAt(c * PUFF + p, cCols[(c + p) % 4]); } cloudData.push(cd); } scene.add(clouds); const dummy = new THREE.Object3D(); function updateClouds(dt) { let idx = 0; for (const cd of cloudData) { cd.x += dt * cd.sp * params.cloudDrift; if (cd.x > 118) cd.x = -118; for (const p of cd.puffs) { dummy.position.set(cd.x + p[0] * cd.s, cd.y + p[1] * cd.s, cd.z + p[2] * cd.s); dummy.scale.set(p[3] * cd.s * 1.2, p[3] * cd.s * 0.75, p[3] * cd.s); dummy.rotation.set(0, 0, 0); dummy.updateMatrix(); clouds.setMatrixAt(idx++, dummy.matrix); } } clouds.instanceMatrix.needsUpdate = true; } updateClouds(0); // ---------- Portals / rift ---------- const portalShader = (col) => new THREE.ShaderMaterial({ transparent: true, depthWrite: false, side: THREE.DoubleSide, uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(col) } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `uniform float uTime; uniform vec3 uColor; varying vec2 vUv; void main(){ vec2 p = vUv * 2.0 - 1.0; float r = length(p); float a = atan(p.y, p.x); float s = sin(a * 3.0 + r * 11.0 - uTime * 4.0) * 0.5 + 0.5; vec3 c = mix(uColor * 0.35, uColor * 1.05 + 0.12, s * (1.0 - r * 0.8)); gl_FragColor = vec4(c, smoothstep(1.0, 0.85, r) * 0.93); }`, }); const portalMats = []; const legGeo = new THREE.BoxGeometry(0.3, 1.1, 0.34); const plinthGeo = new THREE.BoxGeometry(2.4, 0.24, 0.8); const moteGeo = new THREE.BufferGeometry(); { const n = 36; moteGeo.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(n * 3), 3)); const sd = new Float32Array(n * 3); for (let i = 0; i < n * 3; i++) sd[i] = Math.random(); moteGeo.setAttribute('seed', new THREE.Float32BufferAttribute(sd, 3)); } function makePortal(col, frameCol, s = 1, dark = false) { const g = new THREE.Group(); const frameMat = new THREE.MeshStandardMaterial({ color: frameCol, roughness: 0.75, flatShading: true, emissive: col, emissiveIntensity: 0.12 }); const ring = new THREE.Mesh(new THREE.TorusGeometry(0.9, 0.17, 8, 8), frameMat); ring.castShadow = true; const mat = portalShader(col); portalMats.push(mat); const disc = new THREE.Mesh(new THREE.CircleGeometry(0.85, 32), mat); g.add(ring, disc); for (const sx of [-1, 1]) { const leg = new THREE.Mesh(legGeo, frameMat); leg.position.set(sx * 0.86, -0.62, 0); leg.rotation.z = sx * 0.1; leg.castShadow = true; g.add(leg); } const plinth = new THREE.Mesh(plinthGeo, stoneMat); plinth.position.y = -1.12; plinth.castShadow = plinth.receiveShadow = true; g.add(plinth); if (!dark) { const cr = new THREE.Mesh(octGeo, crystalMat); cr.scale.set(0.35, 0.6, 0.35); cr.position.y = 1.32; g.add(cr); } const mm = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, blending: dark ? THREE.NormalBlending : THREE.AdditiveBlending, uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(dark ? '#2a0a40' : col) }, uBoost: { value: dark ? 0.0 : 1.0 } }, vertexShader: `uniform float uTime; attribute vec3 seed; varying float vA; void main(){ float dir = seed.y > 0.5 ? 1.0 : -1.0; float a = seed.x * 6.2831 + uTime * (0.4 + seed.z * 0.9) * dir; float life = fract(uTime * 0.25 + seed.x * 3.7); float r = 1.05 + seed.y * 0.5 + life * 0.35; vec3 p = vec3(cos(a) * r, sin(a) * r, (seed.z - 0.5) * 0.7 + sin(uTime * 1.3 + seed.x * 20.0) * 0.15); vA = sin(life * 3.14159); vec4 mv = modelViewMatrix * vec4(p, 1.0); gl_PointSize = (12.0 + seed.z * 14.0) * (10.0 / max(0.5, -mv.z)); gl_Position = projectionMatrix * mv; }`, fragmentShader: `uniform vec3 uColor; uniform float uBoost; varying float vA; void main(){ float d = length(gl_PointCoord - 0.5); float a = smoothstep(0.5, 0.0, d) * vA; gl_FragColor = vec4(uColor * (1.0 + 0.3 * uBoost) + 0.2 * uBoost, a * (0.6 + 0.3 * (1.0 - uBoost))); }`, }); portalMats.push(mm); const pts = new THREE.Points(moteGeo, mm); pts.frustumCulled = false; g.add(pts); g.scale.setScalar(s); g.userData.ring = ring; return g; } // ---------- Bars ---------- const barGeo = new THREE.PlaneGeometry(1, 0.13); const barBg = new THREE.MeshBasicMaterial({ color: '#2a1838', toneMapped: false, depthTest: false, transparent: true }); function makeBar(col, w = 1.6) { const g = new THREE.Group(); const bg = new THREE.Mesh(barGeo, barBg); bg.scale.set(w + 0.08, 1.5, 1); bg.renderOrder = 10; const fill = new THREE.Mesh(barGeo, new THREE.MeshBasicMaterial({ color: col, toneMapped: false, depthTest: false, transparent: true })); fill.renderOrder = 11; fill.position.z = 0.001; g.add(bg, fill); g.userData = { fill, w }; scene.add(g); return g; } function setBar(b, f, x, y, z) { f = clamp(f, 0, 1); const { fill, w } = b.userData; fill.scale.set(Math.max(0.001, w * f), 1, 1); fill.position.x = -w * (1 - f) / 2; b.position.set(x, y, z); b.quaternion.copy(camera.quaternion); } // ---------- Features ---------- const portals = [], pads = [], forts = [], nodes = []; const home = islands[0]; // core const core = new THREE.Group(); const coreBase = new THREE.Mesh(new THREE.CylinderGeometry(1.1, 1.3, 0.5, 8), stoneMat); coreBase.castShadow = coreBase.receiveShadow = true; coreBase.position.y = 0.25; const coreMain = new THREE.Mesh(octGeo, crystalMat); coreMain.scale.set(1.3, 2.8, 1.3); coreMain.position.y = 1.9; core.add(coreBase, coreMain); for (let i = 0; i < 5; i++) { const c = new THREE.Mesh(octGeo, crystalMat); const a = i / 5 * TAU; c.position.set(Math.cos(a) * 0.65, 1.0, Math.sin(a) * 0.65); c.scale.set(0.5, 1.4, 0.5); c.rotation.set(Math.sin(a) * 0.4, 0, Math.cos(a) * 0.4); core.add(c); } const coreLight = new THREE.PointLight('#5fe8ff', 12, 0, 2); coreLight.position.y = 2.2; core.add(coreLight); addLocal(0, core, 0, 0, -0.05); home.feats.push({ x: 0, z: 0, r: 1.8 }); const corePos = new THREE.Vector3(home.pos.x, groundY(0, 0, 0), home.pos.z); // pads const ringGeo = new THREE.RingGeometry(0.95, 1.15, 32); for (let i = 0; i < 4; i++) { const a = 0.3 + Math.PI / 4 + i * Math.PI / 2, r = walkR * 0.47; const x = Math.cos(a) * r, z = Math.sin(a) * r; const disc = new THREE.Mesh(new THREE.CylinderGeometry(1.0, 1.1, 0.22, 10), stoneMat); disc.receiveShadow = true; disc.castShadow = true; addLocal(0, disc, x, z, 0.05); const ring = new THREE.Mesh(ringGeo, new THREE.MeshBasicMaterial({ color: '#ffe38a', transparent: true, opacity: 0.6, toneMapped: false, side: THREE.DoubleSide })); ring.rotation.x = -Math.PI / 2; addLocal(0, ring, x, z, 0.2); home.feats.push({ x, z, r: 1.6 }); pads.push({ pos: new THREE.Vector3(home.pos.x + x, groundY(0, x, z) + 0.16, home.pos.z + z), ring, tower: null, lvl: 0, hp: 0, max: 1, prog: 0, lock: false, cd: 0, lobCd: rand(1, 3), bar: makeBar('#7dff8a', 1.3) }); } // portals home -> outer function portalAt(k, a, r, dest, col) { const x = Math.cos(a) * r, z = Math.sin(a) * r; const pm = makePortal(col, '#8a86b0'); pm.rotation.y = Math.atan2(Math.cos(a), Math.sin(a)); addLocal(k, pm, x, z, 1.15); islands[k].feats.push({ x, z, r: 1.6 }); const inward = new THREE.Vector3(-Math.cos(a), 0, -Math.sin(a)); portals.push({ k, dest, mesh: pm, pos: new THREE.Vector3(islands[k].pos.x + x, groundY(k, x, z), islands[k].pos.z + z), inward }); } for (let k = 1; k < 4; k++) { const a = Math.atan2(islands[k].pos.z, islands[k].pos.x); portalAt(0, a, Math.min(walkR + 0.3, edgeR(a) - 0.8), k, '#4fc8ff'); portalAt(k, a + Math.PI, Math.min(walkR + 0.3, edgeR(a + Math.PI) - 0.8), 0, '#64ffd8'); } // rift const riftA = 0.3 + Math.PI, riftR = Math.min(walkR + 0.2, edgeR(riftA) - 1.0), riftL = [Math.cos(riftA) * riftR, Math.sin(riftA) * riftR]; const rift = makePortal('#a040ff', '#3a2050', 1.25, true); rift.rotation.y = Math.atan2(Math.cos(riftA), Math.sin(riftA)); addLocal(0, rift, riftL[0], riftL[1], 1.4); home.feats.push({ x: riftL[0], z: riftL[1], r: 1.8 }); const riftPos = new THREE.Vector3(home.pos.x + riftL[0], groundY(0, riftL[0], riftL[1]), home.pos.z + riftL[1]); // forts + nodes const fortTint = new THREE.Color('#c79cff'); for (let k = 1; k < 4; k++) { const I = islands[k]; const a = I.ang; const x = Math.cos(a) * walkR * 0.28, z = Math.sin(a) * walkR * 0.28; const m = towerM.scene.clone(); m.traverse((o) => { if (o.isMesh) { o.material = o.material.clone(); if (o.material.color) o.material.color.multiply(fortTint); if (o.material.emissive) { o.material.emissive.set('#5a1a80'); o.material.emissiveIntensity = 0.35; } } }); m.scale.multiplyScalar(1.25); const g = new THREE.Group(); g.add(m); m.position.y = towerM.size.y * 1.25 / 2; let gy = hLocal(x, z); for (let s = 0; s < 8; s++) { const sa = s / 8 * TAU; gy = Math.min(gy, hLocal(x + Math.cos(sa) * 1.1, z + Math.sin(sa) * 1.1)); } const base = new THREE.Mesh(new THREE.CylinderGeometry(1.45, 1.7, 0.7, 8), stoneMat); base.castShadow = base.receiveShadow = true; base.position.y = -0.12; g.add(base); m.position.y += 0.2; g.position.set(I.pos.x + x, I.pos.y + gy - 0.12, I.pos.z + z); g.rotation.y = Math.atan2(-g.position.x, -g.position.z); scene.add(g); I.feats.push({ x, z, r: 2.2 }); forts.push({ k, mesh: g, pos: g.position, hp: 30, max: 30, alive: true, cd: rand(3, 6), pcd: 2, bar: makeBar('#ff6aa8', 2.0), hit: 0 }); for (const s of [-1, 1]) { const na = a + s * Math.PI / 2, nx = Math.cos(na) * walkR * 0.6, nz = Math.sin(na) * walkR * 0.6; const ng = new THREE.Group(); for (let i = 0; i < 4; i++) { const c = new THREE.Mesh(octGeo, crystalMat); c.position.set(rand(-0.3, 0.3), 0.4, rand(-0.3, 0.3)); c.scale.set(0.45, rand(0.9, 1.6), 0.45); c.rotation.set(rand(-0.4, 0.4), 0, rand(-0.4, 0.4)); ng.add(c); } addLocal(k, ng, nx, nz, 0); I.feats.push({ x: nx, z: nz, r: 1.4 }); nodes.push({ k, mesh: ng, pos: new THREE.Vector3(I.pos.x + nx, groundY(k, nx, nz), I.pos.z + nz), cd: 0 }); } } // ---------- Paths, streams, fences ---------- const pathTex = ctx.textures.get('tex_PJXIVECO5Ug0', { repeat: 1 }); const edgeCv = document.createElement('canvas'); edgeCv.width = 64; edgeCv.height = 64; { const g2 = edgeCv.getContext('2d'); const img = g2.createImageData(64, 64); for (let y = 0; y < 64; y++) { const ph = y / 64 * TAU; const l = 0.16 + 0.05 * Math.sin(ph * 2 + 1) + 0.03 * Math.sin(ph * 5); const r = 0.16 + 0.05 * Math.sin(ph * 3 + 2) + 0.03 * Math.sin(ph * 4 + 0.5); for (let x = 0; x < 64; x++) { const u = (x + 0.5) / 64; const v = Math.min(clamp((u - l * 0.5) / l, 0, 1), clamp((1 - u - r * 0.5) / r, 0, 1)); const c = Math.round(v * 255), o = (y * 64 + x) * 4; img.data[o] = img.data[o + 1] = img.data[o + 2] = c; img.data[o + 3] = 255; } } g2.putImageData(img, 0, 0); } const edgeTex = new THREE.CanvasTexture(edgeCv); edgeTex.wrapS = THREE.ClampToEdgeWrapping; edgeTex.wrapT = THREE.RepeatWrapping; const pathMat = new THREE.MeshStandardMaterial({ map: pathTex, alphaMap: edgeTex, transparent: true, depthWrite: false, roughness: 1, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -2, polygonOffsetUnits: -2 }); function ribbon(k, pts, w, lift, mat, tile, order) { const curve = new THREE.CatmullRomCurve3(pts.map((p) => new THREE.Vector3(p[0], 0, p[1]))); const len = Math.max(0.1, curve.getLength()); const n = Math.max(6, Math.ceil(len / 0.25)); const C = 5; const pos = [], uv = [], idx = []; const pv = new THREE.Vector3(); let L = 0; for (let i = 0; i <= n; i++) { const t = i / n; const p = curve.getPointAt(t); const tg = curve.getTangentAt(t); if (i > 0) L += p.distanceTo(pv); pv.copy(p); for (let c = 0; c < C; c++) { const s = c / (C - 1) - 0.5; const x = p.x - tg.z * s * w, z = p.z + tg.x * s * w; pos.push(x, hLocal(x, z) + lift, z); uv.push(c / (C - 1), L / tile); } if (i < n) for (let c = 0; c < C - 1; c++) { const a = i * C + c; idx.push(a, a + 1, a + C, a + 1, a + C + 1, a + C); } } const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3)); geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)); geo.setIndex(idx); geo.computeVertexNormals(); const m = new THREE.Mesh(geo, mat); m.receiveShadow = true; m.renderOrder = order || 1; islands[k].group.add(m); for (let d = 0; d <= len; d += 0.7) { const p = curve.getPointAt(Math.min(1, d / len)); islands[k].feats.push({ x: p.x, z: p.z, r: w * 0.5 + 0.3 }); } return m; } function bendPts(x0, z0, x1, z1, bend) { const dx = x1 - x0, dz = z1 - z0, L = Math.hypot(dx, dz) || 1; const nx = -dz / L, nz = dx / L; return [[x0, z0], [x0 + dx * 0.33 + nx * bend, z0 + dz * 0.33 + nz * bend], [x0 + dx * 0.66 - nx * bend * 0.6, z0 + dz * 0.66 - nz * bend * 0.6], [x1, z1]]; } const angD = (a, b) => Math.abs(((a - b + Math.PI) % TAU + TAU) % TAU - Math.PI); const blocked = [[], [], [], []]; const isBlocked = (k, a) => blocked[k].some((b) => angD(a, b[0]) < b[1]); function pickAngle(k) { for (let t = 0; t < 80; t++) { const a = rand(0, TAU); if (!isBlocked(k, a)) return a; } return rand(0, TAU); } for (const pt of portals) { const I = islands[pt.k]; const lx = pt.pos.x - I.pos.x, lz = pt.pos.z - I.pos.z, lr = Math.hypot(lx, lz) || 1; blocked[pt.k].push([Math.atan2(lz, lx), 0.55]); let tx = 0, tz = 0; if (pt.k !== 0) { const f = forts.find((q) => q.k === pt.k); tx = f.pos.x - I.pos.x; tz = f.pos.z - I.pos.z; } const sx = lx * (1 - 0.7 / lr), sz = lz * (1 - 0.7 / lr); const dl = Math.hypot(sx - tx, sz - tz) || 1; const ex = tx + (sx - tx) / dl * 1.5, ez = tz + (sz - tz) / dl * 1.5; ribbon(pt.k, bendPts(sx, sz, ex, ez, rand(-0.8, 0.8)), 1.35, 0.05, pathMat, 2.2, 1); } { const lr = Math.hypot(riftL[0], riftL[1]) || 1; blocked[0].push([riftA, 0.55]); ribbon(0, bendPts(riftL[0] * (1 - 0.8 / lr), riftL[1] * (1 - 0.8 / lr), riftL[0] / lr * 1.5, riftL[1] / lr * 1.5, 0.9), 1.35, 0.05, pathMat, 2.2, 1); } for (const pd of pads) blocked[0].push([Math.atan2(pd.pos.z - home.pos.z, pd.pos.x - home.pos.x), 0.28]); for (const f of forts) blocked[f.k].push([islands[f.k].ang, 0.5]); for (const n of nodes) { const I = islands[n.k]; blocked[n.k].push([Math.atan2(n.pos.z - I.pos.z, n.pos.x - I.pos.x), 0.42]); } const fenceMat = new THREE.MeshStandardMaterial({ color: '#a8703f', roughness: 0.85, flatShading: true }); const postGeo = new THREE.BoxGeometry(0.13, 0.62, 0.13); const railGeo = new THREE.BoxGeometry(1, 0.07, 0.05); function addFence(k, a0, n) { const r = walkR + 0.4; const step = 0.8 / r; let prev = null; for (let i = 0; i < n; i++) { const a = a0 + i * step; const x = Math.cos(a) * r, z = Math.sin(a) * r; if (!validAt(x, z) || isBlocked(k, a)) { prev = null; continue; } const y = hLocal(x, z); const post = new THREE.Mesh(postGeo, fenceMat); post.castShadow = true; post.receiveShadow = true; post.position.set(x, y + 0.26, z); post.rotation.y = -a; islands[k].group.add(post); if (prev) { const dx = x - prev[0], dz = z - prev[1], len = Math.hypot(dx, dz); for (const hy of [0.2, 0.42]) { const rl = new THREE.Mesh(railGeo, fenceMat); rl.castShadow = true; rl.scale.x = len; rl.position.set((x + prev[0]) / 2, (y + prev[2]) / 2 + hy, (z + prev[1]) / 2); rl.rotation.y = -Math.atan2(dz, dx); islands[k].group.add(rl); } } prev = [x, z, y]; } } // decorate for (let k = 0; k < 4; k++) { const I = islands[k]; for (let f = 0; f < 2; f++) { const fa = pickAngle(k); blocked[k].push([fa, 0.75]); addFall(k, fa); } for (let f = 0; f < 4; f++) addFence(k, rand(0, TAU), 3 + Math.floor(rand(0, 4))); for (let t = 0; t < 9; t++) { const s = freeSpot(k, k === 0 ? 0.62 : 0.4, 0.98, 1.3); if (!s) continue; const tr = makeTree(); tr.scale.setScalar(rand(0.8, 1.3)); tr.rotation.y = rand(0, TAU); addLocal(k, tr, s[0], s[1], -0.05); I.feats.push({ x: s[0], z: s[1], r: 1.1 }); } for (let t = 0; t < 7; t++) { const s = freeSpot(k, 0.35, 1.02, 0.9); if (!s) continue; const n = 1 + Math.floor(rand(0, 3)); for (let j = 0; j < n; j++) { const rk = makeRock(); const sc = j === 0 ? rand(0.9, 1.5) : rand(0.35, 0.7); rk.scale.multiplyScalar(sc); const ox = j === 0 ? 0 : rand(-0.6, 0.6), oz = j === 0 ? 0 : rand(-0.6, 0.6); addLocal(k, rk, s[0] + ox, s[1] + oz, 0.08 * sc); } I.feats.push({ x: s[0], z: s[1], r: 0.9 }); } } // ---------- Particles ---------- const NP = 500; const parts = new THREE.InstancedMesh(new THREE.IcosahedronGeometry(0.12, 0), new THREE.MeshBasicMaterial({ toneMapped: false }), NP); const pPos = new Float32Array(NP * 3), pVel = new Float32Array(NP * 3), pLife = new Float32Array(NP), pMax = new Float32Array(NP); let pNext = 0; const tmpC = new THREE.Color(); for (let i = 0; i < NP; i++) { dummy.position.set(0, -999, 0); dummy.scale.setScalar(0); dummy.updateMatrix(); parts.setMatrixAt(i, dummy.matrix); parts.setColorAt(i, tmpC.set('#fff')); } parts.frustumCulled = false; scene.add(parts); function burst(p, col, n = 14, sp = 4, up = 3) { tmpC.set(col); for (let k = 0; k < n; k++) { const i = pNext; pNext = (pNext + 1) % NP; pPos[i * 3] = p.x; pPos[i * 3 + 1] = p.y; pPos[i * 3 + 2] = p.z; const a = rand(0, TAU), s = rand(0.3, 1) * sp; pVel[i * 3] = Math.cos(a) * s; pVel[i * 3 + 1] = rand(0.5, 1) * up; pVel[i * 3 + 2] = Math.sin(a) * s; pLife[i] = pMax[i] = rand(0.5, 1.0); parts.setColorAt(i, tmpC); } parts.instanceColor.needsUpdate = true; } function updateParts(dt) { for (let i = 0; i < NP; i++) { if (pLife[i] <= 0) continue; pLife[i] -= dt; pVel[i * 3 + 1] -= 6 * dt; pPos[i * 3] += pVel[i * 3] * dt; pPos[i * 3 + 1] += pVel[i * 3 + 1] * dt; pPos[i * 3 + 2] += pVel[i * 3 + 2] * dt; const f = Math.max(0, pLife[i] / pMax[i]); dummy.position.set(pPos[i * 3], pPos[i * 3 + 1], pPos[i * 3 + 2]); dummy.scale.setScalar(f * 1.4); dummy.updateMatrix(); parts.setMatrixAt(i, dummy.matrix); } parts.instanceMatrix.needsUpdate = true; } // ---------- Projectiles ---------- const projGeo = new THREE.SphereGeometry(0.18, 10, 8); const projMats = { bubble: new THREE.MeshStandardMaterial({ color: '#b5f6ff', emissive: '#4fe0ff', emissiveIntensity: 1.2 }), bolt: new THREE.MeshStandardMaterial({ color: '#ffd27a', emissive: '#ff9d2e', emissiveIntensity: 1.3 }), ball: new THREE.MeshStandardMaterial({ color: '#3a3440', emissive: '#ff7a2e', emissiveIntensity: 0.9, roughness: 0.4 }), shell: new THREE.MeshStandardMaterial({ color: '#7a2cff', emissive: '#c056ff', emissiveIntensity: 1.2 }), }; const projs = []; function getProj(kind) { let p = projs.find((q) => !q.active); if (!p) { p = { mesh: new THREE.Mesh(projGeo, projMats.bubble), from: new THREE.Vector3(), to: new THREE.Vector3(), active: false }; p.mesh.castShadow = true; scene.add(p.mesh); projs.push(p); } p.active = true; p.kind = kind; p.mesh.material = projMats[kind]; p.mesh.visible = true; p.mesh.scale.setScalar(kind === 'ball' || kind === 'shell' ? 1.8 : 1); p.t = 0; return p; } function fireHoming(kind, from, target, dmg, speed) { const p = getProj(kind); p.mesh.position.copy(from); p.target = target; p.dmg = dmg; p.speed = speed; p.homing = true; p.life = 3; } function fireArc(kind, from, to, info) { const p = getProj(kind); p.homing = false; p.from.copy(from); p.to.copy(to); p.info = info; const d = from.distanceTo(to); p.T = clamp(d / 13, 0.9, 3.2); p.h = 2 + d * 0.22; p.mesh.position.copy(from); } // ---------- Entities ---------- const slimes = []; const pickups = []; const gemGeo = new THREE.OctahedronGeometry(0.22, 0); function spawnSlime(k, x, z, kind) { const wrap = new THREE.Group(); const m = slimeM.scene.clone(); m.position.y = slimeM.size.y / 2; m.rotation.y = -Math.PI / 2; wrap.add(m); // The model faces +x; turn it to face +z, the way it moves. const boss = kind === 'boss'; const sc = boss ? 2.3 : kind === 'guard' ? 1.0 : 0.85; wrap.scale.setScalar(sc); if (boss) { const crown = new THREE.Mesh(new THREE.CylinderGeometry(0.28, 0.22, 0.22, 5, 1, true), new THREE.MeshStandardMaterial({ color: '#ffcf3a', metalness: 0.8, roughness: 0.3, emissive: '#a06000', emissiveIntensity: 0.4, side: THREE.DoubleSide })); crown.position.y = slimeM.size.y + 0.08; wrap.add(crown); } wrap.position.set(x, groundY(k, x, z), z); scene.add(wrap); const hp = boss ? 25 + state.wave * 6 : kind === 'guard' ? 3 : 2 + Math.floor(state.wave / 2); const s = { k, wrap, model: m, pos: wrap.position, hp, max: hp, kind, sc, speed: boss ? 1.6 : kind === 'guard' ? 2.2 : 1.7 + state.wave * 0.08, ph: rand(0, TAU), hit: 0, homeX: x, homeZ: z, wx: x, wz: z, wt: 0, bar: boss ? makeBar('#ffcf3a', 2.4) : null }; slimes.push(s); return s; } function killSlime(s, reward = true) { s.dead = true; scene.remove(s.wrap); if (s.bar) scene.remove(s.bar); burst(tmpV.copy(s.pos).setY(s.pos.y + 0.5 * s.sc), '#b46cff', s.kind === 'boss' ? 40 : 14, 4); play('pop', s.kind === 'boss' ? 1 : 0.6, s.kind === 'boss' ? 0.7 : 1.1); if (reward) dropGems(s.pos, s.kind === 'boss' ? 15 : s.kind === 'guard' ? 2 : 1); } function dropGems(p, n) { let gk = 0, gd = 1e9; for (let k = 0; k < 4; k++) { const d = Math.hypot(islands[k].pos.x - p.x, islands[k].pos.z - p.z); if (d < gd) { gd = d; gk = k; } } for (let i = 0; i < n; i++) { const m = new THREE.Mesh(gemGeo, crystalMat); m.position.set(p.x, p.y + 0.6, p.z); scene.add(m); pickups.push({ m, k: gk, vx: rand(-2, 2), vy: rand(3, 5), vz: rand(-2, 2), floor: p.y + 0.3, life: 25 }); } } // ---------- Hero ---------- const heroWrap = new THREE.Group(); const hero = heroM.scene.clone(); hero.position.y = heroM.size.y / 2; hero.rotation.y = -Math.PI / 2; heroWrap.add(hero); scene.add(heroWrap); const P = { k: 0, pos: heroWrap.position, hp: 5, inv: 0, cd: 0, face: 0, tpCd: 0, moving: false, hop: 0 }; // ---------- State ---------- const state = { gems: 10, wave: 1, coreHP: 100, over: false, banner: '', bannerT: 0, clearT: -1, spawnT: 3, padMsg: '', audio: false, shake: 0 }; const tmpV = new THREE.Vector3(), tmpV2 = new THREE.Vector3(); function setBanner(t, d = 2.6) { state.banner = t; state.bannerT = d; } function startWave() { for (const f of forts) { f.max = 24 + state.wave * 10 * params.difficulty; f.hp = f.max; f.alive = true; f.mesh.visible = true; f.mesh.scale.setScalar(1); f.cd = rand(3, 6); const n = Math.min(6, 1 + state.wave); const cur = slimes.filter((s) => !s.dead && s.k === f.k && s.kind === 'guard').length; for (let i = cur; i < n; i++) { const a = rand(0, TAU), r = rand(0.3, 0.75) * walkR; const I = islands[f.k]; spawnSlime(f.k, I.pos.x + Math.cos(a) * r, I.pos.z + Math.sin(a) * r, 'guard'); } } if (state.wave % 3 === 0) { const f = forts[Math.floor(rand(0, 3))]; spawnSlime(f.k, f.pos.x + 1.5, f.pos.z + 1.5, 'boss'); setBanner('Wave ' + state.wave + ' — the Slime King rises!'); } else setBanner('Wave ' + state.wave); } function resetGame() { for (const s of slimes) if (!s.dead) { scene.remove(s.wrap); if (s.bar) scene.remove(s.bar); } slimes.length = 0; for (const p of pickups) scene.remove(p.m); pickups.length = 0; for (const p of projs) { p.active = false; p.mesh.visible = false; } for (const pd of pads) { if (pd.tower) scene.remove(pd.tower); pd.tower = null; pd.lvl = 0; pd.prog = 0; } Object.assign(state, { gems: 10, wave: 1, coreHP: 100, over: false, clearT: -1, spawnT: 4 }); P.k = 0; P.hp = 5; P.inv = 0; P.pos.set(home.pos.x, 0, home.pos.z + walkR * 0.3); P.pos.y = groundY(0, P.pos.x, P.pos.z); startWave(); } function buildTower(pd) { if (pd.tower) scene.remove(pd.tower); pd.lvl++; const g = new THREE.Group(); const m = towerM.scene.clone(); m.position.y = towerM.size.y / 2; g.add(m); g.scale.setScalar(0.7 + pd.lvl * 0.15); g.position.copy(pd.pos); g.rotation.y = Math.atan2(-pd.pos.x, -pd.pos.z) + Math.PI; scene.add(g); pd.tower = g; pd.max = 10 + pd.lvl * 6; pd.hp = pd.max; pd.lobCd = 1.5; burst(tmpV.copy(pd.pos).setY(pd.pos.y + 1), '#ffe38a', 30, 5, 5); play('build', 0.9, 0.9 + pd.lvl * 0.08, 0.1); } function hurtPlayer(n) { if (P.inv > 0 || state.over) return; P.hp -= n; P.inv = 1.1; state.shake = 0.3; burst(tmpV.copy(P.pos).setY(P.pos.y + 0.6), '#ff7a8a', 10, 3); play('pop', 0.7, 0.7); if (P.hp <= 0) { setBanner('Knocked out! Back to Home Isle'); state.gems = Math.floor(state.gems / 2); teleport(0, tmpV2.set(home.pos.x, 0, home.pos.z + walkR * 0.3)); P.hp = 5; P.inv = 2; } } function teleport(k, pos) { burst(tmpV.copy(P.pos).setY(P.pos.y + 0.6), '#7fe8ff', 24, 4); P.k = k; P.pos.set(pos.x, groundY(k, pos.x, pos.z), pos.z); P.tpCd = 1.2; burst(tmpV.copy(P.pos).setY(P.pos.y + 0.6), '#7fe8ff', 24, 4); play('portal', 0.8, 1, 0.3); } // ---------- Input ---------- const keys = {}; const kd = (e) => { keys[e.code] = true; state.audio = true; if (state.over && (e.code === 'Enter' || e.code === 'KeyR' || e.code === 'Space')) resetGame(); }; const ku = (e) => { keys[e.code] = false; }; window.addEventListener('keydown', kd); window.addEventListener('keyup', ku); const ray = new THREE.Raycaster(); const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); const pv2 = new THREE.Vector2(); let prevDown = false; // ---------- Post ---------- const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), params.glow, 0.35, 1.0); composer.addPass(bloom); composer.addPass(new OutputPass()); const grade = new ShaderPass({ uniforms: { tDiffuse: { value: null }, uSat: { value: params.saturation }, uHaze: { value: params.haze }, uLift: { value: new THREE.Color(params.hazeColor) } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `uniform sampler2D tDiffuse; uniform float uSat; uniform float uHaze; uniform vec3 uLift; varying vec2 vUv; void main(){ vec4 c = texture2D(tDiffuse, vUv); float l = dot(c.rgb, vec3(0.299, 0.587, 0.114)); vec3 col = mix(vec3(l), c.rgb, uSat); col = mix(col, uLift, uHaze * (1.0 - l * 0.55)); gl_FragColor = vec4(col, c.a); }`, }); composer.addPass(grade); // ---------- HUD ---------- const hudScene = new THREE.Scene(); const hudCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const hudCv = document.createElement('canvas'); const hctx = hudCv.getContext('2d'); const hudTex = new THREE.CanvasTexture(hudCv); hudTex.colorSpace = THREE.SRGBColorSpace; const hudMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({ map: hudTex, transparent: true, toneMapped: false, depthTest: false })); hudScene.add(hudMesh); let hw = 1, hh = 1, hdpr = 1; function sizeHud(w, h, pr) { hdpr = Math.min(pr || 1, 2); hw = w; hh = h; hudCv.width = Math.max(1, Math.floor(w * hdpr)); hudCv.height = Math.max(1, Math.floor(h * hdpr)); hudTex.dispose(); hudTex.needsUpdate = true; } sizeHud(size.width, size.height, size.pixelRatio); function pill(x, y, w, h) { hctx.beginPath(); hctx.roundRect(x, y, w, h, h / 2); hctx.fill(); } function drawHud() { const c = hctx; c.setTransform(hdpr, 0, 0, hdpr, 0, 0); c.clearRect(0, 0, hw, hh); const u = clamp(Math.min(hw, hh) / 600, 0.7, 1.4); c.font = `700 ${18 * u}px sans-serif`; c.textBaseline = 'middle'; c.fillStyle = 'rgba(40,20,60,0.55)'; pill(12, 12, 150 * u, 36 * u); pill(12, 54 * u, 150 * u, 36 * u); c.fillStyle = '#8ff6ff'; c.fillText('◆ ' + state.gems, 26, 12 + 18 * u); c.fillStyle = '#ffffff'; c.fillText('Wave ' + state.wave, 26 + 70 * u, 12 + 18 * u); c.fillStyle = '#ff7a9a'; let hs = ''; for (let i = 0; i < 5; i++) hs += i < P.hp ? '♥' : '♡'; c.fillText(hs, 26, 54 * u + 18 * u); // core bar const bw = Math.min(hw * 0.4, 320), bx = hw - bw - 16, by = 18; c.fillStyle = 'rgba(40,20,60,0.55)'; pill(bx - 8, by - 6, bw + 16, 34 * u); c.fillStyle = '#ffffff'; c.font = `700 ${13 * u}px sans-serif`; c.fillText('CORE', bx + 4, by + 11 * u); const bx2 = bx + 52 * u, bw2 = bw - 56 * u; c.fillStyle = 'rgba(0,0,0,0.35)'; pill(bx2, by + 4 * u, bw2, 14 * u); c.fillStyle = state.coreHP > 35 ? '#6ff0ff' : '#ff6a7a'; if (state.coreHP > 0) pill(bx2, by + 4 * u, Math.max(14 * u, bw2 * state.coreHP / 100), 14 * u); // island + forts c.textAlign = 'right'; c.font = `600 ${14 * u}px sans-serif`; c.fillStyle = 'rgba(255,255,255,0.9)'; const alive = forts.filter((f) => f.alive).length; c.fillText(islands[P.k].name + ' · Forts ' + alive + '/3', hw - 16, by + 44 * u); c.textAlign = 'left'; // pad prompt c.textAlign = 'center'; if (state.padMsg) { c.font = `700 ${17 * u}px sans-serif`; c.fillStyle = 'rgba(40,20,60,0.6)'; const tw = c.measureText(state.padMsg).width + 30; pill(hw / 2 - tw / 2, hh * 0.68, tw, 34 * u); c.fillStyle = '#ffe38a'; c.fillText(state.padMsg, hw / 2, hh * 0.68 + 17 * u); } // hint c.font = `500 ${13 * u}px sans-serif`; c.fillStyle = 'rgba(255,255,255,0.85)'; const hint = touchScreen ? 'Hold & drag to move · stand on pads to build forts · walk into portals' : 'WASD / arrows or click-hold to move · stand on pads to build · portals jump isles'; c.fillText(hint, hw / 2, hh - 22 * u); if (!state.audio) c.fillText(touchScreen ? 'Tap for sound' : 'Click for sound', hw / 2, hh - 42 * u); // banner if (state.bannerT > 0) { const a = clamp(state.bannerT, 0, 1); c.globalAlpha = a; c.font = `800 ${Math.min(42 * u, hw / 16)}px sans-serif`; c.lineWidth = 6; c.strokeStyle = 'rgba(80,30,90,0.7)'; c.strokeText(state.banner, hw / 2, hh * 0.28); c.fillStyle = '#fff3c8'; c.fillText(state.banner, hw / 2, hh * 0.28); c.globalAlpha = 1; } if (state.over) { c.fillStyle = 'rgba(30,10,40,0.55)'; c.fillRect(0, 0, hw, hh); c.font = `800 ${46 * u}px sans-serif`; c.fillStyle = '#ffe0f0'; c.fillText('The Core has shattered', hw / 2, hh * 0.42); c.font = `600 ${20 * u}px sans-serif`; c.fillText('Reached wave ' + state.wave + ' — ' + (touchScreen ? 'tap' : 'click or press Enter') + ' to play again', hw / 2, hh * 0.52); } c.textAlign = 'left'; hudTex.needsUpdate = true; } // ---------- GUI ---------- gui.add(params, 'volume', 0, 1).name('Sound volume').onChange((v) => { if (sfx) sfx.volume = v; }); gui.add(params, 'zoom', 0.6, 1.8).name('Zoom'); gui.add(params, 'difficulty', 0.5, 2).name('Difficulty'); gui.add(params, 'glow', 0, 2).name('Glow'); gui.add(params, 'cloudDrift', 0, 4).name('Cloud drift'); gui.add(params, 'restart').name('Restart'); const lf = gui.addFolder('Lighting'); lf.add(params, 'exposure', 0.4, 1.6).name('Exposure'); lf.add(params, 'sunLight', 0, 4).name('Sun'); lf.add(params, 'ambient', 0, 3).name('Ambient fill'); lf.add(params, 'reflections', 0, 1.5).name('Reflections'); lf.add(params, 'shadowSoft', 0, 12).name('Shadow softness'); lf.add(params, 'saturation', 0.4, 1.4).name('Saturation'); lf.add(params, 'haze', 0, 0.5).name('Warm haze'); lf.addColor(params, 'sunColor').name('Sun color').onChange((v) => sun.color.set(v)); lf.addColor(params, 'skyColor').name('Sky fill').onChange((v) => hemi.color.set(v)); lf.addColor(params, 'groundColor').name('Bounce fill').onChange((v) => hemi.groundColor.set(v)); lf.addColor(params, 'hazeColor').name('Haze color').onChange((v) => grade.uniforms.uLift.value.set(v)); resetGame(); camera.position.set(P.pos.x, P.pos.y + 12, P.pos.z + 12); const look = new THREE.Vector3().copy(P.pos); // ---------- Loop ---------- return { update({ time, delta, frame }) { const dt = Math.min(delta || 0.016, 0.05); clock = time; const pdown = !!pointer.down; if (pdown && !prevDown) { state.audio = true; if (state.over) resetGame(); } prevDown = pdown; // shaders & ambience fallMat.uniforms.uTime.value = time; for (const m of portalMats) m.uniforms.uTime.value = time; for (const m of mists) { m.m.scale.setScalar(1 + 0.25 * Math.sin(time * 2 + m.ph)); } coreMain.rotation.y = time * 0.5; coreMain.position.y = 1.9 + Math.sin(time * 1.3) * 0.12; coreLight.intensity = 10 + Math.sin(time * 2) * 3; rift.userData.ring.rotation.z = time * 0.6; streamMat.uniforms.uTime.value = time; updateClouds(dt); for (let k = 0; k < 4; k++) { const I = islands[k]; const nb = Math.sin(time * 0.55 + k * 1.9) * 0.32 + Math.sin(time * 0.23 + k) * 0.12; const d = nb - I.bob; if (d !== 0) { I.bob = nb; I.pos.y = I.baseY + nb; shiftIsland(k, d); } } bloom.strength = params.glow; renderer.toneMappingExposure = params.exposure; sun.intensity = params.sunLight; hemi.intensity = params.ambient; scene.environmentIntensity = params.reflections; sun.shadow.radius = params.shadowSoft; grade.uniforms.uSat.value = params.saturation; grade.uniforms.uHaze.value = params.haze; if (!state.over) { // --- player movement let mx = 0, mz = 0; if (keys.KeyW || keys.ArrowUp) mz -= 1; if (keys.KeyS || keys.ArrowDown) mz += 1; if (keys.KeyA || keys.ArrowLeft) mx -= 1; if (keys.KeyD || keys.ArrowRight) mx += 1; if (pdown && pointer.inside !== false) { pv2.set(pointer.x, pointer.y); ray.setFromCamera(pv2, camera); plane.constant = -P.pos.y; if (ray.ray.intersectPlane(plane, tmpV)) { const dx = tmpV.x - P.pos.x, dz = tmpV.z - P.pos.z; const d = Math.hypot(dx, dz); if (d > 0.35) { mx = dx / d; mz = dz / d; } } } const ml = Math.hypot(mx, mz); P.moving = ml > 0.01; if (P.moving) { mx /= ml; mz /= ml; P.pos.x += mx * 5.5 * dt; P.pos.z += mz * 5.5 * dt; P.face = lerpAngle(P.face, Math.atan2(mx, mz), 1 - Math.exp(-dt * 12)); P.hop += dt * 11; } clampIsland(P.k, P.pos); P.pos.y = groundY(P.k, P.pos.x, P.pos.z); P.inv -= dt; P.tpCd -= dt; const hopY = P.moving ? Math.abs(Math.sin(P.hop)) * 0.35 : 0; hero.position.y = heroM.size.y / 2 + hopY; const sq = P.moving ? 1 + Math.cos(P.hop * 2) * 0.08 : 1 + Math.sin(time * 3) * 0.04; hero.scale.set(1 / Math.sqrt(sq), sq, 1 / Math.sqrt(sq)); heroWrap.rotation.y = P.face; heroWrap.visible = P.inv > 0 ? Math.floor(time * 14) % 2 === 0 : true; // portals if (P.tpCd <= 0) for (const pt of portals) { if (pt.k !== P.k) continue; if (Math.hypot(pt.pos.x - P.pos.x, pt.pos.z - P.pos.z) < 1.1) { const back = portals.find((q) => q.k === pt.dest && (pt.dest === 0 ? q.dest === pt.k : q.dest === 0)); if (back) { tmpV2.copy(back.pos).addScaledVector(back.inward, 1.8); teleport(pt.dest, tmpV2); setBanner(islands[pt.dest].name, 1.6); } break; } } // nodes for (const n of nodes) { n.cd -= dt; const ready = n.cd <= 0; const s = ready ? 1 : clamp(1 - n.cd / 14, 0.05, 0.6); n.mesh.scale.setScalar(s * (1 + Math.sin(time * 2 + n.pos.x) * 0.04)); if (ready && n.k === P.k && Math.hypot(n.pos.x - P.pos.x, n.pos.z - P.pos.z) < 1.4) { n.cd = 14; dropGems(n.pos, 4); burst(tmpV.copy(n.pos).setY(n.pos.y + 0.5), '#8ff6ff', 20, 3); play('gem', 0.8, 1.2); } } // player auto-fire P.cd -= dt; if (P.cd <= 0) { let best = null, bd = 7.5; for (const s of slimes) { if (s.dead || s.k !== P.k) continue; const d = s.pos.distanceTo(P.pos); if (d < bd) { bd = d; best = s; } } if (!best) for (const f of forts) { if (!f.alive || f.k !== P.k) continue; const d = f.pos.distanceTo(P.pos); if (d < 9) { best = f; break; } } if (best) { fireHoming('bubble', tmpV.copy(P.pos).setY(P.pos.y + 0.7), best, 1, 14); P.cd = 0.42; play('pop', 0.25, 1.6, 0.12); } } // pads / building state.padMsg = ''; for (const pd of pads) { const on = P.k === 0 && Math.hypot(pd.pos.x - P.pos.x, pd.pos.z - P.pos.z) < 1.1; const cost = [10, 15, 30][pd.lvl] ?? 0; if (!on) { pd.lock = false; pd.prog = Math.max(0, pd.prog - dt * 2); } else if (pd.lvl >= 3) state.padMsg = 'Fort at max level'; else if (pd.lock) state.padMsg = 'Step off & back on to upgrade'; else if (state.gems < cost) state.padMsg = 'Need ' + cost + ' ◆ to ' + (pd.lvl ? 'upgrade' : 'build'); else { pd.prog += dt / 1.2; state.padMsg = (pd.lvl ? 'Upgrading' : 'Building') + ' fort… ' + cost + ' ◆'; if (pd.prog >= 1) { state.gems -= cost; pd.prog = 0; pd.lock = true; buildTower(pd); } } const afford = pd.lvl < 3 && state.gems >= cost; pd.ring.material.color.set(afford ? '#ffe38a' : '#9a8cc0'); pd.ring.material.opacity = 0.35 + 0.25 * Math.sin(time * 3) * (afford ? 1 : 0.2) + pd.prog * 0.4; pd.ring.scale.setScalar(1 + pd.prog * 0.25); // tower AI if (pd.tower) { setBar(pd.bar, pd.hp / pd.max, pd.pos.x, pd.pos.y + 3.2 * pd.tower.scale.y, pd.pos.z); pd.bar.visible = pd.hp < pd.max; pd.cd -= dt; if (pd.cd <= 0) { let best = null, bd = 7.5; for (const s of slimes) { if (s.dead || s.k !== 0) continue; const d = s.pos.distanceTo(pd.pos); if (d < bd) { bd = d; best = s; } } if (best) { fireHoming('bolt', tmpV.copy(pd.pos).setY(pd.pos.y + 2.2), best, 1, 16); pd.cd = 1.3 / pd.lvl; } } pd.lobCd -= dt; const alive = forts.filter((f) => f.alive); if (pd.lobCd <= 0 && alive.length) { const f = alive[Math.floor(rand(0, alive.length))]; fireArc('ball', tmpV.copy(pd.pos).setY(pd.pos.y + 2.4 * pd.tower.scale.y), tmpV2.copy(f.pos).setY(f.pos.y + 1.6), { fort: f, dmg: 2 + pd.lvl * 2 }); pd.lobCd = 4.2 / (0.7 + 0.3 * pd.lvl) * rand(0.85, 1.15); burst(tmpV, '#ffd27a', 8, 2, 2); play('cannon', 0.55, 1.1, 0.15); } } else pd.bar.visible = false; } // forts for (const f of forts) { f.hit -= dt; f.bar.visible = f.alive; if (!f.alive) continue; setBar(f.bar, f.hp / f.max, f.pos.x, f.pos.y + 4.4, f.pos.z); f.mesh.scale.setScalar(1 + Math.max(0, f.hit) * 0.3); f.cd -= dt * params.difficulty; if (f.cd <= 0) { f.cd = Math.max(2.8, 7.5 - state.wave * 0.4) * rand(0.8, 1.25); const towers = pads.filter((p) => p.tower); let info; if (towers.length && Math.random() < 0.45) { const pd = towers[Math.floor(rand(0, towers.length))]; info = { pad: pd }; tmpV2.copy(pd.pos).setY(pd.pos.y + 1.5); } else { info = { core: true }; tmpV2.copy(corePos).setY(corePos.y + 1.6); tmpV2.x += rand(-0.6, 0.6); tmpV2.z += rand(-0.6, 0.6); } fireArc('shell', tmpV.copy(f.pos).setY(f.pos.y + 3.3), tmpV2, info); play('cannon', 0.35, 0.8, 0.2); } if (P.k === f.k) { f.pcd -= dt * params.difficulty; if (f.pcd <= 0 && f.pos.distanceTo(P.pos) < 11) { f.pcd = rand(2.2, 3.4); tmpV2.copy(P.pos); if (P.moving) { tmpV2.x += Math.sin(P.face) * 1.5; tmpV2.z += Math.cos(P.face) * 1.5; } fireArc('shell', tmpV.copy(f.pos).setY(f.pos.y + 3.3), tmpV2, { ground: true, k: f.k }); play('cannon', 0.4, 0.9, 0.2); } } } // rift spawning const anyAlive = forts.some((f) => f.alive); if (anyAlive) { state.spawnT -= dt * params.difficulty; const raiders = slimes.filter((s) => !s.dead && s.kind === 'raider').length; if (state.spawnT <= 0 && raiders < 12) { state.spawnT = Math.max(1.4, 5 - state.wave * 0.3) * rand(0.8, 1.2); const s = spawnSlime(0, riftPos.x + rand(-0.4, 0.4), riftPos.z + rand(-0.4, 0.4), 'raider'); burst(tmpV.copy(s.pos).setY(s.pos.y + 1), '#a040ff', 12, 3); play('portal', 0.25, 1.4, 0.5); } } else if (state.clearT < 0) { state.clearT = 8; setBanner('Wave ' + state.wave + ' cleared!', 3); play('gem', 1, 0.8, 0.2); dropGems(P.pos, 5); } if (state.clearT >= 0) { state.clearT -= dt; if (state.clearT < 0) { state.wave++; startWave(); } } // slimes for (const s of slimes) { if (s.dead) continue; s.hit -= dt; s.ph += dt * (s.kind === 'boss' ? 5 : 8); let tx, tz, spd = s.speed; if (s.kind === 'raider') { tx = corePos.x; tz = corePos.z; if (P.k === 0 && s.pos.distanceTo(P.pos) < 2.5) { tx = P.pos.x; tz = P.pos.z; } } else { if (P.k === s.k && s.pos.distanceTo(P.pos) < (s.kind === 'boss' ? 9 : 6.5)) { tx = P.pos.x; tz = P.pos.z; } else { s.wt -= dt; if (s.wt <= 0) { s.wt = rand(2, 4); s.wx = s.homeX + rand(-2.5, 2.5); s.wz = s.homeZ + rand(-2.5, 2.5); } tx = s.wx; tz = s.wz; spd *= 0.45; } } const dx = tx - s.pos.x, dz = tz - s.pos.z, d = Math.hypot(dx, dz); if (d > 0.2) { s.pos.x += dx / d * spd * dt; s.pos.z += dz / d * spd * dt; s.wrap.rotation.y = lerpAngle(s.wrap.rotation.y, Math.atan2(dx, dz), 1 - Math.exp(-dt * 6)); } clampIsland(s.k, s.pos); s.pos.y = groundY(s.k, s.pos.x, s.pos.z); const bounce = Math.abs(Math.sin(s.ph)); s.model.position.y = slimeM.size.y / 2 + bounce * 0.25; const q = 1 + (bounce - 0.5) * 0.18 + Math.max(0, s.hit) * 0.6; s.model.scale.set(1 / Math.sqrt(q), q, 1 / Math.sqrt(q)); if (s.bar) setBar(s.bar, s.hp / s.max, s.pos.x, s.pos.y + 2.7, s.pos.z); if (s.kind === 'raider' && Math.hypot(corePos.x - s.pos.x, corePos.z - s.pos.z) < 1.5) { state.coreHP -= 4 * params.difficulty; killSlime(s, false); burst(tmpV.copy(corePos).setY(corePos.y + 2), '#5fe8ff', 18, 4); state.shake = 0.25; continue; } if (P.k === s.k && s.pos.distanceTo(P.pos) < 0.55 * s.sc + 0.45) hurtPlayer(s.kind === 'boss' ? 2 : 1); } for (let i = slimes.length - 1; i >= 0; i--) if (slimes[i].dead) slimes.splice(i, 1); // projectiles for (const p of projs) { if (!p.active) continue; if (p.homing) { p.life -= dt; const tg = p.target; const gone = tg.dead || (tg.alive === false); if (gone || p.life <= 0) { p.active = false; p.mesh.visible = false; continue; } const aimY = tg.max && tg.kind ? tg.pos.y + 0.5 * tg.sc : tg.pos.y + 1.6; tmpV.set(tg.pos.x, aimY, tg.pos.z).sub(p.mesh.position); const d = tmpV.length(); if (d < 0.45) { p.active = false; p.mesh.visible = false; burst(p.mesh.position, p.kind === 'bubble' ? '#9ff0ff' : '#ffc46a', 6, 2, 2); tg.hp -= p.dmg; tg.hit = 0.15; if (tg.hp <= 0) { if (tg.kind) killSlime(tg); else destroyFort(tg); } continue; } p.mesh.position.addScaledVector(tmpV, Math.min(1, p.speed * dt / d)); } else { p.t += dt / p.T; const t = Math.min(1, p.t); p.mesh.position.lerpVectors(p.from, p.to, t); p.mesh.position.y += p.h * 4 * t * (1 - t); if (frame % 2 === 0) burst(p.mesh.position, p.kind === 'ball' ? '#ffb070' : '#c88cff', 1, 0.3, 0.3); if (t >= 1) { p.active = false; p.mesh.visible = false; const I = p.info; burst(p.to, p.kind === 'ball' ? '#ffa04a' : '#c056ff', 22, 5, 4); if (p.kind === 'ball') { if (I.fort.alive) { I.fort.hp -= I.dmg; I.fort.hit = 0.25; play('cannon', 0.4, 1.3, 0.15); if (I.fort.hp <= 0) destroyFort(I.fort); } } else if (I.core) { state.coreHP -= 5 * params.difficulty; state.shake = 0.3; play('cannon', 0.5, 0.75, 0.1); } else if (I.pad) { const pd = I.pad; if (pd.tower) { pd.hp -= 4; play('cannon', 0.5, 0.9, 0.1); if (pd.hp <= 0) { burst(tmpV.copy(pd.pos).setY(pd.pos.y + 1), '#8a6a50', 30, 5, 5); scene.remove(pd.tower); pd.tower = null; pd.lvl = 0; setBanner('A fort fell!', 1.5); } } } else if (I.ground) { play('cannon', 0.45, 1.0, 0.1); if (P.k === I.k && Math.hypot(P.pos.x - p.to.x, P.pos.z - p.to.z) < 1.4) hurtPlayer(1); } } } } // pickups for (let i = pickups.length - 1; i >= 0; i--) { const g = pickups[i]; g.life -= dt; g.vy -= 12 * dt; g.m.position.x += g.vx * dt; g.m.position.y += g.vy * dt; g.m.position.z += g.vz * dt; if (g.m.position.y < g.floor) { g.m.position.y = g.floor; g.vy = Math.abs(g.vy) * 0.35; g.vx *= 0.6; g.vz *= 0.6; } g.m.rotation.y += dt * 3; tmpV.set(P.pos.x, P.pos.y + 0.5, P.pos.z).sub(g.m.position); const d = tmpV.length(); if (d < 3.2) { g.m.position.addScaledVector(tmpV, Math.min(1, dt * 9 / Math.max(d, 0.3))); g.floor = Math.min(g.floor, P.pos.y + 0.3); } if (d < 0.7 || g.life <= 0) { if (d < 0.7) { state.gems++; play('gem', 0.45, 1 + Math.min(0.4, pickups.length * 0.03), 0.05); } scene.remove(g.m); pickups.splice(i, 1); } } if (state.coreHP <= 0) { state.coreHP = 0; state.over = true; burst(tmpV.copy(corePos).setY(corePos.y + 2), '#5fe8ff', 60, 7, 6); play('cannon', 1, 0.6, 0.1); } } coreMain.visible = !state.over; updateParts(dt); state.bannerT -= dt; // sun follows current isle const ip = islands[P.k].pos; sun.position.copy(ip).add(SUN_OFF); sun.target.position.copy(ip); rim.position.set(ip.x + 20, ip.y + 10, ip.z - 20); rim.target.position.copy(ip); // camera const aspect = size.width / Math.max(1, size.height); const dist = params.zoom * (aspect < 1 ? 1.45 : 1); tmpV.set(P.pos.x + pointer.x * 0.8 * (pdown ? 0 : 1), P.pos.y + 11 * dist, P.pos.z + 11.5 * dist); state.shake = Math.max(0, state.shake - dt); if (state.shake > 0) { tmpV.x += rand(-1, 1) * state.shake * 0.6; tmpV.y += rand(-1, 1) * state.shake * 0.6; } const kf = 1 - Math.exp(-dt * (P.tpCd > 0 ? 2.2 : 4)); camera.position.lerp(tmpV, kf); look.lerp(tmpV2.set(P.pos.x, P.pos.y + 0.6, P.pos.z), kf); camera.lookAt(look); if (frame % 3 === 0) drawHud(); }, render() { composer.render(); const ac = renderer.autoClear; renderer.autoClear = false; renderer.render(hudScene, hudCam); renderer.autoClear = ac; }, resize({ width, height, pixelRatio }) { composer.setSize(width, height); bloom.setSize(width, height); fitSky(width, height); sizeHud(width, height, pixelRatio); drawHud(); }, dispose() { window.removeEventListener('keydown', kd); window.removeEventListener('keyup', ku); pmrem.dispose(); }, }; function shiftIsland(k, d) { for (const f of forts) if (f.k === k) f.mesh.position.y += d; for (const n of nodes) if (n.k === k) n.pos.y += d; for (const pt of portals) if (pt.k === k) pt.pos.y += d; if (k === 0) { corePos.y += d; riftPos.y += d; for (const pd of pads) { pd.pos.y += d; if (pd.tower) pd.tower.position.y += d; } } for (const g of pickups) if (g.k === k) { g.m.position.y += d; g.floor += d; } } function destroyFort(f) { if (!f.alive) return; f.alive = false; f.hp = 0; f.mesh.visible = false; f.bar.visible = false; burst(tmpV.copy(f.pos).setY(f.pos.y + 2), '#c88cff', 50, 7, 6); burst(tmpV, '#ffb070', 30, 5, 5); dropGems(f.pos, 6); play('cannon', 1, 0.7, 0.1); state.shake = 0.4; setBanner(islands[f.k].name + ' fort destroyed!', 2); } }