/* ================================================== * GAME: 40 Ways to Kill a Zombie * A creative destruction sandbox where players experiment with * different tools and methods to eliminate a procedurally-rendered zombie. * * GAME STATE SHAPE: window.gameConfig = { * zombie: { bodyColor, clothingColor, scale, positionY }, * settings: { animationSpeed, goreLevel, backgroundColor }, * methods: { sword, flamethrower, explosion, acid, freeze, chainsaw, lightning, anvil, laser, woodchipper }, * stats: { killCount } * } * ================================================== */ // ============================================================================ // CONSTANTS AND CONFIGURATION // ============================================================================ const CANVAS_WIDTH = 720; const CANVAS_HEIGHT = 1280; const KILL_METHODS = [ { id: 'sword', name: 'Sword', icon: 'sword_icon', key: '1', sound: 'sword_slash_sound' }, { id: 'flamethrower', name: 'Fire', icon: 'flamethrower_icon', key: '2', sound: 'fire_sound' }, { id: 'explosion', name: 'Bomb', icon: 'explosion_icon', key: '3', sound: 'explosion_sound' }, { id: 'acid', name: 'Acid', icon: 'acid_icon', key: '4', sound: 'fire_sound' }, { id: 'freeze', name: 'Freeze', icon: 'freeze_icon', key: '5', sound: 'freeze_sound' }, { id: 'chainsaw', name: 'Saw', icon: 'chainsaw_icon', key: '6', sound: 'chainsaw_sound' }, { id: 'lightning', name: 'Zap', icon: 'lightning_icon', key: '7', sound: 'lightning_sound' }, { id: 'anvil', name: 'Anvil', icon: 'anvil_icon', key: '8', sound: 'crush_sound' }, { id: 'laser', name: 'Laser', icon: 'laser_icon', key: '9', sound: 'laser_sound' }, { id: 'woodchipper', name: 'Chipper', icon: 'woodchipper_icon', key: '0', sound: 'chainsaw_sound' }, // New methods { id: 'guillotine', name: 'Guillotine', icon: 'guillotine_icon', key: 'q', sound: 'guillotine_sound' }, { id: 'piranha', name: 'Piranha', icon: 'piranha_icon', key: 'w', sound: 'piranha_sound' }, { id: 'vaporize', name: 'Vaporize', icon: 'vaporize_icon', key: 'e', sound: 'vaporize_sound' }, { id: 'crusher', name: 'Crusher', icon: 'crusher_icon', key: 'r', sound: 'crusher_sound' }, { id: 'tornado', name: 'Tornado', icon: 'tornado_icon', key: 't', sound: 'tornado_sound' }, { id: 'psychic', name: 'Psychic', icon: 'psychic_icon', key: 'y', sound: 'psychic_sound' }, { id: 'wreckingball', name: 'Wrecker', icon: 'wrecking_ball_icon', key: 'u', sound: 'wrecking_ball_sound' }, { id: 'blackhole', name: 'Black Hole', icon: 'blackhole_icon', key: 'i', sound: 'blackhole_sound' }, { id: 'lava', name: 'Lava', icon: 'lava_icon', key: 'o', sound: 'lava_sound' }, { id: 'bees', name: 'Bees', icon: 'bees_icon', key: 'p', sound: 'bees_sound' }, // More methods (keys a-l) { id: 'meteor', name: 'Meteor', icon: 'meteor_icon', key: 'a', sound: 'meteor_sound' }, { id: 'banana', name: 'Banana', icon: 'banana_icon', key: 's', sound: 'banana_sound' }, { id: 'rocket', name: 'Rocket', icon: 'rocket_icon', key: 'd', sound: 'rocket_sound' }, { id: 'shrinkray', name: 'Shrink', icon: 'shrinkray_icon', key: 'f', sound: 'shrinkray_sound' }, { id: 'traffic', name: 'Traffic', icon: 'traffic_icon', key: 'g', sound: 'catapult_sound' }, { id: 'boxing', name: 'Punch', icon: 'boxing_icon', key: 'h', sound: 'boxing_sound' }, { id: 'spikes', name: 'Spikes', icon: 'spikes_icon', key: 'j', sound: 'spikes_sound' }, { id: 'bass', name: 'Bass', icon: 'bass_icon', key: 'k', sound: 'bass_sound' }, { id: 'possession', name: 'Possession', icon: 'possession_icon', key: 'l', sound: 'possession_sound' }, { id: 'inflate', name: 'Inflate', icon: 'inflate_icon', key: 'z', sound: 'inflate_sound' }, // 10 more methods (keys x, c, v, b, n, m, [, ], ;, ') { id: 'dinosaur', name: 'Dino', icon: 'dinosaur_icon', key: 'x', sound: 'piano_sound' }, { id: 'ufo', name: 'UFO', icon: 'ufo_icon', key: 'c', sound: 'ufo_sound' }, { id: 'tnt', name: 'TNT', icon: 'tnt_icon', key: 'v', sound: 'explosion_sound' }, { id: 'cannon', name: 'Cannon', icon: 'cannon_icon', key: 'b', sound: 'cannon_sound' }, { id: 'lightsaber', name: 'Light Saber', icon: 'lightsaber_icon', key: 'n', sound: 'lightning_sound' }, { id: 'magictrick', name: 'Magic Trick', icon: 'magictrick_icon', key: 'm', sound: 'lightning_sound' }, { id: 'swat', name: 'SWAT', icon: 'swat_icon', key: '[', sound: 'vendingmachine_sound' }, { id: 'portal', name: 'Portal', icon: 'portal_icon', key: ']', sound: 'portal_sound' }, { id: 'lawnmower', name: 'Mower', icon: 'lawnmower_icon', key: ';', sound: 'lawnmower_sound' }, { id: 'cure', name: 'Cure', icon: 'cure_icon', key: "'", sound: 'chickens_sound' } ]; // ============================================================================ // GLOBAL STATE // ============================================================================ let canvas, ctx; let zombie = null; let particles = []; let slicedPieces = []; // Dynamically sliced body pieces let currentAnimation = null; let lastMethod = null; let isAnimating = false; let bgDarkenOpacity = 0; // 0 to 0.3 for background darkening effect let bgDarkenTarget = 0; // Target opacity let gameMode = 'play'; let autoResetTimeout = null; // Timeout for auto-reset after kills let doorDamageLevel = 0; // 0 = no damage, 1 = fully damaged (cracks/dents on doors from meteor etc.) let loadingFadeIn = 0; // 0 = no fade overlay, >0 = fade-in progress (counts down from 1) let usedMethods = new Set(); // Tracks which unique weapons have been used (for Specimens counter) // Guillotine blade state - drawn between zombie body and head const guillotineBladeState = { active: false, x: 0, y: 0, // World Y position of blade scale: 2 // 2x scale }; // Guillotine scene render state - persistent drawing in game loop const guillotineSceneState = { active: false, frameX: 0, // Guillotine frame X (centered on zombie) frameY: 0, // Guillotine frame Y leverX: 0, // Lever position X (left side of floor) leverY: 0, // Lever position Y leverPull: 0, // 0 = up, 1 = fully pulled showBladeAtTop: false, // Show blade waiting at top of frame bladeTopY: 0, // Y position of blade when at top showBladeAtRest: false, // Show blade at neck level after drop bladeRestY: 0, // Y position of blade at rest (after drop) alpha: 1 // Opacity for fade-out }; // Anvil shadow state - drawn behind zombie in game loop const anvilShadow = { active: false, x: 0, y: 0, radiusX: 0, radiusY: 0, opacity: 0 }; // Freeze wind render state - drawn OVER zombie in game loop const freezeWindRenderState = { active: false, t: 0, // Animation progress 0-1 windIntensity: 0 // Intensity 0-1 }; // Vaporize beam render state - drawn behind zombie in game loop const vaporizeBeamState = { active: false, corners: [ { x: 0, y: 0 }, { x: 720, y: 0 }, { x: 0, y: 1280 }, { x: 720, y: 1280 } ], targetX: 0, targetY: 0, beamProgress: 1, // 0-1 how far beams extend toward zombie alpha: 1, // overall beam opacity flicker: 1 }; // Banana peel render state - drawn behind zombie in game loop const bananaPeelRenderState = { active: false, x: 0, y: 0, scale: 2.0, alpha: 1.0 }; // Rocket render state - drawn behind zombie in game loop const rocketRenderState = { active: false, x: 0, // Rocket center X y: 0, // Rocket base Y (bottom of nozzle) // Assembly progress: each part 0=not arrived, 1=in place parts: { nozzle: 0, lowerBody: 0, upperBody: 0, noseCone: 0, leftFin: 0, rightFin: 0 }, strapsOut: 0, // 0=hidden, 1=fully extended launching: false, launchProgress: 0, // 0=grounded, 1=off screen flameIntensity: 0 // 0=off, 1=full thrust }; // Bass speakers render state - drawn behind zombie in game loop const bassRenderState = { active: false, speakers: [] // Array of { x, y, scale, pulse, power } }; // Toilet render state - drawn behind zombie in game loop const toiletRenderState = { active: false, x: 0, y: 0, lidAngle: 0, flushing: false, vortexIntensity: 0 }; // Possession ritual render state - drawn behind zombie in game loop const possessionRenderState = { active: false, pentagramProgress: 0, // 0-1 how much of pentagram is drawn pentagramAlpha: 1, // Overall opacity candles: [], // Array of candle objects pentaX: 0, pentaY: 0, pentaRadius: 200, pentaSquash: 0.35, pentaPoints: [], // 5 points of the star starSegments: [], // Pre-calculated star segments totalStarLen: 0, // Floor shadow state (drawn behind zombie) floorShadowProgress: 0, // 0 = no shadow, 1 = fully covers floor floorShadowActive: false }; // Magic trick sword box render state - drawn behind/in front of zombie in game loop const magicBoxRenderState = { active: false, x: 0, y: 0, boxW: 286, boxH: 638, doorOpenAmount: 0, // 0 = closed, 1 = fully open (horizontal slide) doorsInFront: false, // When true, doors drawn in front of zombie swords: [], // Array of { slitIndex: 0-6, progress: 0-1, side: 'left'|'right' } showPieces: false, // Show dismembered zombie pieces on swords inside box showEmpty: false // Show empty box interior (zombie vanished) }; // Woodchipper render state - drawn behind zombie in game loop const woodchipperRenderState = { active: false, x: 0, y: 0, wheelsSpinning: false, vibX: 0, vibY: 0, drawInFront: false }; // Asset caches const imageCache = {}; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const audioBuffers = {}; // Cached zombie horde background (drawn once, reused when doors open) let zombieHordeCanvas = null; let zombieHordeAnimTime = 0; // For subtle animation on top of cached image // Cached human crowd background (drawn once, used when cure opens doors) let humanCrowdCanvas = null; function generateZombieHordeBackground() { if (zombieHordeCanvas) return; // Already generated zombieHordeCanvas = document.createElement('canvas'); zombieHordeCanvas.width = CANVAS_WIDTH; zombieHordeCanvas.height = trapDoor.y; // Height of door area const hCtx = zombieHordeCanvas.getContext('2d'); const w = zombieHordeCanvas.width; const h = zombieHordeCanvas.height; // Dark background hCtx.fillStyle = '#060a08'; hCtx.fillRect(0, 0, w, h); // Eerie green fog at bottom const fogGrad = hCtx.createLinearGradient(0, h * 0.5, 0, h); fogGrad.addColorStop(0, 'rgba(20, 60, 30, 0)'); fogGrad.addColorStop(0.7, 'rgba(15, 50, 25, 0.3)'); fogGrad.addColorStop(1, 'rgba(10, 40, 20, 0.5)'); hCtx.fillStyle = fogGrad; hCtx.fillRect(0, 0, w, h); // Generate rows of zombie silhouettes (back to front for depth) // Back rows: smaller, darker, more crowded // Front rows: larger, slightly more detailed const rows = [ { y: h * 0.15, scale: 0.25, count: 22, alpha: 0.3, color: '#0a1a0c' }, { y: h * 0.25, scale: 0.32, count: 18, alpha: 0.4, color: '#0c200e' }, { y: h * 0.38, scale: 0.4, count: 15, alpha: 0.5, color: '#102a14' }, { y: h * 0.52, scale: 0.52, count: 12, alpha: 0.6, color: '#143318' }, { y: h * 0.67, scale: 0.65, count: 10, alpha: 0.7, color: '#1a3d1e' }, { y: h * 0.82, scale: 0.8, count: 8, alpha: 0.85, color: '#204525' }, { y: h * 0.95, scale: 1.0, count: 7, alpha: 1.0, color: '#285a30' } ]; // Helper: draw a single zombie that looks like the main game zombie // Uses the same head shape, eyes, hair, torso, and limb style as the Zombie class function drawHordeZombie(cx, baseY, scale, alpha, baseColor) { hCtx.save(); hCtx.translate(cx, baseY); hCtx.scale(scale, scale); hCtx.globalAlpha = alpha; // Slight random lean for variety const lean = (Math.random() - 0.5) * 0.12; hCtx.rotate(lean); // Colors - use zombie green shades that get darker for back rows const bodyColor = baseColor; const bodyDark = '#1a3a1a'; const clothColor = '#1a1548'; const outlineColor = '#0a0a0a'; // --- LEGS (behind torso) --- // Left leg hCtx.fillStyle = bodyColor; hCtx.beginPath(); hCtx.moveTo(-18, 80); hCtx.bezierCurveTo(-22, 120, -20, 160, -18, 200); hCtx.lineTo(-8, 200); hCtx.bezierCurveTo(-10, 160, -12, 120, -8, 80); hCtx.closePath(); hCtx.fill(); // Right leg hCtx.beginPath(); hCtx.moveTo(8, 80); hCtx.bezierCurveTo(10, 120, 12, 160, 10, 200); hCtx.lineTo(20, 200); hCtx.bezierCurveTo(22, 160, 20, 120, 18, 80); hCtx.closePath(); hCtx.fill(); // Tattered pants hCtx.fillStyle = clothColor; hCtx.fillRect(-20, 80, 14, 40); hCtx.fillRect(8, 80, 14, 40); // Feet hCtx.fillStyle = bodyColor; hCtx.beginPath(); hCtx.ellipse(-14, 205, 12, 6, 0, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(14, 205, 12, 6, 0, 0, Math.PI * 2); hCtx.fill(); // --- TORSO --- hCtx.fillStyle = bodyColor; hCtx.beginPath(); hCtx.moveTo(-35, -70); hCtx.bezierCurveTo(-40, -50, -36, -20, -30, 10); hCtx.bezierCurveTo(-28, 40, -28, 60, -26, 80); hCtx.lineTo(26, 80); hCtx.bezierCurveTo(28, 60, 28, 40, 30, 10); hCtx.bezierCurveTo(36, -20, 40, -50, 35, -70); hCtx.closePath(); hCtx.fill(); // Rib hints hCtx.strokeStyle = bodyDark; hCtx.lineWidth = 1; for (let i = 0; i < 3; i++) { const ry = -30 + i * 12; hCtx.beginPath(); hCtx.moveTo(-4, ry); hCtx.quadraticCurveTo(-16, ry - 2, -26, ry + 1); hCtx.stroke(); hCtx.beginPath(); hCtx.moveTo(4, ry); hCtx.quadraticCurveTo(16, ry - 2, 26, ry + 1); hCtx.stroke(); } // Purple shorts hCtx.fillStyle = clothColor; hCtx.beginPath(); hCtx.moveTo(-27, 50); hCtx.lineTo(27, 50); hCtx.lineTo(26, 80); hCtx.lineTo(-26, 80); hCtx.closePath(); hCtx.fill(); // --- ARMS --- const armsRaised = Math.random() > 0.5; hCtx.fillStyle = bodyColor; if (armsRaised) { // Left arm raised hCtx.beginPath(); hCtx.moveTo(-35, -55); hCtx.quadraticCurveTo(-50, -40, -55, -20); hCtx.quadraticCurveTo(-60, -5, -65, 10); hCtx.lineTo(-55, 12); hCtx.quadraticCurveTo(-50, -5, -45, -20); hCtx.quadraticCurveTo(-40, -40, -30, -50); hCtx.closePath(); hCtx.fill(); // Right arm raised hCtx.beginPath(); hCtx.moveTo(35, -55); hCtx.quadraticCurveTo(50, -40, 55, -20); hCtx.quadraticCurveTo(60, -5, 65, 10); hCtx.lineTo(55, 12); hCtx.quadraticCurveTo(50, -5, 45, -20); hCtx.quadraticCurveTo(40, -40, 30, -50); hCtx.closePath(); hCtx.fill(); // Hands (simple circles at end of arms) hCtx.beginPath(); hCtx.arc(-63, 12, 8, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.arc(63, 12, 8, 0, Math.PI * 2); hCtx.fill(); } else { // Arms hanging hCtx.beginPath(); hCtx.moveTo(-35, -55); hCtx.quadraticCurveTo(-42, -20, -40, 40); hCtx.lineTo(-32, 40); hCtx.quadraticCurveTo(-34, -20, -28, -50); hCtx.closePath(); hCtx.fill(); hCtx.beginPath(); hCtx.moveTo(35, -55); hCtx.quadraticCurveTo(42, -20, 40, 40); hCtx.lineTo(32, 40); hCtx.quadraticCurveTo(34, -20, 28, -50); hCtx.closePath(); hCtx.fill(); // Hands hCtx.beginPath(); hCtx.arc(-36, 44, 7, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.arc(36, 44, 7, 0, Math.PI * 2); hCtx.fill(); } // --- HEAD (cartoon style matching main zombie) --- const headY = -105; // Hair spikes (behind head) const hairColor = '#1a3520'; const numSpikes = 4 + Math.floor(Math.random() * 4); hCtx.fillStyle = hairColor; for (let s = 0; s < numSpikes; s++) { const sx = -20 + (s / (numSpikes - 1)) * 40; const sh = 12 + Math.random() * 14; const sw = 4 + Math.random() * 2; hCtx.beginPath(); hCtx.moveTo(sx - sw, headY - 28); hCtx.quadraticCurveTo(sx, headY - 28 - sh, sx + sw, headY - 28); hCtx.closePath(); hCtx.fill(); } // Head shape (round cartoon style) hCtx.fillStyle = bodyColor; hCtx.beginPath(); hCtx.moveTo(0, headY - 32); hCtx.bezierCurveTo(-24, -132, -28, headY - 5, -26, headY + 10); hCtx.bezierCurveTo(-22, headY + 25, -14, headY + 35, 0, headY + 37); hCtx.bezierCurveTo(14, headY + 35, 22, headY + 25, 26, headY + 10); hCtx.bezierCurveTo(28, headY - 5, 24, -132, 0, headY - 32); hCtx.closePath(); hCtx.fill(); // Decay patches hCtx.fillStyle = bodyDark; hCtx.beginPath(); hCtx.ellipse(-12 + Math.random() * 6, headY + 5, 4, 3, 0, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(10 + Math.random() * 5, headY + 12, 3, 3, 0, 0, Math.PI * 2); hCtx.fill(); // Eyes (big bulging yellowish - matching main zombie) if (alpha > 0.5) { const eyeY = headY - 2; const leftEyeX = -10; const rightEyeX = 10; const eyeW = 10 + Math.random() * 3; const eyeH = eyeW + 2; // Eye socket shadows hCtx.fillStyle = bodyDark; hCtx.beginPath(); hCtx.ellipse(leftEyeX, eyeY, eyeW + 2, eyeH + 2, 0, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(rightEyeX, eyeY, eyeW + 2, eyeH + 2, 0, 0, Math.PI * 2); hCtx.fill(); // Eyeballs (yellowish like the main zombie) hCtx.fillStyle = '#e8e4c8'; hCtx.beginPath(); hCtx.ellipse(leftEyeX, eyeY, eyeW, eyeH, 0, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(rightEyeX, eyeY, eyeW, eyeH, 0, 0, Math.PI * 2); hCtx.fill(); // Bloodshot veins hCtx.strokeStyle = '#8b3030'; hCtx.lineWidth = 0.5; [{x: leftEyeX, w: eyeW, h: eyeH}, {x: rightEyeX, w: eyeW, h: eyeH}].forEach(eye => { for (let v = 0; v < 3; v++) { const angle = (v / 3) * Math.PI + Math.PI * 0.3; hCtx.beginPath(); hCtx.moveTo(eye.x + Math.cos(angle) * eye.w * 0.3, eyeY + Math.sin(angle) * eye.h * 0.3); hCtx.lineTo(eye.x + Math.cos(angle) * eye.w * 0.9, eyeY + Math.sin(angle) * eye.h * 0.9); hCtx.stroke(); } }); // Pupils (small, dark) hCtx.fillStyle = '#0a0a0a'; const lookDir = (Math.random() - 0.5) * 3; hCtx.beginPath(); hCtx.arc(leftEyeX + lookDir, eyeY, 3, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.arc(rightEyeX + lookDir, eyeY, 3, 0, Math.PI * 2); hCtx.fill(); // Pupil highlights hCtx.fillStyle = '#ffffff'; hCtx.beginPath(); hCtx.arc(leftEyeX + lookDir - 1, eyeY - 1.5, 1.2, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.arc(rightEyeX + lookDir - 1, eyeY - 1.5, 1.2, 0, Math.PI * 2); hCtx.fill(); // Eye outlines hCtx.strokeStyle = outlineColor; hCtx.lineWidth = 1.2; hCtx.beginPath(); hCtx.ellipse(leftEyeX, eyeY, eyeW, eyeH, 0, 0, Math.PI * 2); hCtx.stroke(); hCtx.beginPath(); hCtx.ellipse(rightEyeX, eyeY, eyeW, eyeH, 0, 0, Math.PI * 2); hCtx.stroke(); } // Nose hCtx.fillStyle = bodyColor; hCtx.beginPath(); hCtx.moveTo(-1, headY + 8); hCtx.quadraticCurveTo(-5, headY + 16, -4, headY + 18); hCtx.quadraticCurveTo(0, headY + 20, 4, headY + 18); hCtx.quadraticCurveTo(5, headY + 16, 1, headY + 8); hCtx.closePath(); hCtx.fill(); hCtx.fillStyle = '#0a0a0a'; hCtx.beginPath(); hCtx.ellipse(-2, headY + 17, 1.5, 2, 0, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(2, headY + 17, 1.5, 2, 0, 0, Math.PI * 2); hCtx.fill(); // Mouth (wide open scared mouth matching main zombie) const mouthY = headY + 24; const mouthW = 10 + Math.random() * 5; const mouthH = 5 + Math.random() * 6; hCtx.fillStyle = '#4a1020'; hCtx.beginPath(); hCtx.ellipse(0, mouthY, mouthW, mouthH, 0, 0, Math.PI * 2); hCtx.fill(); // Teeth (uneven, some missing) hCtx.fillStyle = '#d4d0b8'; const numTeeth = 3 + Math.floor(Math.random() * 3); for (let t = 0; t < numTeeth; t++) { if (Math.random() > 0.2) { // 20% chance of missing tooth const tx = -mouthW + 3 + t * (mouthW * 2 - 6) / numTeeth; const tw = 2.5 + Math.random() * 1; const th = 3 + Math.random() * 2; hCtx.fillRect(tx, mouthY - mouthH + 1, tw, th); } } // Head outline hCtx.strokeStyle = outlineColor; hCtx.lineWidth = 1.5; hCtx.beginPath(); hCtx.moveTo(0, headY - 32); hCtx.bezierCurveTo(-24, -132, -28, headY - 5, -26, headY + 10); hCtx.bezierCurveTo(-22, headY + 25, -14, headY + 35, 0, headY + 37); hCtx.bezierCurveTo(14, headY + 35, 22, headY + 25, 26, headY + 10); hCtx.bezierCurveTo(28, headY - 5, 24, -132, 0, headY - 32); hCtx.stroke(); // Brow ridge if (alpha > 0.4) { hCtx.strokeStyle = bodyDark; hCtx.lineWidth = 2; hCtx.beginPath(); hCtx.moveTo(-16, headY - 16); hCtx.quadraticCurveTo(-10, headY - 20, -4, headY - 16); hCtx.stroke(); hCtx.beginPath(); hCtx.moveTo(4, headY - 16); hCtx.quadraticCurveTo(10, headY - 20, 16, headY - 16); hCtx.stroke(); } hCtx.restore(); } // Draw all rows rows.forEach(row => { const spacing = w / (row.count + 1); for (let i = 0; i < row.count; i++) { const x = spacing * (i + 0.5) + (Math.random() - 0.5) * spacing * 0.6; const y = row.y + (Math.random() - 0.5) * 30; drawHordeZombie(x, y, row.scale, row.alpha, row.color); } }); // Overlay green atmospheric fog on top const topFog = hCtx.createLinearGradient(0, 0, 0, h * 0.4); topFog.addColorStop(0, 'rgba(0, 10, 5, 0.7)'); topFog.addColorStop(1, 'rgba(0, 10, 5, 0)'); hCtx.fillStyle = topFog; hCtx.fillRect(0, 0, w, h * 0.4); // Side vignette (darker edges) const leftVig = hCtx.createLinearGradient(0, 0, w * 0.2, 0); leftVig.addColorStop(0, 'rgba(0, 5, 2, 0.6)'); leftVig.addColorStop(1, 'rgba(0, 5, 2, 0)'); hCtx.fillStyle = leftVig; hCtx.fillRect(0, 0, w * 0.2, h); const rightVig = hCtx.createLinearGradient(w, 0, w * 0.8, 0); rightVig.addColorStop(0, 'rgba(0, 5, 2, 0.6)'); rightVig.addColorStop(1, 'rgba(0, 5, 2, 0)'); hCtx.fillStyle = rightVig; hCtx.fillRect(w * 0.8, 0, w * 0.2, h); } function generateHumanCrowdBackground() { if (humanCrowdCanvas) return; humanCrowdCanvas = document.createElement('canvas'); humanCrowdCanvas.width = CANVAS_WIDTH; humanCrowdCanvas.height = trapDoor.y; const hCtx = humanCrowdCanvas.getContext('2d'); const w = humanCrowdCanvas.width; const h = humanCrowdCanvas.height; // Warm bright background (lab lit with golden celebratory light) const bgGrad = hCtx.createLinearGradient(0, 0, 0, h); bgGrad.addColorStop(0, '#2a2218'); bgGrad.addColorStop(0.4, '#3a2e20'); bgGrad.addColorStop(1, '#4a3828'); hCtx.fillStyle = bgGrad; hCtx.fillRect(0, 0, w, h); // Warm golden glow (celebratory lighting from center) const warmGlow = hCtx.createRadialGradient(w/2, h*0.4, 50, w/2, h*0.5, h * 0.9); warmGlow.addColorStop(0, 'rgba(255, 210, 100, 0.2)'); warmGlow.addColorStop(0.4, 'rgba(220, 170, 60, 0.1)'); warmGlow.addColorStop(1, 'rgba(100, 70, 20, 0)'); hCtx.fillStyle = warmGlow; hCtx.fillRect(0, 0, w, h); // Human skin tone and hair palettes const skinTones = ['#ffe0bd','#f7c9a0','#f0b687','#e5a073','#d4956b','#c68642','#a67040','#8d5524','#764428','#5c3317','#6b4f3b','#c49a6c','#b8804e','#9e6b3a']; const hairColors = ['#2a1a0a','#3d2314','#5a3a1e','#8b6914','#4a2a10','#1a1a1a','#6b4c2a','#3a2a18','#7a5030','#c8a050']; const shirtColors = ['#cc4444','#4488cc','#44aa44','#cc8844','#8844cc','#44aaaa','#cccc44','#cc44aa','#ffffff','#6688aa','#5566cc','#cc6644','#88cc88','#aa8855']; // Rows of cheering humans (back to front for depth) const rows = [ { y: h * 0.12, scale: 0.22, count: 22, alpha: 0.35 }, { y: h * 0.24, scale: 0.30, count: 18, alpha: 0.5 }, { y: h * 0.37, scale: 0.40, count: 14, alpha: 0.65 }, { y: h * 0.50, scale: 0.52, count: 11, alpha: 0.78 }, { y: h * 0.64, scale: 0.65, count: 9, alpha: 0.88 }, { y: h * 0.78, scale: 0.80, count: 7, alpha: 0.95 }, { y: h * 0.92, scale: 0.95, count: 6, alpha: 1.0 } ]; // Deterministic pseudo-random using index for consistent rendering function seededRand(seed) { const x = Math.sin(seed * 9301 + 49297) * 49297; return x - Math.floor(x); } function drawCheerer(cx, baseY, scale, alpha, idx) { hCtx.save(); hCtx.translate(cx, baseY); hCtx.scale(scale, scale); hCtx.globalAlpha = alpha; const skinColor = skinTones[Math.floor(seededRand(idx * 7 + 1) * skinTones.length)]; const hairColor = hairColors[Math.floor(seededRand(idx * 11 + 3) * hairColors.length)]; const shirtColor = shirtColors[Math.floor(seededRand(idx * 13 + 5) * shirtColors.length)]; // Randomize arm pose (slightly different angles per person) const armLAngle = -0.3 - seededRand(idx * 3 + 7) * 0.5; const armRAngle = 0.3 + seededRand(idx * 5 + 9) * 0.5; const armLen = 85 + seededRand(idx * 2 + 4) * 25; // Arms raised in V-shape (cheering) hCtx.fillStyle = skinColor; hCtx.lineWidth = 2; // Left arm const laEndX = Math.sin(armLAngle) * armLen; const laEndY = -55 + Math.cos(armLAngle) * -armLen; hCtx.beginPath(); hCtx.moveTo(-28, -50); hCtx.quadraticCurveTo(-35, -80, laEndX - 10, laEndY); hCtx.lineTo(laEndX - 4, laEndY + 2); hCtx.quadraticCurveTo(-28, -75, -22, -50); hCtx.closePath(); hCtx.fill(); // Left hand/fist hCtx.beginPath(); hCtx.arc(laEndX - 7, laEndY, 7, 0, Math.PI * 2); hCtx.fill(); // Right arm const raEndX = Math.sin(armRAngle) * armLen; const raEndY = -55 + Math.cos(armRAngle) * -armLen; hCtx.beginPath(); hCtx.moveTo(28, -50); hCtx.quadraticCurveTo(35, -80, raEndX + 10, raEndY); hCtx.lineTo(raEndX + 4, raEndY + 2); hCtx.quadraticCurveTo(28, -75, 22, -50); hCtx.closePath(); hCtx.fill(); // Right hand/fist hCtx.beginPath(); hCtx.arc(raEndX + 7, raEndY, 7, 0, Math.PI * 2); hCtx.fill(); // Torso (shirt) hCtx.fillStyle = shirtColor; hCtx.beginPath(); hCtx.moveTo(-28, -55); hCtx.lineTo(28, -55); hCtx.quadraticCurveTo(30, -20, 26, 25); hCtx.lineTo(-26, 25); hCtx.quadraticCurveTo(-30, -20, -28, -55); hCtx.closePath(); hCtx.fill(); // Head hCtx.fillStyle = skinColor; hCtx.beginPath(); hCtx.ellipse(0, -80, 22, 26, 0, 0, Math.PI * 2); hCtx.fill(); // Hair hCtx.fillStyle = hairColor; hCtx.beginPath(); hCtx.ellipse(0, -97, 23, 15, 0, Math.PI, 0, true); hCtx.closePath(); hCtx.fill(); // Side hair hCtx.beginPath(); hCtx.ellipse(-20, -85, 5, 12, 0.2, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.ellipse(20, -85, 5, 12, -0.2, 0, Math.PI * 2); hCtx.fill(); // Face details (only for closer rows) if (alpha > 0.45) { // Eyes hCtx.fillStyle = '#222'; hCtx.beginPath(); hCtx.arc(-8, -82, 2.5, 0, Math.PI * 2); hCtx.fill(); hCtx.beginPath(); hCtx.arc(8, -82, 2.5, 0, Math.PI * 2); hCtx.fill(); // Wide open smile (mouth open cheering) hCtx.fillStyle = '#3a1520'; hCtx.beginPath(); hCtx.ellipse(0, -68, 9, 7, 0, 0, Math.PI * 2); hCtx.fill(); // Teeth hCtx.fillStyle = '#e8e0c8'; hCtx.fillRect(-6, -73, 12, 4); } // Legs (pants) hCtx.fillStyle = '#333'; hCtx.fillRect(-14, 25, 12, 45); hCtx.fillRect(4, 25, 12, 45); hCtx.restore(); } let globalIdx = 0; rows.forEach(row => { const spacing = w / (row.count + 1); for (let i = 0; i < row.count; i++) { const x = spacing * (i + 0.5) + (seededRand(globalIdx * 17 + 11) - 0.5) * spacing * 0.5; const y = row.y + (seededRand(globalIdx * 23 + 7) - 0.5) * 20; drawCheerer(x, y, row.scale, row.alpha, globalIdx); globalIdx++; } }); // Pre-rendered confetti scattered across the scene const confettiColors = ['#ff4444','#44ff44','#4444ff','#ffff44','#ff44ff','#44ffff','#ff8800','#ffffff','#88ff88','#ffaa44']; for (let i = 0; i < 100; i++) { const cx = seededRand(i * 31 + 13) * w; const cy = seededRand(i * 37 + 17) * h; hCtx.fillStyle = confettiColors[i % confettiColors.length]; hCtx.save(); hCtx.translate(cx, cy); hCtx.rotate(seededRand(i * 41 + 19) * Math.PI); hCtx.fillRect(-4, -2, 8, 4); hCtx.restore(); } // Warm vignette edges const leftVig = hCtx.createLinearGradient(0, 0, w * 0.15, 0); leftVig.addColorStop(0, 'rgba(20, 15, 10, 0.5)'); leftVig.addColorStop(1, 'rgba(20, 15, 10, 0)'); hCtx.fillStyle = leftVig; hCtx.fillRect(0, 0, w * 0.15, h); const rightVig = hCtx.createLinearGradient(w, 0, w * 0.85, 0); rightVig.addColorStop(0, 'rgba(20, 15, 10, 0.5)'); rightVig.addColorStop(1, 'rgba(20, 15, 10, 0)'); hCtx.fillStyle = rightVig; hCtx.fillRect(w * 0.85, 0, w * 0.15, h); } // Entrance doors state - laboratory sliding doors behind zombie // Doors fill the area above the trap doors (top 2/3 of screen) const entranceDoors = { leftX: 0, // Left door slide offset (0 = closed, negative = open/left) rightX: 0, // Right door slide offset (0 = closed, positive = open/right) isAnimating: false, // Is the door currently animating? phase: 'closed', // 'closed', 'opening', 'open', 'closing' width: CANVAS_WIDTH / 2, // Each door panel is half the screen width x: CANVAS_WIDTH / 2, // Center X position get y() { return trapDoor.y; }, // Bottom of doors = top of trap doors get height() { return trapDoor.y; }, // Height fills from top to trap doors openDistance: CANVAS_WIDTH / 2 + 20 // Doors slide fully off screen }; // Trap door state - covers bottom third of screen const trapDoor = { leftAngle: 0, // Left panel rotation (0 = closed, 90 = open) rightAngle: 0, // Right panel rotation (0 = closed, -90 = open) isAnimating: false, // Is the trap door currently animating? phase: 'closed', // 'closed', 'opening', 'open', 'closing' width: CANVAS_WIDTH, // Full width of screen height: CANVAS_HEIGHT / 3, // Bottom third of screen (~426px) y: CANVAS_HEIGHT - CANVAS_HEIGHT / 3 // Top of trap door area (~854) }; // ============================================================================ // SLICED PIECE CLASS - For dynamic slicing anywhere on body parts // ============================================================================ class SlicedPiece { constructor(options) { // Position in world space this.x = options.x || 0; this.y = options.y || 0; this.rotation = options.rotation || 0; // Physics this.velocityX = options.velocityX || 0; this.velocityY = options.velocityY || 0; this.angularVelocity = options.angularVelocity || (Math.random() - 0.5) * 200; this.mass = options.mass || 1; this.gravity = 1800; this.damping = 0.99; this.angularDamping = 0.98; // Visual this.alpha = 1; this.scale = options.scale || 1; // Part info this.partName = options.partName; this.isLeft = options.isLeft; // Slice geometry (in local part coordinates) // sliceLine: { start: {x, y}, end: {x, y} } - the cut line // side: 'above' or 'below' - which side of the slice this piece represents this.sliceLine = options.sliceLine; this.side = options.side; // Colors (copied from zombie at time of slice) this.bodyColor = options.bodyColor || '#6b7c6a'; this.clothingColor = options.clothingColor || '#2a1f5e'; this.outlineColor = '#1a1a1a'; // Bleeding this.bleedingTime = 2.5; this.bleedDirection = options.bleedDirection || { x: 0, y: -1 }; // Lifetime this.life = 8; // Seconds before fading this.visible = true; // Part dimensions for rendering this.partDims = this.getPartDimensions(); } getPartDimensions() { const dims = { head: { width: 70, height: 90, offsetY: -25 }, torso: { width: 90, height: 160, offsetY: 0 }, leftUpperArm: { width: 28, height: 75, offsetY: 35 }, rightUpperArm: { width: 28, height: 75, offsetY: 35 }, leftForearm: { width: 24, height: 120, offsetY: 55 }, rightForearm: { width: 24, height: 120, offsetY: 55 }, leftThigh: { width: 36, height: 85, offsetY: 40 }, rightThigh: { width: 36, height: 85, offsetY: 40 }, leftLowerLeg: { width: 28, height: 105, offsetY: 50 }, rightLowerLeg: { width: 28, height: 105, offsetY: 50 } }; return dims[this.partName] || { width: 40, height: 80, offsetY: 0 }; } update(dt) { // Apply gravity this.velocityY += this.gravity * dt; // Update position this.x += this.velocityX * dt; this.y += this.velocityY * dt; // Update rotation this.rotation += this.angularVelocity * dt; // Apply air damping this.velocityX *= 0.998; this.velocityY *= 0.998; this.angularVelocity *= 0.995; // Ground collision - floor is at CANVAS_HEIGHT - 300 // BUT skip collision if trap door is open (allow falling through) const groundY = CANVAS_HEIGHT - 300; const trapDoorOpen = trapDoor.leftAngle > 30; if (!trapDoorOpen && this.y > groundY) { this.y = groundY; this.velocityY = -this.velocityY * 0.35; this.velocityX *= 0.8; this.angularVelocity *= 0.8; if (Math.abs(this.velocityY) < 20) { this.velocityY = 0; } if (Math.abs(this.velocityX) < 10) { this.velocityX = 0; } if (Math.abs(this.angularVelocity) < 10) { this.angularVelocity = 0; } } // If fallen off the bottom of screen, mark as not visible if (this.y > CANVAS_HEIGHT + 200) { this.visible = false; } // Wall collisions if (this.x < 0) { this.x = 0; this.velocityX *= -0.5; } else if (this.x > CANVAS_WIDTH) { this.x = CANVAS_WIDTH; this.velocityX *= -0.5; } // Bleeding effect if (this.bleedingTime > 0) { this.bleedingTime -= dt; if (Math.random() < 0.2 * (this.bleedingTime / 2.5)) { // Calculate bleed point along slice line const sliceCenter = { x: (this.sliceLine.start.x + this.sliceLine.end.x) / 2, y: (this.sliceLine.start.y + this.sliceLine.end.y) / 2 }; // Transform to world coordinates const angleRad = this.rotation * Math.PI / 180; const worldX = this.x + (sliceCenter.x * Math.cos(angleRad) - sliceCenter.y * Math.sin(angleRad)) * this.scale; const worldY = this.y + (sliceCenter.x * Math.sin(angleRad) + sliceCenter.y * Math.cos(angleRad)) * this.scale; spawnParticles(worldX, worldY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: this.bleedDirection.x * 50 + (Math.random() - 0.5) * 40, vy: this.bleedDirection.y * 50 + Math.random() * 30, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: 400, type: 'circle' }); } } // Parts no longer fade - they persist until trap door dumps them // Lifetime only used for bleeding effect duration this.life -= dt; return this.visible; } draw(ctx) { if (!this.visible || this.alpha <= 0) return; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotation * Math.PI / 180); ctx.scale(this.scale, this.scale); ctx.globalAlpha = this.alpha; // Create clipping path based on slice line and side ctx.save(); this.createClipPath(ctx); ctx.clip(); // Draw the body part (using zombie's draw methods conceptually) this.drawPartContent(ctx); ctx.restore(); // Draw the exposed flesh at the cut edge this.drawSliceEdge(ctx); ctx.restore(); } createClipPath(ctx) { const sl = this.sliceLine; const dim = this.partDims; const halfW = dim.width / 2 + 20; // Extra margin const halfH = dim.height / 2 + 20; const oy = dim.offsetY; ctx.beginPath(); // Calculate slice line direction const dx = sl.end.x - sl.start.x; const dy = sl.end.y - sl.start.y; const len = Math.sqrt(dx * dx + dy * dy); const nx = -dy / len; // Normal vector const ny = dx / len; if (this.side === 'above') { // Clip to area above the slice line (in normal direction) // Start from slice line and extend in normal direction const extendDist = halfW * 3; ctx.moveTo(sl.start.x, sl.start.y); ctx.lineTo(sl.end.x, sl.end.y); ctx.lineTo(sl.end.x + nx * extendDist, sl.end.y + ny * extendDist); ctx.lineTo(sl.start.x + nx * extendDist, sl.start.y + ny * extendDist); ctx.closePath(); } else { // Clip to area below the slice line (opposite normal direction) const extendDist = halfW * 3; ctx.moveTo(sl.start.x, sl.start.y); ctx.lineTo(sl.end.x, sl.end.y); ctx.lineTo(sl.end.x - nx * extendDist, sl.end.y - ny * extendDist); ctx.lineTo(sl.start.x - nx * extendDist, sl.start.y - ny * extendDist); ctx.closePath(); } } drawPartContent(ctx) { // Simplified body part rendering based on part type const skinBase = this.bodyColor; const skinDark = this.darkenColor(skinBase, 0.3); const skinLight = this.lightenColor(skinBase, 0.2); const dim = this.partDims; ctx.fillStyle = skinBase; ctx.strokeStyle = this.outlineColor; ctx.lineWidth = 2; switch (this.partName) { case 'head': this.drawSlicedHead(ctx, skinBase, skinDark, skinLight); break; case 'torso': this.drawSlicedTorso(ctx, skinBase, skinDark, skinLight); break; case 'leftUpperArm': case 'rightUpperArm': this.drawSlicedUpperArm(ctx, skinBase, skinDark, this.partName === 'leftUpperArm'); break; case 'leftForearm': case 'rightForearm': this.drawSlicedForearm(ctx, skinBase, skinDark, this.partName === 'leftForearm'); break; case 'leftThigh': case 'rightThigh': this.drawSlicedThigh(ctx, skinBase, skinDark, this.partName === 'leftThigh'); break; case 'leftLowerLeg': case 'rightLowerLeg': this.drawSlicedLowerLeg(ctx, skinBase, skinDark, this.partName === 'leftLowerLeg'); break; default: // Generic limb shape ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, dim.offsetY, dim.width / 2, dim.height / 2, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } } drawSlicedHead(ctx, skinBase, skinDark, skinLight) { // Simplified cartoon head - rounder with big eyes ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, 3, 32, 38, 0, 0, Math.PI * 2); ctx.fill(); // Spiky hair ctx.fillStyle = '#2a3a2a'; const spikes = [{x: -15, y: -32}, {x: -5, y: -38}, {x: 5, y: -36}, {x: 15, y: -30}]; spikes.forEach(s => { ctx.beginPath(); ctx.moveTo(s.x - 5, s.y + 10); ctx.lineTo(s.x, s.y - 15); ctx.lineTo(s.x + 5, s.y + 10); ctx.closePath(); ctx.fill(); }); // Big bulging eyes ctx.fillStyle = '#e8e4c8'; ctx.beginPath(); ctx.ellipse(-12, -6, 12, 14, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(12, -6, 12, 14, 0, 0, Math.PI * 2); ctx.fill(); // Pupils ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.arc(-10, -5, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(14, -7, 4, 0, Math.PI * 2); ctx.fill(); // Open mouth ctx.fillStyle = '#4a1020'; ctx.beginPath(); ctx.ellipse(0, 30, 14, 10, 0, 0, Math.PI * 2); ctx.fill(); // Teeth ctx.fillStyle = '#d4d0b8'; ctx.beginPath(); ctx.rect(-8, 26, 4, 5); ctx.rect(-2, 26, 4, 6); ctx.rect(4, 26, 4, 5); ctx.fill(); // Outline ctx.strokeStyle = this.outlineColor; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(0, 3, 32, 38, 0, 0, Math.PI * 2); ctx.stroke(); } drawSlicedTorso(ctx, skinBase, skinDark, skinLight) { // Simplified torso shape ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(-40, -70); ctx.bezierCurveTo(-48, -60, -42, -30, -36, 0); ctx.bezierCurveTo(-32, 30, -34, 60, -32, 78); ctx.lineTo(32, 78); ctx.bezierCurveTo(34, 60, 32, 30, 36, 0); ctx.bezierCurveTo(42, -30, 48, -60, 40, -70); ctx.closePath(); ctx.fill(); // Rib hints ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; for (let i = 0; i < 4; i++) { const y = -35 + i * 12; ctx.beginPath(); ctx.moveTo(-4, y); ctx.quadraticCurveTo(-20, y - 3, -32, y + 2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(4, y); ctx.quadraticCurveTo(20, y - 3, 32, y + 2); ctx.stroke(); } // Clothing remnants ctx.fillStyle = this.clothingColor; ctx.beginPath(); ctx.moveTo(-38, -68); ctx.bezierCurveTo(-44, -55, -42, -35, -36, -20); ctx.lineTo(-28, -22); ctx.lineTo(-28, -50); ctx.lineTo(-34, -65); ctx.closePath(); ctx.fill(); // Outline ctx.strokeStyle = this.outlineColor; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-40, -70); ctx.bezierCurveTo(-48, -60, -42, -30, -36, 0); ctx.bezierCurveTo(-32, 30, -34, 60, -32, 78); ctx.lineTo(32, 78); ctx.bezierCurveTo(34, 60, 32, 30, 36, 0); ctx.bezierCurveTo(42, -30, 48, -60, 40, -70); ctx.closePath(); ctx.stroke(); } drawSlicedUpperArm(ctx, skinBase, skinDark, isLeft) { const dir = isLeft ? -1 : 1; ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(dir * -10, 0); ctx.bezierCurveTo(dir * -14, 20, dir * -13, 50, dir * -10, 70); ctx.bezierCurveTo(dir * -6, 74, dir * 6, 74, dir * 10, 70); ctx.bezierCurveTo(dir * 14, 50, dir * 14, 20, dir * 10, 0); ctx.closePath(); ctx.fill(); ctx.stroke(); } drawSlicedForearm(ctx, skinBase, skinDark, isLeft) { const dir = isLeft ? -1 : 1; // Forearm ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(dir * -9, 2); ctx.bezierCurveTo(dir * -11, 23, dir * -9, 48, dir * -6, 63); ctx.bezierCurveTo(dir * -3, 66, dir * 5, 66, dir * 8, 63); ctx.bezierCurveTo(dir * 11, 48, dir * 12, 23, dir * 9, 2); ctx.closePath(); ctx.fill(); ctx.stroke(); // Hand ctx.beginPath(); ctx.ellipse(dir * 1, 78, 10, 12, 0, 0, Math.PI * 2); ctx.fill(); // Thumb (inside, closest to body) ctx.lineCap = 'round'; ctx.lineWidth = 4; ctx.strokeStyle = skinBase; ctx.beginPath(); ctx.moveTo(-dir * 8, 75); ctx.quadraticCurveTo(-dir * 13, 80, -dir * 15, 86); ctx.stroke(); // Fingers ctx.lineWidth = 5; for (let i = 0; i < 4; i++) { const fx = dir * (-6 + i * 4); ctx.beginPath(); ctx.moveTo(fx, 86); ctx.lineTo(fx + dir * 0.5, 86 + 18 + (i === 1 ? 5 : 0)); ctx.stroke(); } } drawSlicedThigh(ctx, skinBase, skinDark, isLeft) { const dir = isLeft ? -1 : 1; ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(dir * -14, 0); ctx.bezierCurveTo(dir * -18, 25, dir * -17, 55, dir * -12, 78); ctx.bezierCurveTo(dir * -8, 82, dir * 8, 82, dir * 12, 78); ctx.bezierCurveTo(dir * 17, 55, dir * 18, 25, dir * 14, 0); ctx.closePath(); ctx.fill(); ctx.stroke(); // Pants ctx.fillStyle = this.clothingColor; ctx.beginPath(); ctx.moveTo(dir * -15, 0); ctx.bezierCurveTo(dir * -18, 15, dir * -18, 30, dir * -16, 45); ctx.lineTo(dir * 16, 45); ctx.bezierCurveTo(dir * 18, 30, dir * 18, 15, dir * 15, 0); ctx.closePath(); ctx.fill(); } drawSlicedLowerLeg(ctx, skinBase, skinDark, isLeft) { const dir = isLeft ? -1 : 1; // Calf ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(dir * -10, 4); ctx.bezierCurveTo(dir * -13, 25, dir * -11, 55, dir * -7, 75); ctx.bezierCurveTo(dir * -4, 78, dir * 6, 78, dir * 9, 75); ctx.bezierCurveTo(dir * 12, 55, dir * 13, 25, dir * 10, 4); ctx.closePath(); ctx.fill(); ctx.stroke(); // Foot ctx.beginPath(); ctx.moveTo(dir * -10, 78); ctx.bezierCurveTo(dir * -12, 83, dir * -14, 92, dir * -12, 98); ctx.bezierCurveTo(dir * -6, 102, dir * 12, 102, dir * 16, 98); ctx.bezierCurveTo(dir * 18, 92, dir * 15, 83, dir * 10, 78); ctx.closePath(); ctx.fill(); ctx.stroke(); } drawSliceEdge(ctx) { const sl = this.sliceLine; const fleshColor = '#5cc85c'; const boneColor = '#e8d8b0'; // Calculate slice line properties const dx = sl.end.x - sl.start.x; const dy = sl.end.y - sl.start.y; const len = Math.sqrt(dx * dx + dy * dy); const nx = -dy / len; // Normal pointing into this piece const ny = dx / len; const mult = this.side === 'above' ? 1 : -1; // Draw exposed flesh along the cut ctx.fillStyle = fleshColor; ctx.beginPath(); ctx.moveTo(sl.start.x, sl.start.y); ctx.lineTo(sl.end.x, sl.end.y); ctx.lineTo(sl.end.x + nx * mult * 8, sl.end.y + ny * mult * 8); ctx.lineTo(sl.start.x + nx * mult * 8, sl.start.y + ny * mult * 8); ctx.closePath(); ctx.fill(); // Draw bone if this is a large enough cut if (len > 20) { const midX = (sl.start.x + sl.end.x) / 2; const midY = (sl.start.y + sl.end.y) / 2; ctx.fillStyle = boneColor; ctx.beginPath(); ctx.ellipse(midX + nx * mult * 4, midY + ny * mult * 4, 6, 4, Math.atan2(dy, dx), 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#a89880'; ctx.lineWidth = 1; ctx.stroke(); } // Blood drip effect at edge ctx.fillStyle = '#3dcc10'; const numDrips = Math.ceil(len / 15); for (let i = 0; i < numDrips; i++) { const t = (i + 0.5) / numDrips; const dripX = sl.start.x + dx * t; const dripY = sl.start.y + dy * t; ctx.beginPath(); ctx.ellipse(dripX + nx * mult * 2, dripY + ny * mult * 2, 2 + Math.random() * 2, 3 + Math.random() * 4, 0, 0, Math.PI * 2); ctx.fill(); } // Outline the cut edge ctx.strokeStyle = '#5a2030'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(sl.start.x, sl.start.y); ctx.lineTo(sl.end.x, sl.end.y); ctx.stroke(); } darkenColor(color, amount) { const c = this.hexToRgb(color); const r = Math.max(0, Math.round(c.r * (1 - amount))); const g = Math.max(0, Math.round(c.g * (1 - amount))); const b = Math.max(0, Math.round(c.b * (1 - amount))); return `rgb(${r},${g},${b})`; } lightenColor(color, amount) { const c = this.hexToRgb(color); const r = Math.min(255, Math.round(c.r + (255 - c.r) * amount)); const g = Math.min(255, Math.round(c.g + (255 - c.g) * amount)); const b = Math.min(255, Math.round(c.b + (255 - c.b) * amount)); return `rgb(${r},${g},${b})`; } hexToRgb(hex) { if (hex.startsWith('rgb')) { const match = hex.match(/rgb$(\d+),\s*(\d+),\s*(\d+)$/); if (match) { return { r: parseInt(match[1]), g: parseInt(match[2]), b: parseInt(match[3]) }; } } const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : { r: 100, g: 120, b: 100 }; } } // ============================================================================ // INTERACTIVE SWORD STATE // ============================================================================ const sword = { active: false, // Is sword mode active? x: 360, // Sword center X y: 400, // Sword center Y targetX: 360, // Target position for smooth movement targetY: 400, velocityX: 0, // Smoothed velocity for stable movement velocityY: 0, angle: -45, // Sword rotation in degrees targetAngle: -45, // Target angle for smooth rotation length: 180, // Blade length handleLength: 50, // Handle length width: 12, // Blade width dragging: false, // Is currently being dragged? following: false, // Is sword following the cursor continuously? dropping: false, // Is sword dropping after collapse? dropVelocityY: 0, // Vertical velocity when dropping dropAngularVel: 0, // Angular velocity when dropping dragOffsetX: 0, // Offset from touch to sword center dragOffsetY: 0, prevX: 360, // Previous frame position (for slice detection) prevY: 400, prevAngle: -45, sliceTrail: [], // Visual trail effect hitCooldowns: {}, // Prevent rapid re-hits on same part kills: 0, // Kills in this sword session smoothing: 0.25, // Position smoothing factor (lower = smoother) angleSmoothng: 0.12, // Angle smoothing factor (lower = less wobbly) // Sawing state - similar to chainsaw but with less blood sawingParts: {}, // Tracks damage per part: { partName: { damage: 0-100, startTime, lastHitPoint } } sawingActive: false, // Is zombie currently being cut? detachThreshold: 100, // Damage needed to detach a part damagePerHit: 8, // Damage applied per frame of contact spasmsIntensity: 0, // Current spasm intensity (0-1) // Delayed collapse system partsReadyToDetach: {}, // Parts that have reached damage threshold collapseStartTime: null, // When the first part reached threshold collapseDelay: 3000 // 3 seconds delay before collapse }; // ============================================================================ // INTERACTIVE FLAMETHROWER STATE // ============================================================================ const flamethrower = { active: false, // Is flamethrower mode active? nozzleX: CANVAS_WIDTH / 2, // Nozzle position (bottom center) nozzleY: CANVAS_HEIGHT - 80, targetX: CANVAS_WIDTH / 2, // Where flame is shooting targetY: CANVAS_HEIGHT / 2, firing: false, // Is currently firing? flameParticles: [], // Active flame stream particles burnDamage: 0, // Accumulated burn damage on zombie burnThreshold: 100, // Damage needed to kill lastFireTime: 0, // For fire sound management fireSound: null // Reference to looping fire sound }; // ============================================================================ // INTERACTIVE CHAINSAW STATE // ============================================================================ const chainsaw = { active: false, // Is chainsaw mode active? x: 360, // Chainsaw center X y: 400, // Chainsaw center Y targetX: 360, // Target position for smooth movement targetY: 400, velocityX: 0, // Smoothed velocity for stable movement velocityY: 0, angle: 0, // Chainsaw rotation in degrees targetAngle: 0, // Target angle for smooth rotation bladeLength: 200, // Blade length (doubled) bodyWidth: 120, // Main body width (doubled) bodyHeight: 80, // Main body height (doubled) dragging: false, // Is currently being dragged? dragOffsetX: 0, // Offset from touch to chainsaw center dragOffsetY: 0, prevX: 360, // Previous frame position (for collision detection) prevY: 400, prevAngle: 0, hitCooldowns: {}, // Prevent rapid re-hits on same part kills: 0, // Kills in this chainsaw session smoothing: 0.25, // Position smoothing factor angleSmoothing: 0.15, // Angle smoothing factor teethOffset: 0, // Animated teeth offset soundPlaying: false, // Is chainsaw sound playing? // Sawing state - zombie spasms before parts detach sawingParts: {}, // Tracks damage per part: { partName: { damage: 0-100, startTime, lastHitPoint } } sawingActive: false, // Is zombie currently being sawed? detachThreshold: 100, // Damage needed to detach a part damagePerHit: 8, // Damage applied per frame of contact spasmsIntensity: 0, // Current spasm intensity (0-1) // Delayed collapse system - zombie stands for 3 seconds before collapsing partsReadyToDetach: {}, // Parts that have reached damage threshold: { partName: { force, time } } collapseStartTime: null, // When the first part reached threshold collapseDelay: 3000 // 3 seconds delay before collapse }; // ============================================================================ // ZOMBIE CLASS - Ragdoll physics with realistic joints and weighted limbs // ============================================================================ class Zombie { constructor(x, y, scale = 1.0) { this.baseX = x; this.baseY = y; this.scale = scale; // Colors from config this.bodyColor = window.gameConfig.zombie.bodyColor || '#3da854'; this.clothingColor = window.gameConfig.zombie.clothingColor || '#2a1f5e'; this.outlineColor = '#1a1a1a'; this.outlineWidth = 2.5; // =========================================== // PROPORTIONS REFERENCE (based on 7.5 head heights) // Total height: ~400px at scale 1.0 // Head height: ~53px (1 unit) // Torso: ~160px (3 units) - from neck to crotch // Legs: ~180px (3.4 units) - from crotch to feet // Arms: reach to mid-thigh (~200px from shoulder) // =========================================== // Ragdoll physics settings this.ragdollEnabled = true; this.gravity = 1800; // Fast falling for detached parts this.damping = 0.99; this.angularDamping = 0.98; this.stiffness = 0.3; // Joint stiffness (0 = loose, 1 = rigid) // Initialize body parts this.resetParts(); // Generate random face for this zombie this.generateRandomFace(); // Blinking state this.blinkTimer = Math.random() * 3; // Start at random time this.isBlinking = false; this.blinkDuration = 0; this.blinkInterval = 2.5 + Math.random() * 2; // Blink every 2.5-4.5 seconds } // Generate randomized face parameters for variety // Uses constrained ranges for cohesive, readable zombie faces generateRandomFace() { // Hair style types: 0=sparse, 1=normal, 2=messy, 3=mohawk, 4=bald // Weight towards normal styles (less extreme) const hairRoll = Math.random(); const hairStyle = hairRoll < 0.15 ? 4 : // 15% bald hairRoll < 0.25 ? 3 : // 10% mohawk hairRoll < 0.40 ? 0 : // 15% sparse hairRoll < 0.70 ? 1 : 2; // 30% normal, 30% messy const numSpikes = hairStyle === 4 ? 0 : hairStyle === 0 ? 3 + Math.floor(Math.random() * 2) : // 3-4 sparse hairStyle === 3 ? 5 + Math.floor(Math.random() * 2) : // 5-6 mohawk hairStyle === 1 ? 5 + Math.floor(Math.random() * 3) : // 5-7 normal 7 + Math.floor(Math.random() * 4); // 7-10 messy // Hair color variations (zombie-appropriate greens/grays) const hairColors = [ '#1a3520', '#0f2a18', '#2a4a30', '#1a2a20', '#2a3a2a', '#1a3a30' ]; const hairColor = hairColors[Math.floor(Math.random() * hairColors.length)]; // Eye shape - both eyes same shape for coherence, slight variation allowed const baseEyeShape = Math.floor(Math.random() * 3); // 0=round, 1=oval, 2=bulging (no squinty) const leftEyeShape = baseEyeShape; const rightEyeShape = Math.random() > 0.8 ? (baseEyeShape + 1) % 3 : baseEyeShape; // 20% different // Iris/eye colors (yellowed zombie eyes) const eyeColors = ['#f0e8a0', '#f5e090', '#fff0a0', '#e8e0a0']; const eyeColor = eyeColors[Math.floor(Math.random() * eyeColors.length)]; // Base eye size - both eyes similar with slight asymmetry // Use configurable min/max eye size range const maxEyeSize = window.gameConfig.zombie.maxEyeSize || 14; const minEyeSize = window.gameConfig.zombie.minEyeSize || 8; // Ensure min doesn't exceed max const effectiveMin = Math.min(minEyeSize, maxEyeSize); const effectiveMax = Math.max(minEyeSize, maxEyeSize); const baseEyeSize = effectiveMin + Math.random() * (effectiveMax - effectiveMin); const eyeSizeVariation = (Math.random() - 0.5) * 2; // -1 to +1 variation between eyes // Calculate actual eye sizes const leftEyeSizeVal = baseEyeSize - eyeSizeVariation; const rightEyeSizeVal = baseEyeSize + eyeSizeVariation; // Calculate eye widths based on shape to prevent overlap // Shape multipliers: round=1.0, oval=1.2, bulging=1.3 const getEyeWidthMult = (shape) => { switch(shape) { case 0: return 1.0; // Round case 1: return 1.2; // Oval case 2: return 1.3; // Bulging default: return 1.0; } }; const leftEyeWidth = leftEyeSizeVal * getEyeWidthMult(leftEyeShape); const rightEyeWidth = rightEyeSizeVal * getEyeWidthMult(rightEyeShape); // Calculate eye X positions dynamically to ensure minimum gap of 4px between eyes const minGap = 4; const totalEyeSpan = leftEyeWidth * 2 + minGap + rightEyeWidth * 2; const leftEyeXVal = -(leftEyeWidth + minGap / 2); const rightEyeXVal = rightEyeWidth + minGap / 2; // Base eye Y position const baseEyeY = -6 - Math.random() * 2; // -6 to -8 const eyeYVariation = (Math.random() - 0.5) * 2; // slight height difference // Pupil look direction - both pupils look roughly same direction const lookDirX = (Math.random() - 0.5) * 4; // -2 to +2 from center const lookDirY = (Math.random() - 0.5) * 3; // -1.5 to +1.5 from center // Mouth - constrained for readability const mouthOpen = Math.random(); // 0 = closed, 1 = wide open const mouthWidth = 12 + mouthOpen * 6; // 12-18 const mouthHeight = 4 + mouthOpen * 10; // 4-14 this.faceParams = { hairSpikes: [], hairStyle: hairStyle, hairColor: hairColor, hairThickness: 0.9 + Math.random() * 0.2, // 0.9-1.1 (subtle) // Eyes - controlled asymmetry with dynamic positioning to prevent overlap leftEyeSize: leftEyeSizeVal, rightEyeSize: rightEyeSizeVal, leftEyeY: baseEyeY - eyeYVariation, rightEyeY: baseEyeY + eyeYVariation, leftEyeX: leftEyeXVal, // Dynamically calculated to prevent overlap rightEyeX: rightEyeXVal, // Dynamically calculated to prevent overlap leftEyeTilt: (Math.random() - 0.5) * 0.15, // Very subtle tilt rightEyeTilt: (Math.random() - 0.5) * 0.15, leftEyeShape: leftEyeShape, rightEyeShape: rightEyeShape, eyeColor: eyeColor, bloodshotLevel: 0.3 + Math.random() * 0.5, // 0.3-0.8 (always somewhat bloodshot) // Pupils - coordinated look direction (use dynamic eye positions) leftPupilX: leftEyeXVal + lookDirX + (Math.random() - 0.5) * 1, // Small individual variation leftPupilY: baseEyeY + lookDirY + (Math.random() - 0.5) * 1, rightPupilX: rightEyeXVal + lookDirX + (Math.random() - 0.5) * 1, rightPupilY: baseEyeY + lookDirY + (Math.random() - 0.5) * 1, pupilSize: 3 + Math.random() * 1.5, // 3-4.5 (consistent) pupilDilation: 0.3 + Math.random() * 0.4, // 0.3-0.7 (not extreme) // Mouth - controlled mouthWidth: mouthWidth, mouthHeight: mouthHeight, mouthY: 30 + Math.random() * 3, // 30-33 (stable position) mouthSkew: (Math.random() - 0.5) * 2, // -1 to +1 (subtle) mouthShape: Math.random() > 0.7 ? 1 : 0, // 70% oval, 30% rectangular, no jagged lipThickness: 0.6 + Math.random() * 0.4, // 0.6-1.0 tongueSize: 0.7 + Math.random() * 0.3, // 0.7-1.0 tongueOut: Math.random() > 0.85, // 15% chance (rare) drooling: Math.random() > 0.75, // 25% chance // Teeth - more consistent sizing upperTeeth: [], lowerTeeth: [], teethColor: Math.random() > 0.4 ? '#e0dcb0' : '#d0cca0', // Decay patches decayPatches: [], // Nose - subtle variations noseSize: 0.85 + Math.random() * 0.3, // 0.85-1.15 (close to normal) noseSkew: (Math.random() - 0.5) * 2, // -1 to +1 (subtle) noseShape: 0, // Always normal shape // Ears - similar sizes leftEarSize: 0.85 + Math.random() * 0.3, rightEarSize: 0.85 + Math.random() * 0.3, missingEar: Math.random() > 0.92 ? (Math.random() > 0.5 ? 'left' : 'right') : null, // 8% chance // Wrinkles - fewer numWrinkles: Math.floor(Math.random() * 3), // 0-2 // Brow - subtle browRidge: 0.6 + Math.random() * 0.4, // 0.6-1.0 browFurrow: Math.random() > 0.6, // 40% furrowed // Face shape - minimal modifiers cheekSunken: Math.random() * 0.2, // 0-0.2 (subtle) jawWidth: 0.95 + Math.random() * 0.1, // 0.95-1.05 (nearly normal) foreheadBulge: Math.random() * 0.1, // 0-0.1 (minimal) // Scars and wounds - less frequent scars: [], hasGash: Math.random() > 0.85, // 15% chance (rare) gashSide: Math.random() > 0.5 ? 'left' : 'right', // Skin texture - reduced veinCount: Math.floor(Math.random() * 2), // 0-1 veins warts: Math.floor(Math.random() * 2), // 0-1 warts }; // Generate hair spikes - densely packed, attached to head if (hairStyle === 3) { // Mohawk - evenly spaced down center for (let i = 0; i < numSpikes; i++) { const t = numSpikes > 1 ? i / (numSpikes - 1) : 0.5; this.faceParams.hairSpikes.push({ x: -6 + t * 12, // Spread across top y: -38, // Fixed Y - all start at same level h: 20 + Math.random() * 15, angle: (Math.random() - 0.5) * 0.3, width: 6 + Math.random() * 3 // Wider spikes }); } } else if (hairStyle !== 4) { // Not bald - densely packed spikes const baseSpread = hairStyle === 2 ? 50 : 45; // Wider coverage for (let i = 0; i < numSpikes; i++) { // Distribute spikes evenly with overlap const t = numSpikes > 1 ? i / (numSpikes - 1) : 0.5; const baseX = -baseSpread/2 + t * baseSpread; this.faceParams.hairSpikes.push({ x: baseX + (Math.random() - 0.5) * 3, // Minimal randomization for tight coverage y: -38, // Fixed Y - all attach at same point on head h: 15 + Math.random() * (hairStyle === 2 ? 15 : 10), angle: (Math.random() - 0.5) * (hairStyle === 2 ? 0.5 : 0.3), // Less angle variation width: (5 + Math.random() * 2) * this.faceParams.hairThickness // Wider base }); } } // Generate upper teeth - more consistent sizing const upperTeethPositions = [-10, -5, 0, 5, 10]; const baseToothHeight = 5 + Math.random() * 2; // Consistent base height upperTeethPositions.forEach((x, i) => { const missingChance = 0.15; // 15% missing if (Math.random() > missingChance) { this.faceParams.upperTeeth.push({ x: x + (Math.random() - 0.5) * 1.5, // Slight position variation w: 4 + Math.random() * 1.5, // 4-5.5 width h: baseToothHeight + (Math.random() - 0.5) * 2, // Slight height variation angle: (Math.random() - 0.5) * 0.15, // Very slight angle broken: Math.random() > 0.88 // 12% broken }); } }); // Generate lower teeth - fewer, smaller const lowerTeethPositions = [-7, 0, 7]; lowerTeethPositions.forEach(x => { if (Math.random() > 0.4) { // 60% chance this.faceParams.lowerTeeth.push({ x: x + (Math.random() - 0.5) * 2, w: 3 + Math.random() * 1, h: 3 + Math.random() * 1.5, broken: Math.random() > 0.9 }); } }); // Generate decay patches - smaller, fewer, better positioned const numPatches = 2 + Math.floor(Math.random() * 3); // 2-4 patches for (let i = 0; i < numPatches; i++) { // Position patches on cheeks/forehead, avoiding eyes/mouth const side = Math.random() > 0.5 ? 1 : -1; const patchX = side * (15 + Math.random() * 15); // On cheeks const patchY = -15 + Math.random() * 40; // Forehead to chin this.faceParams.decayPatches.push({ x: patchX, y: patchY, w: 4 + Math.random() * 5, // 4-9 width h: 3 + Math.random() * 4, // 3-7 height angle: Math.random() * Math.PI, depth: 0.3 + Math.random() * 0.4 // 0.3-0.7 (moderate) }); } // Generate scars - fewer, shorter const numScars = Math.random() > 0.6 ? 1 : 0; // 40% chance of 1 scar for (let i = 0; i < numScars; i++) { const startX = (Math.random() - 0.5) * 30; const startY = -10 + Math.random() * 30; const length = 10 + Math.random() * 15; const angle = Math.random() * Math.PI; this.faceParams.scars.push({ x1: startX, y1: startY, x2: startX + Math.cos(angle) * length, y2: startY + Math.sin(angle) * length, width: 1 + Math.random() * 0.5 }); } } resetParts() { // Each part has ragdoll physics properties // Mass affects how much gravity/forces affect it // Joint constraints limit rotation this.parts = { // Torso is the root - heaviest, most stable torso: { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, // Ragdoll properties mass: 8, // Heaviest - anchor point length: 160, // Height of torso jointX: 0, jointY: -70, // Neck joint position (top of torso) hipJointY: 80, // Hip joint position (bottom of torso) minAngle: -15, maxAngle: 15, // Torso can sway slightly restAngle: 0 }, // Head - light, dangles from neck head: { x: 0, y: -115, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, // Ragdoll properties mass: 2, // Light length: 50, // Head height pivotY: 42, // Distance from center to neck attachment minAngle: -45, maxAngle: 45, // Head can wobble restAngle: 0 }, // Upper Arms - shoulder to elbow (~70px) leftUpperArm: { x: -48, y: -65, rotation: 8, // Slight outward angle at rest scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 1.0, length: 70, pivotY: 0, minAngle: -60, maxAngle: 160, restAngle: 8 }, rightUpperArm: { x: 48, y: -65, rotation: -8, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 1.0, length: 70, pivotY: 0, minAngle: -160, maxAngle: 60, restAngle: -8 }, // Forearms - elbow to hand (~120px including hand) leftForearm: { x: -48, y: 5, // Positioned at elbow rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 0.8, length: 120, pivotY: 0, minAngle: -5, maxAngle: 145, // Elbow can only bend one way restAngle: 0 }, rightForearm: { x: 48, y: 5, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 0.8, length: 120, pivotY: 0, minAngle: -145, maxAngle: 5, // Mirror of left restAngle: 0 }, // Thighs - hip to knee (~80px) leftThigh: { x: -22, y: 80, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 2.0, length: 80, pivotY: 0, minAngle: -45, maxAngle: 90, restAngle: 0 }, rightThigh: { x: 22, y: 80, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 2.0, length: 80, pivotY: 0, minAngle: -90, maxAngle: 45, restAngle: 0 }, // Lower legs - knee to foot (~100px including foot) leftLowerLeg: { x: -22, y: 160, // Positioned at knee rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 1.5, length: 100, pivotY: 0, minAngle: -135, maxAngle: 5, // Knee bends backward restAngle: 0 }, rightLowerLeg: { x: 22, y: 160, rotation: 0, scaleX: 1, scaleY: 1, visible: true, attached: true, velocityX: 0, velocityY: 0, angularVelocity: 0, alpha: 1, mass: 1.5, length: 100, pivotY: 0, minAngle: -5, maxAngle: 135, // Mirror of left restAngle: 0 } }; // Joint connections define the hierarchy (now includes elbows and knees) this.joints = [ { parent: 'torso', child: 'head', parentOffset: { x: 0, y: -115 } }, // Arms: shoulder -> elbow -> hand { parent: 'torso', child: 'leftUpperArm', parentOffset: { x: -48, y: -65 } }, { parent: 'torso', child: 'rightUpperArm', parentOffset: { x: 48, y: -65 } }, { parent: 'leftUpperArm', child: 'leftForearm', parentOffset: { x: 0, y: 70 } }, // Elbow joint { parent: 'rightUpperArm', child: 'rightForearm', parentOffset: { x: 0, y: 70 } }, // Legs: hip -> knee -> foot { parent: 'torso', child: 'leftThigh', parentOffset: { x: -22, y: 80 } }, { parent: 'torso', child: 'rightThigh', parentOffset: { x: 22, y: 80 } }, { parent: 'leftThigh', child: 'leftLowerLeg', parentOffset: { x: 0, y: 80 } }, // Knee joint { parent: 'rightThigh', child: 'rightLowerLeg', parentOffset: { x: 0, y: 80 } } ]; // Global zombie state this.globalAlpha = 1; this.globalScale = 1; this.frozen = false; this.burning = false; this.charred = false; this.melting = false; this.meltProgress = 0; this.crushed = false; this.crushScale = 1; this.anvilPancake = false; this.skeleton = false; this.holeY = null; this.holeRadius = 0; // Acid dissolve state this.acidDissolving = false; this.acidDissolveY = -200; this.acidSkeleton = false; // Electrocution state this.electrocuting = false; this.electrocutedSkeleton = false; // Ragdoll state this.isRagdolling = false; this.idleSwayTime = 0; // Bleeding stumps (cleared on reset) this.stumps = []; } // Apply an impulse force to the zombie (for explosions, impacts, etc.) applyImpulse(forceX, forceY, affectAll = true) { this.isRagdolling = true; if (affectAll) { // Apply to torso first (root) this.parts.torso.velocityX += forceX / this.parts.torso.mass; this.parts.torso.velocityY += forceY / this.parts.torso.mass; this.parts.torso.angularVelocity += (forceX * 0.1) / this.parts.torso.mass; // Apply scaled force to limbs (lighter parts move more) for (const partName in this.parts) { if (partName !== 'torso') { const part = this.parts[partName]; const massRatio = this.parts.torso.mass / part.mass; part.angularVelocity += (forceX * 0.3 * massRatio + (Math.random() - 0.5) * 100) / part.mass; } } } } // Apply force to a specific part applyForceTopart(partName, forceX, forceY) { const part = this.parts[partName]; if (part && part.attached) { part.velocityX += forceX / part.mass; part.velocityY += forceY / part.mass; part.angularVelocity += forceX * 0.2 / part.mass; this.isRagdolling = true; } } draw(ctx) { ctx.save(); ctx.translate(this.baseX, this.baseY); ctx.scale(this.scale * this.globalScale, this.scale * this.globalScale); ctx.globalAlpha = this.globalAlpha; // Apply crush effect - squish from the bottom (feet stay planted) if (this.crushed) { const bottomY = 280; // Bottom of zombie (feet) in local coords // Widen horizontally as it flattens (volume conservation pancake effect) const hScale = 1 + (1 - this.crushScale) * 3.5; // spreads wide as crushed flat ctx.translate(0, bottomY); ctx.scale(hScale, this.crushScale); ctx.translate(0, -bottomY); } // If anvil pancake mode, draw a flat pancake with two eyes instead of the zombie if (this.anvilPancake) { this.drawAnvilPancake(ctx); ctx.restore(); return; } // Draw order: lower legs, thighs, torso, (straps), upper arms, forearms, head // Arms (both upper and forearms) drawn AFTER torso so they always appear in front of the body const drawOrder = [ 'leftLowerLeg', 'rightLowerLeg', // Lower legs (behind thighs) 'leftThigh', 'rightThigh', // Thighs 'torso', // Torso (straps drawn on top of this) 'leftUpperArm', 'rightUpperArm', // Upper arms (in front of torso) 'leftForearm', 'rightForearm', // Forearms (in front of upper arms and torso) 'head' ]; for (const partName of drawOrder) { const part = this.parts[partName]; if (!part || !part.visible) continue; // Draw guillotine blade between torso and head (behind head, in front of body) if (partName === 'head' && guillotineBladeState.active) { ctx.save(); // Convert blade world position to zombie-local coords const bladeLocalX = (guillotineBladeState.x - this.baseX) / (this.scale * this.globalScale); const bladeLocalY = (guillotineBladeState.y - this.baseY) / (this.scale * this.globalScale); ctx.translate(bladeLocalX, bladeLocalY); ctx.scale(guillotineBladeState.scale, guillotineBladeState.scale); // Draw blade shape ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(-40, 0); ctx.lineTo(40, 0); ctx.lineTo(40, 20); ctx.lineTo(0, 50); ctx.lineTo(-40, 20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); } ctx.save(); // Position let px = part.x; let py = part.y; // If detached, use absolute position if (!part.attached) { px = part.x; py = part.y; } ctx.translate(px, py); ctx.rotate(part.rotation * Math.PI / 180); ctx.scale(part.scaleX, part.scaleY); // Store scale compensation so line widths don't scale up with inflated parts this._partScaleFactor = Math.max(part.scaleX, part.scaleY, 1); ctx.globalAlpha = this.globalAlpha * part.alpha; // Apply melting effect if (this.melting && part.attached) { const meltOffset = this.meltProgress * 50; ctx.translate(0, meltOffset); ctx.scale(1 + this.meltProgress * 0.3, 1 - this.meltProgress * 0.5); } // Draw the part this.drawPart(ctx, partName, part); ctx.restore(); // Draw rocket straps OVER torso but UNDER arms (sandwich layer) if (partName === 'torso' && rocketRenderState.active && rocketRenderState.strapsOut > 0) { this.drawRocketStrapsFront(ctx); } } ctx.restore(); } drawPart(ctx, partName, part) { let fillColor = this.bodyColor; let strokeColor = this.outlineColor; // Get part-specific burn level const burnLevel = part.burnLevel || 0; const burnProgress = burnLevel / 100; // 0 to 1 // Determine if this part should show as skeleton (burned away flesh) // Burn stages: 0-80% = charring to black over 5 seconds, 80-100% = flesh fades to reveal skeleton const showSkeleton = burnLevel >= 100; // Only show full skeleton when completely burned const fleshFading = burnLevel >= 80 && burnLevel < 100; // Flesh is fading away const partCharred = burnLevel >= 60; // Fully black/charred // Calculate flesh opacity for the fade-to-skeleton phase let fleshOpacity = 1; if (fleshFading) { // Fade from 1 to 0 as burnLevel goes from 80 to 100 fleshOpacity = 1 - ((burnLevel - 80) / 20); } // ==== ACID DISSOLVE EFFECT ==== // Check if acid is dissolving and calculate how much of this part is dissolved let acidDissolveAmount = 0; // 0 = not dissolved, 1 = fully dissolved let acidPartialDissolve = false; const isAcidDissolving = this.acidDissolving && this.acidDissolveY !== undefined; const isAcidSkeleton = this.acidSkeleton; if (isAcidDissolving || isAcidSkeleton) { // Get part's vertical position range (in zombie-relative coords) const partYRanges = { head: { top: -170, bottom: -70 }, torso: { top: -70, bottom: 80 }, leftUpperArm: { top: -65, bottom: 5 }, rightUpperArm: { top: -65, bottom: 5 }, leftForearm: { top: 5, bottom: 125 }, rightForearm: { top: 5, bottom: 125 }, leftThigh: { top: 80, bottom: 160 }, rightThigh: { top: 80, bottom: 160 }, leftLowerLeg: { top: 160, bottom: 280 }, rightLowerLeg: { top: 160, bottom: 280 } }; const range = partYRanges[partName]; if (range) { const dissolveY = this.acidDissolveY; if (dissolveY >= range.bottom) { // Part is fully dissolved acidDissolveAmount = 1; } else if (dissolveY > range.top) { // Part is partially dissolved acidDissolveAmount = (dissolveY - range.top) / (range.bottom - range.top); acidPartialDissolve = true; } // else acidDissolveAmount stays 0 (not dissolved yet) } } // ==== CHAINSAW DAMAGE EFFECT ==== // Parts turn blood red when being sawed const chainsawDamage = part.chainsawDamage || 0; // Modify colors based on state if (this.frozen) { fillColor = '#88e0f8'; strokeColor = '#4ab8d8'; } else if (showSkeleton || this.skeleton) { // Fully burned - show skeleton only fillColor = '#2a2a2a'; strokeColor = '#1a1a1a'; } else if (partCharred) { // Heavily charred - dark black (60-100%) fillColor = '#1a1a1a'; strokeColor = '#0a0a0a'; } else if (chainsawDamage > 0) { // Chainsaw damage - turn progressively blood red // Lerp from body color to dark blood red based on damage const bloodRed = '#3dcc10'; const deepRed = '#1a5a00'; fillColor = this.lerpColor(this.bodyColor, bloodRed, chainsawDamage); strokeColor = this.lerpColor(this.outlineColor, deepRed, chainsawDamage); } else if (burnLevel > 0) { // Burning - gradual darkening over 5 seconds (0-60%) if (burnLevel < 15) { // Early burn - slight orange glow const glowProgress = burnLevel / 15; fillColor = this.lerpColor(this.bodyColor, '#cc5500', glowProgress); } else if (burnLevel < 35) { // Darkening - orange to dark brown const darkProgress = (burnLevel - 15) / 20; fillColor = this.lerpColor('#cc5500', '#4a3020', darkProgress); } else { // Charring - dark brown to black const charProgress = (burnLevel - 35) / 25; fillColor = this.lerpColor('#4a3020', '#1a1a1a', charProgress); } strokeColor = this.lerpColor(this.outlineColor, '#0a0a0a', burnLevel / 60); } else if (this.charred) { fillColor = '#2a2a2a'; strokeColor = '#1a1a1a'; } else if (this.burning) { fillColor = this.lerpColor(this.bodyColor, '#ff6600', 0.5); } // ==== VAPORIZE STATIC EFFECT ==== if (this.vaporizeStatic && this.vaporizeStatic > 0 && Math.random() < this.vaporizeStatic) { const staticColors = ['#ff44aa', '#cc22ff', '#ff66cc', '#aa00ff', '#ff88dd', '#dd44ff', '#ee33bb', '#bb11ee']; fillColor = staticColors[Math.floor(Math.random() * staticColors.length)]; strokeColor = '#660066'; } ctx.fillStyle = fillColor; ctx.strokeStyle = strokeColor; ctx.lineWidth = this.outlineWidth / (this._partScaleFactor || 1); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // Store line width compensation factor so draw methods can use unscaled lines this._lwScale = this._partScaleFactor || 1; // Store burn state for draw methods to access this._currentPartBurnLevel = burnLevel; this._currentPartShowSkeleton = showSkeleton || this.skeleton; this._currentPartFleshFading = fleshFading; this._currentPartFleshOpacity = fleshOpacity; this._currentPartColor = fillColor; this._currentPartOutline = strokeColor; // Store acid state for draw methods this._currentPartAcidDissolve = acidDissolveAmount; this._currentPartAcidPartial = acidPartialDissolve; this._isAcidSkeleton = isAcidSkeleton; let currentClothingColor = this.clothingColor; if (this.frozen) { currentClothingColor = '#a8d8ea'; } else if (showSkeleton || this.skeleton || partCharred || this.charred) { currentClothingColor = '#1a1a1a'; } else if (chainsawDamage > 0) { // Chainsaw damage - clothing also turns blood red currentClothingColor = this.lerpColor(this.clothingColor, '#1a5a00', chainsawDamage); } else if (burnLevel > 0) { if (burnLevel < 15) { currentClothingColor = this.lerpColor(this.clothingColor, '#cc5500', burnLevel / 15); } else if (burnLevel < 35) { currentClothingColor = this.lerpColor('#cc5500', '#4a3020', (burnLevel - 15) / 20); } else { currentClothingColor = this.lerpColor('#4a3020', '#1a1a1a', (burnLevel - 35) / 25); } } else if (this.burning) { currentClothingColor = this.lerpColor(this.clothingColor, '#ff6600', 0.5); } if (this.vaporizeStatic && this.vaporizeStatic > 0 && Math.random() < this.vaporizeStatic) { const staticColors = ['#ff44aa', '#cc22ff', '#ff66cc', '#aa00ff', '#ff88dd', '#dd44ff', '#ee33bb', '#bb11ee']; currentClothingColor = staticColors[Math.floor(Math.random() * staticColors.length)]; } this._currentPartClothing = currentClothingColor; // If flesh is fading, draw skeleton underneath first, then charred flesh on top with opacity if (fleshFading && !this.skeleton) { // Draw skeleton underneath ctx.save(); switch (partName) { case 'head': this.drawSkull(ctx); break; case 'torso': this.drawRibcage(ctx); break; case 'leftUpperArm': case 'rightUpperArm': this.drawUpperArmBones(ctx, partName === 'leftUpperArm'); break; case 'leftForearm': case 'rightForearm': this.drawForearmBones(ctx, partName === 'leftForearm'); break; case 'leftThigh': case 'rightThigh': this.drawThighBones(ctx, partName === 'leftThigh'); break; case 'leftLowerLeg': case 'rightLowerLeg': this.drawLowerLegBones(ctx, partName === 'leftLowerLeg'); break; } ctx.restore(); // Now draw the charred flesh on top with fading opacity ctx.globalAlpha = fleshOpacity * this.globalAlpha * part.alpha; } // ==== ELECTROCUTION EFFECT ==== // When electrocuting, draw white skeleton first, then black skin at 50% transparency if (this.electrocuting && !this.skeleton) { // Draw WHITE skeleton underneath first ctx.save(); this._electrocutedSkeletonMode = true; // Flag for white skeleton colors switch (partName) { case 'head': this.drawSkull(ctx); break; case 'torso': this.drawRibcage(ctx); break; case 'leftUpperArm': case 'rightUpperArm': this.drawUpperArmBones(ctx, partName === 'leftUpperArm'); break; case 'leftForearm': case 'rightForearm': this.drawForearmBones(ctx, partName === 'leftForearm'); break; case 'leftThigh': case 'rightThigh': this.drawThighBones(ctx, partName === 'leftThigh'); break; case 'leftLowerLeg': case 'rightLowerLeg': this.drawLowerLegBones(ctx, partName === 'leftLowerLeg'); break; } this._electrocutedSkeletonMode = false; ctx.restore(); // Now draw the black skin at 50% transparency on top ctx.globalAlpha = 0.5 * this.globalAlpha * part.alpha; // Override colors to black for electrocuted flesh this._currentPartColor = '#1a1a1a'; this._currentPartOutline = '#0a0a0a'; this._currentPartClothing = '#0a0a0a'; } // ==== ACID DISSOLVE RENDERING ==== // If acid is dissolving this part, draw green skeleton first, then flesh with clipping if ((acidDissolveAmount > 0 || isAcidSkeleton) && !this.skeleton && !showSkeleton) { // Draw green smoldering skeleton underneath ctx.save(); this._acidSkeletonMode = true; // Flag for green skeleton colors switch (partName) { case 'head': this.drawSkull(ctx); break; case 'torso': this.drawRibcage(ctx); break; case 'leftUpperArm': case 'rightUpperArm': this.drawUpperArmBones(ctx, partName === 'leftUpperArm'); break; case 'leftForearm': case 'rightForearm': this.drawForearmBones(ctx, partName === 'leftForearm'); break; case 'leftThigh': case 'rightThigh': this.drawThighBones(ctx, partName === 'leftThigh'); break; case 'leftLowerLeg': case 'rightLowerLeg': this.drawLowerLegBones(ctx, partName === 'leftLowerLeg'); break; } this._acidSkeletonMode = false; ctx.restore(); // Smoldering effect removed - only smoke particles now // If fully dissolved, skip drawing flesh entirely if (acidDissolveAmount >= 1) { // Reset state this._currentPartAcidDissolve = 0; this._currentPartAcidPartial = false; return; // Don't draw flesh at all } // For partial dissolve, clip the flesh to only show undissolved portion if (acidPartialDissolve) { ctx.save(); // Create clipping region for undissolved flesh (below the dissolve line) // The dissolve line in part-local coords const partYRanges = { head: { top: -170, bottom: -70, localTop: -50, localBottom: 50 }, torso: { top: -70, bottom: 80, localTop: -80, localBottom: 90 }, leftUpperArm: { top: -65, bottom: 5, localTop: 0, localBottom: 75 }, rightUpperArm: { top: -65, bottom: 5, localTop: 0, localBottom: 75 }, leftForearm: { top: 5, bottom: 125, localTop: 0, localBottom: 120 }, rightForearm: { top: 5, bottom: 125, localTop: 0, localBottom: 120 }, leftThigh: { top: 80, bottom: 160, localTop: 0, localBottom: 85 }, rightThigh: { top: 80, bottom: 160, localTop: 0, localBottom: 85 }, leftLowerLeg: { top: 160, bottom: 280, localTop: 0, localBottom: 110 }, rightLowerLeg: { top: 160, bottom: 280, localTop: 0, localBottom: 110 } }; const range = partYRanges[partName]; if (range) { // Calculate local Y position of dissolve line const localDissolveY = range.localTop + acidDissolveAmount * (range.localBottom - range.localTop); // Clip to area below the dissolve line (undissolved flesh) ctx.beginPath(); ctx.rect(-200, localDissolveY, 400, 400); ctx.clip(); } } } switch (partName) { case 'head': this.drawHead(ctx); break; case 'torso': this.drawTorso(ctx); break; case 'leftUpperArm': case 'rightUpperArm': this.drawUpperArm(ctx, partName === 'leftUpperArm'); break; case 'leftForearm': case 'rightForearm': this.drawForearm(ctx, partName === 'leftForearm'); break; case 'leftThigh': case 'rightThigh': this.drawThigh(ctx, partName === 'leftThigh'); break; case 'leftLowerLeg': case 'rightLowerLeg': this.drawLowerLeg(ctx, partName === 'leftLowerLeg'); break; } // Restore if we applied acid clipping if (acidPartialDissolve && acidDissolveAmount < 1) { ctx.restore(); // Draw dissolve edge effect (sizzling acid line) this.drawAcidDissolveEdge(ctx, partName, acidDissolveAmount); } // Draw smoldering embers overlay for heavily burned parts if (burnLevel >= 40 && burnLevel < 100 && !showSkeleton) { this.drawSmolderingEffect(ctx, partName); } // Draw bee sting marks on this part (red welts that follow body movement) if (part.stingMarks && part.stingMarks.length > 0) { ctx.save(); part.stingMarks.forEach(mark => { ctx.fillStyle = '#ff2222'; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 6; ctx.beginPath(); ctx.arc(mark.x, mark.y, 4 + mark.size, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.fillStyle = '#ff6666'; ctx.beginPath(); ctx.arc(mark.x, mark.y, 2, 0, Math.PI * 2); ctx.fill(); }); ctx.shadowBlur = 0; ctx.restore(); } // Reset burn state this._currentPartBurnLevel = 0; this._currentPartShowSkeleton = false; this._currentPartFleshFading = false; this._currentPartFleshOpacity = 1; } drawSmolderingEffect(ctx, partName) { // Draw glowing ember cracks on charring flesh const dims = { head: { width: 60, height: 80 }, torso: { width: 80, height: 150 }, leftUpperArm: { width: 25, height: 65 }, rightUpperArm: { width: 25, height: 65 }, leftForearm: { width: 20, height: 100 }, rightForearm: { width: 20, height: 100 }, leftThigh: { width: 30, height: 75 }, rightThigh: { width: 30, height: 75 }, leftLowerLeg: { width: 25, height: 90 }, rightLowerLeg: { width: 25, height: 90 } }; const dim = dims[partName]; if (!dim) return; ctx.strokeStyle = '#ff4400'; ctx.lineWidth = 1.5; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 8; // Draw glowing cracks const numCracks = 3; for (let i = 0; i < numCracks; i++) { const startX = (Math.random() - 0.5) * dim.width * 0.8; const startY = (Math.random() - 0.5) * dim.height * 0.6; ctx.beginPath(); ctx.moveTo(startX, startY); let x = startX; let y = startY; const segments = 2 + Math.floor(Math.random() * 2); for (let j = 0; j < segments; j++) { x += (Math.random() - 0.5) * 15; y += Math.random() * 12; ctx.lineTo(x, y); } ctx.stroke(); } ctx.shadowBlur = 0; } // Draw smoldering green glow effect on acid-dissolved skeleton drawAcidSmolderEffect(ctx, partName, dissolveAmount) { const dims = { head: { width: 60, height: 80 }, torso: { width: 80, height: 150 }, leftUpperArm: { width: 25, height: 65 }, rightUpperArm: { width: 25, height: 65 }, leftForearm: { width: 20, height: 100 }, rightForearm: { width: 20, height: 100 }, leftThigh: { width: 30, height: 75 }, rightThigh: { width: 30, height: 75 }, leftLowerLeg: { width: 25, height: 90 }, rightLowerLeg: { width: 25, height: 90 } }; const dim = dims[partName]; if (!dim) return; // Green glowing cracks on the exposed skeleton ctx.strokeStyle = '#88ff22'; ctx.lineWidth = 1.5; ctx.shadowColor = '#88ff22'; ctx.shadowBlur = 10; // Only draw in the dissolved area const numCracks = Math.floor(dissolveAmount * 4); for (let i = 0; i < numCracks; i++) { const startX = (Math.random() - 0.5) * dim.width * 0.7; // Start in dissolved area (negative Y is up, dissolved area is at top) const startY = -dim.height * 0.5 + Math.random() * dim.height * dissolveAmount * 0.8; ctx.beginPath(); ctx.moveTo(startX, startY); let x = startX; let y = startY; const segments = 2 + Math.floor(Math.random() * 2); for (let j = 0; j < segments; j++) { x += (Math.random() - 0.5) * 12; y += Math.random() * 10; ctx.lineTo(x, y); } ctx.stroke(); } // Add some dripping acid glow points ctx.fillStyle = '#88ff22'; const numDrips = Math.floor(dissolveAmount * 3); for (let i = 0; i < numDrips; i++) { const dx = (Math.random() - 0.5) * dim.width * 0.6; const dy = -dim.height * 0.4 + Math.random() * dim.height * dissolveAmount * 0.6; ctx.beginPath(); ctx.arc(dx, dy, 2 + Math.random() * 2, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; } // Draw the sizzling dissolve edge where acid meets flesh drawAcidDissolveEdge(ctx, partName, dissolveAmount) { const dims = { head: { width: 60, localTop: -50, localBottom: 50 }, torso: { width: 80, localTop: -80, localBottom: 90 }, leftUpperArm: { width: 25, localTop: 0, localBottom: 75 }, rightUpperArm: { width: 25, localTop: 0, localBottom: 75 }, leftForearm: { width: 20, localTop: 0, localBottom: 120 }, rightForearm: { width: 20, localTop: 0, localBottom: 120 }, leftThigh: { width: 30, localTop: 0, localBottom: 85 }, rightThigh: { width: 30, localTop: 0, localBottom: 85 }, leftLowerLeg: { width: 25, localTop: 0, localBottom: 110 }, rightLowerLeg: { width: 25, localTop: 0, localBottom: 110 } }; const dim = dims[partName]; if (!dim) return; // Calculate local Y position of dissolve line const localDissolveY = dim.localTop + dissolveAmount * (dim.localBottom - dim.localTop); // Draw sizzling/bubbling edge ctx.save(); // Glowing acid line ctx.strokeStyle = '#88ff22'; ctx.lineWidth = 3; ctx.shadowColor = '#88ff22'; ctx.shadowBlur = 15; // Wavy dissolve line ctx.beginPath(); ctx.moveTo(-dim.width, localDissolveY); for (let x = -dim.width; x <= dim.width; x += 5) { const wobble = Math.sin(x * 0.3 + Date.now() * 0.01) * 3; ctx.lineTo(x, localDissolveY + wobble); } ctx.stroke(); // Bubbling effect along the edge ctx.fillStyle = '#88ff22'; for (let i = 0; i < 5; i++) { const bx = (Math.random() - 0.5) * dim.width * 1.5; const by = localDissolveY + (Math.random() - 0.5) * 8; const size = 2 + Math.random() * 3; ctx.beginPath(); ctx.arc(bx, by, size, 0, Math.PI * 2); ctx.fill(); } // Dripping acid below the edge ctx.fillStyle = '#ADFF2F'; for (let i = 0; i < 3; i++) { const dx = (Math.random() - 0.5) * dim.width; const dy = localDissolveY + 5 + Math.random() * 15; ctx.beginPath(); ctx.ellipse(dx, dy, 2, 4 + Math.random() * 4, 0, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; ctx.restore(); } drawHead(ctx) { // HEAD PROPORTIONS: Cartoon-style matching thumbnail // Rounder face, big bulging eyes, wide scared mouth, spiky hair // Now uses randomized face parameters for variety! if (this._currentPartShowSkeleton) { this.drawSkull(ctx); return; } const skinBase = this._currentPartColor || this.bodyColor; const skinDark = this.darkenColor(skinBase, 0.35); const skinLight = this.lightenColor(skinBase, 0.15); const outlineColor = this._currentPartOutline || this.outlineColor; // Get face parameters (use defaults if not generated) const fp = this.faceParams || {}; // Head shadow ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.beginPath(); ctx.ellipse(3, 5, 34, 38, 0, 0, Math.PI * 2); ctx.fill(); // Messy spiky hair (behind head) - skip drawing if helmet is worn const hairBase = fp.hairColor || '#2a3a2a'; const hairDark = this.darkenColor(hairBase, 0.22); const hairSpikes = fp.hairSpikes || []; const hairThickness = fp.hairThickness || 1; if (this._helmetOn) { // Helmet covers hair - skip all hair drawing } else { // Draw hair base layer first - covers the scalp completely if (hairSpikes.length > 0) { ctx.fillStyle = hairDark; ctx.beginPath(); // Create a solid cap that follows the top curve of the head ctx.ellipse(0, -25, 32, 18, 0, Math.PI, 0, true); // Top arc of head ctx.closePath(); ctx.fill(); } // Draw hair spikes with varying thickness ctx.fillStyle = hairDark; hairSpikes.forEach(spike => { ctx.save(); ctx.translate(spike.x, spike.y); ctx.rotate(spike.angle); const w = (spike.width || 5) * hairThickness; // More organic spike shape ctx.beginPath(); ctx.moveTo(-w, 0); ctx.quadraticCurveTo(-w * 0.3, -spike.h * 0.6, 0, -spike.h); ctx.quadraticCurveTo(w * 0.3, -spike.h * 0.6, w, 0); ctx.closePath(); ctx.fill(); ctx.restore(); }); // Add some hair strands between spikes for fuller look if ((fp.hairStyle || 1) >= 2 && hairSpikes.length > 2) { ctx.strokeStyle = hairDark; ctx.lineWidth = 2; for (let i = 0; i < hairSpikes.length - 1; i++) { if (i % 2 === 0) { // Deterministic alternating strands const s1 = hairSpikes[i]; const s2 = hairSpikes[i + 1]; const pseudoRandomX = ((s1.h * 10) % 6) - 3; const pseudoRandomH = 8 + ((s2.h * 10) % 10); ctx.beginPath(); ctx.moveTo((s1.x + s2.x) / 2, Math.min(s1.y, s2.y) + 5); ctx.lineTo((s1.x + s2.x) / 2 + pseudoRandomX, Math.min(s1.y, s2.y) - pseudoRandomH); ctx.stroke(); } } } } // end !this._helmetOn hair block // Ears - drawn BEFORE head fill so they appear behind the head const leftEarSize = fp.leftEarSize || 1; const rightEarSize = fp.rightEarSize || 1; const missingEar = fp.missingEar || null; // Left ear (behind head) if (missingEar !== 'left') { ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(-32, 0, 7 * leftEarSize, 12 * leftEarSize, 0.15, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; ctx.stroke(); // Ear hole ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(-32, 0, 3 * leftEarSize, 5 * leftEarSize, 0.15, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = '#5a2535'; ctx.beginPath(); ctx.ellipse(-32, 0, 5, 8, 0.15, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.5; ctx.stroke(); } // Right ear (behind head) if (missingEar !== 'right') { ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(32, 0, 7 * rightEarSize, 12 * rightEarSize, -0.15, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; ctx.stroke(); // Ear hole ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(32, 0, 3 * rightEarSize, 5 * rightEarSize, -0.15, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = '#5a2535'; ctx.beginPath(); ctx.ellipse(32, 0, 5, 8, -0.15, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.5; ctx.stroke(); } // Main head shape - rounder, cartoon style ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; if (_ir > 0) { // Blend toward perfect circle as inflation increases const headR = 34 + _ir * 4; // slightly larger circle ctx.beginPath(); ctx.arc(0, 2, headR, 0, Math.PI * 2); ctx.fill(); } else { ctx.beginPath(); ctx.moveTo(0, -38); // Top of head ctx.bezierCurveTo(-28, -38, -34, -15, -32, 5); // Left side upper ctx.bezierCurveTo(-30, 20, -26, 32, -18, 40); // Left cheek ctx.bezierCurveTo(-10, 46, 10, 46, 18, 40); // Chin area ctx.bezierCurveTo(26, 32, 30, 20, 32, 5); // Right cheek ctx.bezierCurveTo(34, -15, 28, -38, 0, -38); // Right side upper ctx.closePath(); ctx.fill(); } // Dark spots/patches on skin (zombie decay) - RANDOMIZED with varying depth const patches = fp.decayPatches || []; patches.forEach(p => { ctx.fillStyle = this.darkenColor(skinBase, 0.2 + (p.depth || 0.5) * 0.2); ctx.beginPath(); ctx.ellipse(p.x, p.y, p.w, p.h, p.angle, 0, Math.PI * 2); ctx.fill(); // Deeper patches get an outline if ((p.depth || 0.5) > 0.7) { ctx.strokeStyle = this.darkenColor(skinBase, 0.4); ctx.lineWidth = 1; ctx.stroke(); } }); // Scars - RANDOMIZED const scars = fp.scars || []; ctx.strokeStyle = this.lightenColor(skinBase, 0.15); ctx.lineCap = 'round'; scars.forEach(s => { ctx.lineWidth = s.width || 1.5; ctx.beginPath(); ctx.moveTo(s.x1, s.y1); ctx.lineTo(s.x2, s.y2); ctx.stroke(); }); // Face gash wound if (fp.hasGash) { const gashX = fp.gashSide === 'left' ? -15 : 15; ctx.fillStyle = '#5a2030'; ctx.beginPath(); ctx.moveTo(gashX - 3, -5); ctx.quadraticCurveTo(gashX - 5, 10, gashX - 2, 25); ctx.quadraticCurveTo(gashX + 2, 10, gashX + 3, -5); ctx.closePath(); ctx.fill(); // Gash depth/flesh ctx.fillStyle = '#5cc85c'; ctx.beginPath(); ctx.ellipse(gashX, 10, 2, 12, 0.1, 0, Math.PI * 2); ctx.fill(); } // Veins - visible under skin const veinCount = fp.veinCount || 0; if (veinCount > 0) { ctx.strokeStyle = 'rgba(80, 60, 80, 0.4)'; ctx.lineWidth = 1; for (let i = 0; i < veinCount; i++) { const startX = (i % 2 === 0 ? -1 : 1) * (15 + i * 5); const startY = -15 + i * 10; ctx.beginPath(); ctx.moveTo(startX, startY); // Use deterministic curves based on index instead of Math.random ctx.bezierCurveTo( startX + ((i * 3) % 10 - 5), startY + 10, startX + ((i * 7) % 10 - 5), startY + 20, startX + ((i * 11) % 15 - 7.5), startY + 30 ); ctx.stroke(); } } // Warts const warts = fp.warts || 0; if (warts > 0) { ctx.fillStyle = this.darkenColor(skinBase, 0.15); for (let i = 0; i < warts; i++) { const wx = (i === 0 ? 20 : (i === 1 ? -18 : 5)); const wy = (i === 0 ? 15 : (i === 1 ? 25 : -15)); const wSize = 3 + ((i * 1.5) % 2); // Deterministic size ctx.beginPath(); ctx.arc(wx, wy, wSize, 0, Math.PI * 2); ctx.fill(); // Wart highlight ctx.fillStyle = this.lightenColor(skinBase, 0.1); ctx.beginPath(); ctx.arc(wx - 1, wy - 1, 1, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = this.darkenColor(skinBase, 0.15); } } // Forehead wrinkles - RANDOMIZED count ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; const numWrinkles = fp.numWrinkles || 2; for (let i = 0; i < numWrinkles; i++) { const y = -28 + i * 5; const spread = 15 - i * 3; ctx.beginPath(); ctx.moveTo(-spread, y); ctx.quadraticCurveTo(0, y - 2, spread, y); ctx.stroke(); } // Nose - RANDOMIZED size and position const noseSize = fp.noseSize || 1; const noseSkew = fp.noseSkew || 0; ctx.fillStyle = skinBase; ctx.save(); ctx.translate(noseSkew, 0); ctx.scale(noseSize, noseSize); ctx.beginPath(); ctx.moveTo(-2, 8); ctx.quadraticCurveTo(-8, 20, -6, 24); ctx.quadraticCurveTo(0, 28, 6, 24); ctx.quadraticCurveTo(8, 20, 2, 8); ctx.closePath(); ctx.fill(); ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5 / noseSize; ctx.stroke(); // Nostrils ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.ellipse(-3, 22, 2.5, 3, 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(3, 22, 2.5, 3, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Wide open scared mouth - RANDOMIZED width, height, shape and position const mouthWidth = fp.mouthWidth || 18; const mouthHeight = fp.mouthHeight || 16; const mouthSkew = fp.mouthSkew || 0; const mouthY = fp.mouthY || 30; const mouthShape = fp.mouthShape || 0; const lipThickness = fp.lipThickness || 0.8; const tongueSize = fp.tongueSize || 0.8; const tongueOut = fp.tongueOut || false; const drooling = fp.drooling || false; const teethColor = fp.teethColor || '#d4d0b8'; const isClosedMouth = mouthHeight < 2; if (isClosedMouth) { // Natural human smile (closed mouth) ctx.save(); ctx.strokeStyle = '#8a333a'; // natural dark pink lip color ctx.lineWidth = 1.5 + lipThickness * 2; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(-mouthWidth + mouthSkew, mouthY); // Gentle curve down for a smile ctx.quadraticCurveTo(mouthSkew, mouthY + 3 + (mouthWidth * 0.15), mouthWidth + mouthSkew, mouthY); ctx.stroke(); // Lower lip subtle shading ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(-mouthWidth * 0.4 + mouthSkew, mouthY + 2 + lipThickness); ctx.quadraticCurveTo(mouthSkew, mouthY + 4 + lipThickness + (mouthWidth * 0.1), mouthWidth * 0.4 + mouthSkew, mouthY + 2 + lipThickness); ctx.stroke(); ctx.restore(); } else { // Mouth cavity - shape varies ctx.fillStyle = '#4a1020'; ctx.beginPath(); if (mouthShape === 0) { // Oval ctx.ellipse(mouthSkew, mouthY + mouthHeight/2, mouthWidth, mouthHeight/2, 0, 0, Math.PI * 2); } else if (mouthShape === 1) { // Rectangular/wide const cornerRadius = 4; ctx.moveTo(-mouthWidth + cornerRadius + mouthSkew, mouthY); ctx.lineTo(mouthWidth - cornerRadius + mouthSkew, mouthY); ctx.quadraticCurveTo(mouthWidth + mouthSkew, mouthY, mouthWidth + mouthSkew, mouthY + cornerRadius); ctx.lineTo(mouthWidth + mouthSkew, mouthY + mouthHeight - cornerRadius); ctx.quadraticCurveTo(mouthWidth + mouthSkew, mouthY + mouthHeight, mouthWidth - cornerRadius + mouthSkew, mouthY + mouthHeight); ctx.lineTo(-mouthWidth + cornerRadius + mouthSkew, mouthY + mouthHeight); ctx.quadraticCurveTo(-mouthWidth + mouthSkew, mouthY + mouthHeight, -mouthWidth + mouthSkew, mouthY + mouthHeight - cornerRadius); ctx.lineTo(-mouthWidth + mouthSkew, mouthY + cornerRadius); ctx.quadraticCurveTo(-mouthWidth + mouthSkew, mouthY, -mouthWidth + cornerRadius + mouthSkew, mouthY); } else { // Jagged/asymmetric ctx.moveTo(-mouthWidth + mouthSkew, mouthY); ctx.lineTo(-mouthWidth * 0.5 + mouthSkew, mouthY + 3); ctx.lineTo(mouthSkew, mouthY - 2); ctx.lineTo(mouthWidth * 0.6 + mouthSkew, mouthY + 2); ctx.lineTo(mouthWidth + mouthSkew, mouthY); ctx.quadraticCurveTo(mouthWidth + 4 + mouthSkew, mouthY + mouthHeight/2, mouthWidth - 2 + mouthSkew, mouthY + mouthHeight); ctx.lineTo(mouthWidth * 0.4 + mouthSkew, mouthY + mouthHeight - 3); ctx.lineTo(mouthSkew, mouthY + mouthHeight + 2); ctx.lineTo(-mouthWidth * 0.5 + mouthSkew, mouthY + mouthHeight - 2); ctx.lineTo(-mouthWidth + 2 + mouthSkew, mouthY + mouthHeight); ctx.quadraticCurveTo(-mouthWidth - 4 + mouthSkew, mouthY + mouthHeight/2, -mouthWidth + mouthSkew, mouthY); } ctx.closePath(); ctx.fill(); // Upper gum/lip - varies by thickness ctx.fillStyle = '#5a2535'; ctx.beginPath(); ctx.moveTo(-mouthWidth + 2 + mouthSkew, mouthY + 2); ctx.quadraticCurveTo(mouthSkew, mouthY + 3 + lipThickness * 3, mouthWidth - 2 + mouthSkew, mouthY + 2); ctx.lineTo(mouthWidth - 4 + mouthSkew, mouthY + 5 + lipThickness * 2); ctx.quadraticCurveTo(mouthSkew, mouthY + 6 + lipThickness * 3, -mouthWidth + 4 + mouthSkew, mouthY + 5 + lipThickness * 2); ctx.closePath(); ctx.fill(); // Upper teeth - RANDOMIZED (some missing, uneven, some broken) const upperTeeth = fp.upperTeeth || []; ctx.fillStyle = teethColor; upperTeeth.forEach(t => { ctx.save(); ctx.translate(t.x + mouthSkew, mouthY + 4 + lipThickness * 2); ctx.rotate(t.angle || 0); // Tooth shape - can be broken ctx.beginPath(); if (t.broken) { // Broken tooth - jagged top ctx.moveTo(-t.w/2, 0); ctx.lineTo(-t.w/2 + 1, t.h * 0.6); ctx.lineTo(-t.w/4, t.h * 0.5); ctx.lineTo(0, t.h * 0.7); ctx.lineTo(t.w/4, t.h * 0.4); ctx.lineTo(t.w/2 - 1, t.h * 0.6); ctx.lineTo(t.w/2, 0); } else { ctx.moveTo(-t.w/2, 0); ctx.lineTo(-t.w/2 + 1, t.h); ctx.lineTo(t.w/2 - 1, t.h); ctx.lineTo(t.w/2, 0); } ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 0.5; ctx.stroke(); ctx.restore(); }); // Lower gum ctx.fillStyle = '#5a2535'; ctx.beginPath(); ctx.moveTo(-mouthWidth + 4 + mouthSkew, mouthY + mouthHeight - lipThickness * 2); ctx.quadraticCurveTo(mouthSkew, mouthY + mouthHeight - lipThickness * 3, mouthWidth - 4 + mouthSkew, mouthY + mouthHeight - lipThickness * 2); ctx.lineTo(mouthWidth - 2 + mouthSkew, mouthY + mouthHeight - 2); ctx.quadraticCurveTo(mouthSkew, mouthY + mouthHeight, -mouthWidth + 2 + mouthSkew, mouthY + mouthHeight - 2); ctx.closePath(); ctx.fill(); // Lower teeth - RANDOMIZED (fewer, more gaps) const lowerTeeth = fp.lowerTeeth || []; lowerTeeth.forEach(t => { ctx.fillStyle = teethColor; ctx.beginPath(); if (t.broken) { ctx.moveTo(t.x - t.w/2 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - 1); ctx.lineTo(t.x - t.w/4 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - t.h * 0.7); ctx.lineTo(t.x + t.w/4 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - t.h * 0.5); ctx.lineTo(t.x + t.w/2 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - 1); } else { ctx.moveTo(t.x - t.w/2 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - 1); ctx.lineTo(t.x - t.w/2 + 1 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - t.h); ctx.lineTo(t.x + t.w/2 - 1 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - t.h); ctx.lineTo(t.x + t.w/2 + mouthSkew, mouthY + mouthHeight - lipThickness * 2 - 1); } ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 0.5; ctx.stroke(); }); // Tongue - varies by size and can stick out ctx.fillStyle = '#8b4050'; if (tongueOut) { // Tongue sticking out ctx.beginPath(); ctx.ellipse(mouthSkew + 3, mouthY + mouthHeight + 5 * tongueSize, 10 * tongueSize, 12 * tongueSize, 0.2, 0, Math.PI * 2); ctx.fill(); // Tongue line ctx.strokeStyle = '#6a3040'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(mouthSkew + 3, mouthY + mouthHeight); ctx.lineTo(mouthSkew + 3, mouthY + mouthHeight + 10 * tongueSize); ctx.stroke(); } else { ctx.beginPath(); ctx.ellipse(mouthSkew, mouthY + mouthHeight - 3 * lipThickness, 8 * tongueSize, 5 * tongueSize, 0, 0, Math.PI); ctx.fill(); } // Drool if (drooling) { ctx.fillStyle = 'rgba(180, 200, 180, 0.7)'; const droolX = mouthSkew + (Math.floor(mouthWidth) % 2 === 0 ? mouthWidth * 0.5 : -mouthWidth * 0.3); ctx.beginPath(); ctx.moveTo(droolX, mouthY + mouthHeight); ctx.quadraticCurveTo(droolX + 2, mouthY + mouthHeight + 15, droolX - 1, mouthY + mouthHeight + 25); ctx.quadraticCurveTo(droolX - 3, mouthY + mouthHeight + 15, droolX, mouthY + mouthHeight); ctx.fill(); } // Mouth outline ctx.strokeStyle = outlineColor; ctx.lineWidth = 2; ctx.beginPath(); if (mouthShape === 0) { ctx.ellipse(mouthSkew, mouthY + mouthHeight/2, mouthWidth, mouthHeight/2, 0, 0, Math.PI * 2); } else if (mouthShape === 1) { const cornerRadius = 4; ctx.moveTo(-mouthWidth + cornerRadius + mouthSkew, mouthY); ctx.lineTo(mouthWidth - cornerRadius + mouthSkew, mouthY); ctx.quadraticCurveTo(mouthWidth + mouthSkew, mouthY, mouthWidth + mouthSkew, mouthY + cornerRadius); ctx.lineTo(mouthWidth + mouthSkew, mouthY + mouthHeight - cornerRadius); ctx.quadraticCurveTo(mouthWidth + mouthSkew, mouthY + mouthHeight, mouthWidth - cornerRadius + mouthSkew, mouthY + mouthHeight); ctx.lineTo(-mouthWidth + cornerRadius + mouthSkew, mouthY + mouthHeight); ctx.quadraticCurveTo(-mouthWidth + mouthSkew, mouthY + mouthHeight, -mouthWidth + mouthSkew, mouthY + mouthHeight - cornerRadius); ctx.lineTo(-mouthWidth + mouthSkew, mouthY + cornerRadius); ctx.quadraticCurveTo(-mouthWidth + mouthSkew, mouthY, -mouthWidth + cornerRadius + mouthSkew, mouthY); ctx.closePath(); } else { ctx.moveTo(-mouthWidth + mouthSkew, mouthY); ctx.lineTo(-mouthWidth * 0.5 + mouthSkew, mouthY + 3); ctx.lineTo(mouthSkew, mouthY - 2); ctx.lineTo(mouthWidth * 0.6 + mouthSkew, mouthY + 2); ctx.lineTo(mouthWidth + mouthSkew, mouthY); ctx.quadraticCurveTo(mouthWidth + 4 + mouthSkew, mouthY + mouthHeight/2, mouthWidth - 2 + mouthSkew, mouthY + mouthHeight); ctx.lineTo(-mouthWidth + 2 + mouthSkew, mouthY + mouthHeight); ctx.quadraticCurveTo(-mouthWidth - 4 + mouthSkew, mouthY + mouthHeight/2, -mouthWidth + mouthSkew, mouthY); } ctx.stroke(); } // Neck stump (drawn before eyes so eyes appear on top) ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(0, 46, 14, 6, 0, 0, Math.PI * 2); ctx.fill(); // Head outline (drawn before eyes so eyes appear on top) ctx.strokeStyle = outlineColor; ctx.lineWidth = 2.5 / this._lwScale; if (_ir > 0) { const headR = 34 + _ir * 4; ctx.beginPath(); ctx.arc(0, 2, headR, 0, Math.PI * 2); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(0, -38); ctx.bezierCurveTo(-28, -38, -34, -15, -32, 5); ctx.bezierCurveTo(-30, 20, -26, 32, -18, 40); ctx.bezierCurveTo(-10, 46, 10, 46, 18, 40); ctx.bezierCurveTo(26, 32, 30, 20, 32, 5); ctx.bezierCurveTo(34, -15, 28, -38, 0, -38); ctx.stroke(); } // Hair on top of head (in front layer) - skip if helmet is worn if (!this._helmetOn) { ctx.fillStyle = hairDark; const frontHairCount = Math.max(0, Math.floor((fp.hairSpikes || []).length / 3)); for (let i = 0; i < frontHairCount; i++) { const spike = hairSpikes[i % hairSpikes.length]; if (spike && spike.y > -45) { ctx.save(); ctx.translate(spike.x * 0.8, spike.y + 5); ctx.rotate(spike.angle * 0.7); const w2 = ((spike.width || 5) * 0.8) * (fp.hairThickness || 1); ctx.beginPath(); ctx.moveTo(-w2, 0); ctx.quadraticCurveTo(-w2 * 0.3, -spike.h * 0.4, 0, -spike.h * 0.6); ctx.quadraticCurveTo(w2 * 0.3, -spike.h * 0.4, w2, 0); ctx.closePath(); ctx.fill(); ctx.restore(); } } // Occasional single strand hanging down (drawn before eyes) if ((fp.hairStyle || 1) >= 1 && hairSpikes.length > 3 && (Math.floor(hairSpikes[0].h) % 2 === 0)) { const sx = -8 + (Math.floor(hairSpikes[1].h) % 16); const cx2 = -5 + (Math.floor(hairSpikes[2].h) % 10); const ex = -3 + (Math.floor(hairSpikes[3].h) % 6); ctx.strokeStyle = hairDark; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(sx, -30); ctx.quadraticCurveTo(cx2, -15, ex, -5); ctx.stroke(); } } // end !this._helmetOn front hair block // Big bulging eyes - RANDOMIZED sizes, positions and shapes // DRAWN ABSOLUTELY LAST to ensure eyes appear above ALL other head elements const leftEyeSize = fp.leftEyeSize || 14; const rightEyeSize = fp.rightEyeSize || 14; const leftEyeY = fp.leftEyeY || -6; const rightEyeY = fp.rightEyeY || -6; const leftEyeX = fp.leftEyeX || -12; const rightEyeX = fp.rightEyeX || 12; const leftEyeTilt = fp.leftEyeTilt || 0.1; const rightEyeTilt = fp.rightEyeTilt || -0.1; const eyeColor = fp.eyeColor || '#e8e4c8'; const leftEyeShape = fp.leftEyeShape || 0; const rightEyeShape = fp.rightEyeShape || 0; // Calculate eye dimensions based on shape const getEyeDims = (size, shape) => { switch(shape) { case 0: return { w: size, h: size + 2 }; // Round case 1: return { w: size * 1.2, h: size }; // Oval case 2: return { w: size * 1.3, h: size * 1.4 }; // Bulging case 3: return { w: size * 1.1, h: size * 0.6 }; // Squinty default: return { w: size, h: size + 2 }; } }; const leftDims = getEyeDims(leftEyeSize, leftEyeShape); const rightDims = getEyeDims(rightEyeSize, rightEyeShape); // Left eye socket shadow ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(leftEyeX, leftEyeY, leftDims.w + 2, leftDims.h + 4, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); // Right eye socket shadow ctx.beginPath(); ctx.ellipse(rightEyeX, rightEyeY, rightDims.w + 2, rightDims.h + 4, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); // Check if blinking const isBlinking = this.isBlinking && !this.frozen; if (isBlinking) { // Draw closed eyelids ctx.fillStyle = skinBase; ctx.strokeStyle = skinDark; ctx.lineWidth = 2; // Left closed eye - curved line with eyelid ctx.beginPath(); ctx.ellipse(leftEyeX, leftEyeY, leftDims.w, leftDims.h * 0.3, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); // Left eye crease/line ctx.beginPath(); ctx.moveTo(leftEyeX - leftDims.w, leftEyeY); ctx.quadraticCurveTo(leftEyeX, leftEyeY + 3, leftEyeX + leftDims.w, leftEyeY); ctx.stroke(); // Right closed eye ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(rightEyeX, rightEyeY, rightDims.w, rightDims.h * 0.3, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); // Right eye crease/line ctx.beginPath(); ctx.moveTo(rightEyeX - rightDims.w, rightEyeY); ctx.quadraticCurveTo(rightEyeX, rightEyeY + 3, rightEyeX + rightDims.w, rightEyeY); ctx.stroke(); // Eyelash details ctx.strokeStyle = skinDark; ctx.lineWidth = 1; for (let i = 0; i < 3; i++) { const lashX = leftEyeX - leftDims.w * 0.5 + i * leftDims.w * 0.5; ctx.beginPath(); ctx.moveTo(lashX, leftEyeY - 1); ctx.lineTo(lashX, leftEyeY - 4); ctx.stroke(); const rLashX = rightEyeX - rightDims.w * 0.5 + i * rightDims.w * 0.5; ctx.beginPath(); ctx.moveTo(rLashX, rightEyeY - 1); ctx.lineTo(rLashX, rightEyeY - 4); ctx.stroke(); } } else { // Draw open eyes normally // Left eyeball ctx.fillStyle = eyeColor; ctx.beginPath(); ctx.ellipse(leftEyeX, leftEyeY, leftDims.w, leftDims.h, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); // Right eyeball ctx.beginPath(); ctx.ellipse(rightEyeX, rightEyeY, rightDims.w, rightDims.h, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); // Bloodshot veins in eyes - varies with bloodshot level const bloodshotLevel = fp.bloodshotLevel || 0.5; ctx.strokeStyle = this.lerpColor('#8b3030', '#cc2020', bloodshotLevel); ctx.lineWidth = 0.6 + bloodshotLevel * 0.5; const eyePositions = [{x: leftEyeX, y: leftEyeY, dims: leftDims, tilt: leftEyeTilt}, {x: rightEyeX, y: rightEyeY, dims: rightDims, tilt: rightEyeTilt}]; eyePositions.forEach((eye, idx) => { const numVeins = Math.floor(3 + bloodshotLevel * 4); for (let i = 0; i < numVeins; i++) { const angle = (i / numVeins) * Math.PI + (idx === 0 ? Math.PI * 0.7 : Math.PI * 0.3); ctx.beginPath(); ctx.moveTo(eye.x + Math.cos(angle) * (eye.dims.w * 0.3), eye.y + Math.sin(angle) * (eye.dims.h * 0.4)); ctx.lineTo(eye.x + Math.cos(angle) * eye.dims.w, eye.y + Math.sin(angle) * eye.dims.h); ctx.stroke(); } }); // Pupils - RANDOMIZED positions and sizes const pupilBaseSize = fp.pupilSize || 4; const pupilDilation = fp.pupilDilation || 0.5; const pupilSize = pupilBaseSize * (0.7 + pupilDilation * 0.6); const leftPupilX = fp.leftPupilX || leftEyeX + 2; const leftPupilY = fp.leftPupilY || leftEyeY; const rightPupilX = fp.rightPupilX || rightEyeX - 2; const rightPupilY = fp.rightPupilY || rightEyeY; ctx.fillStyle = this.frozen ? '#88ccff' : '#0a0a0a'; // Left pupil ctx.beginPath(); ctx.arc(leftPupilX, leftPupilY, pupilSize, 0, Math.PI * 2); ctx.fill(); // Right pupil ctx.beginPath(); ctx.arc(rightPupilX, rightPupilY, pupilSize, 0, Math.PI * 2); ctx.fill(); // Pupil highlights ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(leftPupilX - 1, leftPupilY - 2, 1.5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(rightPupilX - 1, rightPupilY - 2, 1.5, 0, Math.PI * 2); ctx.fill(); // Eye outlines ctx.strokeStyle = outlineColor; ctx.lineWidth = 2 / this._lwScale; ctx.beginPath(); ctx.ellipse(leftEyeX, leftEyeY, leftDims.w, leftDims.h, leftEyeTilt, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.ellipse(rightEyeX, rightEyeY, rightDims.w, rightDims.h, rightEyeTilt, 0, Math.PI * 2); ctx.stroke(); } // Brow ridge - RANDOMIZED (drawn over eyes) const browRidge = fp.browRidge || 0.7; const browFurrow = fp.browFurrow || false; if (browRidge > 0.3) { ctx.strokeStyle = skinDark; ctx.lineWidth = 2 + browRidge * 2; // Left brow ctx.beginPath(); ctx.moveTo(leftEyeX - leftDims.w - 2, leftEyeY - leftDims.h - 2); if (browFurrow) { ctx.quadraticCurveTo(leftEyeX, leftEyeY - leftDims.h - 8, leftEyeX + leftDims.w + 2, leftEyeY - leftDims.h + 2); } else { ctx.quadraticCurveTo(leftEyeX, leftEyeY - leftDims.h - 5, leftEyeX + leftDims.w, leftEyeY - leftDims.h - 2); } ctx.stroke(); // Right brow ctx.beginPath(); ctx.moveTo(rightEyeX - rightDims.w, rightEyeY - rightDims.h - 2); if (browFurrow) { ctx.quadraticCurveTo(rightEyeX, rightEyeY - rightDims.h - 8, rightEyeX + rightDims.w + 2, rightEyeY - rightDims.h - 2); } else { ctx.quadraticCurveTo(rightEyeX, rightEyeY - rightDims.h - 5, rightEyeX + rightDims.w + 2, rightEyeY - rightDims.h - 2); } ctx.stroke(); } if (this._helmetOn) { drawVaderHelmet(ctx, 0, 0, 1.17); } } drawSkull(ctx) { // SKULL: Matches rounder cartoon head shape // Use green colors if acid skeleton, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark, boneLight; if (isElectrocuted) { // White skeleton from electrocution boneColor = '#f5f5f5'; // Bright white bone boneDark = '#d0d0d0'; // Light gray boneLight = '#ffffff'; // Pure white highlight } else if (isAcid) { // Green smoldering skeleton from acid boneColor = '#2d5a2d'; // Dark green bone boneDark = '#1a3d1a'; // Darker green boneLight = '#4a8a4a'; // Lighter green highlight } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; boneLight = '#3a3a3a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; boneLight = '#f0e8d8'; } // Skull base - rounder shape matching cartoon head ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(0, -36); ctx.bezierCurveTo(-26, -36, -30, -12, -28, 5); ctx.bezierCurveTo(-26, 18, -22, 30, -16, 38); ctx.quadraticCurveTo(0, 46, 16, 38); ctx.bezierCurveTo(22, 30, 26, 18, 28, 5); ctx.bezierCurveTo(30, -12, 26, -36, 0, -36); ctx.closePath(); ctx.fill(); // Skull shading (temples) ctx.fillStyle = boneDark; ctx.beginPath(); ctx.ellipse(-22, -5, 6, 12, 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(22, -5, 6, 12, -0.2, 0, Math.PI * 2); ctx.fill(); // Eye sockets - large and round like cartoon eyes ctx.fillStyle = '#0a0505'; ctx.beginPath(); ctx.ellipse(-12, -6, 12, 14, 0.1, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(12, -6, 12, 14, -0.1, 0, Math.PI * 2); ctx.fill(); // Nasal cavity ctx.beginPath(); ctx.moveTo(0, 8); ctx.lineTo(-5, 20); ctx.lineTo(0, 24); ctx.lineTo(5, 20); ctx.closePath(); ctx.fill(); // Upper teeth ctx.fillStyle = '#e8e0c8'; for (let i = -12; i <= 12; i += 6) { ctx.beginPath(); ctx.rect(i - 2.5, 30, 5, 8); ctx.fill(); ctx.strokeStyle = boneDark; ctx.lineWidth = 0.8; ctx.stroke(); } // Lower teeth (fewer) for (let i = -8; i <= 8; i += 8) { ctx.fillStyle = '#e8e0c8'; ctx.beginPath(); ctx.rect(i - 2, 38, 4, 6); ctx.fill(); } // Jaw separation line ctx.strokeStyle = boneDark; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(-16, 36); ctx.quadraticCurveTo(0, 40, 16, 36); ctx.stroke(); // Skull outline - matches rounder head ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -36); ctx.bezierCurveTo(-26, -36, -30, -12, -28, 5); ctx.bezierCurveTo(-26, 18, -22, 30, -16, 38); ctx.quadraticCurveTo(0, 46, 16, 38); ctx.bezierCurveTo(22, 30, 26, 18, 28, 5); ctx.bezierCurveTo(30, -12, 26, -36, 0, -36); ctx.stroke(); } drawAnvilPancake(ctx) { // Draw a flattened oval with the zombie's actual eyes const pancakeY = 245; // Flattened oval body ctx.fillStyle = this.bodyColor; ctx.beginPath(); ctx.ellipse(0, pancakeY, 115, 14, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = this.darkenColor(this.bodyColor, 0.35); ctx.lineWidth = 3; ctx.stroke(); // Use the zombie's actual face parameters for eyes const fp = this.faceParams || {}; const eyeColor = fp.eyeColor || '#e8e4c8'; const leftEyeSize = fp.leftEyeSize || 14; const rightEyeSize = fp.rightEyeSize || 14; const leftEyeShape = fp.leftEyeShape || 0; const rightEyeShape = fp.rightEyeShape || 0; const leftEyeTilt = fp.leftEyeTilt || 0; const rightEyeTilt = fp.rightEyeTilt || 0; const bloodshotLevel = fp.bloodshotLevel || 0.5; const pupilSize = fp.pupilSize || 4; const pupilDilation = fp.pupilDilation || 0.5; const actualPupilSize = pupilSize * (0.7 + pupilDilation * 0.6); const getEyeDims = (size, shape) => { switch(shape) { case 0: return { w: size, h: size + 2 }; case 1: return { w: size * 1.2, h: size }; case 2: return { w: size * 1.3, h: size * 1.4 }; default: return { w: size, h: size + 2 }; } }; const leftDims = getEyeDims(leftEyeSize, leftEyeShape); const rightDims = getEyeDims(rightEyeSize, rightEyeShape); // Position eyes on the pancake (spread apart) const leftEyeX = -30; const rightEyeX = 30; const eyeY = pancakeY - 14; // Left eye socket shadow const skinDark = this.darkenColor(this.bodyColor, 0.35); ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(leftEyeX, eyeY, leftDims.w + 2, leftDims.h + 3, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); // Right eye socket shadow ctx.beginPath(); ctx.ellipse(rightEyeX, eyeY, rightDims.w + 2, rightDims.h + 3, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); // Check if pancake eyes should be blinking const pancakeBlinking = this.pancakeBlinkState === 'blink1' || this.pancakeBlinkState === 'blink2'; if (pancakeBlinking) { // Draw closed eyelids const skinBase = this.bodyColor; const skinDark = this.darkenColor(skinBase, 0.35); ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(leftEyeX, eyeY, leftDims.w, leftDims.h * 0.3, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = skinDark; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(leftEyeX - leftDims.w, eyeY); ctx.quadraticCurveTo(leftEyeX, eyeY + 3, leftEyeX + leftDims.w, eyeY); ctx.stroke(); ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(rightEyeX, eyeY, rightDims.w, rightDims.h * 0.3, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = skinDark; ctx.beginPath(); ctx.moveTo(rightEyeX - rightDims.w, eyeY); ctx.quadraticCurveTo(rightEyeX, eyeY + 3, rightEyeX + rightDims.w, eyeY); ctx.stroke(); } else { // Left eyeball ctx.fillStyle = eyeColor; ctx.beginPath(); ctx.ellipse(leftEyeX, eyeY, leftDims.w, leftDims.h, leftEyeTilt, 0, Math.PI * 2); ctx.fill(); // Right eyeball ctx.beginPath(); ctx.ellipse(rightEyeX, eyeY, rightDims.w, rightDims.h, rightEyeTilt, 0, Math.PI * 2); ctx.fill(); // Bloodshot veins ctx.strokeStyle = this.lerpColor('#8b3030', '#cc2020', bloodshotLevel); ctx.lineWidth = 0.6 + bloodshotLevel * 0.5; [{x: leftEyeX, y: eyeY, dims: leftDims, tilt: leftEyeTilt}, {x: rightEyeX, y: eyeY, dims: rightDims, tilt: rightEyeTilt}].forEach((eye, idx) => { const numVeins = Math.floor(3 + bloodshotLevel * 4); for (let i = 0; i < numVeins; i++) { const angle = (i / numVeins) * Math.PI + (idx === 0 ? Math.PI * 0.7 : Math.PI * 0.3); ctx.beginPath(); ctx.moveTo(eye.x + Math.cos(angle) * (eye.dims.w * 0.3), eye.y + Math.sin(angle) * (eye.dims.h * 0.4)); ctx.lineTo(eye.x + Math.cos(angle) * eye.dims.w, eye.y + Math.sin(angle) * eye.dims.h); ctx.stroke(); } }); // Pupils (looking up in shock) ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.arc(leftEyeX, eyeY - 2, actualPupilSize, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(rightEyeX, eyeY - 2, actualPupilSize, 0, Math.PI * 2); ctx.fill(); // Pupil highlights ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(leftEyeX - 1, eyeY - 4, 1.5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(rightEyeX - 1, eyeY - 4, 1.5, 0, Math.PI * 2); ctx.fill(); // Eye outlines ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2 / this._lwScale; ctx.beginPath(); ctx.ellipse(leftEyeX, eyeY, leftDims.w, leftDims.h, leftEyeTilt, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.ellipse(rightEyeX, eyeY, rightDims.w, rightDims.h, rightEyeTilt, 0, Math.PI * 2); ctx.stroke(); } } // Draw rocket straps that wrap around the zombie's torso (drawn between torso and arms) drawRocketStrapsFront(ctx) { const sp = rocketRenderState.strapsOut; if (sp <= 0) return; ctx.save(); const strapW = 14; const strapColor = '#5a3a1a'; const strapOutline = '#3a2510'; const buckleColor = '#888'; // Strap positions in zombie-local coordinates (relative to zombie center) // Chest strap at Y = -30 (upper torso) // Waist strap at Y = 30 (lower torso) const strap1Y = -30; const strap2Y = 30; // Torso width at these heights (approximate from torso shape) const torsoWidthAtChest = 38; // Half-width at chest const torsoWidthAtWaist = 34; // Half-width at waist // Draw straps as horizontal bands wrapping around the torso front // They curve slightly to follow the torso shape ctx.fillStyle = strapColor; ctx.strokeStyle = strapOutline; ctx.lineWidth = 2; // Upper strap (chest level) ctx.beginPath(); ctx.moveTo(-torsoWidthAtChest - 5, strap1Y - strapW / 2); ctx.quadraticCurveTo(0, strap1Y - strapW / 2 - 3, torsoWidthAtChest + 5, strap1Y - strapW / 2); ctx.lineTo(torsoWidthAtChest + 5, strap1Y + strapW / 2); ctx.quadraticCurveTo(0, strap1Y + strapW / 2 + 3, -torsoWidthAtChest - 5, strap1Y + strapW / 2); ctx.closePath(); ctx.fill(); ctx.stroke(); // Lower strap (waist level) ctx.beginPath(); ctx.moveTo(-torsoWidthAtWaist - 5, strap2Y - strapW / 2); ctx.quadraticCurveTo(0, strap2Y - strapW / 2 - 2, torsoWidthAtWaist + 5, strap2Y - strapW / 2); ctx.lineTo(torsoWidthAtWaist + 5, strap2Y + strapW / 2); ctx.quadraticCurveTo(0, strap2Y + strapW / 2 + 2, -torsoWidthAtWaist - 5, strap2Y + strapW / 2); ctx.closePath(); ctx.fill(); ctx.stroke(); // Buckle on center of each strap (metallic rectangle) if (sp > 0.8) { const buckleAlpha = (sp - 0.8) / 0.2; ctx.globalAlpha = buckleAlpha * this.globalAlpha; // Upper strap buckle (center) ctx.fillStyle = buckleColor; ctx.fillRect(-8, strap1Y - strapW / 2 - 1, 16, strapW + 2); ctx.strokeStyle = '#555'; ctx.lineWidth = 1.5; ctx.strokeRect(-8, strap1Y - strapW / 2 - 1, 16, strapW + 2); // Buckle prong ctx.fillStyle = '#666'; ctx.fillRect(-2, strap1Y - 2, 4, 4); // Lower strap buckle (center) ctx.fillStyle = buckleColor; ctx.fillRect(-8, strap2Y - strapW / 2 - 1, 16, strapW + 2); ctx.strokeStyle = '#555'; ctx.lineWidth = 1.5; ctx.strokeRect(-8, strap2Y - strapW / 2 - 1, 16, strapW + 2); ctx.fillStyle = '#666'; ctx.fillRect(-2, strap2Y - 2, 4, 4); } ctx.restore(); } drawTorso(ctx) { // TORSO PROPORTIONS: ~160px from shoulders to crotch // Shoulders at y=-70, waist at y=20, hips at y=80 // Width: shoulders ~90px, waist ~60px, hips ~70px if (this._currentPartShowSkeleton) { this.drawRibcage(ctx); return; } const skinBase = this._currentPartColor || this.bodyColor; const skinDark = this.darkenColor(skinBase, 0.3); const skinLight = this.lightenColor(skinBase, 0.2); const fleshColor = '#5cc85c'; const boneColor = '#e8d8b0'; const clothColor = this._currentPartClothing || this.clothingColor; const clothDark = this.darkenColor(clothColor, 0.3); const outlineColor = this._currentPartOutline || this.outlineColor; // Body shadow ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.beginPath(); ctx.moveTo(-42, -68); ctx.bezierCurveTo(-50, -50, -38, 20, -34, 78); ctx.lineTo(37, 78); ctx.bezierCurveTo(41, 20, 53, -50, 45, -68); ctx.closePath(); ctx.fill(); // Main torso shape - interpolates toward ellipse when inflating ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; // 0 = normal, 1 = fully round ctx.beginPath(); if (_ir <= 0) { // Normal angular torso ctx.moveTo(-40, -70); ctx.bezierCurveTo(-48, -60, -42, -30, -36, 0); ctx.bezierCurveTo(-32, 30, -34, 60, -32, 78); ctx.lineTo(32, 78); ctx.bezierCurveTo(34, 60, 32, 30, 36, 0); ctx.bezierCurveTo(42, -30, 48, -60, 40, -70); ctx.closePath(); } else { // Interpolate control points toward a smooth ellipse (radiusX=44, radiusY=78, center=(0,4)) // As _ir goes 0->1, bezier points pull toward circular arc positions const lerp = (a, b, t) => a + (b - a) * t; // Ellipse approximation control points for top/bottom/left/right // We'll use a rounder bezier path const hw = lerp(40, 44, _ir); // half-width at middle const hh = lerp(78, 78, _ir); // half-height stays similar const topW = lerp(40, 44, _ir); // top width const cpBulge = lerp(48, 46, _ir); // control point horizontal push const cpMidX = lerp(36, 44, _ir); const hipW = lerp(32, 44, _ir); const topY = lerp(-70, -74, _ir); const botY = lerp(78, 78, _ir); // Left side ctx.moveTo(-topW, topY); ctx.bezierCurveTo(-cpBulge, lerp(-60, -40, _ir), -cpMidX, lerp(-30, -10, _ir), -cpMidX, 0); ctx.bezierCurveTo(-cpMidX, lerp(30, 20, _ir), -hipW, lerp(60, 55, _ir), -hipW, botY); // Bottom ctx.quadraticCurveTo(0, lerp(78, 84, _ir), hipW, botY); // Right side ctx.bezierCurveTo(hipW, lerp(60, 55, _ir), cpMidX, lerp(30, 20, _ir), cpMidX, 0); ctx.bezierCurveTo(cpMidX, lerp(-30, -10, _ir), cpBulge, lerp(-60, -40, _ir), topW, topY); // Top ctx.quadraticCurveTo(0, lerp(-70, -78, _ir), -topW, topY); ctx.closePath(); } ctx.fill(); // Neck base // Neck base ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(0, -68, 16, 8, 0, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); // Rib hints ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; for (let i = 0; i < 4; i++) { const y = -35 + i * 12; ctx.beginPath(); ctx.moveTo(-4, y); ctx.quadraticCurveTo(-20, y - 3, -32, y + 2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(4, y); ctx.quadraticCurveTo(20, y - 3, 32, y + 2); ctx.stroke(); } // Abdomen ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, 25, 26, 18, 0, 0, Math.PI * 2); ctx.fill(); // Navel ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(0, 28, 3, 5, 0, 0, Math.PI * 2); ctx.fill(); // Purple shorts (waistband at bottom of torso) ctx.fillStyle = clothColor; ctx.beginPath(); ctx.moveTo(-32, 45); ctx.bezierCurveTo(-34, 55, -33, 65, -32, 78); ctx.lineTo(32, 78); ctx.bezierCurveTo(33, 65, 34, 55, 32, 45); ctx.closePath(); ctx.fill(); // Shorts waistband ctx.fillStyle = clothDark; ctx.beginPath(); ctx.moveTo(-33, 45); ctx.quadraticCurveTo(0, 42, 33, 45); ctx.quadraticCurveTo(0, 48, -33, 45); ctx.closePath(); ctx.fill(); // Torso outline (uses same rounded shape as fill) ctx.strokeStyle = outlineColor; ctx.lineWidth = 2 / this._lwScale; ctx.beginPath(); if (_ir <= 0) { ctx.moveTo(-40, -70); ctx.bezierCurveTo(-48, -60, -42, -30, -36, 0); ctx.bezierCurveTo(-32, 30, -34, 60, -32, 78); ctx.lineTo(32, 78); ctx.bezierCurveTo(34, 60, 32, 30, 36, 0); ctx.bezierCurveTo(42, -30, 48, -60, 40, -70); ctx.closePath(); } else { const lerp = (a, b, t) => a + (b - a) * t; const hw = lerp(40, 44, _ir); const topW = lerp(40, 44, _ir); const cpBulge = lerp(48, 46, _ir); const cpMidX = lerp(36, 44, _ir); const hipW = lerp(32, 44, _ir); const topY = lerp(-70, -74, _ir); const botY = lerp(78, 78, _ir); ctx.moveTo(-topW, topY); ctx.bezierCurveTo(-cpBulge, lerp(-60, -40, _ir), -cpMidX, lerp(-30, -10, _ir), -cpMidX, 0); ctx.bezierCurveTo(-cpMidX, lerp(30, 20, _ir), -hipW, lerp(60, 55, _ir), -hipW, botY); ctx.quadraticCurveTo(0, lerp(78, 84, _ir), hipW, botY); ctx.bezierCurveTo(hipW, lerp(60, 55, _ir), cpMidX, lerp(30, 20, _ir), cpMidX, 0); ctx.bezierCurveTo(cpMidX, lerp(-30, -10, _ir), cpBulge, lerp(-60, -40, _ir), topW, topY); ctx.quadraticCurveTo(0, lerp(-70, -78, _ir), -topW, topY); ctx.closePath(); } ctx.stroke(); // Laser hole if (this.holeY !== null && this.holeRadius > 0) { ctx.save(); ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.arc(0, this.holeY, this.holeRadius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); ctx.strokeStyle = '#ff6600'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.arc(0, this.holeY, this.holeRadius + 2, 0, Math.PI * 2); ctx.stroke(); ctx.fillStyle = fleshColor; ctx.beginPath(); ctx.arc(0, this.holeY, this.holeRadius + 4, 0, Math.PI * 2); ctx.fill(); } } drawRibcage(ctx) { // RIBCAGE: Matches torso proportions (~160px) // Use green colors if acid skeleton, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark, boneLight; if (isElectrocuted) { // White skeleton from electrocution boneColor = '#f5f5f5'; boneDark = '#d0d0d0'; boneLight = '#ffffff'; } else if (isAcid) { // Green smoldering skeleton from acid boneColor = '#2d5a2d'; boneDark = '#1a3d1a'; boneLight = '#4a8a4a'; } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; boneLight = '#3a3a3a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; boneLight = '#f0e8d8'; } // Spine ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(-5, -65); ctx.lineTo(5, -65); ctx.lineTo(6, 75); ctx.lineTo(-6, 75); ctx.closePath(); ctx.fill(); // Vertebrae ctx.fillStyle = boneLight; for (let i = -55; i < 70; i += 12) { ctx.beginPath(); ctx.ellipse(0, i, 7, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = boneDark; ctx.lineWidth = 0.8; ctx.stroke(); } // Ribs ctx.lineCap = 'round'; for (let i = 0; i < 6; i++) { const y = -50 + i * 14; const curve = 6 + i * 2; // Left rib ctx.strokeStyle = boneColor; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(-4, y); ctx.bezierCurveTo(-16, y - curve, -32, y, -36, y + 6); ctx.stroke(); // Highlight ctx.strokeStyle = boneLight; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(-6, y - 1); ctx.bezierCurveTo(-14, y - curve - 1, -28, y - 1, -32, y + 4); ctx.stroke(); // Right rib ctx.strokeStyle = boneColor; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(4, y); ctx.bezierCurveTo(16, y - curve, 32, y, 36, y + 6); ctx.stroke(); ctx.strokeStyle = boneLight; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(6, y - 1); ctx.bezierCurveTo(14, y - curve - 1, 28, y - 1, 32, y + 4); ctx.stroke(); } // Sternum ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(-6, -60); ctx.lineTo(6, -60); ctx.lineTo(5, 5); ctx.lineTo(-5, 5); ctx.closePath(); ctx.fill(); ctx.strokeStyle = boneDark; ctx.lineWidth = 0.8; ctx.stroke(); // Clavicles ctx.strokeStyle = boneColor; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(-4, -62); ctx.quadraticCurveTo(-20, -66, -36, -60); ctx.stroke(); ctx.beginPath(); ctx.moveTo(4, -62); ctx.quadraticCurveTo(20, -66, 36, -60); ctx.stroke(); // Pelvis ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(-26, 50); ctx.quadraticCurveTo(-34, 55, -30, 72); ctx.lineTo(-8, 68); ctx.lineTo(0, 60); ctx.lineTo(8, 68); ctx.lineTo(30, 72); ctx.quadraticCurveTo(34, 55, 26, 50); ctx.lineTo(-26, 50); ctx.fill(); ctx.strokeStyle = boneDark; ctx.lineWidth = 1.5; ctx.stroke(); } drawUpperArm(ctx, isLeft) { // UPPER ARM PROPORTIONS: ~70px from shoulder to elbow const dir = isLeft ? -1 : 1; const skinBase = this._currentPartColor || this.bodyColor; const _darkenAmt = this._humanSkinMode ? 0 : 0.3; const skinDark = this.darkenColor(skinBase, _darkenAmt); const skinLight = this.lightenColor(skinBase, 0.15); const fleshColor = '#5cc85c'; const boneColor = '#e8d8b0'; const outlineColor = this._currentPartOutline || this.outlineColor; if (this._currentPartShowSkeleton) { this.drawUpperArmBones(ctx, isLeft); return; } // Upper arm shadow ctx.fillStyle = 'rgba(0,0,0,0.15)'; ctx.beginPath(); ctx.ellipse(dir * 2, 35, 14, 35, dir * 0.05, 0, Math.PI * 2); ctx.fill(); // Upper arm (shoulder to elbow) - ~70px ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; if (_ir > 0) { // Blend toward ellipse as inflation increases ctx.beginPath(); ctx.ellipse(0, 35, 12 + _ir * 6, 37 - _ir * 2, 0, 0, Math.PI * 2); ctx.fill(); } else { ctx.beginPath(); ctx.moveTo(dir * -10, 0); // Shoulder inner ctx.bezierCurveTo(dir * -14, 20, dir * -13, 50, dir * -10, 70); // Inner curve to elbow ctx.bezierCurveTo(dir * -6, 74, dir * 6, 74, dir * 10, 70); // Elbow bottom ctx.bezierCurveTo(dir * 14, 50, dir * 14, 20, dir * 10, 0); // Outer curve ctx.closePath(); ctx.fill(); } // Shoulder cap (deltoid) ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * 3, 12, 10, 14, dir * 0.15, 0, Math.PI * 2); ctx.fill(); // Bicep bulge ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * 4, 38, 8, 16, dir * 0.1, 0, Math.PI * 2); ctx.fill(); // Tricep shadow ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(dir * -6, 42, 5, 14, dir * -0.1, 0, Math.PI * 2); ctx.fill(); // Elbow joint bulge at bottom ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, 70, 10, 6, 0, 0, Math.PI * 2); ctx.fill(); // Upper arm outline ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.8 / this._lwScale; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 35, 12 + _ir * 6, 37 - _ir * 2, 0, 0, Math.PI * 2); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(dir * -10, 0); ctx.bezierCurveTo(dir * -14, 20, dir * -13, 50, dir * -10, 70); ctx.stroke(); ctx.beginPath(); ctx.moveTo(dir * 10, 0); ctx.bezierCurveTo(dir * 14, 20, dir * 14, 50, dir * 10, 70); ctx.stroke(); } } drawForearm(ctx, isLeft) { // FOREARM PROPORTIONS: ~65px from elbow to wrist, plus hand ~55px const dir = isLeft ? -1 : 1; const skinBase = this._currentPartColor || this.bodyColor; const _darkenAmt = this._humanSkinMode ? 0 : 0.3; const skinDark = this.darkenColor(skinBase, _darkenAmt); const skinLight = this.lightenColor(skinBase, 0.15); const outlineColor = this._currentPartOutline || this.outlineColor; if (this._currentPartShowSkeleton) { this.drawForearmBones(ctx, isLeft); return; } // Elbow crease at top ctx.strokeStyle = skinDark; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(0, 0, 8, 0.3, Math.PI - 0.3); ctx.stroke(); // Forearm (elbow to wrist) - ~65px ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; if (_ir > 0) { // Blend toward ellipse ctx.beginPath(); ctx.ellipse(0, 34, 10 + _ir * 5, 34 - _ir * 2, 0, 0, Math.PI * 2); ctx.fill(); } else { ctx.beginPath(); ctx.moveTo(dir * -9, 2); // Elbow inner ctx.bezierCurveTo(dir * -11, 23, dir * -9, 48, dir * -6, 63); // Inner curve to wrist ctx.bezierCurveTo(dir * -3, 66, dir * 5, 66, dir * 8, 63); // Wrist bottom ctx.bezierCurveTo(dir * 11, 48, dir * 12, 23, dir * 9, 2); // Outer curve ctx.closePath(); ctx.fill(); } // Forearm muscle ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * 3, 23, 7, 18, dir * 0.1, 0, Math.PI * 2); ctx.fill(); // Veins on forearm ctx.strokeStyle = this.darkenColor(skinBase, 0.12); ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(dir * 1, 8); ctx.bezierCurveTo(dir * 4, 28, dir * 2, 43, dir * 1, 58); ctx.stroke(); ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(dir * 1, 65, 8, 5, 0, 0, Math.PI * 2); ctx.fill(); // Palm ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(dir * 1, 78, 10, 12, 0, 0, Math.PI * 2); ctx.fill(); // Palm shadow ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(dir * 1, 80, 7, 8, 0, 0, Math.PI * 2); ctx.fill(); // Thumb (inside, closest to body) ctx.lineCap = 'round'; ctx.strokeStyle = skinBase; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-dir * 8, 75); ctx.quadraticCurveTo(-dir * 14, 80, -dir * 16, 88); ctx.stroke(); ctx.strokeStyle = skinDark; ctx.lineWidth = 1; ctx.stroke(); // Four fingers - properly separated const fingerData = [ { offset: -6, len: 22 }, // Index { offset: -2, len: 25 }, // Middle (longest) { offset: 2, len: 23 }, // Ring { offset: 6, len: 18 } // Pinky (shortest) ]; fingerData.forEach((f, idx) => { const fx = dir * f.offset; ctx.strokeStyle = skinBase; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(fx, 86); ctx.lineTo(fx + dir * 0.5, 86 + f.len * 0.55); // First joint ctx.lineTo(fx + dir * 1, 86 + f.len); // Fingertip ctx.stroke(); // Finger outline ctx.strokeStyle = skinDark; ctx.lineWidth = 0.8; ctx.stroke(); }); // Forearm outline ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.8 / this._lwScale; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 34, 10 + _ir * 5, 34 - _ir * 2, 0, 0, Math.PI * 2); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(dir * -9, 2); ctx.bezierCurveTo(dir * -11, 23, dir * -9, 48, dir * -6, 63); ctx.stroke(); ctx.beginPath(); ctx.moveTo(dir * 9, 2); ctx.bezierCurveTo(dir * 11, 48, dir * 12, 23, dir * 8, 63); ctx.stroke(); } } drawUpperArmBones(ctx, isLeft) { // UPPER ARM BONES: Humerus (~70px) const dir = isLeft ? -1 : 1; // Use green colors if acid, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark; if (isElectrocuted) { boneColor = '#f5f5f5'; boneDark = '#d0d0d0'; } else if (isAcid) { boneColor = '#2d5a2d'; boneDark = '#1a3d1a'; } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; } // Humerus ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(dir * -5, 0); ctx.lineTo(dir * 5, 0); ctx.lineTo(dir * 4, 68); ctx.lineTo(dir * -4, 68); ctx.closePath(); ctx.fill(); // Shoulder ball joint ctx.beginPath(); ctx.arc(0, 0, 8, 0, Math.PI * 2); ctx.fill(); // Elbow joint ctx.beginPath(); ctx.ellipse(0, 70, 7, 5, 0, 0, Math.PI * 2); ctx.fill(); // Joint outlines ctx.strokeStyle = boneDark; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2); ctx.stroke(); } drawForearmBones(ctx, isLeft) { // FOREARM BONES: Radius/Ulna (~65px) + Hand const dir = isLeft ? -1 : 1; // Use green colors if acid, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark; if (isElectrocuted) { boneColor = '#f5f5f5'; boneDark = '#d0d0d0'; } else if (isAcid) { boneColor = '#2d5a2d'; boneDark = '#1a3d1a'; } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; } // Radius/Ulna ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(dir * -4, 4); ctx.lineTo(dir * -5, 75); ctx.lineTo(dir * -1, 75); ctx.lineTo(dir * -1, 4); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(dir * 3, 0); ctx.lineTo(dir * 5, 63); ctx.lineTo(dir * 1, 63); ctx.lineTo(dir * 1, 0); ctx.closePath(); ctx.fill(); // Wrist ctx.beginPath(); ctx.ellipse(0, 65, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); // Hand bones (metacarpals) ctx.beginPath(); ctx.ellipse(0, 78, 9, 7, 0, 0, Math.PI * 2); ctx.fill(); // Finger bones const fingerLens = [18, 22, 20, 15]; for (let i = 0; i < 4; i++) { const offset = (i - 1.5) * 5; ctx.strokeStyle = boneColor; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(dir * offset, 83); ctx.lineTo(dir * (offset + 0.5), 83 + fingerLens[i]); ctx.stroke(); } // Thumb bone ctx.beginPath(); ctx.moveTo(-dir * 7, 76); ctx.lineTo(-dir * 14, 88); ctx.stroke(); } drawThigh(ctx, isLeft) { // THIGH PROPORTIONS: ~80px from hip to knee const dir = isLeft ? -1 : 1; const skinBase = this._currentPartColor || this.bodyColor; const _darkenAmt = this._humanSkinMode ? 0 : 0.3; const skinDark = this.darkenColor(skinBase, _darkenAmt); const skinLight = this.lightenColor(skinBase, 0.15); const clothColor = this._currentPartClothing || this.clothingColor; const clothDark = this.darkenColor(clothColor, 0.3); const outlineColor = this._currentPartOutline || this.outlineColor; if (this._currentPartShowSkeleton) { this.drawThighBones(ctx, isLeft); return; } // Thigh shadow ctx.fillStyle = 'rgba(0,0,0,0.15)'; ctx.beginPath(); ctx.ellipse(dir * 2, 40, 18, 40, 0, 0, Math.PI * 2); ctx.fill(); // Upper leg/thigh (hip to knee) - ~80px ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 40, 16 + _ir * 6, 42 - _ir * 2, 0, 0, Math.PI * 2); ctx.fill(); } else { ctx.beginPath(); ctx.moveTo(dir * -14, 0); // Hip inner ctx.bezierCurveTo(dir * -18, 25, dir * -17, 55, dir * -12, 78); // Inner curve ctx.bezierCurveTo(dir * -8, 82, dir * 8, 82, dir * 12, 78); // Knee bottom ctx.bezierCurveTo(dir * 17, 55, dir * 18, 25, dir * 14, 0); // Outer curve ctx.closePath(); ctx.fill(); } // Thigh muscle (quadriceps) ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * 5, 35, 10, 22, dir * 0.1, 0, Math.PI * 2); ctx.fill(); // Inner thigh shadow ctx.fillStyle = skinDark; ctx.beginPath(); ctx.ellipse(dir * -8, 40, 6, 18, dir * -0.15, 0, Math.PI * 2); ctx.fill(); // Tattered pants ctx.fillStyle = clothColor; ctx.beginPath(); ctx.moveTo(dir * -15, 0); ctx.bezierCurveTo(dir * -18, 15, dir * -18, 30, dir * -16, 45); ctx.lineTo(dir * -12, 50); ctx.lineTo(dir * -8, 42); ctx.lineTo(dir * 0, 52); ctx.lineTo(dir * 6, 40); ctx.lineTo(dir * 12, 48); ctx.lineTo(dir * 16, 45); ctx.bezierCurveTo(dir * 18, 30, dir * 18, 15, dir * 15, 0); ctx.closePath(); ctx.fill(); ctx.strokeStyle = clothDark; ctx.lineWidth = 1.5; ctx.stroke(); // Knee joint bulge at bottom ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, 80, 10, 8, 0, 0, Math.PI * 2); ctx.fill(); // Kneecap ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(0, 78, 7, 5, 0, 0, Math.PI * 2); ctx.fill(); // Thigh outline ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.8 / this._lwScale; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 40, 16 + _ir * 6, 42 - _ir * 2, 0, 0, Math.PI * 2); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(dir * -14, 0); ctx.bezierCurveTo(dir * -18, 25, dir * -17, 55, dir * -12, 78); ctx.stroke(); ctx.beginPath(); ctx.moveTo(dir * 14, 0); ctx.bezierCurveTo(dir * 18, 25, dir * 17, 55, dir * 12, 78); ctx.stroke(); } } drawLowerLeg(ctx, isLeft) { // LOWER LEG PROPORTIONS: ~75px from knee to ankle, plus foot ~25px const dir = isLeft ? -1 : 1; const skinBase = this._currentPartColor || this.bodyColor; const _darkenAmt = this._humanSkinMode ? 0 : 0.3; const skinDark = this.darkenColor(skinBase, _darkenAmt); const skinLight = this.lightenColor(skinBase, 0.15); const fleshColor = '#5cc85c'; const boneColor = '#e8d8b0'; const outlineColor = this._currentPartOutline || this.outlineColor; if (this._currentPartShowSkeleton) { this.drawLowerLegBones(ctx, isLeft); return; } // Lower leg/calf (knee to ankle) - ~75px ctx.fillStyle = skinBase; const _ir = this._inflateRoundness || 0; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 40, 12 + _ir * 5, 40 - _ir * 2, 0, 0, Math.PI * 2); ctx.fill(); } else { ctx.beginPath(); ctx.moveTo(dir * -10, 4); // Knee inner ctx.bezierCurveTo(dir * -13, 25, dir * -11, 55, dir * -7, 75); // Inner curve ctx.bezierCurveTo(dir * -4, 78, dir * 6, 78, dir * 9, 75); // Ankle ctx.bezierCurveTo(dir * 12, 55, dir * 13, 25, dir * 10, 4); // Outer curve ctx.closePath(); ctx.fill(); } // Calf muscle ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * -3, 30, 8, 16, dir * -0.12, 0, Math.PI * 2); ctx.fill(); // Shin ctx.strokeStyle = skinDark; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(dir * 4, 8); ctx.bezierCurveTo(dir * 5, 35, dir * 4, 60, dir * 3, 72); ctx.stroke(); // Ankle ctx.fillStyle = skinBase; ctx.beginPath(); ctx.ellipse(0, 77, 8, 6, 0, 0, Math.PI * 2); ctx.fill(); // Ankle bones ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * -6, 75, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(dir * 6, 75, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); // Foot - ~25px ctx.fillStyle = skinBase; ctx.beginPath(); ctx.moveTo(dir * -10, 78); ctx.bezierCurveTo(dir * -12, 83, dir * -14, 92, dir * -12, 98); ctx.bezierCurveTo(dir * -6, 102, dir * 12, 102, dir * 16, 98); ctx.bezierCurveTo(dir * 18, 92, dir * 15, 83, dir * 10, 78); ctx.closePath(); ctx.fill(); // Top of foot ctx.fillStyle = skinLight; ctx.beginPath(); ctx.ellipse(dir * 1, 85, 10, 7, dir * 0.08, 0, Math.PI * 2); ctx.fill(); // Toes ctx.fillStyle = skinBase; for (let i = 0; i < 5; i++) { const tx = dir * (-6 + i * 4); const ty = 100 + (i === 2 ? 1.5 : (i === 0 || i === 4 ? -1.5 : 0)); const tsize = 4 - Math.abs(i - 2) * 0.4; ctx.beginPath(); ctx.ellipse(tx, ty, tsize, tsize * 0.75, 0, 0, Math.PI * 2); ctx.fill(); // Toenails ctx.fillStyle = '#6a6050'; ctx.beginPath(); ctx.ellipse(tx, ty - 0.8, tsize * 0.55, tsize * 0.35, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = skinBase; } // Lower leg outline ctx.strokeStyle = outlineColor; ctx.lineWidth = 1.8 / this._lwScale; if (_ir > 0) { ctx.beginPath(); ctx.ellipse(0, 40, 12 + _ir * 5, 40 - _ir * 2, 0, 0, Math.PI * 2); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(dir * -10, 4); ctx.bezierCurveTo(dir * -13, 25, dir * -11, 55, dir * -7, 75); ctx.bezierCurveTo(dir * -12, 83, dir * -14, 92, dir * -12, 98); ctx.stroke(); ctx.beginPath(); ctx.moveTo(dir * 10, 4); ctx.bezierCurveTo(dir * 13, 25, dir * 12, 55, dir * 9, 75); ctx.bezierCurveTo(dir * 15, 83, dir * 18, 92, dir * 16, 98); ctx.stroke(); } } drawThighBones(ctx, isLeft) { // THIGH BONES: Femur (~80px) const dir = isLeft ? -1 : 1; // Use green colors if acid, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark; if (isElectrocuted) { boneColor = '#f5f5f5'; boneDark = '#d0d0d0'; } else if (isAcid) { boneColor = '#2d5a2d'; boneDark = '#1a3d1a'; } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; } // Femur ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(dir * -5, 0); ctx.lineTo(dir * 5, 0); ctx.lineTo(dir * 4, 76); ctx.lineTo(dir * -4, 76); ctx.closePath(); ctx.fill(); // Hip ball joint ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2); ctx.fill(); // Knee joint ctx.beginPath(); ctx.ellipse(0, 80, 8, 6, 0, 0, Math.PI * 2); ctx.fill(); // Joint outlines ctx.strokeStyle = boneDark; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2); ctx.stroke(); } drawLowerLegBones(ctx, isLeft) { // LOWER LEG BONES: Tibia/Fibula (~75px) + Foot const dir = isLeft ? -1 : 1; // Use green colors if acid, black if burned, white if electrocuted, normal bone otherwise const isBurned = this._currentPartBurnLevel >= 80; const isAcid = this._acidSkeletonMode; const isElectrocuted = this._electrocutedSkeletonMode || this.electrocutedSkeleton; let boneColor, boneDark; if (isElectrocuted) { boneColor = '#f5f5f5'; boneDark = '#d0d0d0'; } else if (isAcid) { boneColor = '#2d5a2d'; boneDark = '#1a3d1a'; } else if (isBurned) { boneColor = '#2a2a2a'; boneDark = '#1a1a1a'; } else { boneColor = '#e8d8b0'; boneDark = '#a89880'; } // Tibia/Fibula ctx.fillStyle = boneColor; ctx.beginPath(); ctx.moveTo(dir * -4, 4); ctx.lineTo(dir * -5, 75); ctx.lineTo(dir * -1, 75); ctx.lineTo(dir * -1, 4); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(dir * 4, 4); ctx.lineTo(dir * 5, 75); ctx.lineTo(dir * 1, 75); ctx.lineTo(dir * 1, 4); ctx.closePath(); ctx.fill(); // Ankle joint ctx.beginPath(); ctx.ellipse(0, 77, 8, 5, 0, 0, Math.PI * 2); ctx.fill(); // Foot bones ctx.beginPath(); ctx.moveTo(dir * -6, 80); ctx.lineTo(dir * 12, 82); ctx.lineTo(dir * 14, 95); ctx.lineTo(dir * -8, 92); ctx.closePath(); ctx.fill(); // Toe bones for (let i = 0; i < 4; i++) { ctx.strokeStyle = boneColor; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(dir * (-4 + i * 5), 95); ctx.lineTo(dir * (-2 + i * 5), 103); ctx.stroke(); } } lerpColor(color1, color2, t) { const c1 = this.hexToRgb(color1); const c2 = this.hexToRgb(color2); const r = Math.round(c1.r + (c2.r - c1.r) * t); const g = Math.round(c1.g + (c2.g - c1.g) * t); const b = Math.round(c1.b + (c2.b - c1.b) * t); return `rgb(${r},${g},${b})`; } darkenColor(color, amount) { const c = this.hexToRgb(color); const r = Math.max(0, Math.round(c.r * (1 - amount))); const g = Math.max(0, Math.round(c.g * (1 - amount))); const b = Math.max(0, Math.round(c.b * (1 - amount))); return `rgb(${r},${g},${b})`; } lightenColor(color, amount) { const c = this.hexToRgb(color); const r = Math.min(255, Math.round(c.r + (255 - c.r) * amount)); const g = Math.min(255, Math.round(c.g + (255 - c.g) * amount)); const b = Math.min(255, Math.round(c.b + (255 - c.b) * amount)); return `rgb(${r},${g},${b})`; } hexToRgb(hex) { // Handle rgb() format if (hex.startsWith('rgb')) { const match = hex.match(/rgb$(\d+),\s*(\d+),\s*(\d+)$/); if (match) { return { r: parseInt(match[1]), g: parseInt(match[2]), b: parseInt(match[3]) }; } } const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : { r: 0, g: 0, b: 0 }; } // Update ragdoll physics with realistic joints and weighted limbs update(dt) { // Cap dt to prevent physics explosions dt = Math.min(dt, 0.033); // Update idle sway animation when not ragdolling this.idleSwayTime += dt; // Update blinking this.updateBlink(dt); // Update pancake blink (double-blink after anvil squish) if (this.anvilPancake && this.pancakeBlinkState) { this.pancakeBlinkTimer -= dt; if (this.pancakeBlinkState === 'waiting' && this.pancakeBlinkTimer <= 0) { this.pancakeBlinkState = 'blink1'; this.pancakeBlinkTimer = 0.12; // first blink duration } else if (this.pancakeBlinkState === 'blink1' && this.pancakeBlinkTimer <= 0) { this.pancakeBlinkState = 'open1'; this.pancakeBlinkTimer = 0.15; // pause between blinks } else if (this.pancakeBlinkState === 'open1' && this.pancakeBlinkTimer <= 0) { this.pancakeBlinkState = 'blink2'; this.pancakeBlinkTimer = 0.12; // second blink duration } else if (this.pancakeBlinkState === 'blink2' && this.pancakeBlinkTimer <= 0) { this.pancakeBlinkState = 'done'; } } // Process attached parts with ragdoll physics if (this.ragdollEnabled) { this.updateRagdollPhysics(dt); } // Process detached parts (flying through air) - fully independent physics, no joint constraints // Floor is at CANVAS_HEIGHT - 300 (absolute), convert to zombie-relative coords const absoluteFloorY = CANVAS_HEIGHT - 300; const relativeFloorY = (absoluteFloorY - this.baseY) / this.scale; for (const partName in this.parts) { const part = this.parts[partName]; // Process detached parts - continue physics even when not visible (for trap door falling) if (!part.attached) { const trapDoorOpen = trapDoor.leftAngle > 30; // Physics update - always run for detached parts (visible or falling into pit) if (part.visible || trapDoorOpen) { // Apply strong gravity - parts fall fast part.velocityY += this.gravity * dt; // Update position - completely independent movement part.x += part.velocityX * dt; part.y += part.velocityY * dt; // Free rotation - no hinge constraints part.rotation += part.angularVelocity * dt; // Apply damping (air resistance) part.velocityX *= this.damping; part.angularVelocity *= this.angularDamping; } // Simple ground collision - skip if trap door is open if (!trapDoorOpen && part.y > relativeFloorY && part.visible) { part.y = relativeFloorY; part.velocityY = -part.velocityY * 0.35; part.velocityX *= 0.8; part.angularVelocity *= 0.8; if (Math.abs(part.velocityY) < 20) { part.velocityY = 0; } if (Math.abs(part.velocityX) < 10) { part.velocityX = 0; } if (Math.abs(part.angularVelocity) < 10) { part.angularVelocity = 0; } } // If fallen off bottom of screen, hide the part (but keep processing if trap door open) // Don't hide parts that have continuous bleeding - they need to keep bleeding into the pit if (part.y > relativeFloorY + 500 && !trapDoorOpen && !part.continuousBleeding) { part.visible = false; } // Wall collisions (only when visible) if (part.visible) { const worldX = this.baseX + part.x * this.scale; if (worldX < 0) { part.x = -this.baseX / this.scale; part.velocityX *= -0.5; } else if (worldX > CANVAS_WIDTH) { part.x = (CANVAS_WIDTH - this.baseX) / this.scale; part.velocityX *= -0.5; } } // Bleeding from detached parts - ALWAYS process if continuously bleeding (even when falling into pit) if (part.bleedingTime > 0 || part.continuousBleeding) { // Decrement bleeding time only if not continuous if (!part.continuousBleeding) { part.bleedingTime -= dt; } // Calculate world position of the bleed point const partAngleRad = part.rotation * Math.PI / 180; const bleedLocalX = part.bleedX || 0; const bleedLocalY = part.bleedY || -20; const rotatedBleedX = bleedLocalX * Math.cos(partAngleRad) - bleedLocalY * Math.sin(partAngleRad); const rotatedBleedY = bleedLocalX * Math.sin(partAngleRad) + bleedLocalY * Math.cos(partAngleRad); const bleedWorldX = this.baseX + (part.x + rotatedBleedX) * this.scale; const bleedWorldY = this.baseY + (part.y + rotatedBleedY) * this.scale; // Only spawn blood if on screen or near screen (falling into pit) const onScreen = bleedWorldY < CANVAS_HEIGHT + 100; // Spawn blood particles const spurtChance = part.continuousBleeding ? 0.35 : 0.2 * (part.bleedingTime / 2.0); if (Math.random() < spurtChance && onScreen) { spawnParticles(bleedWorldX, bleedWorldY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 60 + part.velocityX * 0.1, vy: -30 - Math.random() * 50 + part.velocityY * 0.1, size: 3 + Math.random() * 6, life: 0.5 + Math.random() * 0.4, gravity: 450, type: 'circle' }); } } } } // Process stumps (bleeding points on body where parts were detached) if (this.stumps) { this.stumps = this.stumps.filter(stump => { stump.bleedingTime -= dt; if (stump.bleedingTime <= 0) return false; // Calculate stump world position based on parent part const parent = this.parts[stump.parentPart]; // Only spawn blood if parent part is still attached and visible if (parent && parent.attached && parent.visible) { const parentAngleRad = parent.rotation * Math.PI / 180; const rotatedX = stump.localX * Math.cos(parentAngleRad) - stump.localY * Math.sin(parentAngleRad); const rotatedY = stump.localX * Math.sin(parentAngleRad) + stump.localY * Math.cos(parentAngleRad); const stumpWorldX = this.baseX + (parent.x + rotatedX) * this.scale; const stumpWorldY = this.baseY + (parent.y + rotatedY) * this.scale; // Spurt blood from stump const spurtChance = 0.25 * (stump.bleedingTime / 2.5); if (Math.random() < spurtChance) { spawnParticles(stumpWorldX, stumpWorldY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: stump.forceX + (Math.random() - 0.5) * 80, vy: stump.forceY + (Math.random() - 0.5) * 40 - 30, size: 3 + Math.random() * 7, life: 0.5 + Math.random() * 0.5, gravity: 500, type: 'circle' }); } return true; } else { // Parent part is detached or invisible, remove this stump return false; } }); } } // Make the zombie crumble into separate body parts crumble() { this.isRagdolling = true; // Detach every attached part for (const partName in this.parts) { if (this.parts[partName] && this.parts[partName].attached) { // Small random forces to let them fall naturally this.detachPart(partName, (Math.random() - 0.5) * 80, (Math.random() - 0.5) * 50); } } } // Update eye blinking updateBlink(dt) { if (this.isBlinking) { // Currently blinking - count down duration this.blinkDuration -= dt; if (this.blinkDuration <= 0) { this.isBlinking = false; // Reset timer for next blink with some randomness this.blinkTimer = this.blinkInterval + (Math.random() - 0.5) * 1.5; } } else { // Not blinking - count down to next blink this.blinkTimer -= dt; if (this.blinkTimer <= 0) { this.isBlinking = true; // Blink duration: quick blink (0.1-0.2 seconds) this.blinkDuration = 0.1 + Math.random() * 0.1; // Occasionally do a double-blink if (Math.random() < 0.2) { this.blinkDuration = 0.3; // Longer for double-blink effect } } } } // Ragdoll physics simulation updateRagdollPhysics(dt) { const torso = this.parts.torso; // Subtle idle sway when not actively ragdolling if (!this.isRagdolling && !this.frozen && !this.customPose) { // Gentle breathing/swaying animation const swayAmount = 2; const swaySpeed = 1.5; const targetTorsoAngle = Math.sin(this.idleSwayTime * swaySpeed) * swayAmount; // Smoothly move toward target if (torso.attached) { torso.rotation += (targetTorsoAngle - torso.rotation) * 0.05; } // Arms sway opposite to torso if (this.parts.leftUpperArm.attached) { this.parts.leftUpperArm.rotation = this.parts.leftUpperArm.restAngle + Math.sin(this.idleSwayTime * swaySpeed + 0.5) * 3; } if (this.parts.rightUpperArm.attached) { this.parts.rightUpperArm.rotation = this.parts.rightUpperArm.restAngle + Math.sin(this.idleSwayTime * swaySpeed + 0.5) * 3; } // Forearms have slight bend if (this.parts.leftForearm.attached) { this.parts.leftForearm.rotation = this.parts.leftForearm.restAngle + Math.sin(this.idleSwayTime * swaySpeed * 0.8) * 2; } if (this.parts.rightForearm.attached) { this.parts.rightForearm.rotation = this.parts.rightForearm.restAngle + Math.sin(this.idleSwayTime * swaySpeed * 0.8) * 2; } // Head has slight lag if (this.parts.head.attached) this.parts.head.rotation = -torso.rotation * 0.3 + Math.sin(this.idleSwayTime * swaySpeed * 0.7) * 1.5; // Thighs stay stable if (this.parts.leftThigh.attached) { this.parts.leftThigh.rotation = Math.sin(this.idleSwayTime * swaySpeed) * 1; } if (this.parts.rightThigh.attached) { this.parts.rightThigh.rotation = Math.sin(this.idleSwayTime * swaySpeed + Math.PI) * 1; } // Lower legs have slight bend if (this.parts.leftLowerLeg.attached) { this.parts.leftLowerLeg.rotation = this.parts.leftLowerLeg.restAngle + Math.sin(this.idleSwayTime * swaySpeed * 0.9 + 0.3) * 1.5; } if (this.parts.rightLowerLeg.attached) { this.parts.rightLowerLeg.rotation = this.parts.rightLowerLeg.restAngle + Math.sin(this.idleSwayTime * swaySpeed * 0.9 + Math.PI + 0.3) * 1.5; } } else { // Active ragdoll physics // Update torso first (it's the root) // Skip torso spring-back when customPose is active so manual poses aren't overridden if (torso.attached && !this.customPose) { // Apply angular velocity with damping torso.rotation += torso.angularVelocity * dt; torso.angularVelocity *= this.angularDamping; // Spring back toward rest angle (keeps zombie roughly upright) const torsoRestForce = (torso.restAngle - torso.rotation) * this.stiffness * 2; torso.angularVelocity += torsoRestForce; // Clamp torso rotation torso.rotation = Math.max(torso.minAngle, Math.min(torso.maxAngle, torso.rotation)); } } // ALWAYS update each joint connection to keep FK hierarchy attached for (const joint of this.joints) { const parent = this.parts[joint.parent]; const child = this.parts[joint.child]; if (!parent.attached || !child.attached || !child.visible) continue; // Calculate parent's rotation in radians const parentAngleRad = parent.rotation * Math.PI / 180; // Calculate joint position in parent's rotated space const offsetX = joint.parentOffset.x; const offsetY = joint.parentOffset.y; // Rotate offset by parent's rotation const rotatedOffsetX = offsetX * Math.cos(parentAngleRad) - offsetY * Math.sin(parentAngleRad); const rotatedOffsetY = offsetX * Math.sin(parentAngleRad) + offsetY * Math.cos(parentAngleRad); // Update child position to stay connected to joint child.x = parent.x + rotatedOffsetX; child.y = parent.y + rotatedOffsetY; if (this.isRagdolling) { // Apply pendulum physics to child // Gravity creates torque on the limb based on its angle and center of mass const childAngleRad = child.rotation * Math.PI / 180; const limbCenterY = child.length * 0.5; // Center of mass is middle of limb // Gravitational torque (heavier = more torque, longer = more torque) const gravityTorque = Math.sin(childAngleRad) * this.gravity * child.mass * 0.001 * limbCenterY * 0.01; // Apply torque as angular acceleration (lighter parts accelerate more) child.angularVelocity += gravityTorque * dt * 60; // Apply parent's rotation influence (child tends to follow parent) const parentInfluence = parent.angularVelocity * 0.3; child.angularVelocity += parentInfluence * dt * 10; // Update rotation child.rotation += child.angularVelocity * dt; // Apply damping child.angularVelocity *= this.angularDamping; // Spring force toward rest angle (very weak for ragdoll feel) const restForce = (child.restAngle - child.rotation) * this.stiffness * 0.1; child.angularVelocity += restForce; // Enforce joint limits if (child.rotation < child.minAngle) { child.rotation = child.minAngle; child.angularVelocity *= -0.3; // Bounce off limit } else if (child.rotation > child.maxAngle) { child.rotation = child.maxAngle; child.angularVelocity *= -0.3; } } } // Check if ragdolling should stop (all velocities settled) if (this.isRagdolling) { let totalEnergy = Math.abs(torso.angularVelocity); for (const partName in this.parts) { const part = this.parts[partName]; if (part.attached) { totalEnergy += Math.abs(part.angularVelocity); } } if (totalEnergy < 0.5) { this.isRagdolling = false; } } } // Detach a limb and make it fly off detachPart(partName, forceX = 0, forceY = 0) { const part = this.parts[partName]; if (!part || !part.attached) return; // Find the joint that connects this part to calculate stump position const joint = this.joints.find(j => j.child === partName); // Calculate world position of the separation point let stumpX = this.baseX; let stumpY = this.baseY; if (joint) { const parent = this.parts[joint.parent]; if (parent) { const parentAngleRad = parent.rotation * Math.PI / 180; const offsetX = joint.parentOffset.x; const offsetY = joint.parentOffset.y; const rotatedX = offsetX * Math.cos(parentAngleRad) - offsetY * Math.sin(parentAngleRad); const rotatedY = offsetX * Math.sin(parentAngleRad) + offsetY * Math.cos(parentAngleRad); stumpX = this.baseX + (parent.x + rotatedX) * this.scale; stumpY = this.baseY + (parent.y + rotatedY) * this.scale; } } else { // For torso or parts without joints, use part position stumpX = this.baseX + part.x * this.scale; stumpY = this.baseY + part.y * this.scale; } part.attached = false; part.velocityX = forceX + (Math.random() - 0.5) * 80; part.velocityY = forceY; // More dramatic initial spin based on force direction part.angularVelocity = (forceX * 0.8) + (Math.random() - 0.5) * 400; // If the torso collapses, collapse all other body parts as well if (partName === 'torso') { const otherParts = ['head', 'leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm', 'leftThigh', 'rightThigh', 'leftLowerLeg', 'rightLowerLeg']; otherParts.forEach(otherPartName => { const otherPart = this.parts[otherPartName]; if (otherPart && otherPart.attached && otherPart.visible) { // Give each part a slightly different force for variety const spreadForceX = forceX * 0.5 + (Math.random() - 0.5) * 150; const spreadForceY = forceY * 0.5 - Math.random() * 100; otherPart.attached = false; otherPart.velocityX = spreadForceX + (Math.random() - 0.5) * 80; otherPart.velocityY = spreadForceY; otherPart.angularVelocity = (spreadForceX * 0.8) + (Math.random() - 0.5) * 400; otherPart.bleedingTime = this.noBlood ? 0 : 2.0; otherPart.bleedX = 0; otherPart.bleedY = -otherPart.length * 0.4 || -20; // Inherit chainsaw damage color if torso had it if (part.chainsawDamage) { otherPart.chainsawDamage = part.chainsawDamage; otherPart.continuousBleeding = part.continuousBleeding; } } }); } // Add bleeding timer to detached part (bleeds for 2 seconds) - skip if noBlood flag part.bleedingTime = this.noBlood ? 0 : 2.0; part.bleedX = 0; // Local offset for bleed point (top of part where it was attached) part.bleedY = -part.length * 0.4 || -20; // Bleed from near top of part // Add stump that bleeds on the body (skip if noBlood flag is set) if (!this.noBlood) { if (!this.stumps) this.stumps = []; this.stumps.push({ x: stumpX, y: stumpY, localX: joint ? joint.parentOffset.x : part.x, localY: joint ? joint.parentOffset.y : part.y, parentPart: joint ? joint.parent : 'torso', bleedingTime: 2.5, forceX: -forceX * 0.3, // Blood spurts opposite to force direction forceY: -Math.abs(forceY) * 0.3 - 50 }); } // Initial blood burst at separation point (skip if noBlood flag is set) if (!this.noBlood) { for (let i = 0; i < 30; i++) { // doubled debris count const angle = Math.random() * Math.PI * 2; const speed = 80 + Math.random() * 120; spawnParticles(stumpX, stumpY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * speed + forceX * 0.3, vy: Math.sin(angle) * speed + forceY * 0.3 - 50, size: 4 + Math.random() * 8, life: 0.8 + Math.random() * 0.5, gravity: 400, type: 'circle' }); } } } } // ============================================================================ // PARTICLE SYSTEM // ============================================================================ class Particle { constructor(x, y, options = {}) { this.x = x; this.y = y; this.vx = options.vx || (Math.random() - 0.5) * 200; this.vy = options.vy || -Math.random() * 300; this.size = options.size || 5 + Math.random() * 10; this.color = options.color || '#ff0000'; this.life = options.life || 1; this.maxLife = this.life; this.gravity = options.gravity !== undefined ? options.gravity : 500; this.type = options.type || 'circle'; this.rotation = Math.random() * 360; this.rotationSpeed = (Math.random() - 0.5) * 360; this.shrink = options.shrink !== undefined ? options.shrink : true; } update(dt) { this.vy += this.gravity * dt; this.x += this.vx * dt; this.y += this.vy * dt; this.life -= dt; this.rotation += this.rotationSpeed * dt; return this.life > 0; } draw(ctx) { const alpha = this.life / this.maxLife; const size = this.shrink ? this.size * alpha : this.size; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotation * Math.PI / 180); ctx.globalAlpha = alpha; ctx.fillStyle = this.color; switch (this.type) { case 'circle': ctx.beginPath(); ctx.arc(0, 0, size, 0, Math.PI * 2); ctx.fill(); break; case 'square': ctx.fillRect(-size / 2, -size / 2, size, size); break; case 'chunk': ctx.beginPath(); ctx.moveTo(-size, -size / 2); ctx.lineTo(size / 2, -size); ctx.lineTo(size, size / 2); ctx.lineTo(-size / 2, size); ctx.closePath(); ctx.fill(); break; case 'ice': ctx.fillStyle = `rgba(168, 216, 234, ${alpha})`; ctx.beginPath(); ctx.moveTo(0, -size); ctx.lineTo(size * 0.7, -size * 0.3); ctx.lineTo(size * 0.7, size * 0.3); ctx.lineTo(0, size); ctx.lineTo(-size * 0.7, size * 0.3); ctx.lineTo(-size * 0.7, -size * 0.3); ctx.closePath(); ctx.fill(); break; case 'fire': const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, size); gradient.addColorStop(0, `rgba(255, 255, 100, ${alpha})`); gradient.addColorStop(0.5, `rgba(255, 150, 0, ${alpha})`); gradient.addColorStop(1, `rgba(255, 50, 0, 0)`); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(0, 0, size, 0, Math.PI * 2); ctx.fill(); break; } ctx.restore(); } } function spawnParticles(x, y, count, options = {}) { for (let i = 0; i < count; i++) { if (particles.length < 300) { particles.push(new Particle(x, y, { ...options, vx: options.vx !== undefined ? options.vx + (Math.random() - 0.5) * (options.spread || 100) : (Math.random() - 0.5) * 200, vy: options.vy !== undefined ? options.vy + (Math.random() - 0.5) * (options.spread || 100) : -Math.random() * 300 })); } } } // ============================================================================ // INTERACTIVE SWORD SYSTEM // ============================================================================ function drawSword(ctx) { if (!sword.active) return; const angleRad = sword.angle * Math.PI / 180; // Draw slice trail effect BEFORE sword transform (trail is in world coordinates) if (sword.sliceTrail.length > 1) { ctx.save(); for (let i = 1; i < sword.sliceTrail.length; i++) { const prev = sword.sliceTrail[i - 1]; const curr = sword.sliceTrail[i]; const alpha = (i / sword.sliceTrail.length) * 0.6; ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(prev.tipX, prev.tipY); ctx.lineTo(curr.tipX, curr.tipY); ctx.stroke(); } ctx.restore(); } ctx.save(); ctx.translate(sword.x, sword.y); ctx.rotate(angleRad); // Blade glow ctx.shadowColor = '#6699ff'; ctx.shadowBlur = 18; // Blade ctx.fillStyle = '#d0d8e8'; ctx.beginPath(); ctx.moveTo(0, -sword.length); // Tip ctx.lineTo(-sword.width / 2, -sword.length + 20); // Blade edge start ctx.lineTo(-sword.width / 2 - 2, -15); // Blade base left ctx.lineTo(sword.width / 2 + 2, -15); // Blade base right ctx.lineTo(sword.width / 2, -sword.length + 20); // Blade edge end ctx.closePath(); ctx.fill(); // Blade shine ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; ctx.beginPath(); ctx.moveTo(-2, -sword.length + 25); ctx.lineTo(-2, -20); ctx.lineTo(2, -20); ctx.lineTo(2, -sword.length + 30); ctx.closePath(); ctx.fill(); // Blade edge highlight ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, -sword.length); ctx.lineTo(-sword.width / 2, -sword.length + 20); ctx.stroke(); // Blood on blade (if has kills) if (sword.kills > 0) { ctx.fillStyle = 'rgba(139, 0, 0, 0.7)'; for (let i = 0; i < Math.min(sword.kills, 5); i++) { const y = -sword.length + 30 + i * 25; ctx.beginPath(); ctx.ellipse((i % 2 === 0 ? -3 : 3), y, 4 + i, 8 + i * 2, 0.2 * i, 0, Math.PI * 2); ctx.fill(); } } ctx.shadowBlur = 0; // Guard (crossguard) ctx.fillStyle = '#8b7355'; ctx.fillRect(-25, -15, 50, 8); ctx.strokeStyle = '#5a4a3a'; ctx.lineWidth = 2; ctx.strokeRect(-25, -15, 50, 8); // Guard decorations ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(-20, -11, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(20, -11, 3, 0, Math.PI * 2); ctx.fill(); // Handle ctx.fillStyle = '#4a3728'; ctx.fillRect(-6, -7, 12, sword.handleLength); // Handle wrapping ctx.strokeStyle = '#2a1f18'; ctx.lineWidth = 2; for (let i = 0; i < 5; i++) { const y = i * 10; ctx.beginPath(); ctx.moveTo(-6, y); ctx.lineTo(6, y + 5); ctx.stroke(); } // Pommel ctx.fillStyle = '#8b7355'; ctx.beginPath(); ctx.arc(0, sword.handleLength - 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(0, sword.handleLength - 2, 5, 0, Math.PI * 2); ctx.fill(); // Blade outline ctx.strokeStyle = '#4a5568'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -sword.length); ctx.lineTo(-sword.width / 2, -sword.length + 20); ctx.lineTo(-sword.width / 2 - 2, -15); ctx.lineTo(sword.width / 2 + 2, -15); ctx.lineTo(sword.width / 2, -sword.length + 20); ctx.closePath(); ctx.stroke(); ctx.restore(); } // Get sword blade tip and base positions in world coordinates // The blade is the collision area - NOT the finger/mouse position function getSwordPoints() { const angleRad = sword.angle * Math.PI / 180; // Transform local blade coordinates to world space // Tip is at (0, -sword.length) in local coords, base at (0, -15) // Using proper 2D rotation: x' = x*cos - y*sin, y' = x*sin + y*cos const tipX = sword.x + Math.sin(angleRad) * sword.length; const tipY = sword.y - Math.cos(angleRad) * sword.length; const baseX = sword.x + Math.sin(angleRad) * 15; const baseY = sword.y - Math.cos(angleRad) * 15; // Perpendicular vector for blade width (rotated 90 degrees from blade direction) const perpX = Math.cos(angleRad); const perpY = Math.sin(angleRad); const hw = sword.width / 2; return { tip: { x: tipX, y: tipY }, base: { x: baseX, y: baseY }, // Four corners of the blade for collision detection edge1: { x: tipX - perpX * hw, y: tipY - perpY * hw }, edge2: { x: baseX - perpX * hw, y: baseY - perpY * hw }, edge3: { x: baseX + perpX * hw, y: baseY + perpY * hw }, edge4: { x: tipX + perpX * hw, y: tipY + perpY * hw } }; } // Check if a point is inside a polygon function pointInPolygon(px, py, polygon) { let inside = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const xi = polygon[i].x, yi = polygon[i].y; const xj = polygon[j].x, yj = polygon[j].y; if (((yi > py) !== (yj > py)) && (px < (xj - xi) * (py - yi) / (yj - yi) + xi)) { inside = !inside; } } return inside; } // Check line segment intersection function lineIntersection(p1, p2, p3, p4) { const d = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y); if (Math.abs(d) < 0.0001) return null; const ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / d; const ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / d; if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) { return { x: p1.x + ua * (p2.x - p1.x), y: p1.y + ua * (p2.y - p1.y), t: ua }; } return null; } // Get bounding box for a zombie body part in world coordinates function getPartBounds(partName) { const part = zombie.parts[partName]; if (!part || !part.visible || !part.attached) return null; const scale = zombie.scale * zombie.globalScale; // Part dimensions based on name const dims = { head: { width: 70, height: 90, offsetY: -25 }, torso: { width: 90, height: 160, offsetY: 0 }, leftUpperArm: { width: 28, height: 75, offsetY: 35 }, rightUpperArm: { width: 28, height: 75, offsetY: 35 }, leftForearm: { width: 24, height: 120, offsetY: 55 }, rightForearm: { width: 24, height: 120, offsetY: 55 }, leftThigh: { width: 36, height: 85, offsetY: 40 }, rightThigh: { width: 36, height: 85, offsetY: 40 }, leftLowerLeg: { width: 28, height: 105, offsetY: 50 }, rightLowerLeg: { width: 28, height: 105, offsetY: 50 } }; const dim = dims[partName]; if (!dim) return null; // Calculate world position let worldX = zombie.baseX + part.x * scale; let worldY = zombie.baseY + part.y * scale; const angleRad = part.rotation * Math.PI / 180; const w = dim.width * scale / 2; const h = dim.height * scale / 2; const oy = dim.offsetY * scale; // Create rotated bounding box as polygon const cos = Math.cos(angleRad); const sin = Math.sin(angleRad); const corners = [ { x: -w, y: -h + oy }, { x: w, y: -h + oy }, { x: w, y: h + oy }, { x: -w, y: h + oy } ]; return corners.map(c => ({ x: worldX + c.x * cos - c.y * sin, y: worldY + c.x * sin + c.y * cos })); } // Check sword collision with zombie - accumulates damage like chainsaw but with 50% less blood function checkSwordCollision() { if (!sword.active || !sword.following || sword.dropping || !zombie) return; const points = getSwordPoints(); // Calculate previous frame blade positions const prevAngleRad = sword.prevAngle * Math.PI / 180; const prevTipX = sword.prevX + Math.sin(prevAngleRad) * sword.length; const prevTipY = sword.prevY - Math.cos(prevAngleRad) * sword.length; const prevBaseX = sword.prevX + Math.sin(prevAngleRad) * 15; const prevBaseY = sword.prevY - Math.cos(prevAngleRad) * 15; // Calculate sword movement speed for impact force const dx = sword.x - sword.prevX; const dy = sword.y - sword.prevY; const speed = Math.sqrt(dx * dx + dy * dy); // Parts in order of priority (outer extremities first) const partsToCheck = [ 'head', 'leftForearm', 'rightForearm', 'leftUpperArm', 'rightUpperArm', 'leftLowerLeg', 'rightLowerLeg', 'leftThigh', 'rightThigh', 'torso' ]; let anyHit = false; for (const partName of partsToCheck) { const part = zombie.parts[partName]; if (!part || !part.visible || !part.attached) continue; const bounds = getPartBounds(partName); if (!bounds) continue; let hit = false; let hitPoint = null; // Check 1: Blade tip path intersection for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection( { x: prevTipX, y: prevTipY }, points.tip, bounds[i], bounds[j] ); if (intersection) { hit = true; hitPoint = intersection; break; } } // Check 2: Blade base path intersection if (!hit) { for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection( { x: prevBaseX, y: prevBaseY }, points.base, bounds[i], bounds[j] ); if (intersection) { hit = true; hitPoint = intersection; break; } } } // Check 3: Current blade edge intersects part bounds if (!hit) { for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection(points.base, points.tip, bounds[i], bounds[j]); if (intersection) { hit = true; hitPoint = intersection; break; } } } // Check 4: Blade tip or midpoint inside bounds if (!hit) { if (pointInPolygon(points.tip.x, points.tip.y, bounds)) { hit = true; hitPoint = points.tip; } else { const midX = (points.tip.x + points.base.x) / 2; const midY = (points.tip.y + points.base.y) / 2; if (pointInPolygon(midX, midY, bounds)) { hit = true; hitPoint = { x: midX, y: midY }; } } } if (hit) { anyHit = true; sword.sawingActive = true; // Initialize sawing state for this part if not exists if (!sword.sawingParts[partName]) { sword.sawingParts[partName] = { damage: 0, startTime: Date.now(), lastHitPoint: hitPoint }; } // Update hit point sword.sawingParts[partName].lastHitPoint = hitPoint; // Accumulate damage (faster when moving, still damages when stationary on the zombie) const damageAmount = sword.damagePerHit * (0.5 + Math.min(speed, 10) / 10); sword.sawingParts[partName].damage += damageAmount; // Set the part to blood red color based on damage const damageProgress = Math.min(sword.sawingParts[partName].damage / sword.detachThreshold, 1); part.chainsawDamage = damageProgress; // Reuse chainsaw damage coloring // Play sword sound periodically if (Math.random() < 0.15) { playSound('sword_slash_sound', 0.6); } // Blood shower effect - 50% of chainsaw intensity const showerCount = 20 + Math.floor(speed * 1.5); // Half of chainsaw (was 40 + speed*3) for (let i = 0; i < showerCount; i++) { const angle = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 450; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + dx * 4, vy: Math.sin(angle) * spd + dy * 3 - 120, size: 6 + Math.random() * 18, life: 1.0 + Math.random() * 0.8, gravity: 400, type: 'circle' }); } // Flesh chunks - 50% of chainsaw (was 8) for (let i = 0; i < 4; i++) { const angle = Math.random() * Math.PI * 2; const spd = 120 + Math.random() * 250; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.5 ? '#3dcc10' : '#5cc85c', vx: Math.cos(angle) * spd + dx * 3, vy: Math.sin(angle) * spd - 80, size: 8 + Math.random() * 15, life: 1.8 + Math.random(), gravity: 500, type: 'chunk' }); } // Make zombie spasm violently zombie.isRagdolling = true; sword.spasmsIntensity = Math.min(sword.spasmsIntensity + 0.1, 1); // Violent spasming - random impulses and limb flailing const spasmsForce = 80 + damageProgress * 120; zombie.applyImpulse( (Math.random() - 0.5) * spasmsForce, (Math.random() - 0.5) * spasmsForce * 0.5 ); // Extra flailing for all limbs (outward bias) for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limbName !== 'torso') { const outDir = limbName.includes('left') ? 1 : -1; limb.angularVelocity += (Math.random() * 0.7 + 0.3) * outDir * 400 * damageProgress; } } // Check if this part should be marked for delayed detachment if (sword.sawingParts[partName].damage >= sword.detachThreshold && !sword.partsReadyToDetach[partName]) { // Calculate force direction based on sword movement const forceX = dx * 8 + (Math.random() - 0.5) * 200 + (Math.random() > 0.5 ? 150 : -150); const forceY = dy * 6 - 200 - Math.random() * 150; // Mark part for delayed detachment sword.partsReadyToDetach[partName] = { forceX: forceX, forceY: forceY, hitPoint: { x: hitPoint.x, y: hitPoint.y } }; // Start collapse timer if first part if (sword.collapseStartTime === null) { sword.collapseStartTime = Date.now(); } // Part stays attached but fully blood red part.chainsawDamage = 1; } } } // Decay spasm intensity if not hitting if (!anyHit) { sword.spasmsIntensity *= 0.95; if (sword.spasmsIntensity < 0.01) { sword.spasmsIntensity = 0; sword.sawingActive = false; } } // Check if it's time to collapse (3 seconds after first part reached threshold) if (sword.collapseStartTime !== null && Object.keys(sword.partsReadyToDetach).length > 0) { const timeSinceFirstDamage = Date.now() - sword.collapseStartTime; if (timeSinceFirstDamage >= sword.collapseDelay) { // Time to collapse! Detach all marked parts at once triggerSwordCollapse(); } else { // Still standing - zombie wobbles/spasms slightly while waiting to collapse if (zombie && Math.random() < 0.15) { zombie.applyImpulse((Math.random() - 0.5) * 30, (Math.random() - 0.5) * 15); } } } } // Trigger the delayed collapse after sword damage - all marked parts detach at once function triggerSwordCollapse() { if (!zombie) return; // Stop following cursor and start dropping sword.following = false; sword.dragging = false; sword.dropping = true; sword.dropVelocityY = 0; sword.dropAngularVel = (Math.random() - 0.5) * 200; // Random spin when dropped sword.sliceTrail = []; // Detach all parts that were marked for delayed detachment for (const partName in sword.partsReadyToDetach) { const data = sword.partsReadyToDetach[partName]; const part = zombie.parts[partName]; if (part && part.attached) { // Detach the part with stored force zombie.detachPart(partName, data.forceX, data.forceY); // The detached part keeps the blood red color part.chainsawDamage = 1; // Set continuous bleeding for sword-detached parts part.continuousBleeding = true; // Blood burst on detachment - 50% of chainsaw const hitPoint = data.hitPoint; for (let i = 0; i < 30; i++) { // Half of chainsaw (was 60) const angle = Math.random() * Math.PI * 2; const spd = 200 + Math.random() * 400; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.15 ? '#3dcc10' : '#00cc20', vx: Math.cos(angle) * spd + data.forceX * 0.3, vy: Math.sin(angle) * spd + data.forceY * 0.2, size: 8 + Math.random() * 20, life: 1.2 + Math.random() * 0.8, gravity: 400, type: 'circle' }); } sword.kills++; } } // Clear the delayed detachment state sword.partsReadyToDetach = {}; sword.collapseStartTime = null; sword.sawingParts = {}; // Strong impulse for dramatic collapse if (zombie) { zombie.applyImpulse((Math.random() - 0.5) * 100, -50); } incrementSpecimens(); // Schedule auto-reset after sword collapse scheduleAutoReset(); } // Check sword collision with already-sliced pieces and slice them further function checkSlicedPieceCollision(points, prevTipX, prevTipY, prevBaseX, prevBaseY, dx, dy, speed) { for (let i = slicedPieces.length - 1; i >= 0; i--) { const piece = slicedPieces[i]; if (!piece.visible || piece.life < 0.5) continue; // Don't slice fading pieces // Simple AABB collision check first const pieceSize = Math.max(piece.partDims.width, piece.partDims.height) * piece.scale; const halfSize = pieceSize / 2; // Check if blade tip is near the piece const distX = points.tip.x - piece.x; const distY = points.tip.y - piece.y; const dist = Math.sqrt(distX * distX + distY * distY); if (dist > pieceSize) continue; // Too far // More detailed check - is the blade passing through the piece? const pieceAngleRad = piece.rotation * Math.PI / 180; const cos = Math.cos(pieceAngleRad); const sin = Math.sin(pieceAngleRad); // Create bounding polygon for the piece const w = piece.partDims.width * piece.scale / 2; const h = piece.partDims.height * piece.scale / 2; const oy = piece.partDims.offsetY * piece.scale; const corners = [ { x: -w, y: -h + oy }, { x: w, y: -h + oy }, { x: w, y: h + oy }, { x: -w, y: h + oy } ].map(c => ({ x: piece.x + c.x * cos - c.y * sin, y: piece.y + c.x * sin + c.y * cos })); // Check if blade intersects piece bounds let hit = false; let hitPoint = null; // Check blade tip path const tipPath = { start: { x: prevTipX, y: prevTipY }, end: points.tip }; for (let j = 0; j < corners.length; j++) { const k = (j + 1) % corners.length; const intersection = lineIntersection(tipPath.start, tipPath.end, corners[j], corners[k]); if (intersection) { hit = true; hitPoint = intersection; break; } } // Check if tip is inside if (!hit && pointInPolygon(points.tip.x, points.tip.y, corners)) { hit = true; hitPoint = points.tip; } if (hit) { playSound('sword_slash_sound', 0.5); // Re-slice this piece! reSlicePiece(i, hitPoint, dx * 3, dy * 2 - 80, speed * 2); sword.kills++; return; // One slice per frame } } } // Re-slice an already-sliced piece into two smaller pieces function reSlicePiece(pieceIndex, hitPoint, forceX, forceY, force) { const piece = slicedPieces[pieceIndex]; // Remove the original piece slicedPieces.splice(pieceIndex, 1); // Calculate new slice line in piece's local coordinates const pieceAngleRad = piece.rotation * Math.PI / 180; const cosA = Math.cos(-pieceAngleRad); const sinA = Math.sin(-pieceAngleRad); const hitRelX = hitPoint.x - piece.x; const hitRelY = hitPoint.y - piece.y; const localHitX = (hitRelX * cosA - hitRelY * sinA) / piece.scale; const localHitY = (hitRelX * sinA + hitRelY * cosA) / piece.scale; const sliceAngle = Math.atan2(forceY, forceX); const slicePerp = sliceAngle + Math.PI / 2; const sliceLength = 80; const newSliceLine = { start: { x: localHitX - Math.cos(slicePerp) * sliceLength, y: localHitY - Math.sin(slicePerp) * sliceLength }, end: { x: localHitX + Math.cos(slicePerp) * sliceLength, y: localHitY + Math.sin(slicePerp) * sliceLength } }; const separationSpeed = 25 + force * 0.1; const sliceDirX = Math.cos(slicePerp); const sliceDirY = Math.sin(slicePerp); // Create two new smaller pieces const newPiece1 = new SlicedPiece({ x: piece.x, y: piece.y, rotation: piece.rotation, scale: piece.scale * 0.9, // Slightly smaller partName: piece.partName, isLeft: piece.isLeft, sliceLine: newSliceLine, side: 'above', bodyColor: piece.bodyColor, clothingColor: piece.clothingColor, mass: piece.mass * 0.5, velocityX: piece.velocityX + forceX * 0.2 + sliceDirX * separationSpeed, velocityY: piece.velocityY + forceY * 0.2 - sliceDirY * separationSpeed - 30, angularVelocity: piece.angularVelocity + (Math.random() - 0.5) * 300, bleedDirection: { x: sliceDirX, y: sliceDirY } }); const newPiece2 = new SlicedPiece({ x: piece.x, y: piece.y, rotation: piece.rotation, scale: piece.scale * 0.9, partName: piece.partName, isLeft: piece.isLeft, sliceLine: newSliceLine, side: 'below', bodyColor: piece.bodyColor, clothingColor: piece.clothingColor, mass: piece.mass * 0.5, velocityX: piece.velocityX + forceX * 0.2 - sliceDirX * separationSpeed, velocityY: piece.velocityY + forceY * 0.2 + sliceDirY * separationSpeed - 20, angularVelocity: piece.angularVelocity + (Math.random() - 0.5) * 300, bleedDirection: { x: -sliceDirX, y: -sliceDirY } }); slicedPieces.push(newPiece1, newPiece2); // Blood spray for (let i = 0; i < 30; i++) { // doubled debris count const angle = Math.random() * Math.PI * 2; const spd = 40 + Math.random() * force * 0.5; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + forceX * 0.3, vy: Math.sin(angle) * spd + forceY * 0.2 - 40, size: 3 + Math.random() * 8, life: 0.6 + Math.random() * 0.4, gravity: 400, type: 'circle' }); } // Flesh chunks for (let i = 0; i < 3; i++) { const angle = sliceAngle + (Math.random() - 0.5) * 1.2; const spd = 60 + Math.random() * 80; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.5 ? piece.bodyColor : '#5cc85c', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 4 + Math.random() * 6, life: 1.2 + Math.random(), gravity: 500, type: 'chunk' }); } } // Slice a zombie body part dynamically at any point // Creates two separate pieces that fall with physics function sliceZombiePart(partName, hitPoint, forceX, forceY, force) { const part = zombie.parts[partName]; if (!part || !part.visible) return; // Check if this part has already been sliced too many times if (part.sliceCount && part.sliceCount >= 3) { // Fall back to detaching the whole part if (part.attached) { zombie.detachPart(partName, forceX, forceY); } return; } // Increment slice count part.sliceCount = (part.sliceCount || 0) + 1; const scale = zombie.scale * zombie.globalScale; // Calculate the slice line in the part's local coordinate system // First, transform hitPoint from world to zombie-local coords const worldPartX = zombie.baseX + part.x * scale; const worldPartY = zombie.baseY + part.y * scale; const partAngleRad = part.rotation * Math.PI / 180; // Get hit point relative to part center (in world coords) const hitRelX = hitPoint.x - worldPartX; const hitRelY = hitPoint.y - worldPartY; // Rotate into part's local space const cosA = Math.cos(-partAngleRad); const sinA = Math.sin(-partAngleRad); const localHitX = (hitRelX * cosA - hitRelY * sinA) / scale; const localHitY = (hitRelX * sinA + hitRelY * cosA) / scale; // Calculate slice direction based on sword movement const sliceAngle = Math.atan2(forceY, forceX); // Create a slice line through the hit point // The slice line should be perpendicular to the force direction const slicePerp = sliceAngle + Math.PI / 2; const sliceLength = 100; // Long enough to cut through any part const sliceLine = { start: { x: localHitX - Math.cos(slicePerp) * sliceLength, y: localHitY - Math.sin(slicePerp) * sliceLength }, end: { x: localHitX + Math.cos(slicePerp) * sliceLength, y: localHitY + Math.sin(slicePerp) * sliceLength } }; // Calculate world position for the sliced pieces const pieceWorldX = worldPartX; const pieceWorldY = worldPartY; const pieceRotation = part.rotation; // Create two sliced pieces - one for each side of the cut const basePieceOptions = { x: pieceWorldX, y: pieceWorldY, rotation: pieceRotation, scale: scale, partName: partName, isLeft: partName.includes('left'), sliceLine: sliceLine, bodyColor: zombie.bodyColor, clothingColor: zombie.clothingColor, mass: part.mass || 1 }; // Calculate offset for each piece so they separate at the cut const separationSpeed = 30 + force * 0.2; const sliceDirX = Math.cos(slicePerp); const sliceDirY = Math.sin(slicePerp); // Create "above" piece (moves in normal direction from slice) const pieceAbove = new SlicedPiece({ ...basePieceOptions, side: 'above', velocityX: forceX * 0.3 + sliceDirX * separationSpeed + (Math.random() - 0.5) * 50, velocityY: forceY * 0.3 - sliceDirY * separationSpeed - 50 + (Math.random() - 0.5) * 30, angularVelocity: (Math.random() - 0.5) * 200 + forceX * 0.3, bleedDirection: { x: sliceDirX, y: sliceDirY } }); // Create "below" piece (moves opposite to normal direction) const pieceBelow = new SlicedPiece({ ...basePieceOptions, side: 'below', velocityX: forceX * 0.3 - sliceDirX * separationSpeed + (Math.random() - 0.5) * 50, velocityY: forceY * 0.3 + sliceDirY * separationSpeed - 30 + (Math.random() - 0.5) * 30, angularVelocity: (Math.random() - 0.5) * 200 - forceX * 0.3, bleedDirection: { x: -sliceDirX, y: -sliceDirY } }); // Add pieces to the sliced pieces array slicedPieces.push(pieceAbove, pieceBelow); // Hide the original part part.visible = false; // If this was an attached part, also detach connected child parts if (part.attached) { part.attached = false; // Detach child parts based on hierarchy const childMap = { 'torso': ['head', 'leftUpperArm', 'rightUpperArm', 'leftThigh', 'rightThigh'], 'leftUpperArm': ['leftForearm'], 'rightUpperArm': ['rightForearm'], 'leftThigh': ['leftLowerLeg'], 'rightThigh': ['rightLowerLeg'] }; const children = childMap[partName] || []; children.forEach(childName => { const child = zombie.parts[childName]; if (child && child.attached && child.visible) { // Detach with some inherited velocity zombie.detachPart(childName, forceX * 0.5 + (Math.random() - 0.5) * 80, forceY * 0.3 - 50); } }); // Add a bleeding stump on the parent if this part had one if (!zombie.stumps) zombie.stumps = []; const joint = zombie.joints.find(j => j.child === partName); if (joint) { zombie.stumps.push({ x: hitPoint.x, y: hitPoint.y, localX: joint.parentOffset.x, localY: joint.parentOffset.y, parentPart: joint.parent, bleedingTime: 2.0, forceX: -forceX * 0.2, forceY: -forceY * 0.2 - 40 }); } } // Blood spray at the cut for (let i = 0; i < 25; i++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * force * 0.8; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + forceX * 0.4, vy: Math.sin(angle) * spd + forceY * 0.3 - 60, size: 4 + Math.random() * 12, life: 0.8 + Math.random() * 0.6, gravity: 400, type: 'circle' }); } // Add some flesh chunks for (let i = 0; i < 5; i++) { const angle = sliceAngle + (Math.random() - 0.5) * 1.5; const spd = 80 + Math.random() * 100; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.5 ? '#6b7c6a' : '#5cc85c', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 50, size: 6 + Math.random() * 8, life: 1.5 + Math.random(), gravity: 500, type: 'chunk' }); } // Trigger dramatic ragdoll reaction on remaining parts zombie.isRagdolling = true; // Calculate impact direction based on sword movement const impactForceX = forceX * 0.6; const impactForceY = forceY * 0.5 - 60; // Apply main impulse to the body zombie.applyImpulse(impactForceX, impactForceY); // Add extra angular momentum to remaining limbs for dramatic flailing for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limb.visible) { if (limbName !== 'torso') { const randomFlail = (Math.random() - 0.5) * 180; const impactInfluence = forceX * 0.5; limb.angularVelocity += randomFlail + impactInfluence / limb.mass; } } } // Add a recoil jolt to the torso rotation based on which side was hit const torso = zombie.parts.torso; if (torso && torso.attached && torso.visible) { const hitSide = hitPoint.x < zombie.baseX ? -1 : 1; torso.angularVelocity += hitSide * (40 + Math.random() * 50); } } // Handle sword input function setupSwordInput() { const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const isOnSword = (px, py) => { // Check if point is near the sword (generous hit area) const dx = px - sword.x; const dy = py - sword.y; const dist = Math.sqrt(dx * dx + dy * dy); return dist < sword.length + 40; }; const handleStart = (e) => { if (!sword.active || sword.dropping) return; e.preventDefault(); const pos = getPointerPos(e); if (isOnSword(pos.x, pos.y)) { // Start following cursor continuously (not just while held) sword.following = true; sword.dragging = true; sword.dragOffsetX = sword.x - pos.x; sword.dragOffsetY = sword.y - pos.y; sword.targetX = sword.x; sword.targetY = sword.y; sword.velocityX = 0; sword.velocityY = 0; sword.prevX = sword.x; sword.prevY = sword.y; sword.prevAngle = sword.angle; sword.targetAngle = sword.angle; } }; const handleMove = (e) => { // Follow cursor continuously once activated (not just while dragging) if (!sword.active || !sword.following || sword.dropping) return; e.preventDefault(); const pos = getPointerPos(e); // Store previous position for collision detection sword.prevX = sword.x; sword.prevY = sword.y; sword.prevAngle = sword.angle; // Set target position (the actual touch/mouse position) sword.targetX = pos.x + sword.dragOffsetX; sword.targetY = pos.y + sword.dragOffsetY; // Smoothly interpolate sword position toward target (reduces jitter) const smoothing = sword.smoothing; sword.x += (sword.targetX - sword.x) * smoothing; sword.y += (sword.targetY - sword.y) * smoothing; // Calculate smoothed velocity for angle calculation sword.velocityX = sword.velocityX * 0.7 + (sword.x - sword.prevX) * 0.3; sword.velocityY = sword.velocityY * 0.7 + (sword.y - sword.prevY) * 0.3; // Calculate movement speed from smoothed velocity const moveSpeed = Math.sqrt(sword.velocityX * sword.velocityX + sword.velocityY * sword.velocityY); // Only rotate when moving with significant speed (higher threshold reduces wobble) if (moveSpeed > 8) { // Calculate target angle from smoothed velocity const targetAngle = Math.atan2(sword.velocityX, -sword.velocityY) * 180 / Math.PI; // Set target angle sword.targetAngle = targetAngle; } // Smoothly interpolate angle toward target (very gradual to reduce wobble) let angleDiff = sword.targetAngle - sword.angle; while (angleDiff > 180) angleDiff -= 360; while (angleDiff < -180) angleDiff += 360; sword.angle += angleDiff * sword.angleSmoothng; // Update trail const points = getSwordPoints(); sword.sliceTrail.push({ tipX: points.tip.x, tipY: points.tip.y }); if (sword.sliceTrail.length > 8) { sword.sliceTrail.shift(); } // Check for collision (only if not dropping) checkSwordCollision(); }; const handleEnd = (e) => { if (!sword.active) return; // Only stop dragging, but keep following active sword.dragging = false; // Don't clear following - sword continues to follow cursor }; // Touch events canvas.addEventListener('touchstart', handleStart, { passive: false }); canvas.addEventListener('touchmove', handleMove, { passive: false }); canvas.addEventListener('touchend', handleEnd); canvas.addEventListener('touchcancel', handleEnd); // Mouse events canvas.addEventListener('mousedown', handleStart); canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mouseup', handleEnd); canvas.addEventListener('mouseleave', handleEnd); } function activateSword(startX, startY, startAngle) { sword.active = true; // Use provided position or defaults (for sword laying on left side of screen) sword.x = startX !== undefined ? startX : 120; sword.y = startY !== undefined ? startY : zombie.baseY + 180; sword.targetX = sword.x; sword.targetY = sword.y; sword.velocityX = 0; sword.velocityY = 0; // Sword laying on ground angle (pointing right, blade up) sword.angle = startAngle !== undefined ? startAngle : -75; sword.targetAngle = sword.angle; sword.dragging = false; sword.following = false; // Not following until player taps it sword.dropping = false; // Not dropping yet sword.dropVelocityY = 0; sword.dropAngularVel = 0; sword.sliceTrail = []; sword.hitCooldowns = {}; sword.kills = 0; sword.prevX = sword.x; sword.prevY = sword.y; sword.prevAngle = sword.angle; // Reset sawing state sword.sawingParts = {}; sword.sawingActive = false; sword.spasmsIntensity = 0; // Reset delayed collapse state sword.partsReadyToDetach = {}; sword.collapseStartTime = null; } function deactivateSword() { sword.active = false; sword.dragging = false; sword.following = false; sword.dropping = false; sword.dropVelocityY = 0; sword.dropAngularVel = 0; sword.sliceTrail = []; // Reset sawing state sword.sawingParts = {}; sword.sawingActive = false; sword.spasmsIntensity = 0; // Reset delayed collapse state sword.partsReadyToDetach = {}; sword.collapseStartTime = null; } // ============================================================================ // INTERACTIVE FLAMETHROWER SYSTEM // ============================================================================ function drawFlamethrower(ctx) { if (!flamethrower.active) return; const nozzleX = flamethrower.nozzleX; const nozzleY = flamethrower.nozzleY; // Calculate angle to target const dx = flamethrower.targetX - nozzleX; const dy = flamethrower.targetY - nozzleY; const angle = Math.atan2(dy, dx); // Draw flame stream if firing if (flamethrower.firing) { const dist = Math.sqrt(dx * dx + dy * dy); const numSegments = Math.min(20, Math.floor(dist / 30)); // Draw flame stream for (let i = 0; i < numSegments; i++) { const t = (i + 1) / numSegments; const segX = nozzleX + dx * t; const segY = nozzleY + dy * t; // Flame gets wider as it goes const flameWidth = 15 + t * 40; const wobble = Math.sin(Date.now() * 0.02 + i * 0.5) * 10 * t; // Draw flame segment const gradient = ctx.createRadialGradient( segX + wobble, segY, 0, segX + wobble, segY, flameWidth ); gradient.addColorStop(0, `rgba(255, 255, 150, ${0.9 - t * 0.4})`); gradient.addColorStop(0.3, `rgba(255, 200, 50, ${0.8 - t * 0.4})`); gradient.addColorStop(0.6, `rgba(255, 100, 0, ${0.6 - t * 0.3})`); gradient.addColorStop(1, 'rgba(255, 50, 0, 0)'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(segX + wobble, segY, flameWidth, 0, Math.PI * 2); ctx.fill(); } // Spawn fire particles along the stream if (Math.random() < 0.8) { const t = Math.random(); const px = nozzleX + dx * t; const py = nozzleY + dy * t; spawnParticles(px, py, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ffcc00', vx: (Math.random() - 0.5) * 50 + Math.cos(angle) * 50, vy: (Math.random() - 0.5) * 50 - 50, size: 8 + Math.random() * 15, life: 0.3 + Math.random() * 0.3, gravity: -100, type: 'fire' }); } } // Draw flamethrower nozzle at bottom of screen ctx.save(); ctx.translate(nozzleX, nozzleY); ctx.rotate(angle + Math.PI / 2); // Point toward target // Gas tank (behind nozzle) ctx.fillStyle = '#22dd40'; ctx.beginPath(); ctx.roundRect(-25, 20, 50, 80, 10); ctx.fill(); ctx.strokeStyle = '#990000'; ctx.lineWidth = 3; ctx.stroke(); // Tank stripes ctx.fillStyle = '#ffcc00'; ctx.fillRect(-20, 30, 40, 8); ctx.fillRect(-20, 50, 40, 8); // Tank cap ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(0, 100, 12, 0, Math.PI * 2); ctx.fill(); // Main barrel ctx.fillStyle = '#444'; ctx.beginPath(); ctx.roundRect(-15, -60, 30, 80, 5); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); // Barrel ridges ctx.fillStyle = '#555'; for (let i = 0; i < 4; i++) { ctx.fillRect(-18, -50 + i * 18, 36, 6); } // Nozzle tip ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(-12, -60); ctx.lineTo(-8, -80); ctx.lineTo(8, -80); ctx.lineTo(12, -60); ctx.closePath(); ctx.fill(); // Flame igniter glow when firing if (flamethrower.firing) { ctx.fillStyle = 'rgba(255, 150, 50, 0.8)'; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 20; ctx.beginPath(); ctx.arc(0, -75, 10, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } // Handle ctx.fillStyle = '#8b4513'; ctx.beginPath(); ctx.roundRect(-8, 10, 16, 25, 3); ctx.fill(); // Trigger ctx.fillStyle = '#222'; ctx.beginPath(); ctx.moveTo(-3, 25); ctx.lineTo(0, 35); ctx.lineTo(3, 25); ctx.closePath(); ctx.fill(); ctx.restore(); } function checkFlamethrowerDamage() { if (!flamethrower.active || !flamethrower.firing || !zombie) return; const dx = flamethrower.targetX - flamethrower.nozzleX; const dy = flamethrower.targetY - flamethrower.nozzleY; const dist = Math.sqrt(dx * dx + dy * dy); const scale = zombie.scale * zombie.globalScale; // Part hit boxes (relative to zombie.baseY offset) const partHitZones = { head: { minY: -170, maxY: -70, radius: 40 }, torso: { minY: -70, maxY: 80, radius: 50 }, leftUpperArm: { minY: -70, maxY: 10, xOffset: -60, radius: 25 }, rightUpperArm: { minY: -70, maxY: 10, xOffset: 60, radius: 25 }, leftForearm: { minY: 10, maxY: 130, xOffset: -60, radius: 20 }, rightForearm: { minY: 10, maxY: 130, xOffset: 60, radius: 20 }, leftThigh: { minY: 80, maxY: 165, xOffset: -25, radius: 25 }, rightThigh: { minY: 80, maxY: 165, xOffset: 25, radius: 25 }, leftLowerLeg: { minY: 165, maxY: 280, xOffset: -25, radius: 20 }, rightLowerLeg: { minY: 165, maxY: 280, xOffset: 25, radius: 20 } }; // Check multiple points along the flame stream for (let t = 0.3; t <= 1; t += 0.1) { const flameX = flamethrower.nozzleX + dx * t; const flameY = flamethrower.nozzleY + dy * t; // Check each body part for flame hit for (const partName in partHitZones) { const part = zombie.parts[partName]; if (!part || !part.visible || !part.attached) continue; const zone = partHitZones[partName]; const partCenterX = zombie.baseX + (zone.xOffset || 0) * scale; const partMinY = zombie.baseY + zone.minY * scale; const partMaxY = zombie.baseY + zone.maxY * scale; const partCenterY = (partMinY + partMaxY) / 2; // Check if flame is near this part const distX = flameX - partCenterX; const distY = flameY - partCenterY; const partDist = Math.sqrt(distX * distX + distY * distY); if (partDist < zone.radius * scale * 1.5) { // Initialize burn level if not set if (part.burnLevel === undefined) part.burnLevel = 0; // Apply burn damage to this specific part // Slower burn rate: ~5 seconds to char black (0-80%), then fade to skeleton (80-100%) // At 60fps, 5 seconds = 300 frames. 80 / 300 ≈ 0.27 per frame part.burnLevel += 0.27; // Cap burn level at 100 (fully burned to skeleton) part.burnLevel = Math.min(part.burnLevel, 100); // Set global burning state zombie.burning = true; zombie.isRagdolling = true; // Make zombie react occasionally if (Math.random() < 0.08) { zombie.applyImpulse((Math.random() - 0.5) * 40, -15); } // Spawn fire particles on the burning part if (Math.random() < 0.5) { spawnParticles( partCenterX + (Math.random() - 0.5) * zone.radius * scale, partCenterY + (Math.random() - 0.5) * (partMaxY - partMinY) * 0.5, 1, { color: Math.random() > 0.3 ? '#ff6600' : '#ffcc00', vy: -80 - Math.random() * 60, vx: (Math.random() - 0.5) * 30, size: 8 + Math.random() * 12, life: 0.3 + Math.random() * 0.2, gravity: -150, type: 'fire' } ); } // Spawn smoke from charring parts if (part.burnLevel > 30 && Math.random() < 0.2) { spawnParticles( partCenterX + (Math.random() - 0.5) * zone.radius * scale, partCenterY, 1, { color: '#333', vy: -40 - Math.random() * 30, vx: (Math.random() - 0.5) * 20, size: 10 + Math.random() * 15, life: 0.8 + Math.random() * 0.5, gravity: -30, type: 'circle' } ); } // Spawn embers from heavily burned parts if (part.burnLevel > 60 && Math.random() < 0.15) { spawnParticles( partCenterX + (Math.random() - 0.5) * zone.radius * scale, partCenterY, 1, { color: '#ff4400', vy: -30 - Math.random() * 50, vx: (Math.random() - 0.5) * 40, size: 2 + Math.random() * 3, life: 0.5 + Math.random() * 0.3, gravity: 50, type: 'circle' } ); } } } } // Check if zombie is fully burned (all visible parts at max burn) let allBurned = true; let anyBurning = false; for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.visible && part.attached) { if (part.burnLevel === undefined || part.burnLevel < 100) { allBurned = false; } if (part.burnLevel !== undefined && part.burnLevel > 0) { anyBurning = true; } } } // Zombie is a smoldering skeleton when fully burned if (allBurned && anyBurning) { zombie.skeleton = true; zombie.burning = false; zombie.charred = true; zombie.noBlood = true; // Increment kill counter only once if (!flamethrower.killCounted) { flamethrower.killCounted = true; incrementSpecimens(); // Schedule auto-reset after zombie becomes skeleton scheduleAutoReset(); } } } function setupFlamethrowerInput() { const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const startFiring = (e) => { // Don't fire if flamethrower not active or if sword is being used if (!flamethrower.active || sword.active) return; e.preventDefault(); const pos = getPointerPos(e); flamethrower.firing = true; flamethrower.targetX = pos.x; flamethrower.targetY = pos.y; // Start fire sound if (!flamethrower.fireSound || Date.now() - flamethrower.lastFireTime > 500) { playSound('fire_sound', 0.6); flamethrower.lastFireTime = Date.now(); } }; const updateTarget = (e) => { if (!flamethrower.active || !flamethrower.firing || sword.active) return; e.preventDefault(); const pos = getPointerPos(e); flamethrower.targetX = pos.x; flamethrower.targetY = pos.y; // Play fire sound periodically while firing if (Date.now() - flamethrower.lastFireTime > 800) { playSound('fire_sound', 0.5); flamethrower.lastFireTime = Date.now(); } }; const stopFiring = () => { if (!flamethrower.active) return; flamethrower.firing = false; // Check if zombie is more than 50% burned - if so, collapse into heap if (zombie && !flamethrower.collapsed) { let totalBurn = 0; let partCount = 0; for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.visible && part.attached) { totalBurn += part.burnLevel || 0; partCount++; } } const avgBurn = partCount > 0 ? totalBurn / partCount : 0; // If more than 50% burned, collapse into a heap if (avgBurn > 50) { flamethrower.collapsed = true; collapseZombieIntoHeap(); } } }; // Touch events canvas.addEventListener('touchstart', startFiring, { passive: false }); canvas.addEventListener('touchmove', updateTarget, { passive: false }); canvas.addEventListener('touchend', stopFiring); canvas.addEventListener('touchcancel', stopFiring); // Mouse events canvas.addEventListener('mousedown', startFiring); canvas.addEventListener('mousemove', updateTarget); canvas.addEventListener('mouseup', stopFiring); canvas.addEventListener('mouseleave', stopFiring); } function activateFlamethrower() { flamethrower.active = true; flamethrower.firing = false; flamethrower.nozzleX = CANVAS_WIDTH / 2; flamethrower.nozzleY = CANVAS_HEIGHT - 80; flamethrower.targetX = CANVAS_WIDTH / 2; flamethrower.targetY = CANVAS_HEIGHT / 2; flamethrower.burnDamage = 0; flamethrower.flameParticles = []; flamethrower.killCounted = false; // Reset kill flag flamethrower.collapsed = false; // Reset collapse flag } // Collapse burned zombie into a heap on the floor function collapseZombieIntoHeap() { if (!zombie) return; playSound('crush_sound', 0.6); zombie.noBlood = true; zombie.crumble(); // Spawn smoke and ember particles from the collapse for (let i = 0; i < 20; i++) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: '#333', vy: -30 - Math.random() * 50, vx: (Math.random() - 0.5) * 40, size: 10 + Math.random() * 15, life: 1 + Math.random() * 0.5, gravity: -20, type: 'circle' } ); } // Some embers for (let i = 0; i < 30; i++) { // doubled debris count spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: '#ff4400', vy: -20 - Math.random() * 40, vx: (Math.random() - 0.5) * 60, size: 2 + Math.random() * 3, life: 0.5 + Math.random() * 0.5, gravity: 100, type: 'circle' } ); } // Count the kill if (!flamethrower.killCounted) { flamethrower.killCounted = true; incrementSpecimens(); } // Schedule auto-reset after flamethrower collapse scheduleAutoReset(); } function deactivateFlamethrower() { flamethrower.active = false; flamethrower.firing = false; flamethrower.flameParticles = []; if (zombie) { zombie.burning = false; } } // ============================================================================ // INTERACTIVE CHAINSAW SYSTEM // ============================================================================ function drawChainsaw(ctx) { if (!chainsaw.active) return; const angleRad = chainsaw.angle * Math.PI / 180; // Animate teeth when dragging if (chainsaw.dragging) { chainsaw.teethOffset = (chainsaw.teethOffset + 15) % 20; } ctx.save(); ctx.translate(chainsaw.x, chainsaw.y); ctx.rotate(angleRad); // Chainsaw glow effect when active if (chainsaw.dragging) { ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 20; } // Main body (motor housing) ctx.fillStyle = '#e83820'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2, -chainsaw.bodyHeight/2, chainsaw.bodyWidth, chainsaw.bodyHeight, 5); ctx.fill(); ctx.strokeStyle = '#c02a18'; ctx.lineWidth = 2; ctx.stroke(); // Body details - vents ctx.fillStyle = '#222'; for (let i = 0; i < 3; i++) { ctx.fillRect(-chainsaw.bodyWidth/2 + 8 + i * 12, -chainsaw.bodyHeight/2 + 8, 8, 4); } // Engine cap ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(-chainsaw.bodyWidth/2 + 15, 0, 12, 0, Math.PI * 2); ctx.fill(); // Handle (back) ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2 - 20, -8, 25, 16, 3); ctx.fill(); ctx.strokeStyle = '#2a1f18'; ctx.lineWidth = 1; ctx.stroke(); // Front handle ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-10, -chainsaw.bodyHeight/2 - 15, 20, 18, 3); ctx.fill(); ctx.stroke(); // Blade bar ctx.fillStyle = '#666'; ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, -6); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, -4); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength, 0); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 4); ctx.lineTo(chainsaw.bodyWidth/2 - 10, 6); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 1; ctx.stroke(); // Blade tip (rounded) ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 0, 6, -Math.PI/2, Math.PI/2); ctx.fill(); // Chain teeth (animated) ctx.fillStyle = '#888'; const teethStart = chainsaw.bodyWidth/2 - 5; const teethEnd = chainsaw.bodyWidth/2 + chainsaw.bladeLength - 15; const numTeeth = 12; for (let i = 0; i < numTeeth; i++) { const t = (i + chainsaw.teethOffset / 20) / numTeeth; const tx = teethStart + t * (teethEnd - teethStart); // Top teeth ctx.beginPath(); ctx.moveTo(tx, -6); ctx.lineTo(tx + 3, -10); ctx.lineTo(tx + 6, -6); ctx.closePath(); ctx.fill(); // Bottom teeth ctx.beginPath(); ctx.moveTo(tx + 3, 6); ctx.lineTo(tx + 6, 10); ctx.lineTo(tx + 9, 6); ctx.closePath(); ctx.fill(); } // Chain (edge line) ctx.strokeStyle = '#555'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, -7); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 12, -5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, 7); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 12, 5); ctx.stroke(); // Blood on blade (if has kills) if (chainsaw.kills > 0) { ctx.fillStyle = 'rgba(139, 0, 0, 0.8)'; for (let i = 0; i < Math.min(chainsaw.kills, 5); i++) { const bx = chainsaw.bodyWidth/2 + 20 + i * 15; ctx.beginPath(); ctx.ellipse(bx, (i % 2 === 0 ? -4 : 4), 6, 8, 0.3 * i, 0, Math.PI * 2); ctx.fill(); } } ctx.shadowBlur = 0; ctx.restore(); } // Get chainsaw blade tip position in world coordinates function getChainsawBladePoints() { const angleRad = chainsaw.angle * Math.PI / 180; const cos = Math.cos(angleRad); const sin = Math.sin(angleRad); // Blade extends from body to tip const bladeStartX = chainsaw.bodyWidth/2 - 10; const bladeTipX = chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10; // Transform to world coordinates const tipX = chainsaw.x + cos * bladeTipX; const tipY = chainsaw.y + sin * bladeTipX; const baseX = chainsaw.x + cos * bladeStartX; const baseY = chainsaw.y + sin * bladeStartX; // Blade width in world space (top and bottom edges) const perpX = -sin; const perpY = cos; const bladeHalfWidth = 10; return { tip: { x: tipX, y: tipY }, base: { x: baseX, y: baseY }, // Blade edges for collision topEdge: { start: { x: baseX + perpX * bladeHalfWidth, y: baseY + perpY * bladeHalfWidth }, end: { x: tipX + perpX * bladeHalfWidth, y: tipY + perpY * bladeHalfWidth } }, bottomEdge: { start: { x: baseX - perpX * bladeHalfWidth, y: baseY - perpY * bladeHalfWidth }, end: { x: tipX - perpX * bladeHalfWidth, y: tipY - perpY * bladeHalfWidth } } }; } // Check chainsaw collision with zombie - zombie spasms and flails, then parts detach after sustained contact function checkChainsawCollision() { if (!chainsaw.active || !chainsaw.dragging || !zombie) return; const points = getChainsawBladePoints(); // Calculate previous frame blade positions const prevAngleRad = chainsaw.prevAngle * Math.PI / 180; const prevCos = Math.cos(prevAngleRad); const prevSin = Math.sin(prevAngleRad); const bladeTipLocalX = chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10; const bladeBaseLocalX = chainsaw.bodyWidth/2 - 10; const prevTipX = chainsaw.prevX + prevCos * bladeTipLocalX; const prevTipY = chainsaw.prevY + prevSin * bladeTipLocalX; const prevBaseX = chainsaw.prevX + prevCos * bladeBaseLocalX; const prevBaseY = chainsaw.prevY + prevSin * bladeBaseLocalX; // Calculate movement speed for impact force const dx = chainsaw.x - chainsaw.prevX; const dy = chainsaw.y - chainsaw.prevY; const speed = Math.sqrt(dx * dx + dy * dy); // Parts in order of priority (outer parts first) const partsToCheck = [ 'head', 'leftForearm', 'rightForearm', 'leftUpperArm', 'rightUpperArm', 'leftLowerLeg', 'rightLowerLeg', 'leftThigh', 'rightThigh', 'torso' ]; let anyHit = false; for (const partName of partsToCheck) { const part = zombie.parts[partName]; if (!part || !part.visible || !part.attached) continue; const bounds = getPartBounds(partName); if (!bounds) continue; let hit = false; let hitPoint = null; // Check 1: Blade tip path intersection for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection( { x: prevTipX, y: prevTipY }, points.tip, bounds[i], bounds[j] ); if (intersection) { hit = true; hitPoint = intersection; break; } } // Check 2: Blade base path intersection if (!hit) { for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection( { x: prevBaseX, y: prevBaseY }, points.base, bounds[i], bounds[j] ); if (intersection) { hit = true; hitPoint = intersection; break; } } } // Check 3: Current blade edge intersects part bounds if (!hit) { for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection(points.base, points.tip, bounds[i], bounds[j]); if (intersection) { hit = true; hitPoint = intersection; break; } } } // Check 4: Blade tip or midpoint inside bounds if (!hit) { if (pointInPolygon(points.tip.x, points.tip.y, bounds)) { hit = true; hitPoint = points.tip; } else { const midX = (points.tip.x + points.base.x) / 2; const midY = (points.tip.y + points.base.y) / 2; if (pointInPolygon(midX, midY, bounds)) { hit = true; hitPoint = { x: midX, y: midY }; } } } if (hit) { anyHit = true; chainsaw.sawingActive = true; // Initialize sawing state for this part if not exists if (!chainsaw.sawingParts[partName]) { chainsaw.sawingParts[partName] = { damage: 0, startTime: Date.now(), lastHitPoint: hitPoint }; } // Update hit point chainsaw.sawingParts[partName].lastHitPoint = hitPoint; // Accumulate damage (faster when moving, still damages when stationary on the zombie) const damageAmount = chainsaw.damagePerHit * (0.5 + Math.min(speed, 10) / 10); chainsaw.sawingParts[partName].damage += damageAmount; // Set the part to blood red color based on damage const damageProgress = Math.min(chainsaw.sawingParts[partName].damage / chainsaw.detachThreshold, 1); part.chainsawDamage = damageProgress; // 0 to 1, used for coloring // Play chainsaw sound periodically if (Math.random() < 0.15) { playSound('chainsaw_sound', 0.8); } // ULTRA INTENSE blood shower effect! (3x intensity) const showerCount = 40 + Math.floor(speed * 3); for (let i = 0; i < showerCount; i++) { const angle = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 450; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + dx * 4, vy: Math.sin(angle) * spd + dy * 3 - 120, size: 6 + Math.random() * 18, life: 1.0 + Math.random() * 0.8, gravity: 400, type: 'circle' }); } // Add flesh chunks for (let i = 0; i < 8; i++) { const angle = Math.random() * Math.PI * 2; const spd = 120 + Math.random() * 250; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.5 ? '#3dcc10' : '#5cc85c', vx: Math.cos(angle) * spd + dx * 3, vy: Math.sin(angle) * spd - 80, size: 8 + Math.random() * 15, life: 1.8 + Math.random(), gravity: 500, type: 'chunk' }); } // Make zombie spasm violently zombie.isRagdolling = true; chainsaw.spasmsIntensity = Math.min(chainsaw.spasmsIntensity + 0.1, 1); // Violent spasming - random impulses and limb flailing const spasmsForce = 80 + damageProgress * 120; zombie.applyImpulse( (Math.random() - 0.5) * spasmsForce, (Math.random() - 0.5) * spasmsForce * 0.5 ); // Extra flailing for all limbs (outward bias) for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limbName !== 'torso') { const outDir = limbName.includes('left') ? 1 : -1; limb.angularVelocity += (Math.random() * 0.7 + 0.3) * outDir * 400 * damageProgress; } } // Check if this part should be marked for delayed detachment (enough damage accumulated) if (chainsaw.sawingParts[partName].damage >= chainsaw.detachThreshold && !chainsaw.partsReadyToDetach[partName]) { // Calculate force direction based on chainsaw movement and accumulated force const forceX = dx * 8 + (Math.random() - 0.5) * 200 + (Math.random() > 0.5 ? 150 : -150); const forceY = dy * 6 - 200 - Math.random() * 150; // Mark part for delayed detachment instead of immediate detach chainsaw.partsReadyToDetach[partName] = { forceX: forceX, forceY: forceY, hitPoint: { x: hitPoint.x, y: hitPoint.y } }; // Start collapse timer if this is the first part to reach threshold if (chainsaw.collapseStartTime === null) { chainsaw.collapseStartTime = Date.now(); } // Part stays attached but fully blood red part.chainsawDamage = 1; } } } // Decay spasm intensity if not hitting if (!anyHit) { chainsaw.spasmsIntensity *= 0.95; if (chainsaw.spasmsIntensity < 0.01) { chainsaw.spasmsIntensity = 0; chainsaw.sawingActive = false; } } // Check if it's time to collapse (3 seconds after first part reached threshold) if (chainsaw.collapseStartTime !== null && Object.keys(chainsaw.partsReadyToDetach).length > 0) { const timeSinceFirstDamage = Date.now() - chainsaw.collapseStartTime; if (timeSinceFirstDamage >= chainsaw.collapseDelay) { // Time to collapse! Detach all marked parts at once triggerChainsawCollapse(); } else { // Still standing - zombie wobbles/spasms slightly while waiting to collapse if (zombie && Math.random() < 0.15) { zombie.applyImpulse((Math.random() - 0.5) * 30, (Math.random() - 0.5) * 15); } } } } // Trigger the delayed collapse after chainsaw damage - all marked parts detach at once function triggerChainsawCollapse() { if (!zombie) return; // Detach all parts that were marked for delayed detachment for (const partName in chainsaw.partsReadyToDetach) { const data = chainsaw.partsReadyToDetach[partName]; const part = zombie.parts[partName]; if (part && part.attached) { // Detach the part with stored force zombie.detachPart(partName, data.forceX, data.forceY); // The detached part keeps the blood red color part.chainsawDamage = 1; // Set continuous bleeding for chainsaw-detached parts (bleeds until reset) part.continuousBleeding = true; // Big blood burst on detachment const hitPoint = data.hitPoint; for (let i = 0; i < 120; i++) { // doubled particle count for larger explosion const angle = Math.random() * Math.PI * 2; const spd = 200 + Math.random() * 400; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.15 ? '#3dcc10' : '#00cc20', vx: Math.cos(angle) * spd + data.forceX * 0.3, vy: Math.sin(angle) * spd + data.forceY * 0.2, size: 8 + Math.random() * 20, life: 1.2 + Math.random() * 0.8, gravity: 400, type: 'circle' }); } chainsaw.kills++; } } // Clear the delayed detachment state chainsaw.partsReadyToDetach = {}; chainsaw.collapseStartTime = null; chainsaw.sawingParts = {}; // Strong impulse for dramatic collapse if (zombie) { zombie.applyImpulse((Math.random() - 0.5) * 100, -50); } incrementSpecimens(); // Schedule auto-reset after chainsaw collapse scheduleAutoReset(); } function setupChainsawInput() { const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const isOnChainsaw = (px, py) => { // Check if point is near the chainsaw (generous hit area) const dx = px - chainsaw.x; const dy = py - chainsaw.y; const dist = Math.sqrt(dx * dx + dy * dy); return dist < chainsaw.bladeLength + 50; }; const handleStart = (e) => { if (!chainsaw.active) return; // Don't interfere with sword if (sword.active) return; e.preventDefault(); const pos = getPointerPos(e); if (isOnChainsaw(pos.x, pos.y)) { chainsaw.dragging = true; chainsaw.dragOffsetX = chainsaw.x - pos.x; chainsaw.dragOffsetY = chainsaw.y - pos.y; chainsaw.targetX = chainsaw.x; chainsaw.targetY = chainsaw.y; chainsaw.velocityX = 0; chainsaw.velocityY = 0; chainsaw.prevX = chainsaw.x; chainsaw.prevY = chainsaw.y; chainsaw.prevAngle = chainsaw.angle; chainsaw.targetAngle = chainsaw.angle; // Start chainsaw sound playSound('chainsaw_sound', 0.6); } }; const handleMove = (e) => { if (!chainsaw.active || !chainsaw.dragging) return; if (sword.active && sword.dragging) return; e.preventDefault(); const pos = getPointerPos(e); // Store previous position for collision detection chainsaw.prevX = chainsaw.x; chainsaw.prevY = chainsaw.y; chainsaw.prevAngle = chainsaw.angle; // Set target position chainsaw.targetX = pos.x + chainsaw.dragOffsetX; chainsaw.targetY = pos.y + chainsaw.dragOffsetY; // Smoothly interpolate position chainsaw.x += (chainsaw.targetX - chainsaw.x) * chainsaw.smoothing; chainsaw.y += (chainsaw.targetY - chainsaw.y) * chainsaw.smoothing; // Calculate smoothed velocity for angle chainsaw.velocityX = chainsaw.velocityX * 0.7 + (chainsaw.x - chainsaw.prevX) * 0.3; chainsaw.velocityY = chainsaw.velocityY * 0.7 + (chainsaw.y - chainsaw.prevY) * 0.3; // Calculate movement speed const moveSpeed = Math.sqrt(chainsaw.velocityX * chainsaw.velocityX + chainsaw.velocityY * chainsaw.velocityY); // Rotate to face movement direction if (moveSpeed > 5) { const targetAngle = Math.atan2(chainsaw.velocityY, chainsaw.velocityX) * 180 / Math.PI; chainsaw.targetAngle = targetAngle; } // Smooth angle interpolation let angleDiff = chainsaw.targetAngle - chainsaw.angle; while (angleDiff > 180) angleDiff -= 360; while (angleDiff < -180) angleDiff += 360; chainsaw.angle += angleDiff * chainsaw.angleSmoothing; // Check for collision checkChainsawCollision(); // Play sound periodically while dragging if (Math.random() < 0.05) { playSound('chainsaw_sound', 0.4); } }; const handleEnd = (e) => { if (!chainsaw.active) return; chainsaw.dragging = false; chainsaw.velocityX = 0; chainsaw.velocityY = 0; }; // Touch events canvas.addEventListener('touchstart', handleStart, { passive: false }); canvas.addEventListener('touchmove', handleMove, { passive: false }); canvas.addEventListener('touchend', handleEnd); canvas.addEventListener('touchcancel', handleEnd); // Mouse events canvas.addEventListener('mousedown', handleStart); canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mouseup', handleEnd); canvas.addEventListener('mouseleave', handleEnd); } function activateChainsaw(startX, startY, startAngle) { chainsaw.active = true; chainsaw.x = startX !== undefined ? startX : 120; chainsaw.y = startY !== undefined ? startY : zombie.baseY + 180; chainsaw.targetX = chainsaw.x; chainsaw.targetY = chainsaw.y; chainsaw.velocityX = 0; chainsaw.velocityY = 0; chainsaw.angle = startAngle !== undefined ? startAngle : 0; chainsaw.targetAngle = chainsaw.angle; chainsaw.dragging = false; chainsaw.hitCooldowns = {}; chainsaw.kills = 0; chainsaw.prevX = chainsaw.x; chainsaw.prevY = chainsaw.y; chainsaw.prevAngle = chainsaw.angle; chainsaw.teethOffset = 0; // Reset sawing state chainsaw.sawingParts = {}; chainsaw.sawingActive = false; chainsaw.spasmsIntensity = 0; // Reset delayed collapse state chainsaw.partsReadyToDetach = {}; chainsaw.collapseStartTime = null; } function deactivateChainsaw() { chainsaw.active = false; chainsaw.dragging = false; // Reset sawing state chainsaw.sawingParts = {}; chainsaw.sawingActive = false; chainsaw.spasmsIntensity = 0; // Reset delayed collapse state chainsaw.partsReadyToDetach = {}; chainsaw.collapseStartTime = null; // Intentionally keep chainsawDamage on zombie parts // so they maintain their blood red color while falling into the pit! } // ============================================================================ // TRAP DOOR SYSTEM // ============================================================================ function drawTrapDoor(ctx) { const centerX = CANVAS_WIDTH / 2; const panelWidth = trapDoor.width / 2; // Each panel is half the screen width const panelHeight = trapDoor.height; // Height of each panel (bottom third) const floorY = trapDoor.y; // Top of trap door area // Draw the pit/void underneath when doors are opening if (trapDoor.leftAngle > 5 || trapDoor.rightAngle < -5) { // Deep dark pit underneath - infinite void ctx.fillStyle = '#030810'; ctx.fillRect(0, floorY, CANVAS_WIDTH, CANVAS_HEIGHT - floorY + 100); // Gradient fade into darkness at the opening edge const gradient = ctx.createLinearGradient(0, floorY, 0, floorY + 150); gradient.addColorStop(0, 'rgba(8, 12, 25, 0.3)'); gradient.addColorStop(0.3, 'rgba(4, 8, 18, 0.7)'); gradient.addColorStop(1, 'rgba(0, 2, 8, 1)'); ctx.fillStyle = gradient; ctx.fillRect(0, floorY, CANVAS_WIDTH, 200); // Some depth details - distant wall/pit edges ctx.fillStyle = '#0a1020'; ctx.fillRect(10, floorY + 80, CANVAS_WIDTH - 20, 5); } // Draw left panel (hinged on left edge of screen, swings down to the right) ctx.save(); ctx.translate(0, floorY); // Hinge at left edge ctx.rotate(trapDoor.leftAngle * Math.PI / 180); // Panel main surface - looks like industrial floor ctx.fillStyle = '#2a3852'; ctx.fillRect(0, 0, panelWidth, panelHeight); // Panel border/frame ctx.strokeStyle = '#1a2840'; ctx.lineWidth = 4; ctx.strokeRect(0, 0, panelWidth, panelHeight); // Industrial floor plate pattern - diamond pattern ctx.fillStyle = '#3a4c68'; for (let row = 0; row < panelHeight / 40; row++) { for (let col = 0; col < panelWidth / 40; col++) { const px = col * 40 + 20; const py = row * 40 + 20; ctx.beginPath(); ctx.moveTo(px, py - 12); ctx.lineTo(px + 12, py); ctx.lineTo(px, py + 12); ctx.lineTo(px - 12, py); ctx.closePath(); ctx.fill(); } } // Metal seams ctx.strokeStyle = '#1a2840'; ctx.lineWidth = 2; for (let y = 80; y < panelHeight; y += 80) { ctx.beginPath(); ctx.moveTo(20, y); ctx.lineTo(panelWidth - 20, y); ctx.stroke(); } // Rivets along edges ctx.fillStyle = '#5a7090'; for (let x = 30; x < panelWidth; x += 60) { ctx.beginPath(); ctx.arc(x, 15, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x, panelHeight - 15, 5, 0, Math.PI * 2); ctx.fill(); } // Center seam line (where the two panels meet) ctx.fillStyle = '#152035'; ctx.fillRect(panelWidth - 8, 0, 8, panelHeight); // Hinges on left side (3 large hinges) ctx.fillStyle = '#2a3a55'; for (let hy = 50; hy < panelHeight; hy += 150) { ctx.fillRect(-8, hy - 20, 16, 40); ctx.fillStyle = '#3a5070'; ctx.beginPath(); ctx.arc(0, hy, 8, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#2a3a55'; } ctx.restore(); // Draw right panel (hinged on right edge of screen, swings down to the left) ctx.save(); ctx.translate(CANVAS_WIDTH, floorY); // Hinge at right edge ctx.rotate(trapDoor.rightAngle * Math.PI / 180); // Panel main surface ctx.fillStyle = '#2a3852'; ctx.fillRect(-panelWidth, 0, panelWidth, panelHeight); // Panel border/frame ctx.strokeStyle = '#1a2840'; ctx.lineWidth = 4; ctx.strokeRect(-panelWidth, 0, panelWidth, panelHeight); // Industrial floor plate pattern ctx.fillStyle = '#3a4c68'; for (let row = 0; row < panelHeight / 40; row++) { for (let col = 0; col < panelWidth / 40; col++) { const px = -panelWidth + col * 40 + 20; const py = row * 40 + 20; ctx.beginPath(); ctx.moveTo(px, py - 12); ctx.lineTo(px + 12, py); ctx.lineTo(px, py + 12); ctx.lineTo(px - 12, py); ctx.closePath(); ctx.fill(); } } // Metal seams ctx.strokeStyle = '#1a2840'; ctx.lineWidth = 2; for (let y = 80; y < panelHeight; y += 80) { ctx.beginPath(); ctx.moveTo(-panelWidth + 20, y); ctx.lineTo(-20, y); ctx.stroke(); } // Rivets along edges ctx.fillStyle = '#5a7090'; for (let x = 30; x < panelWidth; x += 60) { ctx.beginPath(); ctx.arc(-x, 15, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-x, panelHeight - 15, 5, 0, Math.PI * 2); ctx.fill(); } // Center seam line ctx.fillStyle = '#152035'; ctx.fillRect(-panelWidth, 0, 8, panelHeight); // Hinges on right side ctx.fillStyle = '#2a3a55'; for (let hy = 50; hy < panelHeight; hy += 150) { ctx.fillRect(-8, hy - 20, 16, 40); ctx.fillStyle = '#3a5070'; ctx.beginPath(); ctx.arc(0, hy, 8, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#2a3a55'; } ctx.restore(); // Trap door damage overlay (cracks, dents from meteor impact etc.) if (doorDamageLevel > 0 && trapDoor.leftAngle < 5) { const dmg = doorDamageLevel; ctx.save(); const dmgCenterX = CANVAS_WIDTH / 2; const dmgCenterY = floorY + panelHeight * 0.3; // Cracks radiating from center top of trap doors ctx.strokeStyle = `rgba(40, 30, 20, ${dmg * 0.8})`; ctx.lineWidth = 2 + dmg * 2; for (let i = 0; i < 5; i++) { const angle = -Math.PI * 0.3 + (i / 4) * Math.PI * 0.6 + Math.PI; const len = 50 + dmg * 80 + (i % 2) * 30; ctx.beginPath(); ctx.moveTo(dmgCenterX, floorY + 10); let cx = dmgCenterX, cy = floorY + 10; for (let s = 0; s < 3; s++) { cx += Math.cos(angle + (s % 2 === 0 ? 0.2 : -0.2)) * (len / 3); cy += Math.sin(angle + (s % 2 === 0 ? -0.15 : 0.1)) * (len / 3); ctx.lineTo(cx, cy); } ctx.stroke(); } // Buckled/dented metal near top ctx.fillStyle = `rgba(20, 15, 10, ${dmg * 0.35})`; ctx.beginPath(); ctx.ellipse(dmgCenterX, floorY + 30, 70 * dmg, 25 * dmg, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Draw warning stripe along the seam when closed if (trapDoor.leftAngle < 5 && trapDoor.rightAngle > -5) { ctx.fillStyle = '#ffd700'; for (let y = floorY; y < CANVAS_HEIGHT; y += 40) { ctx.beginPath(); ctx.moveTo(centerX - 5, y); ctx.lineTo(centerX + 5, y); ctx.lineTo(centerX + 5, y + 20); ctx.lineTo(centerX - 5, y + 20); ctx.closePath(); ctx.fill(); } } } function updateTrapDoor(dt) { if (!trapDoor.isAnimating) return; const openSpeed = 270; // degrees per second (50% faster) const closeSpeed = 360; // degrees per second (2x faster - snappy close) if (trapDoor.phase === 'opening') { trapDoor.leftAngle += openSpeed * dt; trapDoor.rightAngle -= openSpeed * dt; if (trapDoor.leftAngle >= 90) { trapDoor.leftAngle = 90; trapDoor.rightAngle = -90; trapDoor.phase = 'open'; } } else if (trapDoor.phase === 'closing') { trapDoor.leftAngle -= closeSpeed * dt; trapDoor.rightAngle += closeSpeed * dt; if (trapDoor.leftAngle <= 0) { trapDoor.leftAngle = 0; trapDoor.rightAngle = 0; trapDoor.phase = 'closed'; trapDoor.isAnimating = false; } } } // Make zombie and debris fall through open trap door function applyTrapDoorGravity(dt) { if (trapDoor.leftAngle < 30) return; // Doors not open enough const fallAcceleration = 3000; // Strong gravity pull into the pit (50% faster) // Make zombie fall and tumble if (zombie) { // Apply gravity acceleration to zombie's base position if (!zombie._trapDoorVelocityY) zombie._trapDoorVelocityY = 0; zombie._trapDoorVelocityY += fallAcceleration * dt; zombie.baseY += zombie._trapDoorVelocityY * dt; // Apply some rotation as it falls if (zombie.parts.torso && zombie.parts.torso.attached) { zombie.parts.torso.rotation += 180 * dt; } // Ragdoll all attached parts - they swing wildly as zombie falls zombie.isRagdolling = true; for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.attached) { part.angularVelocity += (Math.random() - 0.5) * 400 * dt; } // Detached parts also get extra gravity (including parts with continuous bleeding even if not visible) if (part && !part.attached && (part.visible || part.continuousBleeding)) { part.velocityY += fallAcceleration * dt * 0.5; } } } // Make sliced pieces fall through the pit with acceleration slicedPieces.forEach(piece => { piece.velocityY += fallAcceleration * dt; // Remove ground collision by letting update() handle it (we disabled collision when trap door open) }); // Make particles fall into the void faster particles.forEach(p => { p.vy += 800 * dt; }); } async function openTrapDoor() { trapDoor.phase = 'opening'; trapDoor.isAnimating = true; // Play a mechanical sound playSound('crush_sound', 0.4); // Wait for doors to fully open await new Promise(resolve => { const checkOpen = () => { if (trapDoor.phase === 'open') { resolve(); } else { requestAnimationFrame(checkOpen); } }; checkOpen(); }); } async function closeTrapDoor() { trapDoor.phase = 'closing'; // Play closing sound playSound('crush_sound', 0.3); // Wait for doors to fully close await new Promise(resolve => { const checkClosed = () => { if (trapDoor.phase === 'closed') { resolve(); } else { requestAnimationFrame(checkClosed); } }; checkClosed(); }); } // ============================================================================ // ENTRANCE DOORS SYSTEM // ============================================================================ function drawEntranceDoors(ctx) { const centerX = entranceDoors.x; const doorWidth = entranceDoors.width; const doorHeight = entranceDoors.height; const topY = 0; // Doors start at top of screen const bottomY = entranceDoors.y; // Doors end at trap door const openAmount = Math.abs(entranceDoors.leftX); const isOpen = openAmount > 10; // Draw zombie horde background behind the doors when they're opening if (isOpen) { // Generate the cached horde image if not done yet if (!zombieHordeCanvas) { generateZombieHordeBackground(); } // Draw the cached horde background ctx.drawImage(zombieHordeCanvas, 0, topY); // Subtle animated overlay: flickering green light + swaying shadows zombieHordeAnimTime += 0.016; // Pulsing green ambient light (makes eyes seem to glow in waves) const pulseAlpha = 0.03 + Math.sin(zombieHordeAnimTime * 2) * 0.02; ctx.fillStyle = `rgba(60, 255, 100, ${pulseAlpha})`; ctx.fillRect(0, topY, CANVAS_WIDTH, doorHeight); // Occasional brighter flicker (like a light sputtering) if (Math.random() > 0.97) { ctx.fillStyle = 'rgba(80, 255, 120, 0.08)'; ctx.fillRect(0, topY, CANVAS_WIDTH, doorHeight); } } // Door track rails (top and bottom) - full width ctx.fillStyle = '#1a2a40'; ctx.fillRect(0, topY, CANVAS_WIDTH, 8); ctx.fillRect(0, bottomY - 8, CANVAS_WIDTH, 8); // Track groove ctx.fillStyle = '#0f1a2a'; ctx.fillRect(10, topY + 2, CANVAS_WIDTH - 20, 3); ctx.fillRect(10, bottomY - 6, CANVAS_WIDTH - 20, 3); // Warning stripes along top rail ctx.fillStyle = '#dda200'; for (let i = 0; i < CANVAS_WIDTH / 40; i++) { if (i % 2 === 0) { ctx.fillRect(i * 40, topY, 20, 8); } } // Warning stripes along bottom rail for (let i = 0; i < CANVAS_WIDTH / 40; i++) { if (i % 2 === 0) { ctx.fillRect(i * 40, bottomY - 8, 20, 8); } } // Clip to door area for sliding doors (full width, above trap doors) ctx.save(); ctx.beginPath(); ctx.rect(0, topY, CANVAS_WIDTH, doorHeight); ctx.clip(); // Draw left door (slides left from center) - starts at left half const leftDoorX = entranceDoors.leftX; drawLabDoorPanel(ctx, leftDoorX, topY, doorWidth, doorHeight, 'left'); // Draw right door (slides right from center) - starts at right half const rightDoorX = centerX + entranceDoors.rightX; drawLabDoorPanel(ctx, rightDoorX, topY, doorWidth, doorHeight, 'right'); ctx.restore(); // Center seam indicator when closed if (!isOpen) { ctx.fillStyle = '#0f1a30'; ctx.fillRect(centerX - 3, topY + 10, 6, doorHeight - 20); // Seam highlight ctx.strokeStyle = '#1a3050'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(centerX, topY + 15); ctx.lineTo(centerX, bottomY - 15); ctx.stroke(); } // Door damage overlay (cracks, dents from meteor impact etc.) if (doorDamageLevel > 0 && !isOpen) { const dmg = doorDamageLevel; ctx.save(); // Cracks radiating from bottom center (where meteor hit) ctx.strokeStyle = `rgba(40, 30, 20, ${dmg * 0.8})`; ctx.lineWidth = 2 + dmg * 2; const crackBaseX = centerX; const crackBaseY = bottomY - 20; for (let i = 0; i < 6; i++) { const angle = -Math.PI * 0.8 + (i / 5) * Math.PI * 0.6; const len = 60 + dmg * 120 + (i % 3) * 30; ctx.beginPath(); ctx.moveTo(crackBaseX, crackBaseY); let cx = crackBaseX, cy = crackBaseY; for (let s = 0; s < 4; s++) { cx += Math.cos(angle + (s % 2 === 0 ? 0.15 : -0.15)) * (len / 4); cy += Math.sin(angle + (s % 2 === 0 ? -0.1 : 0.1)) * (len / 4); ctx.lineTo(cx, cy); } ctx.stroke(); } // Dent marks / buckling near bottom ctx.fillStyle = `rgba(20, 15, 10, ${dmg * 0.3})`; ctx.beginPath(); ctx.ellipse(crackBaseX - 40, crackBaseY - 30, 35 * dmg, 20 * dmg, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(crackBaseX + 50, crackBaseY - 50, 25 * dmg, 15 * dmg, 0.3, 0, Math.PI * 2); ctx.fill(); // Scorch marks ctx.fillStyle = `rgba(60, 40, 20, ${dmg * 0.4})`; ctx.beginPath(); ctx.ellipse(crackBaseX, crackBaseY, 80 * dmg, 40 * dmg, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Status lights at top corners const lightColor = isOpen ? '#ff4444' : '#44ff44'; const lightGlow = isOpen ? 'rgba(255, 68, 68, 0.5)' : 'rgba(68, 255, 68, 0.5)'; // Right status light ctx.fillStyle = lightGlow; ctx.beginPath(); ctx.arc(CANVAS_WIDTH - 30, topY + 30, 12, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = lightColor; ctx.beginPath(); ctx.arc(CANVAS_WIDTH - 30, topY + 30, 8, 0, Math.PI * 2); ctx.fill(); } // Helper function to draw a single lab door panel (full-height industrial door) function drawLabDoorPanel(ctx, x, y, width, height, side) { // Main door panel - metallic lab door const gradient = ctx.createLinearGradient(x, y, x + width, y); gradient.addColorStop(0, '#1a2842'); gradient.addColorStop(0.2, '#22344e'); gradient.addColorStop(0.5, '#2a3c58'); gradient.addColorStop(0.8, '#22344e'); gradient.addColorStop(1, '#1a2842'); ctx.fillStyle = gradient; ctx.fillRect(x, y, width, height); // Door border ctx.strokeStyle = '#0f1c30'; ctx.lineWidth = 4; ctx.strokeRect(x + 2, y + 2, width - 4, height - 4); // Calculate panel sections based on door height const panelMargin = 20; const panelGap = 15; const numPanels = 6; // More panels for taller doors const panelHeight = (height - panelMargin * 2 - panelGap * (numPanels - 1)) / numPanels; // Reinforced panels (industrial look) ctx.fillStyle = '#152538'; for (let i = 0; i < numPanels; i++) { const panelY = y + panelMargin + i * (panelHeight + panelGap); ctx.fillRect(x + 25, panelY, width - 50, panelHeight); // Panel inner highlight ctx.strokeStyle = '#3a5570'; ctx.lineWidth = 1; ctx.strokeRect(x + 27, panelY + 2, width - 54, panelHeight - 4); } // Observation windows in second panel from top const windowPanelY = y + panelMargin + (panelHeight + panelGap); ctx.fillStyle = '#081828'; ctx.fillRect(x + 50, windowPanelY + 15, width - 100, panelHeight - 30); // Window reflection ctx.fillStyle = 'rgba(80, 200, 255, 0.2)'; ctx.beginPath(); ctx.moveTo(x + 55, windowPanelY + 20); ctx.lineTo(x + 95, windowPanelY + 20); ctx.lineTo(x + 55, windowPanelY + 55); ctx.closePath(); ctx.fill(); // Window frame ctx.strokeStyle = '#0d2538'; ctx.lineWidth = 4; ctx.strokeRect(x + 50, windowPanelY + 15, width - 100, panelHeight - 30); // Window crossbars ctx.strokeStyle = '#153040'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x + width / 2, windowPanelY + 15); ctx.lineTo(x + width / 2, windowPanelY + panelHeight - 15); ctx.stroke(); // Rivets/bolts along edges - dynamically placed based on height ctx.fillStyle = '#4a6580'; const rivetSpacing = height / 10; for (let i = 0; i < 10; i++) { const ry = y + 30 + i * rivetSpacing; // Left edge rivets ctx.beginPath(); ctx.arc(x + 12, ry, 5, 0, Math.PI * 2); ctx.fill(); // Right edge rivets ctx.beginPath(); ctx.arc(x + width - 12, ry, 5, 0, Math.PI * 2); ctx.fill(); // Rivet highlights ctx.fillStyle = '#5a7a95'; ctx.beginPath(); ctx.arc(x + 11, ry - 1, 2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + width - 13, ry - 1, 2, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#4a6580'; } // Center seam line ctx.strokeStyle = '#0f1c30'; ctx.lineWidth = 2; const seamX = side === 'left' ? x + width - 4 : x + 4; ctx.beginPath(); ctx.moveTo(seamX, y + 10); ctx.lineTo(seamX, y + height - 10); ctx.stroke(); // Rubber seal edge at center ctx.fillStyle = '#0a1220'; if (side === 'left') { ctx.fillRect(x + width - 8, y + 15, 6, height - 30); } else { ctx.fillRect(x + 2, y + 15, 6, height - 30); } // Biohazard warning label near bottom const labelY = y + height - 90; ctx.fillStyle = '#cc9900'; ctx.fillRect(x + width/2 - 40, labelY, 80, 55); ctx.fillStyle = '#000'; ctx.font = 'bold 14px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('CAUTION', x + width/2, labelY + 22); ctx.fillText('BIOHAZARD', x + width/2, labelY + 42); // Additional industrial details - diagonal stripes at very bottom ctx.fillStyle = '#0f1a2a'; ctx.fillRect(x + 10, y + height - 30, width - 20, 20); ctx.fillStyle = '#cc9900'; for (let i = 0; i < (width - 20) / 30; i++) { if (i % 2 === 0) { ctx.beginPath(); ctx.moveTo(x + 10 + i * 30, y + height - 30); ctx.lineTo(x + 25 + i * 30, y + height - 30); ctx.lineTo(x + 10 + i * 30, y + height - 10); ctx.closePath(); ctx.fill(); } } } function updateEntranceDoors(dt) { if (!entranceDoors.isAnimating) return; const openSpeed = 600; // pixels per second (50% faster) const closeSpeed = 525; if (entranceDoors.phase === 'opening') { entranceDoors.leftX -= openSpeed * dt; entranceDoors.rightX += openSpeed * dt; if (Math.abs(entranceDoors.leftX) >= entranceDoors.openDistance) { entranceDoors.leftX = -entranceDoors.openDistance; entranceDoors.rightX = entranceDoors.openDistance; entranceDoors.phase = 'open'; } } else if (entranceDoors.phase === 'closing') { entranceDoors.leftX += closeSpeed * dt; entranceDoors.rightX -= closeSpeed * dt; if (entranceDoors.leftX >= 0) { entranceDoors.leftX = 0; entranceDoors.rightX = 0; entranceDoors.phase = 'closed'; entranceDoors.isAnimating = false; } } } async function openEntranceDoors() { entranceDoors.phase = 'opening'; entranceDoors.isAnimating = true; // Play pneumatic/hydraulic sliding door sound playSound('vaporize_sound', 0.3); // Sci-fi whoosh for sliding doors // Wait for doors to fully open await new Promise(resolve => { const checkOpen = () => { if (entranceDoors.phase === 'open') { resolve(); } else { requestAnimationFrame(checkOpen); } }; checkOpen(); }); } async function closeEntranceDoors() { entranceDoors.phase = 'closing'; entranceDoors.isAnimating = true; // Play sliding door closing sound playSound('crusher_sound', 0.2); // Mechanical sliding sound // Wait for doors to fully close await new Promise(resolve => { const checkClosed = () => { if (entranceDoors.phase === 'closed') { resolve(); } else { requestAnimationFrame(checkClosed); } }; checkClosed(); }); } // ============================================================================ // AUDIO SYSTEM // ============================================================================ async function loadAudio(id) { const asset = lib.getAsset(id); if (!asset || asset.type !== 'audio') return null; try { const response = await fetch(asset.url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); audioBuffers[id] = audioBuffer; return audioBuffer; } catch (e) { lib.log('Failed to load audio: ' + id); return null; } } function playSound(id, volume = 1.0) { if (!audioBuffers[id]) return; // Resume audio context if suspended if (audioContext.state === 'suspended') { audioContext.resume(); } const source = audioContext.createBufferSource(); const gainNode = audioContext.createGain(); source.buffer = audioBuffers[id]; gainNode.gain.value = volume; source.connect(gainNode); gainNode.connect(audioContext.destination); source.start(0); return source; } // Helper: Draw a bass speaker cabinet at position (used by bass kill animation render state) function drawSpeaker(ctx, sx, sy, scale, pulse, power) { ctx.save(); ctx.translate(sx, sy); ctx.scale(scale, scale); const cabinetW = 180; const cabinetH = 210; // Cabinet body const cabGrad = ctx.createLinearGradient(-cabinetW/2, 0, cabinetW/2, 0); cabGrad.addColorStop(0, '#1a1a1a'); cabGrad.addColorStop(0.5, '#2a2a2a'); cabGrad.addColorStop(1, '#1a1a1a'); ctx.fillStyle = cabGrad; ctx.beginPath(); ctx.roundRect(-cabinetW/2, -cabinetH/2, cabinetW, cabinetH, 8); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.stroke(); // Corner protectors [[-cabinetW/2, -cabinetH/2], [cabinetW/2, -cabinetH/2], [-cabinetW/2, cabinetH/2], [cabinetW/2, cabinetH/2]].forEach(([cx, cy]) => { ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(cx, cy, 8, 0, Math.PI * 2); ctx.fill(); }); // Grille mesh ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.roundRect(-cabinetW/2 + 10, -cabinetH/2 + 10, cabinetW - 20, cabinetH - 20, 5); ctx.fill(); // Woofer cone const wooferR = 70; const coneDepth = 6 + pulse * 20; if (power > 0) { ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 15 + power * 25; ctx.fillStyle = `rgba(255, 100, 0, ${power * 0.2})`; ctx.beginPath(); ctx.arc(0, 0, wooferR + 10, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } // Surround ring ctx.fillStyle = `rgb(${Math.round(140 + pulse * 50)}, ${Math.round(50 + pulse * 20)}, 0)`; ctx.beginPath(); ctx.arc(0, 0, wooferR, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#882200'; ctx.lineWidth = 2; ctx.stroke(); // Cone rings for (let i = 5; i >= 1; i--) { const r = (i / 5) * (wooferR - 10); const b = 30 + (1 - i/5) * 40; ctx.fillStyle = `rgb(${b}, ${b}, ${b})`; ctx.beginPath(); ctx.ellipse(0, coneDepth * 0.2 * (i/5), r, r - coneDepth * 0.1, 0, 0, Math.PI * 2); ctx.fill(); } // Dust cap ctx.fillStyle = `rgb(${Math.round(70 + pulse * 50)}, ${Math.round(70 + pulse * 50)}, ${Math.round(70 + pulse * 50)})`; ctx.beginPath(); ctx.ellipse(0, coneDepth * 0.15, 16, 14, 0, 0, Math.PI * 2); ctx.fill(); // Power LED ctx.fillStyle = power > 0 ? '#00ff44' : '#004422'; ctx.shadowColor = power > 0 ? '#00ff44' : 'transparent'; ctx.shadowBlur = power > 0 ? 8 : 0; ctx.beginPath(); ctx.arc(-cabinetW/2 + 18, cabinetH/2 - 22, 4, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Brand label ctx.fillStyle = '#ff6600'; ctx.font = 'bold 13px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('BASS', 0, cabinetH/2 - 18); ctx.restore(); } // Helper: Draw the possession pentagram up to a given progress (0-1) // Draws outer circle first (0-0.4), then star lines (0.4-1.0) function drawPentagramProgress(ctx, state, progress) { const { pentaX, pentaY, pentaRadius, pentaSquash, pentaPoints, starSegments, totalStarLen } = state; ctx.save(); ctx.globalAlpha = (state.pentagramAlpha || 1); ctx.strokeStyle = '#cc2200'; ctx.lineWidth = 4; ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 15; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // Outer circle (0-0.4) const circleProgress = Math.min(progress / 0.4, 1); if (circleProgress > 0) { ctx.beginPath(); ctx.ellipse(pentaX, pentaY, pentaRadius + 15, (pentaRadius + 15) * pentaSquash, 0, -Math.PI / 2, -Math.PI / 2 + circleProgress * Math.PI * 2); ctx.stroke(); ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(pentaX, pentaY, pentaRadius - 5, (pentaRadius - 5) * pentaSquash, 0, -Math.PI / 2, -Math.PI / 2 + circleProgress * Math.PI * 2); ctx.stroke(); ctx.lineWidth = 4; } // Star lines (0.4-1.0) if (progress > 0.4 && starSegments.length > 0) { const starProgress = (progress - 0.4) / 0.6; const drawLen = starProgress * totalStarLen; let accumulated = 0; ctx.beginPath(); ctx.moveTo(starSegments[0].from.x, starSegments[0].from.y); for (let i = 0; i < starSegments.length; i++) { const seg = starSegments[i]; if (accumulated + seg.len <= drawLen) { ctx.lineTo(seg.to.x, seg.to.y); accumulated += seg.len; } else { const remaining = drawLen - accumulated; const t = remaining / seg.len; ctx.lineTo(seg.from.x + (seg.to.x - seg.from.x) * t, seg.from.y + (seg.to.y - seg.from.y) * t); break; } } ctx.stroke(); } // Runes (appear after 50%) if (progress > 0.5) { const runeAlpha = Math.min((progress - 0.5) / 0.3, 1); ctx.globalAlpha = (state.pentagramAlpha || 1) * runeAlpha; ctx.font = '18px Luckiest Guy'; ctx.fillStyle = '#cc2200'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const runes = ['☿', '♄', '⛧', '☽', '♃']; for (let i = 0; i < 5; i++) { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5 + Math.PI / 5; const runeR = pentaRadius + 35; ctx.fillText(runes[i], pentaX + Math.cos(angle) * runeR, pentaY + Math.sin(angle) * runeR * pentaSquash); } } ctx.shadowBlur = 0; ctx.restore(); } // Helper: Draw a single possession candle at its current state function drawPossessionCandle(ctx, c) { if (c.scale <= 0) return; ctx.save(); ctx.translate(c.x, c.y); ctx.scale(c.scale, c.scale); // Wax drips ctx.fillStyle = '#e8d8a0'; ctx.beginPath(); ctx.ellipse(-c.width * 0.3, -c.height * 0.3, 2, 6, 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(c.width * 0.4, -c.height * 0.5, 1.5, 5, -0.1, 0, Math.PI * 2); ctx.fill(); // Candle body ctx.fillStyle = '#f0e8c8'; ctx.beginPath(); ctx.moveTo(-c.width, 0); ctx.lineTo(-c.width - 1, -c.height); ctx.lineTo(c.width + 1, -c.height); ctx.lineTo(c.width, 0); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#c8b888'; ctx.lineWidth = 1; ctx.stroke(); // Wax pool top ctx.fillStyle = '#e8d8a0'; ctx.beginPath(); ctx.ellipse(0, -c.height, c.width + 1, 3, 0, 0, Math.PI * 2); ctx.fill(); // Wick ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(0, -c.height); ctx.lineTo(0, -c.height - 8); ctx.stroke(); // Flame const flickerT = Date.now() * 0.008 + c.flamePhase; const flameW = (4 + Math.sin(flickerT) * 1.5) * c.flameSize; const flameH = (12 + Math.sin(flickerT * 1.3) * 2) * c.flameSize; const flameX = Math.sin(flickerT * 0.7) * 1.5; ctx.shadowColor = '#ff8800'; ctx.shadowBlur = 15; ctx.fillStyle = '#ff6600'; ctx.beginPath(); ctx.moveTo(flameX - flameW, -c.height - 8); ctx.quadraticCurveTo(flameX - flameW * 0.5, -c.height - 8 - flameH * 0.6, flameX, -c.height - 8 - flameH); ctx.quadraticCurveTo(flameX + flameW * 0.5, -c.height - 8 - flameH * 0.6, flameX + flameW, -c.height - 8); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#ffcc00'; ctx.beginPath(); ctx.moveTo(flameX - flameW * 0.5, -c.height - 8); ctx.quadraticCurveTo(flameX - flameW * 0.15, -c.height - 8 - flameH * 0.5, flameX, -c.height - 8 - flameH * 0.6); ctx.quadraticCurveTo(flameX + flameW * 0.15, -c.height - 8 - flameH * 0.5, flameX + flameW * 0.5, -c.height - 8); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.ellipse(flameX, -c.height - 10, 1.5, 3, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Candle holder ctx.fillStyle = '#4a3a2a'; ctx.beginPath(); ctx.ellipse(0, 2, c.width + 4, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Draw the full possession ritual scene (pentagram + candles + floor shadow) behind the zombie function drawPossessionScene(ctx) { const state = possessionRenderState; if (!state.active) return; // Draw pentagram drawPentagramProgress(ctx, state, state.pentagramProgress); // Draw candles (sorted by Y for depth - already sorted when created) state.candles.forEach(c => drawPossessionCandle(ctx, c)); // Draw floor shadow BEHIND zombie (sweeps right to left) if (state.floorShadowActive && state.floorShadowProgress > 0) { const floorY = trapDoor.y; const shadowRightEdge = CANVAS_WIDTH + 50; const drawLeft = shadowRightEdge - state.floorShadowProgress * (CANVAS_WIDTH + 100); ctx.save(); // Main shadow body ctx.fillStyle = 'rgba(0, 0, 0, 0.75)'; ctx.fillRect(drawLeft, floorY - 30, CANVAS_WIDTH + 100 - drawLeft, CANVAS_HEIGHT - floorY + 60); // Rippling leading edge (replaces straight feathered gradient) const edgeHeight = CANVAS_HEIGHT - floorY + 60; const rippleWidth = 80; // Width of the ripple zone const numRippleSegments = 24; const segH = edgeHeight / numRippleSegments; const time = Date.now() * 0.004; // Draw rippling gradient edge using vertical segments with wavy X offsets for (let i = 0; i < numRippleSegments; i++) { const segY = floorY - 30 + i * segH; // Each segment has its own ripple offset const rippleOffset = Math.sin(time + i * 0.7) * 18 + Math.sin(time * 1.5 + i * 1.2) * 10; const segLeft = drawLeft - rippleWidth + rippleOffset; // Gradient for this segment (fades from transparent to shadow opacity) const segGrad = ctx.createLinearGradient(segLeft, 0, drawLeft + rippleOffset * 0.3, 0); segGrad.addColorStop(0, 'rgba(0, 0, 0, 0)'); segGrad.addColorStop(0.4, 'rgba(0, 0, 0, 0.2)'); segGrad.addColorStop(1, 'rgba(0, 0, 0, 0.75)'); ctx.fillStyle = segGrad; ctx.fillRect(segLeft, segY, rippleWidth + 10 - rippleOffset * 0.3, segH + 1); } // Dark wispy tendrils at the leading edge for extra creepiness ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; ctx.lineWidth = 3; ctx.lineCap = 'round'; for (let t = 0; t < 5; t++) { const tendrilY = floorY + t * (edgeHeight / 5) + Math.sin(time + t * 2) * 20; const tendrilStartX = drawLeft - 10 + Math.sin(time * 0.8 + t) * 15; ctx.beginPath(); ctx.moveTo(tendrilStartX, tendrilY); ctx.quadraticCurveTo( tendrilStartX - 30 - Math.sin(time + t) * 15, tendrilY + 10, tendrilStartX - 50 - Math.sin(time * 1.2 + t * 1.5) * 20, tendrilY - 5 ); ctx.stroke(); } ctx.restore(); } } // Helper: draw banana peel flat on the ground - realistic peeled banana skin // Four splayed-out peel sections radiating from center, laying flat like a discarded peel function drawBananaPeel(ctx, x, y, scale) { ctx.save(); ctx.translate(x, y); ctx.scale(scale || 1, scale || 1); ctx.rotate(-0.1); // Slight natural toss angle const yellow1 = '#f7d616'; const yellow2 = '#e6c310'; const yellow3 = '#c9a308'; const yellow4 = '#a88506'; const cream = '#fff5c8'; const creamShadow = '#ede0a0'; const brown = '#5c3a0e'; const darkBrown = '#3a2008'; const greenTip = '#7a9a28'; const outline = '#6a5000'; // SECTION 1: Bottom-right ctx.fillStyle = yellow1; ctx.beginPath(); ctx.moveTo(2, 2); ctx.bezierCurveTo(12, 4, 28, 6, 42, 4); ctx.bezierCurveTo(52, 2, 58, -1, 60, -2); ctx.bezierCurveTo(58, -4, 52, -5, 42, -4); ctx.bezierCurveTo(28, -2, 12, -1, 2, -2); ctx.closePath(); ctx.fill(); ctx.fillStyle = yellow3; ctx.beginPath(); ctx.moveTo(5, -2); ctx.bezierCurveTo(15, -1, 30, -3, 45, -4); ctx.bezierCurveTo(50, -4, 55, -4, 58, -3); ctx.lineTo(58, -2); ctx.bezierCurveTo(50, -3, 35, -2, 15, -1); ctx.closePath(); ctx.fill(); ctx.fillStyle = cream; ctx.beginPath(); ctx.moveTo(4, 0); ctx.bezierCurveTo(14, 2, 30, 4, 44, 3); ctx.bezierCurveTo(50, 2, 54, 1, 56, 0); ctx.bezierCurveTo(50, 1, 40, 2, 25, 2); ctx.bezierCurveTo(14, 1, 6, 0, 4, 0); ctx.closePath(); ctx.fill(); ctx.fillStyle = greenTip; ctx.beginPath(); ctx.ellipse(59, -1, 3, 2.5, 0.1, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = outline; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(2, 2); ctx.bezierCurveTo(12, 4, 28, 6, 42, 4); ctx.bezierCurveTo(52, 2, 58, -1, 60, -2); ctx.bezierCurveTo(58, -4, 52, -5, 42, -4); ctx.bezierCurveTo(28, -2, 12, -1, 2, -2); ctx.closePath(); ctx.stroke(); // SECTION 2: Top-right ctx.fillStyle = yellow2; ctx.beginPath(); ctx.moveTo(0, -2); ctx.bezierCurveTo(8, -8, 20, -18, 32, -22); ctx.bezierCurveTo(40, -24, 46, -22, 48, -20); ctx.bezierCurveTo(46, -18, 40, -16, 32, -15); ctx.bezierCurveTo(20, -12, 8, -6, 2, -1); ctx.closePath(); ctx.fill(); ctx.fillStyle = yellow4; ctx.beginPath(); ctx.moveTo(3, -3); ctx.bezierCurveTo(10, -8, 18, -13, 25, -15); ctx.bezierCurveTo(18, -11, 10, -6, 4, -2); ctx.closePath(); ctx.fill(); ctx.fillStyle = cream; ctx.beginPath(); ctx.moveTo(10, -10); ctx.bezierCurveTo(18, -15, 30, -20, 40, -21); ctx.bezierCurveTo(44, -20, 46, -19, 45, -18); ctx.bezierCurveTo(38, -17, 25, -15, 14, -10); ctx.closePath(); ctx.fill(); ctx.fillStyle = greenTip; ctx.beginPath(); ctx.ellipse(47, -21, 2.5, 2, -0.3, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = outline; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(0, -2); ctx.bezierCurveTo(8, -8, 20, -18, 32, -22); ctx.bezierCurveTo(40, -24, 46, -22, 48, -20); ctx.bezierCurveTo(46, -18, 40, -16, 32, -15); ctx.bezierCurveTo(20, -12, 8, -6, 2, -1); ctx.closePath(); ctx.stroke(); // SECTION 3: Left ctx.fillStyle = yellow1; ctx.beginPath(); ctx.moveTo(-2, 0); ctx.bezierCurveTo(-10, 2, -24, 5, -38, 6); ctx.bezierCurveTo(-48, 6, -55, 4, -58, 2); ctx.bezierCurveTo(-55, 0, -48, -1, -38, -1); ctx.bezierCurveTo(-24, -1, -10, -1, -2, -2); ctx.closePath(); ctx.fill(); ctx.fillStyle = yellow3; ctx.beginPath(); ctx.moveTo(-5, -1); ctx.bezierCurveTo(-18, -1, -35, -1, -48, 0); ctx.bezierCurveTo(-52, 0, -55, 0, -56, 1); ctx.lineTo(-55, 2); ctx.bezierCurveTo(-42, 1, -22, 0, -5, 0); ctx.closePath(); ctx.fill(); ctx.fillStyle = creamShadow; ctx.beginPath(); ctx.moveTo(-5, 1); ctx.bezierCurveTo(-15, 3, -28, 4, -40, 5); ctx.bezierCurveTo(-48, 5, -52, 4, -54, 3); ctx.bezierCurveTo(-48, 3, -35, 3, -20, 2); ctx.bezierCurveTo(-12, 2, -6, 1, -5, 1); ctx.closePath(); ctx.fill(); ctx.strokeStyle = outline; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(-2, 0); ctx.bezierCurveTo(-10, 2, -24, 5, -38, 6); ctx.bezierCurveTo(-48, 6, -55, 4, -58, 2); ctx.bezierCurveTo(-55, 0, -48, -1, -38, -1); ctx.bezierCurveTo(-24, -1, -10, -1, -2, -2); ctx.closePath(); ctx.stroke(); // SECTION 4: Top-left (standing flap) ctx.fillStyle = yellow2; ctx.beginPath(); ctx.moveTo(-2, -2); ctx.bezierCurveTo(-8, -8, -16, -16, -22, -24); ctx.bezierCurveTo(-26, -30, -24, -34, -20, -34); ctx.bezierCurveTo(-16, -34, -14, -30, -14, -24); ctx.bezierCurveTo(-12, -16, -6, -8, -1, -3); ctx.closePath(); ctx.fill(); ctx.fillStyle = yellow4; ctx.beginPath(); ctx.moveTo(-3, -4); ctx.bezierCurveTo(-8, -10, -14, -18, -18, -24); ctx.bezierCurveTo(-20, -28, -22, -30, -22, -32); ctx.bezierCurveTo(-24, -30, -24, -26, -22, -22); ctx.bezierCurveTo(-18, -16, -10, -8, -4, -4); ctx.closePath(); ctx.fill(); ctx.fillStyle = cream; ctx.beginPath(); ctx.moveTo(-3, -5); ctx.bezierCurveTo(-7, -10, -12, -18, -16, -24); ctx.bezierCurveTo(-18, -28, -18, -30, -17, -30); ctx.bezierCurveTo(-15, -28, -13, -22, -10, -16); ctx.bezierCurveTo(-7, -10, -4, -6, -2, -4); ctx.closePath(); ctx.fill(); ctx.strokeStyle = outline; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(-2, -2); ctx.bezierCurveTo(-8, -8, -16, -16, -22, -24); ctx.bezierCurveTo(-26, -30, -24, -34, -20, -34); ctx.bezierCurveTo(-16, -34, -14, -30, -14, -24); ctx.bezierCurveTo(-12, -16, -6, -8, -1, -3); ctx.closePath(); ctx.stroke(); // CENTER HUB ctx.fillStyle = yellow3; ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = brown; ctx.beginPath(); ctx.arc(0, 0, 1.5, 0, Math.PI * 2); ctx.fill(); // STEM ctx.fillStyle = brown; ctx.beginPath(); ctx.moveTo(-56, 2); ctx.bezierCurveTo(-60, 1, -64, 2, -65, 4); ctx.bezierCurveTo(-64, 6, -60, 6, -56, 5); ctx.closePath(); ctx.fill(); ctx.strokeStyle = darkBrown; ctx.lineWidth = 0.6; ctx.stroke(); ctx.fillStyle = darkBrown; ctx.beginPath(); ctx.ellipse(-64, 3.5, 2, 1.8, 0, 0, Math.PI * 2); ctx.fill(); // BROWN SPOTS ctx.fillStyle = 'rgba(90, 60, 20, 0.25)'; ctx.beginPath(); ctx.ellipse(25, 1, 3, 1.5, 0.3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(-30, 3, 2.5, 1.5, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(15, -12, 2, 1.2, 0.5, 0, Math.PI * 2); ctx.fill(); // TEXTURE LINES ctx.strokeStyle = 'rgba(180, 150, 40, 0.2)'; ctx.lineWidth = 0.4; ctx.beginPath(); ctx.moveTo(8, 0); ctx.bezierCurveTo(20, 1, 35, 0, 50, -1); ctx.stroke(); ctx.beginPath(); ctx.moveTo(-8, 1); ctx.bezierCurveTo(-20, 2, -35, 3, -48, 3); ctx.stroke(); ctx.restore(); } // Helper: Draw the rocket launch button function drawRocketLaunchButton(ctx, x, y, pressed, scaleY) { ctx.save(); ctx.translate(x, y); ctx.scale(1, Math.min(scaleY, 1)); // Base pedestal ctx.fillStyle = '#3a3a3a'; ctx.beginPath(); ctx.roundRect(-30, -8, 60, 50, 5); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); // Hazard stripes on pedestal ctx.fillStyle = '#cc9900'; for (let i = 0; i < 3; i++) { ctx.fillRect(-25 + i * 20, 25, 10, 12); } // Button face const btnY = pressed ? 6 : 0; if (!pressed) { ctx.shadowColor = '#ff2200'; ctx.shadowBlur = 12 + Math.sin(Date.now() * 0.006) * 5; } ctx.fillStyle = pressed ? '#881111' : '#cc2222'; ctx.beginPath(); ctx.arc(0, btnY, 22, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#551111'; ctx.lineWidth = 3; ctx.stroke(); ctx.shadowBlur = 0; // Button highlight if (!pressed) { ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.beginPath(); ctx.arc(-5, btnY - 6, 7, 0, Math.PI * 2); ctx.fill(); } // Rocket icon on button ctx.fillStyle = '#fff'; ctx.font = 'bold 16px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('🚀', 0, btnY); // Label below (flashing when ready) if (!pressed) { const flashAlpha = 0.7 + Math.sin(Date.now() * 0.005) * 0.3; ctx.fillStyle = `rgba(255, 100, 0, ${flashAlpha})`; ctx.font = 'bold 12px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText('▼ LAUNCH ▼', 0, 46); } ctx.restore(); } // Helper: Draw the rocket scene behind the zombie (assembly + straps + flames) function drawRocketScene(ctx) { const state = rocketRenderState; if (!state.active) return; ctx.save(); // Apply launch offset (rocket + zombie move up together when launching) if (state.launching) { ctx.translate(0, -state.launchProgress * (CANVAS_HEIGHT + 500)); } ctx.translate(state.x, state.y); // Rocket dimensions const bodyW = 150; // Body width (50% bigger) const bodyH = 525; // Total body height (nozzle to nose) (50% bigger) const noseH = 120; // Nose cone height (50% bigger) const nozzleH = 75; // Nozzle height (50% bigger) const finW = 75; // Fin width extension (50% bigger) const finH = 150; // Fin height (50% bigger) // === ENGINE NOZZLE (bottom piece) === if (state.parts.nozzle > 0) { const p = state.parts.nozzle; ctx.save(); ctx.globalAlpha = p; // Nozzle bell shape ctx.fillStyle = '#4a4a55'; ctx.beginPath(); ctx.moveTo(-30, 0); ctx.bezierCurveTo(-35, -10, -40, -nozzleH + 10, -25, -nozzleH); ctx.lineTo(25, -nozzleH); ctx.bezierCurveTo(40, -nozzleH + 10, 35, -10, 30, 0); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Nozzle inner dark ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.ellipse(0, 0, 22, 8, 0, 0, Math.PI * 2); ctx.fill(); // Nozzle ring detail ctx.strokeStyle = '#666'; ctx.lineWidth = 3; ctx.beginPath(); ctx.ellipse(0, -nozzleH + 5, 26, 6, 0, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } // === LOWER BODY SECTION === if (state.parts.lowerBody > 0) { const p = state.parts.lowerBody; ctx.save(); ctx.globalAlpha = p; const lbTop = -nozzleH; const lbHeight = bodyH * 0.5; // Main cylinder const lbGrad = ctx.createLinearGradient(-bodyW/2, 0, bodyW/2, 0); lbGrad.addColorStop(0, '#ccc'); lbGrad.addColorStop(0.2, '#e8e8e8'); lbGrad.addColorStop(0.5, '#f5f5f5'); lbGrad.addColorStop(0.8, '#e8e8e8'); lbGrad.addColorStop(1, '#ccc'); ctx.fillStyle = lbGrad; ctx.fillRect(-bodyW/2, lbTop - lbHeight, bodyW, lbHeight); // Section seam at top ctx.strokeStyle = '#aaa'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-bodyW/2, lbTop - lbHeight); ctx.lineTo(bodyW/2, lbTop - lbHeight); ctx.stroke(); // Rivets along the seam ctx.fillStyle = '#888'; for (let i = 0; i < 5; i++) { const rx = -bodyW/2 + 15 + i * (bodyW - 30) / 4; ctx.beginPath(); ctx.arc(rx, lbTop - lbHeight + 1, 3, 0, Math.PI * 2); ctx.fill(); } // Red stripe (decorative) ctx.fillStyle = '#cc2222'; ctx.fillRect(-bodyW/2, lbTop - 40, bodyW, 18); // USA text area ctx.fillStyle = '#1a3a8a'; ctx.font = 'bold 22px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('ZOMBO', 0, lbTop - 70); ctx.font = 'bold 14px Luckiest Guy'; ctx.fillText('AEROSPACE', 0, lbTop - 52); // Outline ctx.strokeStyle = '#999'; ctx.lineWidth = 2; ctx.strokeRect(-bodyW/2, lbTop - lbHeight, bodyW, lbHeight); ctx.restore(); } // === UPPER BODY SECTION === if (state.parts.upperBody > 0) { const p = state.parts.upperBody; ctx.save(); ctx.globalAlpha = p; const ubBottom = -nozzleH - bodyH * 0.5; const ubHeight = bodyH * 0.5; // Main cylinder (slightly narrower at top for taper) const ubGrad = ctx.createLinearGradient(-bodyW/2, 0, bodyW/2, 0); ubGrad.addColorStop(0, '#ccc'); ubGrad.addColorStop(0.2, '#e8e8e8'); ubGrad.addColorStop(0.5, '#f5f5f5'); ubGrad.addColorStop(0.8, '#e8e8e8'); ubGrad.addColorStop(1, '#ccc'); ctx.fillStyle = ubGrad; ctx.beginPath(); ctx.moveTo(-bodyW/2, ubBottom); ctx.lineTo(-bodyW/2 + 5, ubBottom - ubHeight); ctx.lineTo(bodyW/2 - 5, ubBottom - ubHeight); ctx.lineTo(bodyW/2, ubBottom); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#999'; ctx.lineWidth = 2; ctx.stroke(); // Window porthole ctx.fillStyle = '#2a4a6a'; ctx.beginPath(); ctx.arc(0, ubBottom - ubHeight * 0.5, 18, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#888'; ctx.lineWidth = 4; ctx.stroke(); // Window reflection ctx.fillStyle = 'rgba(150, 200, 255, 0.3)'; ctx.beginPath(); ctx.arc(-5, ubBottom - ubHeight * 0.5 - 5, 7, 0, Math.PI * 2); ctx.fill(); // Another red stripe ctx.fillStyle = '#cc2222'; ctx.fillRect(-bodyW/2 + 3, ubBottom - 25, bodyW - 6, 12); ctx.restore(); } // === NOSE CONE (top piece) === if (state.parts.noseCone > 0) { const p = state.parts.noseCone; ctx.save(); ctx.globalAlpha = p; const ncBottom = -nozzleH - bodyH; // Cone shape ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.moveTo(0, ncBottom - noseH); ctx.bezierCurveTo(-15, ncBottom - noseH + 20, -bodyW/2 + 5, ncBottom - 10, -bodyW/2 + 5, ncBottom); ctx.lineTo(bodyW/2 - 5, ncBottom); ctx.bezierCurveTo(bodyW/2 - 5, ncBottom - 10, 15, ncBottom - noseH + 20, 0, ncBottom - noseH); ctx.closePath(); ctx.fill(); // Cone highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; ctx.beginPath(); ctx.moveTo(-5, ncBottom - noseH + 10); ctx.bezierCurveTo(-10, ncBottom - 40, -20, ncBottom - 10, -bodyW/2 + 15, ncBottom); ctx.lineTo(-bodyW/2 + 25, ncBottom); ctx.bezierCurveTo(-15, ncBottom - 15, -8, ncBottom - 45, -5, ncBottom - noseH + 10); ctx.closePath(); ctx.fill(); // Cone outline ctx.strokeStyle = '#881111'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, ncBottom - noseH); ctx.bezierCurveTo(-15, ncBottom - noseH + 20, -bodyW/2 + 5, ncBottom - 10, -bodyW/2 + 5, ncBottom); ctx.moveTo(0, ncBottom - noseH); ctx.bezierCurveTo(15, ncBottom - noseH + 20, bodyW/2 - 5, ncBottom - 10, bodyW/2 - 5, ncBottom); ctx.stroke(); // Tip cap ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(0, ncBottom - noseH, 5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // === LEFT FIN === if (state.parts.leftFin > 0) { const p = state.parts.leftFin; ctx.save(); ctx.globalAlpha = p; const finBaseY = -nozzleH - 10; ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.moveTo(-bodyW/2, finBaseY); ctx.lineTo(-bodyW/2 - finW, finBaseY + finH * 0.6); ctx.lineTo(-bodyW/2 - finW + 10, finBaseY + finH); ctx.lineTo(-bodyW/2, finBaseY + finH * 0.8); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#881111'; ctx.lineWidth = 2; ctx.stroke(); // Fin detail line ctx.strokeStyle = '#ff5555'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(-bodyW/2 - 5, finBaseY + 10); ctx.lineTo(-bodyW/2 - finW + 15, finBaseY + finH * 0.7); ctx.stroke(); ctx.restore(); } // === RIGHT FIN === if (state.parts.rightFin > 0) { const p = state.parts.rightFin; ctx.save(); ctx.globalAlpha = p; const finBaseY = -nozzleH - 10; ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.moveTo(bodyW/2, finBaseY); ctx.lineTo(bodyW/2 + finW, finBaseY + finH * 0.6); ctx.lineTo(bodyW/2 + finW - 10, finBaseY + finH); ctx.lineTo(bodyW/2, finBaseY + finH * 0.8); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#881111'; ctx.lineWidth = 2; ctx.stroke(); // Fin detail line ctx.strokeStyle = '#ff5555'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(bodyW/2 + 5, finBaseY + 10); ctx.lineTo(bodyW/2 + finW - 15, finBaseY + finH * 0.7); ctx.stroke(); ctx.restore(); } // Straps are drawn exclusively on the zombie front via drawRocketStrapsFront() // (No side-extending strap pieces from the rocket body) // === FLAME EFFECT (during launch) === if (state.flameIntensity > 0) { const fi = state.flameIntensity; // Main flame cone below nozzle const flameHeight = 150 + fi * 200 + Math.sin(Date.now() * 0.02) * 30; const flameWidth = 25 + fi * 15; // Outer flame (orange/red) const flameGrad = ctx.createLinearGradient(0, 0, 0, flameHeight); flameGrad.addColorStop(0, `rgba(255, 200, 50, ${fi})`); flameGrad.addColorStop(0.3, `rgba(255, 100, 0, ${fi * 0.8})`); flameGrad.addColorStop(0.7, `rgba(200, 40, 0, ${fi * 0.5})`); flameGrad.addColorStop(1, 'rgba(150, 20, 0, 0)'); ctx.fillStyle = flameGrad; ctx.beginPath(); ctx.moveTo(-flameWidth, 5); ctx.quadraticCurveTo(-(flameWidth + 10), flameHeight * 0.5, 0, flameHeight); ctx.quadraticCurveTo(flameWidth + 10, flameHeight * 0.5, flameWidth, 5); ctx.closePath(); ctx.fill(); // Inner flame (white/yellow core) const innerW = flameWidth * 0.4; const innerH = flameHeight * 0.6; const innerGrad = ctx.createLinearGradient(0, 5, 0, 5 + innerH); innerGrad.addColorStop(0, `rgba(255, 255, 240, ${fi})`); innerGrad.addColorStop(0.5, `rgba(255, 255, 100, ${fi * 0.7})`); innerGrad.addColorStop(1, 'rgba(255, 200, 50, 0)'); ctx.fillStyle = innerGrad; ctx.beginPath(); ctx.moveTo(-innerW, 5); ctx.quadraticCurveTo(-innerW * 0.5, innerH * 0.5, 0, innerH); ctx.quadraticCurveTo(innerW * 0.5, innerH * 0.5, innerW, 5); ctx.closePath(); ctx.fill(); } ctx.restore(); } // ============================================================================ // KILL METHOD ANIMATIONS // ============================================================================ const killAnimations = { // 1. SWORD SLICE - Interactive draggable sword sword: async function() { const speed = window.gameConfig.settings.animationSpeed; // Landing position on the left side of the screen const landX = 200; const landY = zombie.baseY + 300; // Floor level const startY = -250; // Start above screen // Sword drop animation - falling from sky playSound('sword_slash_sound', 0.5); let currentY = startY; let velocityY = 0; let swordAngle = -30 + Math.random() * 20; // Slight random angle let angularVel = 360 + Math.random() * 180; // Spinning as it falls let landed = false; let bounceCount = 0; await animate(1200 / speed, (t, dt) => { if (!landed) { // Apply gravity velocityY += 2500 * dt; // Gravity acceleration currentY += velocityY * dt; swordAngle += angularVel * dt; // Check for landing if (currentY >= landY) { currentY = landY; landed = true; swordAngle = -75 + Math.random() * 10; // Stick into ground at angle playSound('crush_sound', 0.4); // Impact sound // Spawn impact particles for (let i = 0; i < 8; i++) { spawnParticles(landX, landY, 1, { color: '#7a5030', vx: (Math.random() - 0.5) * 100, vy: -50 - Math.random() * 80, size: 3 + Math.random() * 5, life: 0.5, gravity: 400 }); } } } else { // Small wobble after landing const wobbleDecay = Math.max(0, 1 - (t - 0.5) * 4); swordAngle = -75 + Math.sin(t * 40) * 5 * wobbleDecay; } // Draw falling/landed sword ctx.save(); ctx.translate(landX, currentY); ctx.rotate(swordAngle * Math.PI / 180); // Blade glow ctx.shadowColor = '#88aaff'; ctx.shadowBlur = 15; // Blade ctx.fillStyle = '#d0d8e8'; ctx.beginPath(); ctx.moveTo(0, -sword.length); ctx.lineTo(-sword.width / 2, -sword.length + 20); ctx.lineTo(-sword.width / 2 - 2, -15); ctx.lineTo(sword.width / 2 + 2, -15); ctx.lineTo(sword.width / 2, -sword.length + 20); ctx.closePath(); ctx.fill(); // Blade shine ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; ctx.beginPath(); ctx.moveTo(-2, -sword.length + 25); ctx.lineTo(-2, -20); ctx.lineTo(2, -20); ctx.lineTo(2, -sword.length + 30); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; // Guard ctx.fillStyle = '#8b7355'; ctx.fillRect(-25, -15, 50, 8); ctx.strokeStyle = '#5a4a3a'; ctx.lineWidth = 2; ctx.strokeRect(-25, -15, 50, 8); // Guard decorations ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(-20, -11, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(20, -11, 3, 0, Math.PI * 2); ctx.fill(); // Handle ctx.fillStyle = '#4a3728'; ctx.fillRect(-6, -7, 12, sword.handleLength); // Handle wrapping ctx.strokeStyle = '#2a1f18'; ctx.lineWidth = 2; for (let i = 0; i < 5; i++) { const y = i * 10; ctx.beginPath(); ctx.moveTo(-6, y); ctx.lineTo(6, y + 5); ctx.stroke(); } // Pommel ctx.fillStyle = '#8b7355'; ctx.beginPath(); ctx.arc(0, sword.handleLength - 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ffd700'; ctx.beginPath(); ctx.arc(0, sword.handleLength - 2, 5, 0, Math.PI * 2); ctx.fill(); // Blade outline ctx.strokeStyle = '#4a5568'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -sword.length); ctx.lineTo(-sword.width / 2, -sword.length + 20); ctx.lineTo(-sword.width / 2 - 2, -15); ctx.lineTo(sword.width / 2 + 2, -15); ctx.lineTo(sword.width / 2, -sword.length + 20); ctx.closePath(); ctx.stroke(); ctx.restore(); }); // Brief pause with sword stuck in ground await animate(300 / speed, (t, dt) => { // Keep drawing sword stuck in ground ctx.save(); ctx.translate(landX, landY); ctx.rotate(-75 * Math.PI / 180); ctx.shadowColor = '#88aaff'; ctx.shadowBlur = 15; ctx.fillStyle = '#d0d8e8'; ctx.beginPath(); ctx.moveTo(0, -sword.length); ctx.lineTo(-sword.width / 2, -sword.length + 20); ctx.lineTo(-sword.width / 2 - 2, -15); ctx.lineTo(sword.width / 2 + 2, -15); ctx.lineTo(sword.width / 2, -sword.length + 20); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; ctx.fillStyle = '#8b7355'; ctx.fillRect(-25, -15, 50, 8); ctx.fillStyle = '#4a3728'; ctx.fillRect(-6, -7, 12, sword.handleLength); ctx.fillStyle = '#8b7355'; ctx.beginPath(); ctx.arc(0, sword.handleLength - 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // Activate interactive sword mode - sword stays where it landed activateSword(landX, landY, -75); // Enable reset button during interactive mode document.getElementById('reset-button').disabled = false; // Wait for player to interact - sword stays active until reset // This is an interactive mode, so we just wait a moment then // keep the sword active while allowing play await animate(500, () => {}); // Keep sword active - player uses Reset to end // The animation "completes" but sword remains // We'll wait until there's at least one kill or 10 seconds const startTime = Date.now(); let killTime = 0; await new Promise((resolve) => { const checkComplete = () => { if (!sword.active) { resolve(); return; } // Auto-complete after a kill and a brief pause, or timeout const hasKills = sword.kills > 0; const timePassed = Date.now() - startTime; if (hasKills) { if (killTime === 0) killTime = Date.now(); if (Date.now() - killTime > 2000) { resolve(); return; } requestAnimationFrame(checkComplete); } else if (timePassed > 30000) { // 30 second timeout resolve(); } else { requestAnimationFrame(checkComplete); } }; checkComplete(); }); // Sword stays active until manual reset - don't deactivate here }, // 2. FLAMETHROWER - Interactive flame stream flamethrower: async function() { const speed = window.gameConfig.settings.animationSpeed; // Activate interactive flamethrower mode activateFlamethrower(); // Enable reset button during interactive mode document.getElementById('reset-button').disabled = false; // Wait a moment for the UI to show await animate(500, () => {}); // Wait for player to burn the zombie or timeout const startTime = Date.now(); let deadTime = 0; await new Promise((resolve) => { const checkComplete = () => { if (!flamethrower.active) { resolve(); return; } // Check if zombie is fully burned to skeleton or collapsed const zombieDead = zombie && (zombie.skeleton || flamethrower.collapsed) && flamethrower.killCounted; const timePassed = Date.now() - startTime; if (zombieDead) { if (deadTime === 0) deadTime = Date.now(); if (Date.now() - deadTime > 2000) { resolve(); return; } requestAnimationFrame(checkComplete); } else if (timePassed > 45000) { // 45 second timeout (longer for burning mechanic) resolve(); } else { requestAnimationFrame(checkComplete); } }; checkComplete(); }); // Flamethrower stays active until reset }, // 3. EXPLOSION - Bomb drops randomly near zombie and blasts it with directional force explosion: async function() { const speed = window.gameConfig.settings.animationSpeed; // Random bomb landing position near the zombie const bombOffsetX = (Math.random() - 0.5) * 200; // -100 to +100 from zombie center const bombX = zombie.baseX + bombOffsetX; const bombY = CANVAS_HEIGHT - 300; // Land on the established ground const bombStartY = -100; // Start above screen // Zombie notices something falling zombie.applyImpulse(bombOffsetX > 0 ? -30 : 30, -40); // Bomb drops from the sky await animate(600 / speed, (t, dt) => { const currentY = bombStartY + t * (bombY - bombStartY); const wobble = Math.sin(t * 15) * (1 - t) * 5; // Wobble decreases as it falls ctx.save(); ctx.translate(bombX + wobble, currentY); ctx.rotate(t * Math.PI * 2); // Spin while falling // Bomb body (classic cartoon bomb) - 50px radius, bold and bright // Outer glow ring for visibility ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 15; ctx.fillStyle = '#111'; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Metallic gradient body const bombGrad = ctx.createRadialGradient(-12, -12, 5, 0, 0, 50); bombGrad.addColorStop(0, '#555'); bombGrad.addColorStop(0.4, '#333'); bombGrad.addColorStop(0.8, '#1a1a1a'); bombGrad.addColorStop(1, '#000'); ctx.fillStyle = bombGrad; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); // Bright specular highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'; ctx.beginPath(); ctx.ellipse(-14, -18, 12, 8, -0.4, 0, Math.PI * 2); ctx.fill(); // Secondary highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'; ctx.beginPath(); ctx.ellipse(10, 15, 8, 5, 0.3, 0, Math.PI * 2); ctx.fill(); // Bold outline ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.stroke(); // Fuse top cap ctx.fillStyle = '#555'; ctx.fillRect(-9, -64, 18, 18); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.strokeRect(-9, -64, 18, 18); // Fuse string ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(0, -64); ctx.quadraticCurveTo(18, -80, 12, -96); ctx.stroke(); // Jagged sparkly spark on fuse const sparkX = 12; const sparkY = -96; const sparkSize = 10 + Math.sin(t * 30) * 4; const numSparkPoints = 8; // Bright glow behind spark ctx.shadowColor = '#fff'; ctx.shadowBlur = 20 + Math.sin(t * 40) * 8; ctx.fillStyle = `rgba(255, 255, 200, 0.9)`; ctx.beginPath(); ctx.arc(sparkX, sparkY, sparkSize * 0.6, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Jagged star shape ctx.fillStyle = '#fff'; ctx.beginPath(); for (let sp = 0; sp < numSparkPoints; sp++) { const spAngle = (sp / numSparkPoints) * Math.PI * 2 + t * 20; const outerR = sparkSize * (0.8 + Math.random() * 0.5); const innerR = sparkSize * 0.3; const ox = sparkX + Math.cos(spAngle) * outerR; const oy = sparkY + Math.sin(spAngle) * outerR; const ix = sparkX + Math.cos(spAngle + Math.PI / numSparkPoints) * innerR; const iy = sparkY + Math.sin(spAngle + Math.PI / numSparkPoints) * innerR; if (sp === 0) ctx.moveTo(ox, oy); else ctx.lineTo(ox, oy); ctx.lineTo(ix, iy); } ctx.closePath(); ctx.fill(); // Hot orange/yellow core ctx.fillStyle = `rgba(255, ${180 - t * 100}, 0, 1)`; ctx.beginPath(); ctx.arc(sparkX, sparkY, sparkSize * 0.4, 0, Math.PI * 2); ctx.fill(); // Tiny sparkle dots flying off if (Math.random() < 0.7) { spawnParticles(bombX + wobble + sparkX, currentY + sparkY, 1, { color: Math.random() > 0.3 ? '#ffffff' : (Math.random() > 0.5 ? '#ffcc00' : '#ff6600'), vx: (Math.random() - 0.5) * 60, vy: -30 - Math.random() * 50, size: 1.5 + Math.random() * 3, life: 0.15 + Math.random() * 0.15, gravity: 50 }); } ctx.restore(); }); // Bomb landed - fuse countdown (3 seconds longer) await animate(3400 / speed, (t, dt) => { ctx.save(); ctx.translate(bombX, bombY); // Bomb body - 50px radius, bold and bright ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 15 + t * 10; ctx.fillStyle = '#111'; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Metallic gradient const bombGrad2 = ctx.createRadialGradient(-12, -12, 5, 0, 0, 50); bombGrad2.addColorStop(0, '#555'); bombGrad2.addColorStop(0.4, '#333'); bombGrad2.addColorStop(0.8, '#1a1a1a'); bombGrad2.addColorStop(1, '#000'); ctx.fillStyle = bombGrad2; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); // Bright specular highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'; ctx.beginPath(); ctx.ellipse(-14, -18, 12, 8, -0.4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'; ctx.beginPath(); ctx.ellipse(10, 15, 8, 5, 0.3, 0, Math.PI * 2); ctx.fill(); // Bold outline ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.stroke(); // Fuse cap ctx.fillStyle = '#555'; ctx.fillRect(-9, -64, 18, 18); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.strokeRect(-9, -64, 18, 18); // Fuse getting shorter const fuseLength = 32 * (1 - t); ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(0, -64); ctx.quadraticCurveTo(fuseLength * 0.5, -64 - fuseLength * 0.5, fuseLength * 0.3, -64 - fuseLength); ctx.stroke(); // Jagged sparkly spark at fuse end (getting brighter and bigger) const fSparkX = fuseLength * 0.3; const fSparkY = -64 - fuseLength; const fSparkSize = 12 + t * 10; const fNumPoints = 8; // Bright white glow ctx.shadowColor = '#ffffff'; ctx.shadowBlur = 20 + t * 25; ctx.fillStyle = `rgba(255, 255, 220, ${0.9 + t * 0.1})`; ctx.beginPath(); ctx.arc(fSparkX, fSparkY, fSparkSize * 0.5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Jagged star shape ctx.fillStyle = '#fff'; ctx.beginPath(); for (let sp = 0; sp < fNumPoints; sp++) { const spAngle = (sp / fNumPoints) * Math.PI * 2 + t * 15; const outerR = fSparkSize * (0.7 + Math.random() * 0.6); const innerR = fSparkSize * 0.25; const ox = fSparkX + Math.cos(spAngle) * outerR; const oy = fSparkY + Math.sin(spAngle) * outerR; const ix = fSparkX + Math.cos(spAngle + Math.PI / fNumPoints) * innerR; const iy = fSparkY + Math.sin(spAngle + Math.PI / fNumPoints) * innerR; if (sp === 0) ctx.moveTo(ox, oy); else ctx.lineTo(ox, oy); ctx.lineTo(ix, iy); } ctx.closePath(); ctx.fill(); // Hot core ctx.fillStyle = `rgba(255, ${150 + t * 105}, 0, 1)`; ctx.beginPath(); ctx.arc(fSparkX, fSparkY, fSparkSize * 0.35, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Zombie reacts more as fuse burns if (t > 0.7) { zombie.applyImpulse((Math.random() - 0.5) * 20, -10); } }); playSound('explosion_sound'); // Explosion flash + shockwave centered on bomb (faster) await animate(60 / speed, (t, dt) => { ctx.save(); // Bright white-yellow flash ctx.fillStyle = `rgba(255, 255, 200, ${(1 - t) * 0.9})`; ctx.beginPath(); ctx.arc(bombX, bombY, 300 * t, 0, Math.PI * 2); ctx.fill(); // Inner hot core ctx.fillStyle = `rgba(255, 200, 50, ${(1 - t) * 0.7})`; ctx.beginPath(); ctx.arc(bombX, bombY, 300 * t, 0, Math.PI * 2); ctx.fill(); // Expanding shockwave ring const waveR = t * 900; // doubled size for bigger shockwave ctx.strokeStyle = `rgba(255, 180, 50, ${(1 - t) * 0.9})`; ctx.lineWidth = 12 * (1 - t) + 2; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 25 * (1 - t); ctx.beginPath(); ctx.arc(bombX, bombY, waveR, 0, Math.PI * 2); ctx.stroke(); // Second inner shockwave (delayed) if (t > 0.2) { const wave2R = (t - 0.2) * 380; ctx.strokeStyle = `rgba(255, 255, 200, ${(1 - t) * 0.6})`; ctx.lineWidth = 6 * (1 - t) + 1; ctx.beginPath(); ctx.arc(bombX, bombY, wave2R, 0, Math.PI * 2); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); // Full screen flash (brief, punchy - first 15% only) if (t < 0.15) { ctx.fillStyle = `rgba(255, 255, 220, ${(1 - t / 0.15) * 0.75})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Calculate directional force for each body part based on bomb position // Force direction is FROM bomb TO each part const scale = zombie.scale * zombie.globalScale; const explosionPower = 2700; // 200% bigger force for dramatic effect (was 1350) // Part positions relative to zombie base (in local coords) const partPositions = { head: { x: 0, y: -115 }, torso: { x: 0, y: 0 }, leftUpperArm: { x: -48, y: -65 }, rightUpperArm: { x: 48, y: -65 }, leftForearm: { x: -48, y: 5 }, rightForearm: { x: 48, y: 5 }, leftThigh: { x: -22, y: 80 }, rightThigh: { x: 22, y: 80 }, leftLowerLeg: { x: -22, y: 160 }, rightLowerLeg: { x: 22, y: 160 } }; // Detach all parts with directional force away from bomb for (const partName in partPositions) { const partPos = partPositions[partName]; // Calculate world position of part const partWorldX = zombie.baseX + partPos.x * scale; const partWorldY = zombie.baseY + partPos.y * scale; // Direction from bomb to part const dx = partWorldX - bombX; const dy = partWorldY - bombY; const dist = Math.sqrt(dx * dx + dy * dy); // Normalize and scale force (closer = more force) const forceMult = explosionPower * (1 + 100 / (dist + 50)); const forceX = (dx / dist) * forceMult + (Math.random() - 0.5) * 50; const forceY = (dy / dist) * forceMult - 150; // Extra upward force zombie.detachPart(partName, forceX, forceY); // Set continuous bleeding for bomb-detached parts (bleeds until reset) zombie.parts[partName].continuousBleeding = true; } // Screen flash at detonation moment ctx.fillStyle = 'rgba(255, 255, 220, 0.85)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Explosion particles emanating from bomb position (2x speed) for (let i = 0; i < 120; i++) { // doubled particle count for larger explosion const angle = Math.random() * Math.PI * 2; const spd = 400 + Math.random() * 700; spawnParticles(bombX, bombY, 1, { color: i % 3 === 0 ? '#ff6600' : (i % 3 === 1 ? '#ffcc00' : '#3dcc10'), vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 160, size: 10 + Math.random() * 20, life: 1 + Math.random(), type: i % 2 === 0 ? 'chunk' : 'fire' }); } // Debris/shrapnel (2x speed) for (let i = 0; i < 30; i++) { // doubled debris count const angle = Math.random() * Math.PI * 2; const spd = 300 + Math.random() * 400; spawnParticles(bombX, bombY, 1, { color: '#333', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 200, size: 4 + Math.random() * 8, life: 1.5, gravity: 600, type: 'square' }); } await animate(2000 / speed, () => {}); }, // 4. ACID - Dissolves zombie skin from top to bottom revealing green skeleton acid: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('fire_sound', 0.5); zombie.isRagdolling = true; zombie.acidDissolving = true; zombie.acidDissolveY = -200; // Start above the head (in zombie-relative coords) // Pour acid - zombie recoils zombie.applyImpulse(0, -30); await animate(600 / speed, (t, dt) => { ctx.save(); ctx.fillStyle = '#88ff22'; ctx.globalAlpha = 0.8; // Acid stream pouring down ctx.beginPath(); ctx.moveTo(zombie.baseX - 25, 0); ctx.lineTo(zombie.baseX + 25, 0); ctx.lineTo(zombie.baseX + 15, zombie.baseY - 150 + t * 80); ctx.lineTo(zombie.baseX - 15, zombie.baseY - 150 + t * 80); ctx.closePath(); ctx.fill(); // Acid glow effect ctx.shadowColor = '#88ff22'; ctx.shadowBlur = 20; ctx.beginPath(); ctx.arc(zombie.baseX, zombie.baseY - 150 + t * 80, 20 + Math.sin(t * 20) * 5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // Slow dissolve from top to bottom - revealing green smoldering skeleton // The dissolve line moves from top of head (-170) to bottom of feet (+280) const startY = -170; // Top of head relative to zombie center const endY = 280; // Bottom of feet const totalDistance = endY - startY; // ~450 pixels await animate(4000 / speed, (t, dt) => { // Update the dissolve line position (moves down over time) zombie.acidDissolveY = startY + t * totalDistance; // Zombie writhes in agony if (Math.random() < 0.15) { zombie.applyImpulse((Math.random() - 0.5) * 40, -10); } // Acid dripping/sizzling particles at the dissolve line if (Math.random() < 0.5) { const worldDissolveY = zombie.baseY + zombie.acidDissolveY * zombie.scale; spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, worldDissolveY, 1, { color: '#88ff22', vy: 30 + Math.random() * 40, vx: (Math.random() - 0.5) * 30, size: 4 + Math.random() * 6, life: 0.4 + Math.random() * 0.3, gravity: 200 } ); } // Green toxic smoke rising from dissolved areas if (Math.random() < 0.3) { const smokeY = zombie.baseY + (startY + t * totalDistance * 0.5) * zombie.scale; spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, smokeY, 1, { color: Math.random() > 0.5 ? '#90EE90' : '#32CD32', vy: -60 - Math.random() * 40, vx: (Math.random() - 0.5) * 20, size: 12 + Math.random() * 15, life: 1 + Math.random() * 0.5, gravity: -40, type: 'circle' } ); } // Sizzling/bubbling at the dissolve front if (Math.random() < 0.4) { const worldDissolveY = zombie.baseY + zombie.acidDissolveY * zombie.scale; spawnParticles( zombie.baseX + (Math.random() - 0.5) * 50, worldDissolveY - 10, 1, { color: '#ADFF2F', vy: -20 - Math.random() * 30, vx: (Math.random() - 0.5) * 40, size: 3 + Math.random() * 4, life: 0.3, gravity: 100 } ); } }); // Fully dissolved - zombie is now a green smoldering skeleton zombie.acidSkeleton = true; zombie.acidDissolveY = endY + 100; // Ensure fully dissolved // Final collapse - skeleton crumbles await animate(500 / speed, () => { // More smoke from the fully revealed skeleton if (Math.random() < 0.3) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: '#90EE90', vy: -40, size: 10 + Math.random() * 10, life: 0.8, gravity: -30, type: 'circle' } ); } }); // Skeleton collapses into a heap - disable blood since it's all dissolved zombie.noBlood = true; zombie.crumble(); await animate(1500 / speed, () => {}); }, // 5. FREEZE & SHATTER - Cold air blows in and freezes zombie solid, then shatters freeze: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('freeze_sound'); // Phase 1: Cold air blast blows in from the left side of the screen (3200ms) // Zombie reacts to the wind before freezing zombie.isRagdolling = false; zombie.ragdollEnabled = true; // KEEP true so joints stay connected! zombie.customPose = true; // Disable idle sway to pose manually // Save initial rotations to pose against the wind const initialTorsoRot = zombie.parts.torso.rotation; const initialHeadRot = zombie.parts.head.attached ? zombie.parts.head.rotation : 0; await animate(3200 / speed, (t, dt) => { // Update freeze wind render state - actual drawing happens in gameLoop OVER the zombie const windIntensity = Math.sin(t * Math.PI); // Peak in middle freezeWindRenderState.active = true; freezeWindRenderState.t = t; freezeWindRenderState.windIntensity = windIntensity; // Cold air particle stream (snowflakes/ice crystals blowing across) if (Math.random() < 0.8) { const py = Math.random() * CANVAS_HEIGHT; spawnParticles(-20, py, 1, { color: Math.random() > 0.5 ? '#d8eeff' : '#a8d8ea', vx: 400 + Math.random() * 300, vy: (Math.random() - 0.5) * 80, size: 3 + Math.random() * 6, life: 0.6 + Math.random() * 0.4, gravity: 0, type: Math.random() > 0.6 ? 'ice' : 'circle', shrink: false }); } // Larger snowflake/frost particles if (Math.random() < 0.4) { const py = Math.random() * CANVAS_HEIGHT; spawnParticles(-30, py, 1, { color: '#ffffff', vx: 250 + Math.random() * 200, vy: (Math.random() - 0.5) * 60 + 20, size: 6 + Math.random() * 12, life: 0.8 + Math.random() * 0.5, gravity: 30, type: 'ice', shrink: false }); } // Zombie gets pushed by the wind and starts freezing // Lean back against the wind zombie.parts.torso.rotation = initialTorsoRot + t * 15; if (zombie.parts.head.attached) { zombie.parts.head.rotation = initialHeadRot + t * 25; } // Arms blow back from wind force if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + t * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + t * 35; } // Start turning blue/frozen as cold air contacts if (t > 0.4) { zombie.frozen = true; } // Ice crystals form on zombie where cold air hits if (t > 0.3 && Math.random() < 0.4 * t) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 100, zombie.baseY + (Math.random() - 0.5) * 250, 1, { color: '#a8d8ea', vx: 20 + Math.random() * 30, vy: (Math.random() - 0.5) * 20, size: 5 + Math.random() * 10, life: 0.8, gravity: 0, type: 'ice', shrink: false } ); } }); // Wind phase complete - clear render state freezeWindRenderState.active = false; // Phase 2: Zombie fully freezes solid (600ms) - stiffens completely zombie.ragdollEnabled = true; zombie.isRagdolling = false; zombie.frozen = true; zombie.customPose = true; await animate(600 / speed, (t, dt) => { // Keep the braced pose, don't reset rotations // Final frost crystallization particles if (Math.random() < 0.3) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 100, zombie.baseY + (Math.random() - 0.5) * 250, 1, { color: '#a8d8ea', vx: (Math.random() - 0.5) * 20, vy: (Math.random() - 0.5) * 20, size: 5 + Math.random() * 10, life: 0.5, gravity: 0, type: 'ice', shrink: false } ); } // Residual cold wind particles (dying down) if (Math.random() < 0.3 * (1 - t)) { const py = Math.random() * CANVAS_HEIGHT; spawnParticles(-10, py, 1, { color: '#d8eeff', vx: 200 + Math.random() * 150, vy: (Math.random() - 0.5) * 40, size: 2 + Math.random() * 4, life: 0.4, gravity: 0, type: 'circle', shrink: false }); } }); // Pause frozen - zombie stands completely motionless for 2 seconds zombie.customPose = true; // Keep limbs locked, no sway await animate(2000 / speed, () => {}); playSound('shatter_sound'); // Shatter! Use ragdoll detach - disable blood since it's frozen solid zombie.customPose = false; zombie.noBlood = true; zombie.detachPart('head', (Math.random() - 0.5) * 300, -250); zombie.detachPart('leftUpperArm', -250, -200); zombie.detachPart('leftForearm', -280, -220); zombie.detachPart('rightUpperArm', 250, -200); zombie.detachPart('rightForearm', 280, -220); zombie.detachPart('leftThigh', -150, -150); zombie.detachPart('leftLowerLeg', -170, -180); zombie.detachPart('rightThigh', 150, -150); zombie.detachPart('rightLowerLeg', 170, -180); zombie.detachPart('torso', 0, -100); // Ice shard particles for (let i = 0; i < 40; i++) { const angle = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 250; spawnParticles(zombie.baseX, zombie.baseY, 1, { color: '#a8d8ea', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 100, size: 8 + Math.random() * 15, life: 1.5, type: 'ice' }); } await animate(1500 / speed, () => {}); }, // 6. CHAINSAW - Interactive draggable saw chainsaw: async function() { const speed = window.gameConfig.settings.animationSpeed; // Landing position on the left side of the screen (like sword) const landX = 230; const landY = zombie.baseY + 300; // Floor level const startY = -250; // Start above screen // Chainsaw drop animation - falling from sky playSound('chainsaw_sound', 0.5); let currentY = startY; let velocityY = 0; let sawAngle = 15 + Math.random() * 20; // Random angle let angularVel = 300 + Math.random() * 200; // Spinning as it falls let landed = false; await animate(1000 / speed, (t, dt) => { if (!landed) { // Apply gravity velocityY += 2200 * dt; currentY += velocityY * dt; sawAngle += angularVel * dt; // Check for landing if (currentY >= landY) { currentY = landY; landed = true; sawAngle = 0; // Lay flat on ground playSound('crush_sound', 0.4); // Impact sound // Spawn impact particles for (let i = 0; i < 10; i++) { spawnParticles(landX, landY, 1, { color: '#7a5030', vx: (Math.random() - 0.5) * 120, vy: -60 - Math.random() * 80, size: 3 + Math.random() * 5, life: 0.5, gravity: 400 }); } } } else { // Small bounce/wobble after landing const wobbleDecay = Math.max(0, 1 - (t - 0.5) * 4); sawAngle = Math.sin(t * 30) * 8 * wobbleDecay; } // Draw falling/landed chainsaw at FULL SIZE (same as interactive chainsaw) ctx.save(); ctx.translate(landX, currentY); ctx.rotate(sawAngle * Math.PI / 180); // Main body (motor housing) - 120x80 doubled size ctx.fillStyle = '#e83820'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2, -chainsaw.bodyHeight/2, chainsaw.bodyWidth, chainsaw.bodyHeight, 5); ctx.fill(); ctx.strokeStyle = '#c02a18'; ctx.lineWidth = 2; ctx.stroke(); // Body details - vents ctx.fillStyle = '#222'; for (let i = 0; i < 3; i++) { ctx.fillRect(-chainsaw.bodyWidth/2 + 8 + i * 12, -chainsaw.bodyHeight/2 + 8, 8, 4); } // Engine cap ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(-chainsaw.bodyWidth/2 + 15, 0, 12, 0, Math.PI * 2); ctx.fill(); // Handle (back) ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2 - 20, -8, 25, 16, 3); ctx.fill(); ctx.strokeStyle = '#2a1f18'; ctx.lineWidth = 1; ctx.stroke(); // Front handle ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-10, -chainsaw.bodyHeight/2 - 15, 20, 18, 3); ctx.fill(); ctx.stroke(); // Blade bar - 200px blade length ctx.fillStyle = '#666'; ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, -6); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, -4); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength, 0); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 4); ctx.lineTo(chainsaw.bodyWidth/2 - 10, 6); ctx.closePath(); ctx.fill(); // Blade tip (rounded) ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 0, 6, -Math.PI/2, Math.PI/2); ctx.fill(); // Chain teeth ctx.fillStyle = '#888'; const teethStart = chainsaw.bodyWidth/2 - 5; const teethEnd = chainsaw.bodyWidth/2 + chainsaw.bladeLength - 15; const numTeeth = 12; for (let i = 0; i < numTeeth; i++) { const t = i / numTeeth; const tx = teethStart + t * (teethEnd - teethStart); // Top teeth ctx.beginPath(); ctx.moveTo(tx, -6); ctx.lineTo(tx + 3, -10); ctx.lineTo(tx + 6, -6); ctx.closePath(); ctx.fill(); // Bottom teeth ctx.beginPath(); ctx.moveTo(tx + 3, 6); ctx.lineTo(tx + 6, 10); ctx.lineTo(tx + 9, 6); ctx.closePath(); ctx.fill(); } // Chain (edge line) ctx.strokeStyle = '#555'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, -7); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 12, -5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, 7); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 12, 5); ctx.stroke(); ctx.restore(); }); // Brief pause with chainsaw on ground at FULL SIZE await animate(200 / speed, (t, dt) => { // Keep drawing chainsaw on ground at full size ctx.save(); ctx.translate(landX, landY); ctx.rotate(0); // Main body (motor housing) - 120x80 doubled size ctx.fillStyle = '#e83820'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2, -chainsaw.bodyHeight/2, chainsaw.bodyWidth, chainsaw.bodyHeight, 5); ctx.fill(); ctx.strokeStyle = '#c02a18'; ctx.lineWidth = 2; ctx.stroke(); // Body details - vents ctx.fillStyle = '#222'; for (let i = 0; i < 3; i++) { ctx.fillRect(-chainsaw.bodyWidth/2 + 8 + i * 12, -chainsaw.bodyHeight/2 + 8, 8, 4); } // Engine cap ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(-chainsaw.bodyWidth/2 + 15, 0, 12, 0, Math.PI * 2); ctx.fill(); // Handle (back) ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-chainsaw.bodyWidth/2 - 20, -8, 25, 16, 3); ctx.fill(); // Front handle ctx.fillStyle = '#4a3728'; ctx.beginPath(); ctx.roundRect(-10, -chainsaw.bodyHeight/2 - 15, 20, 18, 3); ctx.fill(); // Blade bar - 200px blade length ctx.fillStyle = '#666'; ctx.beginPath(); ctx.moveTo(chainsaw.bodyWidth/2 - 10, -6); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, -4); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength, 0); ctx.lineTo(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 4); ctx.lineTo(chainsaw.bodyWidth/2 - 10, 6); ctx.closePath(); ctx.fill(); // Blade tip (rounded) ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(chainsaw.bodyWidth/2 + chainsaw.bladeLength - 10, 0, 6, -Math.PI/2, Math.PI/2); ctx.fill(); // Chain teeth ctx.fillStyle = '#888'; const teethStart = chainsaw.bodyWidth/2 - 5; const teethEnd = chainsaw.bodyWidth/2 + chainsaw.bladeLength - 15; const numTeeth = 12; for (let i = 0; i < numTeeth; i++) { const t = i / numTeeth; const tx = teethStart + t * (teethEnd - teethStart); ctx.beginPath(); ctx.moveTo(tx, -6); ctx.lineTo(tx + 3, -10); ctx.lineTo(tx + 6, -6); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(tx + 3, 6); ctx.lineTo(tx + 6, 10); ctx.lineTo(tx + 9, 6); ctx.closePath(); ctx.fill(); } ctx.restore(); }); // Activate interactive chainsaw mode activateChainsaw(landX, landY, 0); // Enable reset button during interactive mode document.getElementById('reset-button').disabled = false; // Wait a moment then keep chainsaw active await animate(500, () => {}); // Wait until player makes kills or timeout const startTime = Date.now(); let killTime = 0; await new Promise((resolve) => { const checkComplete = () => { if (!chainsaw.active) { resolve(); return; } const hasKills = chainsaw.kills > 0; const timePassed = Date.now() - startTime; if (hasKills) { if (killTime === 0) killTime = Date.now(); if (Date.now() - killTime > 2000) { resolve(); return; } requestAnimationFrame(checkComplete); } else if (timePassed > 30000) { // 30 second timeout resolve(); } else { requestAnimationFrame(checkComplete); } }; checkComplete(); }); // Chainsaw stays active until manual reset }, // 7. LIGHTNING STRIKE - Electrocutes and leaves skeleton lightning: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('lightning_sound'); // Lightning bolt strikes await animate(200 / speed, (t, dt) => { ctx.save(); ctx.strokeStyle = '#ffff00'; ctx.lineWidth = 8; ctx.shadowColor = '#ffffff'; ctx.shadowBlur = 20; ctx.beginPath(); ctx.moveTo(zombie.baseX, 0); let y = 0; while (y < zombie.baseY - 80) { y += 30 + Math.random() * 20; const x = zombie.baseX + (Math.random() - 0.5) * 40; ctx.lineTo(x, y); } ctx.lineTo(zombie.baseX, zombie.baseY - 80); ctx.stroke(); // Flash ctx.fillStyle = `rgba(255, 255, 255, ${0.5 * (1 - t)})`; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.restore(); }); // Start electrocution - 3 seconds of zapping with visible skeleton zombie.isRagdolling = true; zombie.electrocuting = true; // Show black skin at 50% with white skeleton underneath // Continuous lightning bolt during electrocution (3 seconds) await animate(3000 / speed, (t, dt) => { // Draw continuous lightning bolt connecting to zombie ctx.save(); ctx.strokeStyle = '#ffff00'; ctx.lineWidth = 6 + Math.sin(t * 50) * 2; ctx.shadowColor = '#ffffff'; ctx.shadowBlur = 15 + Math.sin(t * 30) * 10; ctx.beginPath(); ctx.moveTo(zombie.baseX + (Math.random() - 0.5) * 20, 0); let y = 0; while (y < zombie.baseY - 80) { y += 25 + Math.random() * 15; const x = zombie.baseX + (Math.random() - 0.5) * 50; ctx.lineTo(x, y); } ctx.lineTo(zombie.baseX + (Math.random() - 0.5) * 30, zombie.baseY - 80); ctx.stroke(); // Secondary branching bolts if (Math.random() < 0.3) { ctx.lineWidth = 3; ctx.beginPath(); const branchY = 100 + Math.random() * 300; ctx.moveTo(zombie.baseX + (Math.random() - 0.5) * 30, branchY); ctx.lineTo(zombie.baseX + (Math.random() - 0.5) * 150, branchY + 50 + Math.random() * 100); ctx.stroke(); } ctx.restore(); // Violent spasming convulsions - much more intense const spazIntensity = 200 + Math.sin(t * 100) * 100; zombie.applyImpulse( Math.sin(t * 120) * spazIntensity + (Math.random() - 0.5) * 100, Math.cos(t * 90) * spazIntensity * 0.5 + (Math.random() - 0.5) * 50 ); // Extra limb flailing for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.attached && partName !== 'torso') { part.angularVelocity += (Math.random() - 0.5) * 300; } } // Electric sparks flying off if (Math.random() < 0.7) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 100, zombie.baseY + (Math.random() - 0.5) * 250, 1, { color: Math.random() > 0.3 ? '#ffff00' : '#ffffff', vx: (Math.random() - 0.5) * 300, vy: (Math.random() - 0.5) * 300, size: 3 + Math.random() * 6, life: 0.15 + Math.random() * 0.15, gravity: 0 } ); } // Occasional bright flash if (Math.random() < 0.1) { ctx.fillStyle = `rgba(255, 255, 200, 0.15)`; ctx.fillRect(0, 0, canvas.width, canvas.height); } }); // Zap ends - remove skin layer, show only white skeleton for 1 second zombie.electrocuting = false; zombie.skeleton = true; zombie.electrocutedSkeleton = true; // Flag for white skeleton color zombie.baseX = CANVAS_WIDTH / 2; // Show skeleton standing for 1 second with smoke rising await animate(1000 / speed, (t, dt) => { // Smoke rising from the skeleton if (Math.random() < 0.4) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: '#555', vx: (Math.random() - 0.5) * 20, vy: -40 - Math.random() * 40, size: 8 + Math.random() * 12, life: 0.8 + Math.random() * 0.4, gravity: -30, type: 'circle' } ); } // Small residual sparks if (Math.random() < 0.15) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 50, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: '#ffff00', vx: (Math.random() - 0.5) * 50, vy: (Math.random() - 0.5) * 50, size: 2 + Math.random() * 3, life: 0.1, gravity: 0 } ); } }); // Collapse into heap - disable blood since it's just a skeleton zombie.noBlood = true; zombie.crumble(); await animate(1500 / speed, () => {}); }, // 8. ANVIL DROP - Crushes the zombie flat anvil: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Big circular shadow slowly grows over the zombie while it twitches nervously await animate(1500 / speed, (t, dt) => { const shadowRadius = 30 + t * 195; const shadowOpacity = 0.1 + t * 0.6; // Update shadow state (drawn behind zombie in game loop) anvilShadow.active = true; anvilShadow.x = zombie.baseX; anvilShadow.y = zombie.baseY + 280; anvilShadow.radiusX = shadowRadius; anvilShadow.radiusY = shadowRadius * 0.38; // Flattened oval anvilShadow.opacity = shadowOpacity; // Zombie twitches nervously - looks up, shakes if (t > 0.15) { // Head looks up if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 25) * (3 + t * 8); } // Nervous body twitches that increase over time const twitchIntensity = (t - 0.15) * 25; if (Math.random() < 0.2 + t * 0.3) { zombie.applyImpulse( (Math.random() - 0.5) * twitchIntensity, -5 - Math.random() * twitchIntensity * 0.3 ); } } // Arms raise in panic as shadow gets bigger if (t > 0.4) { const panicT = (t - 0.4) / 0.6; if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - panicT * 40 + Math.sin(t * 30) * 5; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + panicT * 40 + Math.sin(t * 30 + 1) * 5; } } }); // Anvil drops straight down from top of screen at constant speed - no pausing playSound('crush_sound', 1.0); // keep shadow active during drop so it remains visible beneath the falling anvil await animate(100 / speed, (t, dt) => { // Linear drop - no easing, no slowing, constant speed straight down const anvilY = -400 + t * (zombie.baseY + 100 + 400); ctx.save(); ctx.translate(zombie.baseX, anvilY); // Anvil shape (increased 50%) ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(-270, 0); ctx.lineTo(270, 0); ctx.lineTo(225, 135); ctx.lineTo(180, 135); ctx.lineTo(180, 270); ctx.lineTo(-180, 270); ctx.lineTo(-180, 135); ctx.lineTo(-225, 135); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 9; ctx.stroke(); // Horn (scaled 50%) ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(225, 45); ctx.lineTo(405, 23); ctx.lineTo(225, 90); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); }); playSound('crush_sound', 1.0); playSound('explosion_sound', 0.4); // Impact - immediately show pancake (no squishing animation) zombie.anvilPancake = true; zombie.pancakeBlinkState = 'waiting'; // will blink after a delay zombie.pancakeBlinkTimer = 3.1; // wait 3.1s before first blink (0.6 + 2.5 extra) // Splat particles spawn at same instant the zombie turns into a pancake { const pancakeWorldX = savedBaseX; const pancakeWorldY = savedBaseY + 245 * zombie.scale; // Blood splatter (outward horizontal spray) for (let i = 0; i < 20; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 200; spawnParticles(pancakeWorldX, pancakeWorldY, 1, { color: '#3dcc10', vx: Math.cos(angle) * spd * 2.5, vy: -Math.abs(Math.sin(angle) * spd * 0.4), size: 8 + Math.random() * 10, life: 1.5 }); } // Giant green splat radiating outward (wide horizontal, low vertical) for (let i = 0; i < 70; i++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 350; spawnParticles(pancakeWorldX + (Math.random() - 0.5) * 40, pancakeWorldY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd * 2.8, vy: Math.sin(angle) * spd * 0.15 - 10, size: 10 + Math.random() * 20, life: 2.5 + Math.random(), gravity: 200, type: 'circle' }); } } // Screen shake await animate(400 / speed, (t, dt) => { const shakeDecay = Math.max(0, 1 - t * 2); const shakeIntensity = 45 * shakeDecay; const shakeX = Math.sin(t * 80) * shakeIntensity; const shakeY = Math.cos(t * 60) * shakeIntensity * 0.7; zombie.baseX = savedBaseX + shakeX; zombie.baseY = savedBaseY + shakeY; // Draw anvil at rest (with shake) ctx.save(); ctx.translate(zombie.baseX, zombie.baseY + 100); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(-180, 0); ctx.lineTo(180, 0); ctx.lineTo(150, 90); ctx.lineTo(120, 90); ctx.lineTo(120, 180); ctx.lineTo(-120, 180); ctx.lineTo(-120, 90); ctx.lineTo(-150, 90); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 9; ctx.stroke(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(150, 30); ctx.lineTo(270, 15); ctx.lineTo(150, 60); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); // Screen flash at start if (t < 0.05) { ctx.fillStyle = `rgba(255, 255, 220, ${0.3 * (1 - t * 20)})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Reset position after shake zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Keep anvil visible await animate(1500 / speed, () => { ctx.save(); ctx.translate(zombie.baseX, zombie.baseY + 100); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(-180, 0); ctx.lineTo(180, 0); ctx.lineTo(150, 90); ctx.lineTo(120, 90); ctx.lineTo(120, 180); ctx.lineTo(-120, 180); ctx.lineTo(-120, 90); ctx.lineTo(-150, 90); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 9; ctx.stroke(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(150, 30); ctx.lineTo(270, 15); ctx.lineTo(150, 60); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); }); // Fade anvil out gradually (shadow fades in sync) await animate(800 / speed, (t, dt) => { // Fade shadow in sync with anvil anvilShadow.opacity = (1 - t) * 0.7; // matches peak opacity from impact phase ctx.save(); ctx.globalAlpha = 1 - t; ctx.translate(zombie.baseX, zombie.baseY + 100); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(-180, 0); ctx.lineTo(180, 0); ctx.lineTo(150, 90); ctx.lineTo(120, 90); ctx.lineTo(120, 180); ctx.lineTo(-120, 180); ctx.lineTo(-120, 90); ctx.lineTo(-150, 90); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 9; ctx.stroke(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.moveTo(150, 30); ctx.lineTo(270, 15); ctx.lineTo(150, 60); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); }); anvilShadow.active = false; }, // 9. LASER GRID - Grid of lasers zoom toward zombie and pass through laser: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('laser_sound'); zombie.isRagdolling = true; const centerX = zombie.baseX; const centerY = zombie.baseY; // Grid parameters const numHLines = 8; // horizontal laser lines (visible beams align with cuts) const numVLines = 8; // vertical laser lines (visible beams align with cuts) let hitZombie = false; // Pre-create stamp canvas and pieces array (populated at moment of impact) const stampCanvas = document.createElement('canvas'); stampCanvas.width = CANVAS_WIDTH; stampCanvas.height = CANVAS_HEIGHT; const stampCtx = stampCanvas.getContext('2d'); const cellW = Math.floor(CANVAS_WIDTH / numVLines); const cellH = Math.floor(CANVAS_HEIGHT / numHLines); const gap = 3; let laserPieces = []; // Helper: draw all laser pieces from the stamp canvas function drawLaserPieces(pieces) { for (let i = 0; i < pieces.length; i++) { const p = pieces[i]; if (p.y > CANVAS_HEIGHT + 100) continue; ctx.save(); const cx = p.x + p.w / 2; const cy = p.y + p.h / 2; ctx.translate(cx, cy); if (p.rotation !== 0) { ctx.rotate(p.rotation * Math.PI / 180); } ctx.drawImage(stampCanvas, p.srcX + gap / 2, p.srcY + gap / 2, p.w, p.h, -p.w / 2, -p.h / 2, p.w, p.h); ctx.restore(); } } // Phase 1: Grid zooms toward zombie, captures stamp at impact, shows pieces immediately await animate(2000 / speed, (t, dt) => { let depth; let alpha = 1; let passedThrough = false; if (t < 0.325) { const zoomT = t / 0.325; depth = zoomT * zoomT * 0.9; } else if (t < 0.36) { const impactT = (t - 0.325) / 0.035; depth = 0.9 + impactT * 0.05; passedThrough = true; // Capture stamp and create pieces at the exact moment of impact if (!hitZombie) { hitZombie = true; playSound('laser_sound', 0.6); // Capture zombie image stamp NOW stampCtx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); zombie.draw(stampCtx); // Hide the real zombie immediately zombie.globalAlpha = 0; zombie.noBlood = true; // Create pieces from stamp for (let row = 0; row < numHLines; row++) { for (let col = 0; col < numVLines; col++) { const cellX = col * cellW; const cellY = row * cellH; const checkData = stampCtx.getImageData(cellX, cellY, cellW, cellH); let hasContent = false; for (let i = 3; i < checkData.data.length; i += 16) { if (checkData.data[i] > 10) { hasContent = true; break; } } if (hasContent) { laserPieces.push({ srcX: cellX, srcY: cellY, x: cellX + gap / 2, y: cellY + gap / 2, w: cellW - gap, h: cellH - gap, vx: 0, vy: 0, rotation: 0, angularVel: 0, grounded: false, groundY: CANVAS_HEIGHT - 300 + Math.random() * 5, fallen: false }); } } } // Sparks burst at zombie for (let i = 0; i < 20; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 150; spawnParticles(centerX + (Math.random() - 0.5) * 60, centerY + (Math.random() - 0.5) * 150, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ff0000', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, size: 3 + Math.random() * 6, life: 0.4 + Math.random() * 0.3, gravity: 0, type: 'circle' }); } } } else if (t < 0.5) { const passT = (t - 0.36) / 0.14; depth = 0.95 + passT * 0.05; passedThrough = true; alpha = 1 - passT * 0.3; } else { const fadeT = (t - 0.5) / 0.15; depth = 1.0; alpha = 0.7 * (1 - fadeT); passedThrough = true; } // If laser hasn't hit yet, draw pieces before grid (grid on top approaching zombie) // After hit, draw grid first then pieces on top (grid appears "behind" / passed through) if (!hitZombie && laserPieces.length > 0) { drawLaserPieces(laserPieces); } if (alpha <= 0) { // Grid fully faded - just draw pieces if (hitZombie && laserPieces.length > 0) { drawLaserPieces(laserPieces); } return; } ctx.save(); ctx.globalAlpha = alpha; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 12 + (1 - Math.min(depth, 1)) * 18; ctx.strokeStyle = passedThrough ? '#ff4444' : '#ff0000'; ctx.lineWidth = 2 + (1 - Math.min(depth, 1)) * 4; for (let i = 0; i <= numHLines; i++) { const fraction = i / numHLines; const baseY = fraction * CANVAS_HEIGHT; const lineY = baseY + (centerY - baseY) * depth * 0.5; ctx.beginPath(); ctx.moveTo(0, lineY); ctx.lineTo(CANVAS_WIDTH, lineY); ctx.stroke(); } for (let i = 0; i <= numVLines; i++) { const fraction = i / numVLines; const baseX = fraction * CANVAS_WIDTH; const lineX = baseX + (centerX - baseX) * depth * 0.5; ctx.beginPath(); ctx.moveTo(lineX, 0); ctx.lineTo(lineX, CANVAS_HEIGHT); ctx.stroke(); } ctx.shadowBlur = 0; ctx.strokeStyle = `rgba(255, 255, 255, ${(0.4 + (1 - Math.min(depth, 1)) * 0.4) * alpha})`; ctx.lineWidth = 1 + (1 - Math.min(depth, 1)) * 2; for (let i = 0; i <= numHLines; i++) { const fraction = i / numHLines; const baseY = fraction * CANVAS_HEIGHT; const lineY = baseY + (centerY - baseY) * depth * 0.5; ctx.beginPath(); ctx.moveTo(0, lineY); ctx.lineTo(CANVAS_WIDTH, lineY); ctx.stroke(); } for (let i = 0; i <= numVLines; i++) { const fraction = i / numVLines; const baseX = fraction * CANVAS_WIDTH; const lineX = baseX + (centerX - baseX) * depth * 0.5; ctx.beginPath(); ctx.moveTo(lineX, 0); ctx.lineTo(lineX, CANVAS_HEIGHT); ctx.stroke(); } ctx.restore(); // Screen flash at impact moment if (passedThrough && t < 0.4) { const flashAlpha = Math.max(0, 1 - ((t - 0.325) / 0.07)) * 0.4; ctx.fillStyle = `rgba(255, 200, 200, ${flashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Sparks as grid passes through zombie if (passedThrough && t < 0.45 && Math.random() < 0.7) { spawnParticles(centerX + (Math.random() - 0.5) * 80, centerY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.4 ? '#ff6600' : '#ff0000', vx: (Math.random() - 0.5) * 120, vy: (Math.random() - 0.5) * 120, size: 2 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: 0, type: 'circle' }); } // Draw pieces ON TOP of the grid after laser has passed through if (hitZombie && laserPieces.length > 0) { drawLaserPieces(laserPieces); } // Zombie reacts as grid approaches if (!hitZombie && t > 0.25 && t < 0.36) { zombie.applyImpulse((Math.random() - 0.5) * 30, -10); } }); // Phase 2: Brief hold then pieces fall much sooner (hold reduced to 400ms) await animate(400 / speed, (t, dt) => { // Keep pieces visible during brief hold drawLaserPieces(laserPieces); }); // Now pieces fall with gravity await animate(800 / speed, (t, dt) => { // Faster fall: apply stronger gravity and earlier initial impulse // using passed dt const gravity = 1500; // fast fall laserPieces.forEach((p, idx) => { if (!p.fallen) { // Give a small outward impulse at the moment they start falling to avoid perfectly static hover if (!p._initialized) { p.vx += (Math.random() - 0.5) * 80; p.vy += -40 + Math.random() * -30; // gentle initial push p.angularVel = (Math.random() - 0.5) * 360; p._initialized = true; } // Apply gravity p.vy += gravity * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.rotation += p.angularVel * dt; // Ground collision if (p.y + p.h > p.groundY) { p.y = p.groundY - p.h; p.vy = -p.vy * 0.35; // bouncier on impact p.vx *= 0.65; p.angularVel *= 0.5; if (Math.abs(p.vy) < 30) { p.fallen = true; p.vy = 0; p.vx = 0; p.angularVel = 0; p.grounded = true; } } // Wall bounds if (p.x < 0) { p.x = 0; p.vx *= -0.5; } if (p.x + p.w > CANVAS_WIDTH) { p.x = CANVAS_WIDTH - p.w; p.vx *= -0.5; } } else { // Already fallen - slight settling p.vx *= 0.98; p.angularVel *= 0.98; } }); drawLaserPieces(laserPieces); }); // Count the kill incrementSpecimens(); // Open the trap door and let pieces fall into the pit trapDoor.phase = 'opening'; trapDoor.isAnimating = true; playSound('crush_sound', 0.4); // Wait for trap door to open and pieces to fall through await animate(900 / speed, (t, dt) => { const trapOpen = trapDoor.leftAngle > 30; laserPieces.forEach(p => { if (trapOpen && p.grounded) { // Trap door opened - unground all pieces so they tumble into the pit p.grounded = false; p.fallen = false; p.vy = 50 + Math.random() * 80; p.vx = (Math.random() - 0.5) * 60; p.angularVel = (Math.random() - 0.5) * 300; } if (!p.grounded) { p.vy += 1800 * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.rotation += p.angularVel * dt; p.angularVel += (Math.random() - 0.5) * 10; } }); // Draw visible pieces const visiblePieces = laserPieces.filter(p => p.y < CANVAS_HEIGHT + 50); drawLaserPieces(visiblePieces); }); // Close the trap door trapDoor.phase = 'closing'; playSound('crush_sound', 0.3); // Wait for close await new Promise(resolve => { const checkClosed = () => { if (trapDoor.phase === 'closed') resolve(); else requestAnimationFrame(checkClosed); }; checkClosed(); }); // Small delay then spawn new zombie await new Promise(resolve => setTimeout(resolve, 133)); // Reset zombie state and spawn new one zombie = null; particles = []; slicedPieces = []; isAnimating = false; highlightMethod(null); bgDarkenTarget = 0; spawnZombieWithDoorAnimation(); // Cancel the default auto-reset since we handled it cancelAutoReset(); }, // ========================================================================= // 10. WOODCHIPPER - Claw grabs zombie and drops into chipper // ========================================================================= // SEQUENCE OVERVIEW (9 phases): // Phase 1: Chipper rolls in from right (1200ms) // Phase 2: Claw descends from ceiling (1000ms) // Phase 3: Claw closes around zombie (400ms) // Phase 4: Claw lifts zombie upward (1200ms) // Phase 5: Claw moves horizontally over hopper (800ms) // Phase 6: Claw opens, zombie drops into hopper (600ms) // Phase 7: Zombie sits terrified in hopper (400ms) // Phase 8: Shredding - zombie sinks as chunks spray (2400ms) // Phase 9: Wind-down + chipper drives off (2000ms) // // KEY STATE FLAGS: // woodchipperRenderState.drawInFront: // false = chipper drawn BEHIND zombie (game loop draws it before zombie) // true = chipper drawn IN FRONT of zombie (game loop draws it after zombie) // zombie._hopperClipY: // When set, game loop clips zombie drawing to only show above this Y. // This makes the zombie appear to be INSIDE the hopper. // // COORDINATE REFERENCE: // chipperTargetX: chipper center X (zombie.baseX + 160) // chipperY: chipper center Y (zombie.baseY + 80) // hopperRimY: screen Y of the hopper opening rim (chipperY - 130) // hopperX: X position where zombie sits in hopper (chipperTargetX - 80) // ========================================================================= woodchipper: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // --- CONSTANTS: Positions calculated once from initial zombie position --- const chipperTargetX = savedBaseX + 160; // Chipper resting X (right of zombie) const chipperY = savedBaseY + 80; // Chipper resting Y (below zombie center) const hopperX = chipperTargetX - 80; // X where zombie sits in hopper const hopperRimY = chipperY - 130; // Screen Y of the hopper opening rim const clawTargetX = savedBaseX; // Claw grabs at zombie's X const clawTargetY = savedBaseY - 60; // Claw grabs upper torso area const clawStartY = -200; // Claw starts above screen const liftTopY = -50; // How high claw lifts (near ceiling) const chuteX = chipperTargetX + 130; // Chute spray exit X const chuteY = chipperY - 120; // Chute spray exit Y // --- Helper: Set chipper render state to idle at target position --- function setChipperIdle(vibX, vibY) { woodchipperRenderState.x = chipperTargetX; woodchipperRenderState.y = chipperY; woodchipperRenderState.wheelsSpinning = false; woodchipperRenderState.vibX = vibX || 0; woodchipperRenderState.vibY = vibY || 0; } // ===================================================================== // PHASE 1: Chipper rolls in from right side (1200ms) // ===================================================================== playSound('chainsaw_sound', 0.6); woodchipperRenderState.active = true; woodchipperRenderState.drawInFront = false; // Start behind zombie woodchipperRenderState.vibX = 0; woodchipperRenderState.vibY = 0; await animate(1200 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); woodchipperRenderState.x = CANVAS_WIDTH + 250 - (CANVAS_WIDTH + 250 - chipperTargetX) * easeOut; woodchipperRenderState.y = chipperY; woodchipperRenderState.wheelsSpinning = t < 0.9; if (t < 0.85 && Math.random() < 0.4) { spawnParticles(woodchipperRenderState.x + 40, chipperY + 100, 1, { color: '#8B7355', vx: 20 + Math.random() * 40, vy: -10 - Math.random() * 20, size: 4 + Math.random() * 6, life: 0.4 + Math.random() * 0.3, gravity: 100, type: 'circle' }); } if (t > 0.5) { zombie.applyImpulse((Math.random() - 0.5) * 10, -5); if (zombie.parts.head.attached) zombie.parts.head.rotation = 5 + Math.sin(t * 8) * 3; } }); // Brief idle pause (400ms) await animate(400 / speed, (t, dt) => { setChipperIdle(Math.sin(t * 80) * 1.5, 0); }); woodchipperRenderState.vibX = 0; // ===================================================================== // PHASE 2: Mechanical claw descends from ceiling (1000ms) // ===================================================================== playSound('crusher_sound', 0.5); await animate(1000 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2); const clawY = clawStartY + (clawTargetY - clawStartY) * easeOut; setChipperIdle(); drawMechanicalClaw(ctx, clawTargetX, clawY, 45, t); if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 6) * 8; if (t > 0.4) { const panicT = (t - 0.4) / 0.6; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - panicT * 50; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + panicT * 50; } }); // ===================================================================== // PHASE 3: Claw closes around zombie (400ms) // ===================================================================== playSound('beartrap_sound', 0.4); zombie.isRagdolling = true; await animate(400 / speed, (t, dt) => { setChipperIdle(); drawMechanicalClaw(ctx, clawTargetX, clawTargetY, 45 * (1 - t * t), 1); if (t > 0.7) zombie.applyImpulse((Math.random() - 0.5) * 40, -20); }); // Sparks burst from claw grab for (let i = 0; i < 8; i++) { spawnParticles(clawTargetX + (Math.random() - 0.5) * 40, clawTargetY + 20, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 100, vy: -30 - Math.random() * 60, size: 2 + Math.random() * 4, life: 0.2 + Math.random() * 0.2, gravity: 200, type: 'circle' }); } // ===================================================================== // PHASE 4: Claw lifts zombie upward (1200ms) // Zombie shrinks from scale 1.0 → 0.55 as it rises (depth illusion) // ===================================================================== playSound('crusher_sound', 0.4); await animate(1200 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const currentClawY = clawTargetY + (liftTopY - clawTargetY) * easeInOut; const currentScale = 1 - t * 0.45; // 1.0 → 0.55 zombie.globalScale = currentScale; zombie.baseY = currentClawY + 60; setChipperIdle(); // Draw scaled claw ctx.save(); ctx.translate(clawTargetX, currentClawY); ctx.scale(currentScale, currentScale); ctx.translate(-clawTargetX, -currentClawY); drawMechanicalClaw(ctx, clawTargetX, currentClawY, 0, 1); ctx.restore(); // Switch chipper to draw in front once zombie is high up if (t > 0.8) woodchipperRenderState.drawInFront = true; // Zombie struggles (limbs flail outward) if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 15 + Math.abs(Math.sin(t * 25)) * 25; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = -15 - Math.abs(Math.sin(t * 25 + Math.PI)) * 25; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = Math.sin(t * 30) * 25; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = -Math.abs(Math.sin(t * 30 + 1)) * 25; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = 90 + Math.sin(t * 20) * 40; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = -90 - Math.sin(t * 20 + 1.5) * 40; if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 18) * 20; }); // ===================================================================== // PHASE 5: Claw moves horizontally over hopper (800ms) // Zombie continues shrinking from 0.55 → 0.4 // ===================================================================== await animate(800 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const currentClawX = clawTargetX + (hopperX - clawTargetX) * easeInOut; const currentScale = 0.55 - t * 0.15; // 0.55 → 0.4 zombie.globalScale = currentScale; zombie.baseX = currentClawX; zombie.baseY = liftTopY + 60; setChipperIdle(); ctx.save(); ctx.translate(currentClawX, liftTopY); ctx.scale(currentScale, currentScale); ctx.translate(-currentClawX, -liftTopY); drawMechanicalClaw(ctx, currentClawX, liftTopY, 0, 1); ctx.restore(); if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = Math.sin(t * 22) * 25; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = Math.sin(t * 22 + Math.PI) * 25; if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 15) * 15; }); // ===================================================================== // PHASE 6: Claw opens, zombie drops into hopper (600ms) // Zombie falls from liftTopY+60 down to dropEndY (inside hopper). // _hopperClipY is set so game loop clips zombie below the rim. // Chipper is drawn BEHIND zombie so clip reveals chipper body below rim. // ===================================================================== playSound('crush_sound', 0.5); const dropStartY = liftTopY + 60; // dropEndY positions zombie's chest at the rim so head+shoulders are above const dropEndY = hopperRimY + 20; // Switch chipper to draw BEHIND zombie for hopper clipping to work woodchipperRenderState.drawInFront = false; await animate(600 / speed, (t, dt) => { // Zombie falls with quadratic acceleration const zombieY = dropStartY + (dropEndY - dropStartY) * (t * t); zombie.baseX = hopperX; zombie.baseY = zombieY; // Activate clipping once zombie is near hopper area if (zombieY > hopperRimY - 80) zombie._hopperClipY = hopperRimY; zombie.applyImpulse((Math.random() - 0.5) * 30, 0); setChipperIdle(); drawMechanicalClaw(ctx, hopperX, liftTopY, t * 50, 1); // Claw opens }); // ===================================================================== // PHASE 7: Zombie sits terrified in hopper (400ms) // Zombie is settled with only head+shoulders visible above rim. // ===================================================================== zombie.isRagdolling = false; zombie.customPose = true; zombie._hopperClipY = hopperRimY; zombie.parts.torso.rotation = 0; if (zombie.parts.head.attached) zombie.parts.head.rotation = 0; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle; await animate(400 / speed, (t, dt) => { setChipperIdle(); if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 15) * 10; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = -50 + Math.sin(t * 20) * 20; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = 50 - Math.sin(t * 20 + 1) * 20; }); // ===================================================================== // PHASE 8: SHREDDING (2400ms) // Zombie sinks deeper into hopper while chunks spray from chute. // Clip stays at hopperRimY so less zombie is visible as it descends. // Alpha fades in last 20% as zombie is fully consumed. // ===================================================================== playSound('chainsaw_sound', 1.0); const sinkStartY = zombie.baseY; const sinkDistance = 200; // Total sink distance (fully into hopper) await animate(2400 / speed, (t, dt) => { // Chipper vibration (working hard) const vibX = Math.sin(t * 80) * 3; const vibY = Math.cos(t * 60) * 2; setChipperIdle(vibX, vibY); // Zombie sinks linearly; clip stays fixed → less visible over time zombie.baseY = sinkStartY + t * sinkDistance; zombie.baseX = hopperX + Math.sin(t * 60) * 2 * (1 - t * 0.5); // Struggle animation (decreasing intensity) if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 25) * (15 - t * 10); if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = -60 + Math.abs(Math.sin(t * 20)) * 40 * (1 - t); if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = 60 - Math.abs(Math.sin(t * 20 + 1)) * 40 * (1 - t); // Fade zombie in last 20% (fully consumed) if (t > 0.8) zombie.globalAlpha = 1 - (t - 0.8) / 0.2; // Claw retracts upward (first 40% of phase) if (t < 0.4) drawMechanicalClaw(ctx, hopperX, liftTopY - t * 150, 50, 1 - t * 2.5); // --- Chute spray (peaks at middle of phase) --- const sprayIntensity = Math.sin(t * Math.PI); // Green goo chunks if (Math.random() < 0.7 * sprayIntensity + 0.2) { for (let i = 0; i < 3; i++) { const angle = -Math.PI * 0.3 + Math.random() * Math.PI * 0.5; const spd = 150 + Math.random() * 300; spawnParticles(chuteX + vibX, chuteY + vibY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#5cb866', vx: Math.cos(angle) * spd + 80, vy: Math.sin(angle) * spd - 120, size: 8 + Math.random() * 15, life: 1.5 + Math.random(), gravity: 400, type: 'chunk' }); } } // Bone fragments if (Math.random() < 0.3 * sprayIntensity) { const angle = -Math.PI * 0.2 + Math.random() * Math.PI * 0.4; const spd = 120 + Math.random() * 250; spawnParticles(chuteX + vibX, chuteY + vibY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd + 60, vy: Math.sin(angle) * spd - 100, size: 4 + Math.random() * 8, life: 1.8 + Math.random(), gravity: 500, type: 'square' }); } // Clothing scraps if (Math.random() < 0.2 * sprayIntensity) { const angle = -Math.PI * 0.25 + Math.random() * Math.PI * 0.5; const spd = 100 + Math.random() * 200; spawnParticles(chuteX + vibX, chuteY + vibY, 1, { color: Math.random() > 0.5 ? '#2a1f5e' : '#3a2a6e', vx: Math.cos(angle) * spd + 70, vy: Math.sin(angle) * spd - 80, size: 6 + Math.random() * 10, life: 1.2 + Math.random() * 0.6, gravity: 350, type: 'square' }); } // Blood mist if (Math.random() < 0.5 * sprayIntensity) { spawnParticles(chuteX + vibX + (Math.random() - 0.5) * 30, chuteY + vibY, 1, { color: '#22ee44', vx: 50 + Math.random() * 100, vy: -60 - Math.random() * 80, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: 200, type: 'circle' }); } }); // Final burst of chunks after shredding completes for (let i = 0; i < 20; i++) { const angle = -Math.PI * 0.3 + Math.random() * Math.PI * 0.6; const spd = 100 + Math.random() * 250; spawnParticles(chuteX, chuteY, 1, { color: i % 3 === 0 ? '#e8d8b0' : (Math.random() > 0.4 ? '#3dcc10' : '#5cb866'), vx: Math.cos(angle) * spd + 50, vy: Math.sin(angle) * spd - 80, size: 6 + Math.random() * 12, life: 1.5 + Math.random(), gravity: 450, type: i % 2 === 0 ? 'chunk' : 'square' }); } // ===================================================================== // CLEANUP: Zombie fully consumed, reset clipping state // ===================================================================== zombie.globalAlpha = 0; zombie._hopperClipY = undefined; woodchipperRenderState.drawInFront = true; // Chipper in front for remaining phases // ===================================================================== // PHASE 9A: Chipper winds down (800ms) // ===================================================================== await animate(800 / speed, (t, dt) => { const vibDecay = 1 - t; setChipperIdle(Math.sin(t * 60) * 2 * vibDecay, 0); if (Math.random() < 0.1 * vibDecay) { spawnParticles(chuteX, chuteY + 10, 1, { color: '#3dcc10', vx: 10 + Math.random() * 20, vy: 20 + Math.random() * 30, size: 4 + Math.random() * 5, life: 0.5, gravity: 300, type: 'circle' }); } }); // ===================================================================== // PHASE 9B: Chipper drives off to the right (1200ms) // ===================================================================== playSound('chainsaw_sound', 0.4); await animate(1200 / speed, (t, dt) => { const easeIn = t * t; woodchipperRenderState.x = chipperTargetX + easeIn * (CANVAS_WIDTH + 300 - chipperTargetX); woodchipperRenderState.y = chipperY; woodchipperRenderState.wheelsSpinning = t < 0.9; woodchipperRenderState.vibX = 0; woodchipperRenderState.vibY = 0; if (t < 0.85 && Math.random() < 0.4) { spawnParticles(woodchipperRenderState.x - 60, chipperY + 100, 1, { color: '#8B7355', vx: -20 - Math.random() * 40, vy: -10 - Math.random() * 20, size: 4 + Math.random() * 6, life: 0.4 + Math.random() * 0.3, gravity: 100, type: 'circle' }); } }); // Deactivate chipper render state woodchipperRenderState.active = false; }, // 11. GUILLOTINE - Interactive lever-activated decapitation guillotine: async function() { const speed = window.gameConfig.settings.animationSpeed; // Position the lever slightly more right and a bit lower on the floor const leverX = 130; // moved 20px to the right const leverY = zombie.baseY + 260; // moved 20px down // Target positions for assembly const frameX = zombie.baseX; const frameY = zombie.baseY - 400; const bladeTopY = zombie.baseY - 400 + 40; const bladeRestY = zombie.baseY - 140; // Track assembly progress for cumulative drawing let assemblyPhase = 0; // 0=nothing, 1=leftPost, 2=rightPost, 3=crossbar, 4=tracks, 5=blade // Helper: Draw all assembled guillotine parts so far function drawAssembledGuillotine() { ctx.save(); ctx.translate(frameX, frameY); ctx.scale(2, 2); if (assemblyPhase >= 1) { ctx.fillStyle = '#7a5030'; ctx.fillRect(-60, 0, 15, 300); ctx.strokeStyle = '#5a3820'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-55, 20); ctx.lineTo(-55, 290); ctx.moveTo(-50, 30); ctx.lineTo(-50, 280); ctx.stroke(); } if (assemblyPhase >= 2) { ctx.fillStyle = '#7a5030'; ctx.fillRect(45, 0, 15, 300); ctx.strokeStyle = '#5a3820'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(50, 290); ctx.moveTo(55, 30); ctx.lineTo(55, 280); ctx.stroke(); } if (assemblyPhase >= 3) { ctx.fillStyle = '#7a5030'; ctx.fillRect(-60, 0, 120, 20); } if (assemblyPhase >= 4) { ctx.fillStyle = '#444'; ctx.fillRect(-50, 10, 5, 150); ctx.fillRect(45, 10, 5, 150); ctx.fillStyle = '#666'; ctx.fillRect(-49, 10, 2, 150); ctx.fillRect(46, 10, 2, 150); } if (assemblyPhase >= 5) { // Blade sitting at top of tracks ctx.save(); ctx.translate(0, 20); // blade top position in local coords ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(-40, 0); ctx.lineTo(40, 0); ctx.lineTo(40, 20); ctx.lineTo(0, 50); ctx.lineTo(-40, 20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); ctx.strokeStyle = '#eee'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-35, 18); ctx.lineTo(0, 46); ctx.lineTo(35, 18); ctx.stroke(); ctx.restore(); } ctx.restore(); } // Helper: Draw a single guillotine part during flight function drawFlyingPost(currentX, currentY, rot) { ctx.save(); ctx.translate(currentX + 15, currentY + 300); ctx.rotate(rot * Math.PI / 180); ctx.translate(-15, -300); ctx.fillStyle = '#7a5030'; ctx.fillRect(0, 0, 30, 600); ctx.strokeStyle = '#5a3820'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(10, 40); ctx.lineTo(10, 580); ctx.moveTo(20, 60); ctx.lineTo(20, 560); ctx.stroke(); ctx.restore(); } // === ASSEMBLY SEQUENCE === // Part 1: Left post flies in from the left (220ms) playSound('crush_sound', 0.35); await animate(220 / speed, (t, dt) => { drawAssembledGuillotine(); const ease = 1 - Math.pow(1 - t, 3); const startX = -200; const endX = frameX - 120; const currentX = startX + (endX - startX) * ease; const rot = (1 - ease) * -20; drawFlyingPost(currentX, frameY, rot); }); assemblyPhase = 1; // Impact dust for (let i = 0; i < 5; i++) { spawnParticles(frameX - 105, frameY + 600, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 60, vy: -30 - Math.random() * 50, size: 4 + Math.random() * 5, life: 0.35, gravity: 200, type: 'circle' }); } // Small pause (60ms) await animate(60 / speed, (t, dt) => { drawAssembledGuillotine(); }); // Part 2: Right post flies in from the right (220ms) playSound('crush_sound', 0.35); await animate(220 / speed, (t, dt) => { drawAssembledGuillotine(); const ease = 1 - Math.pow(1 - t, 3); const startX = CANVAS_WIDTH + 150; const endX = frameX + 90; const currentX = startX + (endX - startX) * ease; const rot = (1 - ease) * 20; drawFlyingPost(currentX, frameY, rot); }); assemblyPhase = 2; for (let i = 0; i < 5; i++) { spawnParticles(frameX + 105, frameY + 600, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 60, vy: -30 - Math.random() * 50, size: 4 + Math.random() * 5, life: 0.35, gravity: 200, type: 'circle' }); } // Small pause (60ms) await animate(60 / speed, (t, dt) => { drawAssembledGuillotine(); }); // Part 3: Crossbar drops from above, connecting the posts (180ms) playSound('crush_sound', 0.4); await animate(180 / speed, (t, dt) => { drawAssembledGuillotine(); const ease = 1 - Math.pow(1 - t, 3); const startY = frameY - 350; const endY = frameY; const currentY = startY + (endY - startY) * ease; const rot = (1 - ease) * 8; ctx.save(); ctx.translate(frameX, currentY); ctx.rotate(rot * Math.PI / 180); ctx.scale(2, 2); ctx.fillStyle = '#7a5030'; ctx.fillRect(-60, 0, 120, 20); ctx.restore(); }); assemblyPhase = 3; // Connection sparks for (let i = 0; i < 8; i++) { const side = Math.random() > 0.5 ? -1 : 1; spawnParticles(frameX + side * 110, frameY + 20, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 80, vy: -30 - Math.random() * 50, size: 2 + Math.random() * 4, life: 0.25, gravity: 200, type: 'circle' }); } // Small pause (60ms) await animate(60 / speed, (t, dt) => { drawAssembledGuillotine(); }); // Part 4: Blade tracks slide down into the posts (180ms) playSound('crusher_sound', 0.3); await animate(180 / speed, (t, dt) => { drawAssembledGuillotine(); const ease = 1 - Math.pow(1 - t, 3); const startY = frameY - 250; const endY = frameY; const currentY = startY + (endY - startY) * ease; ctx.save(); ctx.translate(frameX, currentY); ctx.scale(2, 2); ctx.fillStyle = '#444'; ctx.fillRect(-50, 10, 5, 150); ctx.fillRect(45, 10, 5, 150); ctx.fillStyle = '#666'; ctx.fillRect(-49, 10, 2, 150); ctx.fillRect(46, 10, 2, 150); ctx.restore(); }); assemblyPhase = 4; // Metal click sound effect particles for (let i = 0; i < 4; i++) { spawnParticles(frameX + (Math.random() > 0.5 ? -100 : 90), frameY + 50, 1, { color: '#aaa', vx: (Math.random() - 0.5) * 40, vy: -15 - Math.random() * 25, size: 2 + Math.random() * 3, life: 0.2, gravity: 200, type: 'circle' }); } // Small pause (60ms) await animate(60 / speed, (t, dt) => { drawAssembledGuillotine(); }); // Part 5: Blade drops into tracks from above (200ms) playSound('guillotine_sound', 0.25); await animate(200 / speed, (t, dt) => { drawAssembledGuillotine(); const ease = 1 - Math.pow(1 - t, 3); const startY = frameY - 300; const endY = bladeTopY; const currentY = startY + (endY - startY) * ease; ctx.save(); ctx.translate(frameX, currentY); ctx.scale(2, 2); ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(-40, 0); ctx.lineTo(40, 0); ctx.lineTo(40, 20); ctx.lineTo(0, 50); ctx.lineTo(-40, 20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); ctx.strokeStyle = '#eee'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-35, 18); ctx.lineTo(0, 46); ctx.lineTo(35, 18); ctx.stroke(); ctx.restore(); }); assemblyPhase = 5; // Satisfying metallic clang particles for (let i = 0; i < 6; i++) { spawnParticles(frameX + (Math.random() - 0.5) * 60, bladeTopY + 50, 1, { color: Math.random() > 0.5 ? '#ddd' : '#999', vx: (Math.random() - 0.5) * 70, vy: -20 - Math.random() * 40, size: 2 + Math.random() * 3, life: 0.25, gravity: 200, type: 'circle' }); } // Brief hold - structure complete (100ms) await animate(100 / speed, (t, dt) => { drawAssembledGuillotine(); }); // Part 6: Lever pops up from the floor with spring/bounce (350ms) playSound('beartrap_sound', 0.3); await animate(350 / speed, (t, dt) => { drawAssembledGuillotine(); // Elastic bounce easing: overshoot then settle let spring; if (t < 0.5) { spring = 4 * t * t; // accelerate up (0 to 1) } else if (t < 0.75) { spring = 1 + Math.sin((t - 0.5) / 0.25 * Math.PI) * 0.15; // overshoot to 1.15 } else { spring = 1 + (1 - (t - 0.75) / 0.25) * 0.05 * Math.sin((t - 0.75) * 40); // settle } spring = Math.max(0, Math.min(spring, 1.2)); // Lever rises from below ground level const leverRise = spring; // 0 = hidden below, 1 = fully up const leverDrawY = leverY + (1 - leverRise) * 140; // starts 140px below final pos ctx.save(); ctx.translate(leverX, leverDrawY); ctx.scale(1, Math.min(leverRise, 1)); // Base plate ctx.fillStyle = '#4a4a4a'; ctx.beginPath(); ctx.roundRect(-25, -8, 50, 16, 4); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Bolts ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(-14, 0, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(14, 0, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-14, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(14, 0, 2, 0, Math.PI * 2); ctx.fill(); // Lever arm (up at -60 degrees) ctx.save(); ctx.rotate(-60 * Math.PI / 180); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.roundRect(-6, -90, 12, 90, 3); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); ctx.strokeStyle = '#555'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-2, -20); ctx.lineTo(-2, -75); ctx.moveTo(2, -20); ctx.lineTo(2, -75); ctx.stroke(); // Red handle ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.arc(0, -95, 18, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#661111'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'; ctx.beginPath(); ctx.arc(-5, -100, 6, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // lever arm rotation // Pivot bolt ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); }); // Dust puff from lever popping up for (let i = 0; i < 6; i++) { spawnParticles(leverX + (Math.random() - 0.5) * 30, leverY + 5, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 70, vy: -25 - Math.random() * 45, size: 4 + Math.random() * 6, life: 0.4, gravity: 150, type: 'circle' }); } // === Assembly complete! Activate persistent scene state === guillotineSceneState.active = true; guillotineSceneState.frameX = frameX; guillotineSceneState.frameY = frameY; guillotineSceneState.leverX = leverX; guillotineSceneState.leverY = leverY; guillotineSceneState.leverPull = 0; guillotineSceneState.showBladeAtTop = true; guillotineSceneState.showBladeAtRest = false; guillotineSceneState.bladeTopY = bladeTopY; guillotineSceneState.bladeRestY = bladeRestY; guillotineBladeState.active = true; guillotineBladeState.x = frameX; guillotineBladeState.y = bladeTopY; // Enable reset button during interactive wait document.getElementById('reset-button').disabled = false; // Phase 2: Wait for player to tap/click the lever let leverPulled = false; const checkLeverClick = (e) => { if (leverPulled) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; let px, py; if (e.touches) { px = (e.touches[0].clientX - rect.left) * scaleX; py = (e.touches[0].clientY - rect.top) * scaleY; } else { px = (e.clientX - rect.left) * scaleX; py = (e.clientY - rect.top) * scaleY; } // Check if click is near the lever (generous hit area) const dx = px - leverX; const dy = py - (leverY - 40); // Center the hitbox on the lever arm const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 90) { leverPulled = true; e.preventDefault(); } }; canvas.addEventListener('mousedown', checkLeverClick); canvas.addEventListener('touchstart', checkLeverClick, { passive: false }); // Wait for lever pull or timeout (30 seconds) const waitStartTime = Date.now(); await new Promise((resolve) => { const checkComplete = () => { if (!guillotineSceneState.active) { // Reset was pressed during wait resolve(); return; } if (leverPulled) { resolve(); return; } if (Date.now() - waitStartTime > 30000) { leverPulled = true; resolve(); return; } requestAnimationFrame(checkComplete); }; checkComplete(); }); // Remove listeners canvas.removeEventListener('mousedown', checkLeverClick); canvas.removeEventListener('touchstart', checkLeverClick); // If reset was triggered during wait, bail out if (!guillotineSceneState.active) return; // Phase 3: Lever pull animation playSound('crush_sound', 0.4); await animate(300 / speed, (t, dt) => { guillotineSceneState.leverPull = t; }); // Phase 4: Blade drops! playSound('guillotine_sound'); guillotineSceneState.showBladeAtTop = false; // Stop drawing static blade at top await animate(250 / speed, (t, dt) => { const bladeY = guillotineSceneState.bladeTopY + t * (zombie.baseY - 140 - guillotineSceneState.bladeTopY); guillotineBladeState.y = bladeY; }); // Decapitate! guillotineBladeState.active = false; guillotineSceneState.showBladeAtRest = true; zombie.detachPart('head', (Math.random() - 0.5) * 100, -150); // Blood spray from the top of the neck stump on the torso // Neck joint is at local Y=-115, scaled to world: baseY + (-115) * scale const neckStumpX = zombie.baseX; const neckStumpY = zombie.baseY + (-115) * zombie.scale * zombie.globalScale; for (let i = 0; i < 25; i++) { spawnParticles(neckStumpX, neckStumpY, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 150, vy: -50 - Math.random() * 150, size: 5 + Math.random() * 8, life: 1.2 }); } // Phase 5: Hold with guillotine visible await animate(1500 / speed, (t, dt) => { // Scene is drawn by game loop }); // Phase 6: Fade out the guillotine scene await animate(700 / speed, (t, dt) => { guillotineSceneState.alpha = 1 - t; }); // Deactivate guillotine scene guillotineSceneState.active = false; guillotineSceneState.alpha = 1; }, // 12. PIRANHA - Fish frenzy eats the zombie to a skeleton piranha: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('piranha_sound'); zombie.isRagdolling = true; // Helper: draw a piranha fish at (fx, fy) with given direction and scale function drawPiranha(fx, fy, dir, scale) { ctx.save(); ctx.translate(fx, fy); ctx.scale(dir * scale, scale); // Fish body ctx.fillStyle = '#4a90a0'; ctx.beginPath(); ctx.ellipse(0, 0, 15, 8, 0, 0, Math.PI * 2); ctx.fill(); // Dorsal fin ctx.fillStyle = '#3a7888'; ctx.beginPath(); ctx.moveTo(-3, -7); ctx.lineTo(2, -14); ctx.lineTo(7, -7); ctx.closePath(); ctx.fill(); // Tail ctx.fillStyle = '#3a8090'; ctx.beginPath(); ctx.moveTo(-12, 0); ctx.lineTo(-22, -7); ctx.lineTo(-22, 7); ctx.closePath(); ctx.fill(); // Eye ctx.fillStyle = '#ff0000'; ctx.beginPath(); ctx.arc(8, -2, 3, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(8.5, -2, 1.5, 0, Math.PI * 2); ctx.fill(); // Teeth (jagged) ctx.fillStyle = '#fff'; for (let t = 0; t < 4; t++) { ctx.beginPath(); ctx.moveTo(10 + t * 2, 2); ctx.lineTo(11 + t * 2, 6); ctx.lineTo(12 + t * 2, 2); ctx.closePath(); ctx.fill(); } // Lower teeth for (let t = 0; t < 3; t++) { ctx.beginPath(); ctx.moveTo(11 + t * 2, -2); ctx.lineTo(12 + t * 2, -5); ctx.lineTo(13 + t * 2, -2); ctx.closePath(); ctx.fill(); } // Belly - lighter ctx.fillStyle = 'rgba(200, 220, 230, 0.4)'; ctx.beginPath(); ctx.ellipse(0, 3, 10, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Create persistent piranha swarm data const numFish = 28; const piranhas = []; for (let i = 0; i < numFish; i++) { // Fish start off-screen on alternating sides const fromLeft = i % 2 === 0; piranhas.push({ x: fromLeft ? -80 - Math.random() * 150 : CANVAS_WIDTH + 80 + Math.random() * 150, y: zombie.baseY - 160 + Math.random() * 500, targetX: zombie.baseX + (Math.random() - 0.5) * 220, targetY: zombie.baseY - 190 + Math.random() * 530, dir: fromLeft ? 1 : -1, phase: Math.random() * Math.PI * 2, speed: 0.05 + Math.random() * 0.05, size: 0.9 + Math.random() * 0.5, arrived: false, dartTimer: Math.random() * 0.5, darting: false }); } // Phase 1: Water fills the entire screen (1200ms) let waterLevel = CANVAS_HEIGHT; const waterTargetLevel = 0; // Fill entire screen await animate(1200 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2); waterLevel = CANVAS_HEIGHT - easeOut * CANVAS_HEIGHT; // Draw water covering the screen ctx.fillStyle = 'rgba(0, 80, 130, 0.55)'; ctx.fillRect(0, waterLevel, CANVAS_WIDTH, CANVAS_HEIGHT - waterLevel); // Water surface wobble ctx.fillStyle = 'rgba(80, 180, 220, 0.3)'; for (let x = 0; x < CANVAS_WIDTH; x += 25) { const waveY = waterLevel + Math.sin(Date.now() * 0.004 + x * 0.06) * 5; ctx.beginPath(); ctx.arc(x, waveY, 15, 0, Math.PI, true); ctx.fill(); } // Bubbles rising if (t > 0.3 && Math.random() < 0.5) { spawnParticles( Math.random() * CANVAS_WIDTH, CANVAS_HEIGHT - Math.random() * 200, 1, { color: 'rgba(180, 220, 255, 0.5)', vx: (Math.random() - 0.5) * 20, vy: -40 - Math.random() * 60, size: 3 + Math.random() * 6, life: 0.8 + Math.random() * 0.5, gravity: -30, type: 'circle', shrink: false } ); } // Zombie starts to panic as water rises to it if (waterLevel < zombie.baseY + 100) { zombie.applyImpulse((Math.random() - 0.5) * 30, -15); } }); // Phase 2: Fish attack and slowly strip zombie to skeleton (4500ms) // Use the per-part burn system repurposed for piranha stripping // burnLevel will serve as "eaten" level (0-100) await animate(4500 / speed, (t, dt) => { // Full-screen water ctx.fillStyle = 'rgba(0, 80, 130, 0.55)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Water surface at top ctx.fillStyle = 'rgba(80, 180, 220, 0.3)'; for (let x = 0; x < CANVAS_WIDTH; x += 30) { const waveY = Math.sin(Date.now() * 0.004 + x * 0.06) * 5; ctx.beginPath(); ctx.arc(x, waveY, 15, 0, Math.PI, true); ctx.fill(); } // Caustic light patterns on the background (underwater effect) ctx.save(); ctx.globalAlpha = 0.06; ctx.fillStyle = '#88ddff'; for (let i = 0; i < 6; i++) { const cx = (Date.now() * 0.02 + i * 120) % CANVAS_WIDTH; const cy = 200 + Math.sin(Date.now() * 0.003 + i) * 100; ctx.beginPath(); ctx.ellipse(cx, cy, 60 + Math.sin(Date.now() * 0.005 + i) * 20, 30, 0, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // Update and draw piranhas - vicious swarming with darting attacks piranhas.forEach((fish, i) => { // Retarget frequently - piranhas are aggressive and erratic if (fish.arrived && Math.random() < 0.06) { fish.targetX = zombie.baseX + (Math.random() - 0.5) * 220; fish.targetY = zombie.baseY - 190 + Math.random() * 530; } // Darting attack behavior - fish lunge toward zombie then pull back fish.dartTimer -= 0.016; if (fish.dartTimer <= 0 && fish.arrived && !fish.darting) { fish.darting = true; fish.dartTimer = 0.15 + Math.random() * 0.2; // Dart duration // Lunge directly at a random body part (spread across full body) fish.dartTargetX = zombie.baseX + (Math.random() - 0.5) * 200; fish.dartTargetY = zombie.baseY - 190 + Math.random() * 530; } else if (fish.darting && fish.dartTimer <= 0) { fish.darting = false; fish.dartTimer = 0.3 + Math.random() * 0.6; // Wait before next dart // Pull back outward after bite fish.targetX = zombie.baseX + (Math.random() - 0.5) * 260; fish.targetY = zombie.baseY - 190 + Math.random() * 530; // Spawn green flesh bits when fish bites! const biteX = fish.x + (fish.dir * 15); const biteY = fish.y; for (let b = 0; b < 3; b++) { spawnParticles(biteX, biteY, 1, { color: Math.random() > 0.4 ? '#3dcc10' : '#5cb85c', vx: (Math.random() - 0.5) * 80 + fish.dir * -30, vy: (Math.random() - 0.5) * 60 - 20, size: 3 + Math.random() * 6, life: 0.5 + Math.random() * 0.4, gravity: 40, type: 'chunk' }); } } // Move toward target - darting is much faster const currentTarget = fish.darting ? { x: fish.dartTargetX, y: fish.dartTargetY } : { x: fish.targetX, y: fish.targetY }; const moveSpeed = fish.darting ? 0.18 : (fish.arrived ? fish.speed : fish.speed * 4); fish.x += (currentTarget.x - fish.x) * moveSpeed; fish.y += (currentTarget.y - fish.y) * moveSpeed; // Mark as arrived once close to target if (!fish.arrived && Math.abs(fish.x - fish.targetX) < 50 && Math.abs(fish.y - fish.targetY) < 50) { fish.arrived = true; } // Oscillating movement (swimming) - faster, more agitated fish.x += Math.sin(Date.now() * 0.012 + fish.phase) * 4; fish.y += Math.cos(Date.now() * 0.009 + fish.phase * 1.3) * 3; // Face toward zombie fish.dir = fish.x < zombie.baseX ? 1 : -1; drawPiranha(fish.x, fish.y, fish.dir, fish.size); }); // Apply "eating" damage to all zombie parts - gradually revealing skeleton // Each part gets eaten from ~0 to 100 over the duration for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.visible && part.attached) { if (part.burnLevel === undefined) part.burnLevel = 0; // Different parts get eaten at different rates (extremities first) let eatRate = 0.35; // Base rate if (partName.includes('Forearm') || partName.includes('LowerLeg')) { eatRate = 0.5; // Extremities eaten faster } else if (partName === 'torso') { eatRate = 0.25; // Core eaten slower } else if (partName === 'head') { eatRate = 0.3; // Head at medium rate } // Only start eating after a small delay (let fish arrive) if (t > 0.05) { part.burnLevel = Math.min(100, part.burnLevel + eatRate); } } } // Zombie flails in the water zombie.isRagdolling = true; // Violent flailing - arms and legs kick if (Math.random() < 0.25) { zombie.applyImpulse( (Math.random() - 0.5) * 80, (Math.random() - 0.5) * 40 ); } // Arms flail outward (trying to swim/escape) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 100 + Math.sin(t * 25 + 0.5) * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -100 - Math.sin(t * 25 + 2) * 40; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 20 + Math.abs(Math.sin(t * 30)) * 40; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -20 - Math.abs(Math.sin(t * 30 + 1.5)) * 40; } // Legs kick outward if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 15 + Math.abs(Math.sin(t * 20)) * 25; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -15 - Math.abs(Math.sin(t * 20 + Math.PI)) * 25; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = -10 + Math.sin(t * 24) * 15; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = 10 - Math.sin(t * 24 + Math.PI) * 15; } // Head thrashes if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 18) * 20; } // Flailing intensity decreases as zombie gets eaten more const flaildecay = Math.max(0, 1 - t * 1.3); if (flaildecay < 0.3) { // Zombie goes limp as it's mostly skeleton for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.attached && partName !== 'torso') { part.angularVelocity *= 0.95; } } } // Green blood clouds in the water if (Math.random() < 0.4) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 40, vy: (Math.random() - 0.5) * 30, size: 6 + Math.random() * 10, life: 0.8 + Math.random() * 0.5, gravity: -10, // Float in water type: 'circle' } ); } // Flesh chunk particles (green bits flying off from piranha bites) if (Math.random() < 0.5 && t < 0.85) { // Spawn from near a random piranha that's close to the zombie const nearFish = piranhas.filter(f => f.arrived && Math.abs(f.x - zombie.baseX) < 80); if (nearFish.length > 0) { const srcFish = nearFish[Math.floor(Math.random() * nearFish.length)]; const chunkX = srcFish.x + srcFish.dir * 10; const chunkY = srcFish.y; for (let c = 0; c < 2; c++) { spawnParticles(chunkX, chunkY, 1, { color: Math.random() > 0.4 ? '#3dcc10' : '#5cb85c', vx: (Math.random() - 0.5) * 70 + srcFish.dir * -40, vy: (Math.random() - 0.5) * 50 - 15, size: 3 + Math.random() * 7, life: 0.6 + Math.random() * 0.4, gravity: 40, type: 'chunk' }); } } } // Bubbles from zombie struggling if (Math.random() < 0.5 * flaildecay) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY - 80 + (Math.random() - 0.5) * 40, 1, { color: 'rgba(180, 220, 255, 0.6)', vx: (Math.random() - 0.5) * 20, vy: -30 - Math.random() * 50, size: 3 + Math.random() * 6, life: 0.5 + Math.random() * 0.3, gravity: -60, type: 'circle', shrink: false } ); } }); // Ensure zombie is fully skeleton after feeding frenzy zombie.skeleton = true; zombie.electrocutedSkeleton = true; // White skeleton (not gray/charred) zombie.noBlood = true; for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part) part.burnLevel = 100; } // Phase 3: Fish scatter and water drains (1800ms) let drainLevel = 0; // 0 = full, CANVAS_HEIGHT = empty await animate(1800 / speed, (t, dt) => { const easeIn = t * t; drainLevel = easeIn * CANVAS_HEIGHT; const currentWaterTop = drainLevel; // Draw water (draining from top) if (currentWaterTop < CANVAS_HEIGHT) { ctx.fillStyle = 'rgba(0, 80, 130, 0.55)'; ctx.fillRect(0, currentWaterTop, CANVAS_WIDTH, CANVAS_HEIGHT - currentWaterTop); // Water surface line ctx.fillStyle = 'rgba(80, 180, 220, 0.3)'; for (let x = 0; x < CANVAS_WIDTH; x += 25) { const waveY = currentWaterTop + Math.sin(Date.now() * 0.005 + x * 0.06) * 4; ctx.beginPath(); ctx.arc(x, waveY, 12, 0, Math.PI, true); ctx.fill(); } } // Fish swim away/down as water drains piranhas.forEach((fish, i) => { // Fish follow the water down and scatter outward const scatterAngle = (i / numFish) * Math.PI * 2 + fish.phase; fish.targetX = CANVAS_WIDTH / 2 + Math.cos(scatterAngle) * (200 + t * 300); fish.targetY = currentWaterTop + 50 + (i % 5) * 40; fish.x += (fish.targetX - fish.x) * 0.04; fish.y += (fish.targetY - fish.y) * 0.06; fish.x += Math.sin(Date.now() * 0.008 + fish.phase) * 2; // Only draw fish if they're in the water if (fish.y > currentWaterTop - 10) { fish.dir = fish.x < CANVAS_WIDTH / 2 ? -1 : 1; // Swim outward drawPiranha(fish.x, fish.y, fish.dir, fish.size); } }); // Draining bubbles if (Math.random() < 0.4 * (1 - t)) { spawnParticles( Math.random() * CANVAS_WIDTH, currentWaterTop + Math.random() * 100, 1, { color: 'rgba(180, 220, 255, 0.4)', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 40, size: 3 + Math.random() * 5, life: 0.4 + Math.random() * 0.3, gravity: 50, type: 'circle', shrink: false } ); } // Wet dripping from zombie skeleton as water passes below it if (currentWaterTop > zombie.baseY - 100 && currentWaterTop < zombie.baseY + 200 && Math.random() < 0.3) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + (Math.random() - 0.5) * 100, 1, { color: 'rgba(100, 180, 220, 0.5)', vx: (Math.random() - 0.5) * 15, vy: 30 + Math.random() * 40, size: 2 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: 300, type: 'circle' } ); } }); // Phase 4: Skeleton collapses to the floor (800ms) // Brief moment of standing skeleton, then crumble await animate(400 / speed, (t, dt) => { // Skeleton stands momentarily, wobbles if (zombie.parts.torso.attached) { zombie.parts.torso.rotation = Math.sin(t * 15) * (3 + t * 10); } // Water drip particles from skeleton if (Math.random() < 0.2) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 50, zombie.baseY + 100 + Math.random() * 60, 1, { color: 'rgba(100, 180, 220, 0.4)', vx: (Math.random() - 0.5) * 10, vy: 20, size: 2 + Math.random() * 3, life: 0.3, gravity: 300, type: 'circle' } ); } }); // Skeleton collapses into a heap zombie.crumble(); // Bone clatter particles for (let i = 0; i < 10; i++) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + 50 + Math.random() * 80, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#a89880', vx: (Math.random() - 0.5) * 60, vy: -20 - Math.random() * 40, size: 3 + Math.random() * 5, life: 0.6 + Math.random() * 0.4, gravity: 400, type: 'square' } ); } await animate(1200 / speed, () => {}); }, // 13. VAPORIZE - Pink laser beams from corners, static covers zombie, fades away vaporize: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('vaporize_sound'); const targetX = zombie.baseX; const targetY = zombie.baseY; // Activate beam render state (drawn BEHIND zombie in game loop) vaporizeBeamState.active = true; vaporizeBeamState.targetX = targetX; vaporizeBeamState.targetY = targetY; vaporizeBeamState.beamProgress = 0; vaporizeBeamState.alpha = 0; vaporizeBeamState.flicker = 1; // Phase 1: Pink laser beams shoot from corners and converge on zombie (1000ms) await animate(1000 / speed, (t, dt) => { // Beams extend from corners toward zombie (rendered behind zombie via game loop) const beamProgress = Math.min(t * 1.5, 1); vaporizeBeamState.beamProgress = beamProgress; vaporizeBeamState.alpha = t; vaporizeBeamState.flicker = 1; // Zombie starts to notice as beams approach if (t > 0.4) { zombie.applyImpulse((Math.random() - 0.5) * 20, -10); } // Impact glow at zombie when beams arrive (drawn in animate callback, ON TOP of zombie) if (beamProgress >= 1) { const impactGlow = (t - 0.66) / 0.34; ctx.save(); ctx.translate(targetX, targetY); ctx.fillStyle = `rgba(255, 100, 200, ${impactGlow * 0.4})`; ctx.beginPath(); ctx.arc(0, 0, 60 + impactGlow * 30, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }); // Phase 2: Beams connected, zombie freezes, static builds up (1200ms) // Freeze zombie movement zombie.isRagdolling = false; zombie.ragdollEnabled = false; // Stop all part velocities for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.attached) { part.angularVelocity = 0; part.velocityX = 0; part.velocityY = 0; } } await animate(1200 / speed, (t, dt) => { // Update beam render state (beams fully connected, flickering) vaporizeBeamState.beamProgress = 1; vaporizeBeamState.alpha = 1; vaporizeBeamState.flicker = 0.7 + Math.sin(t * 60) * 0.15 + Math.sin(t * 90) * 0.1; // Static builds up on zombie body (0 to 1) zombie.vaporizeStatic = t; // Impact glow at zombie center (ON TOP of zombie via animate callback) ctx.save(); ctx.translate(targetX, targetY); ctx.fillStyle = `rgba(255, 100, 200, ${0.2 + t * 0.2})`; ctx.beginPath(); ctx.arc(0, 0, 40 + Math.sin(t * 30) * 10, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Pink/purple spark particles flying off zombie if (Math.random() < 0.4 + t * 0.4) { const angle = Math.random() * Math.PI * 2; const dist = 30 + Math.random() * 50; spawnParticles( targetX + Math.cos(angle) * dist, targetY + Math.sin(angle) * dist, 1, { color: Math.random() > 0.5 ? '#ff44aa' : '#cc22ff', vx: Math.cos(angle) * (40 + Math.random() * 60), vy: Math.sin(angle) * (40 + Math.random() * 60) - 20, size: 2 + Math.random() * 4, life: 0.3 + Math.random() * 0.3, gravity: -50, type: 'circle' } ); } }); // Phase 3: Beams stop (fade out quickly) - static remains at full (400ms) await animate(400 / speed, (t, dt) => { // Beams fade out via render state vaporizeBeamState.beamProgress = 1; vaporizeBeamState.alpha = 1 - t; vaporizeBeamState.flicker = 1; // Static stays at full zombie.vaporizeStatic = 1; // Occasional spark if (Math.random() < 0.3) { const angle = Math.random() * Math.PI * 2; spawnParticles( targetX + (Math.random() - 0.5) * 80, targetY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.5 ? '#ff44aa' : '#cc22ff', vx: Math.cos(angle) * 30, vy: Math.sin(angle) * 30 - 20, size: 2 + Math.random() * 3, life: 0.2 + Math.random() * 0.2, gravity: -30, type: 'circle' } ); } }); // Beams are fully off — deactivate render state vaporizeBeamState.active = false; // Phase 4: Static slowly fades away, zombie fades with it (2500ms) await animate(2500 / speed, (t, dt) => { // Static intensity decreases zombie.vaporizeStatic = 1 - t; // Zombie becomes more transparent as static fades zombie.globalAlpha = 1 - t; // Occasional fading sparks if (Math.random() < 0.2 * (1 - t)) { const angle = Math.random() * Math.PI * 2; spawnParticles( targetX + (Math.random() - 0.5) * 80, targetY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.5 ? '#ff44aa' : '#aa00ff', vx: Math.cos(angle) * 40, vy: Math.sin(angle) * 40 - 30, size: 2 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: -60, type: 'circle' } ); } }); // Zombie is gone zombie.globalAlpha = 0; zombie.vaporizeStatic = 0; await animate(500 / speed, () => {}); }, // 14. CRUSHER - Interactive hydraulic press with button crusher: async function() { const speed = window.gameConfig.settings.animationSpeed; const pressHoverY = zombie.baseY - 280; // Press hovers above zombie const pressTargetY = zombie.baseY - 50; // Where it crushes // Move the crusher button further left and much lower so it's thumb-reachable const buttonX = zombie.baseX - 260; // moved further left from zombie const buttonY = zombie.baseY + 320; // moved much further down from zombie // Helper: draw the hydraulic press at a given Y function drawPress(py) { ctx.save(); ctx.translate(zombie.baseX, py); // === MOUNTING BRACKET (ceiling attachment) === ctx.fillStyle = '#3a3a4a'; ctx.fillRect(-50, -320, 100, 30); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.strokeRect(-50, -320, 100, 30); // Mounting bolts ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(-35, -305, 6, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(35, -305, 6, 0, Math.PI * 2); ctx.fill(); // === MAIN HYDRAULIC CYLINDER (center piston housing) === // Outer cylinder casing const cylGrad = ctx.createLinearGradient(-28, 0, 28, 0); cylGrad.addColorStop(0, '#4a4a55'); cylGrad.addColorStop(0.2, '#6a6a78'); cylGrad.addColorStop(0.5, '#7a7a88'); cylGrad.addColorStop(0.8, '#6a6a78'); cylGrad.addColorStop(1, '#4a4a55'); ctx.fillStyle = cylGrad; ctx.fillRect(-28, -290, 56, 100); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.strokeRect(-28, -290, 56, 100); // Cylinder cap (top) ctx.fillStyle = '#555'; ctx.fillRect(-32, -292, 64, 10); // Cylinder bands ctx.fillStyle = '#888'; ctx.fillRect(-30, -260, 60, 6); ctx.fillRect(-30, -230, 60, 6); // === PISTON ROD (polished chrome extending from cylinder) === const pistonGrad = ctx.createLinearGradient(-14, 0, 14, 0); pistonGrad.addColorStop(0, '#999'); pistonGrad.addColorStop(0.3, '#ddd'); pistonGrad.addColorStop(0.5, '#f0f0f0'); pistonGrad.addColorStop(0.7, '#ddd'); pistonGrad.addColorStop(1, '#999'); ctx.fillStyle = pistonGrad; ctx.fillRect(-14, -190, 28, 180); // Piston rod shine line (polished chrome highlight) ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.fillRect(-4, -185, 4, 170); // === HYDRAULIC LINES (left and right) === // Left hydraulic arm ctx.fillStyle = '#555'; ctx.fillRect(-70, -280, 18, 80); // Left piston rod const leftPistonGrad = ctx.createLinearGradient(-70, 0, -52, 0); leftPistonGrad.addColorStop(0, '#888'); leftPistonGrad.addColorStop(0.5, '#ccc'); leftPistonGrad.addColorStop(1, '#888'); ctx.fillStyle = leftPistonGrad; ctx.fillRect(-66, -200, 10, 170); // Left hydraulic hose ctx.strokeStyle = '#333'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(-61, -280); ctx.quadraticCurveTo(-85, -240, -75, -200); ctx.stroke(); ctx.strokeStyle = '#444'; ctx.lineWidth = 3; ctx.stroke(); // Right hydraulic arm ctx.fillStyle = '#555'; ctx.fillRect(52, -280, 18, 80); // Right piston rod const rightPistonGrad = ctx.createLinearGradient(52, 0, 70, 0); rightPistonGrad.addColorStop(0, '#888'); rightPistonGrad.addColorStop(0.5, '#ccc'); rightPistonGrad.addColorStop(1, '#888'); ctx.fillStyle = rightPistonGrad; ctx.fillRect(56, -200, 10, 170); // Right hydraulic hose ctx.strokeStyle = '#333'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(61, -280); ctx.quadraticCurveTo(85, -240, 75, -200); ctx.stroke(); ctx.strokeStyle = '#444'; ctx.lineWidth = 3; ctx.stroke(); // === CONNECTION PLATE (where pistons meet the press head) === ctx.fillStyle = '#4a4a55'; ctx.fillRect(-75, -15, 150, 18); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.strokeRect(-75, -15, 150, 18); // Connection bolts ctx.fillStyle = '#777'; [-55, -25, 0, 25, 55].forEach(bx => { ctx.beginPath(); ctx.arc(bx, -6, 5, 0, Math.PI * 2); ctx.fill(); }); // === CRUSHING SURFACE (heavy industrial press plate) === // Main plate body - thick steel with gradient const plateGrad = ctx.createLinearGradient(0, 3, 0, 45); plateGrad.addColorStop(0, '#6a6a75'); plateGrad.addColorStop(0.3, '#55555f'); plateGrad.addColorStop(0.7, '#4a4a55'); plateGrad.addColorStop(1, '#3a3a45'); ctx.fillStyle = plateGrad; ctx.beginPath(); ctx.roundRect(-95, 3, 190, 42, 4); ctx.fill(); // Plate outline (heavy) ctx.strokeStyle = '#2a2a35'; ctx.lineWidth = 3; ctx.beginPath(); ctx.roundRect(-95, 3, 190, 42, 4); ctx.stroke(); // Machined grooves on crushing face (bottom surface detail) ctx.fillStyle = '#3a3a45'; for (let i = 0; i < 7; i++) { ctx.fillRect(-80 + i * 24, 38, 16, 7); } // Diamond plate texture on front face ctx.fillStyle = 'rgba(255, 255, 255, 0.06)'; for (let row = 0; row < 2; row++) { for (let col = 0; col < 9; col++) { const dx = -80 + col * 20 + (row % 2) * 10; const dy = 8 + row * 16; ctx.beginPath(); ctx.moveTo(dx, dy - 5); ctx.lineTo(dx + 5, dy); ctx.lineTo(dx, dy + 5); ctx.lineTo(dx - 5, dy); ctx.closePath(); ctx.fill(); } } // Side reinforcement ribs ctx.fillStyle = '#555'; ctx.fillRect(-95, 5, 8, 38); ctx.fillRect(87, 5, 8, 38); // Warning stripes along bottom edge ctx.fillStyle = '#cc9900'; for (let i = 0; i < 10; i++) { if (i % 2 === 0) { ctx.fillRect(-90 + i * 18, 39, 9, 6); } } // Red hazard markings on sides ctx.fillStyle = '#cc2222'; ctx.fillRect(-93, 10, 6, 28); ctx.fillRect(87, 10, 6, 28); // Steel shine highlight across top of plate ctx.fillStyle = 'rgba(255, 255, 255, 0.12)'; ctx.fillRect(-85, 5, 170, 4); ctx.restore(); } // Helper: draw the crusher button function drawCrusherButton(pressed, glowing) { ctx.save(); ctx.translate(buttonX, buttonY); // Base pedestal ctx.fillStyle = '#3a3a3a'; ctx.beginPath(); ctx.roundRect(-35, -10, 70, 55, 6); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); // Button face const btnY = pressed ? 8 : 0; if (glowing) { ctx.shadowColor = '#ff4444'; ctx.shadowBlur = 15 + Math.sin(Date.now() * 0.006) * 5; } ctx.fillStyle = pressed ? '#aa2222' : '#cc2222'; ctx.beginPath(); ctx.arc(0, btnY, 25, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#661111'; ctx.lineWidth = 3; ctx.stroke(); ctx.shadowBlur = 0; // Button highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.beginPath(); ctx.arc(-6, btnY - 6, 8, 0, Math.PI * 2); ctx.fill(); // Skull icon on button ctx.fillStyle = '#fff'; ctx.font = 'bold 18px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('☠', 0, btnY + 1); // Label below if (!pressed) { const flashAlpha = 0.7 + Math.sin(Date.now() * 0.005) * 0.3; ctx.fillStyle = `rgba(255, 200, 0, ${flashAlpha})`; ctx.font = 'bold 12px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('▼ CRUSH ▼', 0, 50); } ctx.restore(); } // Phase 1: Press slides down from above to hover position (600ms) playSound('crusher_sound', 0.4); await animate(600 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); const currentY = -300 + (pressHoverY + 300) * easeOut; drawPress(currentY); }); // Phase 2: Press hovers, button appears - hold button to move press down slowly let buttonHeld = false; let crushed = false; let pressY = pressHoverY; const pressSpeed = 80; // pixels per second - very slow descent // Enable reset button document.getElementById('reset-button').disabled = false; const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const isOnButton = (px, py) => { const dx = px - buttonX; const dy = py - buttonY; return Math.sqrt(dx * dx + dy * dy) < 50; }; const handleDown = (e) => { if (crushed) return; const pos = getPointerPos(e); if (isOnButton(pos.x, pos.y)) { buttonHeld = true; e.preventDefault(); playSound('button_click_sound', 0.5); } }; const handleUp = () => { buttonHeld = false; }; canvas.addEventListener('mousedown', handleDown); canvas.addEventListener('mouseup', handleUp); canvas.addEventListener('mouseleave', handleUp); canvas.addEventListener('touchstart', handleDown, { passive: false }); canvas.addEventListener('touchend', handleUp); canvas.addEventListener('touchcancel', handleUp); // Interactive loop: press moves down slowly while button is held const waitStart = Date.now(); let lastFrameTime = performance.now(); await new Promise((resolve) => { const update = (now) => { if (crushed) { resolve(); return; } if (Date.now() - waitStart > 60000) { resolve(); return; } // 60s timeout const dt = Math.min((now - lastFrameTime) / 1000, 0.05); lastFrameTime = now; // Move press down slowly while button is held if (buttonHeld) { pressY += pressSpeed * dt; // Play crusher sound periodically while moving if (Math.random() < 0.02) { playSound('crusher_sound', 0.2); } } // Contact point: press bottom touches zombie head (ignoring hair) const scale = zombie.scale * zombie.globalScale; const headTopY = zombie.baseY + (-150) * scale; // Head top without hair const feetY = zombie.baseY + 280 * scale; const pressBottomY = pressY + 50; // Bottom of crush plate (overlaps head slightly) const contactY = headTopY; // Squish phase: once press contacts head, zombie squishes if (pressBottomY >= contactY && !crushed) { // Calculate crush scale so the top of the zombie's head exactly touches the press const originalHeight = feetY - headTopY; const newHeight = Math.max(10, feetY - pressBottomY); const crushScale = Math.min(1.0, newHeight / originalHeight); // We burst when it squishes to 60% of its original height const targetCrushScale = 0.6; const squishProgress = Math.max(0, (1 - crushScale) / (1 - targetCrushScale)); // Squish zombie: wider horizontally, shorter vertically const widthMult = 1 + squishProgress * 0.3; // Up to 1.3x wider zombie.crushed = true; zombie.crushScale = crushScale; // Apply horizontal stretch to torso and all parts zombie.parts.torso.scaleX = widthMult; if (zombie.parts.head.attached) zombie.parts.head.scaleX = widthMult * 1.2; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.scaleX = widthMult; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.scaleX = widthMult; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.scaleX = widthMult; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.scaleX = widthMult; // Zombie strains during crushing - only arms flail, body/legs stay still zombie.isRagdolling = false; zombie.customPose = true; // Only arms flail wildly proportional to squish const flailIntensity = 200 + squishProgress * 600; const armParts = ['leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm']; for (const limbName of armParts) { const limb = zombie.parts[limbName]; if (limb && limb.attached) { limb.angularVelocity += (Math.random() - 0.5) * flailIntensity; limb.rotation += limb.angularVelocity * 0.016; limb.angularVelocity *= 0.92; // Clamp to joint limits limb.rotation = Math.max(limb.minAngle, Math.min(limb.maxAngle, limb.rotation)); } } // Keep legs and torso still zombie.parts.torso.rotation = 0; zombie.parts.torso.angularVelocity = 0; if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; zombie.parts.head.angularVelocity = 0; } const stillParts = ['leftThigh', 'rightThigh', 'leftLowerLeg', 'rightLowerLeg']; for (const limbName of stillParts) { const limb = zombie.parts[limbName]; if (limb && limb.attached) { limb.rotation = limb.restAngle || 0; limb.angularVelocity = 0; } } // Small squish particles leak out the sides if (squishProgress > 0.3 && Math.random() < squishProgress * 0.3) { const side = Math.random() > 0.5 ? 1 : -1; spawnParticles(zombie.baseX + side * 60, zombie.baseY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: side * (30 + Math.random() * 60), vy: (Math.random() - 0.5) * 30, size: 3 + Math.random() * 5, life: 0.5, gravity: 300, type: 'circle' }); } // BURST when reaching 30% wider! if (squishProgress >= 1) { crushed = true; resolve(); return; } } // Also check original target as fallback if (pressY >= pressTargetY + 50) { crushed = true; resolve(); return; } // Draw press at current position (slight vibration when held) const vib = buttonHeld ? Math.sin(now * 0.03) * 1.5 : Math.sin(now * 0.01) * 1; drawPress(pressY + vib); // Draw button drawCrusherButton(buttonHeld, !buttonHeld); // Zombie gets more nervous as press gets closer (only before contact) if (!zombie.crushed && zombie.parts.head.attached) { const proximity = (pressY - pressHoverY) / (pressTargetY - pressHoverY); if (Math.random() < 0.02 + proximity * 0.05) { zombie.applyImpulse((Math.random() - 0.5) * (10 + proximity * 30), -5 - proximity * 10); } } requestAnimationFrame(update); }; requestAnimationFrame(update); }); // Remove listeners canvas.removeEventListener('mousedown', handleDown); canvas.removeEventListener('mouseup', handleUp); canvas.removeEventListener('mouseleave', handleUp); canvas.removeEventListener('touchstart', handleDown); canvas.removeEventListener('touchend', handleUp); canvas.removeEventListener('touchcancel', handleUp); // BURST like a melon! Detach all parts with explosive force playSound('crusher_sound'); playSound('explosion_sound', 0.9); playSound('crush_sound', 0.7); // Hide zombie body - it exploded zombie.globalAlpha = 0; // Detach all parts with MASSIVE explosive outward force const burstParts = ['head', 'leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm', 'leftThigh', 'rightThigh', 'leftLowerLeg', 'rightLowerLeg', 'torso']; burstParts.forEach(partName => { const part = zombie.parts[partName]; if (part && part.attached) { part.scaleX = 1; part.scaleY = 1; // Massive explosive force in all directions const forceX = (Math.random() - 0.5) * 1400; const forceY = -200 - Math.random() * 600; zombie.detachPart(partName, forceX, forceY); } }); // Eye for the crusher burst effect const fp = zombie.faceParams || {}; const eyeSplatSize = 70 + Math.random() * 20; // Big eye const splatEyeColor = fp.eyeColor || '#e8e4c8'; const splatPupilSize = (fp.pupilSize || 4) * 3.5; // Scaled up const splatBloodshot = fp.bloodshotLevel || 0.5; const savedBurstX = zombie.baseX; const savedBurstY = zombie.baseY; // Eye position (centered on screen) const eyeCenterX = CANVAS_WIDTH / 2; let eyeCurrentY = CANVAS_HEIGHT * 0.35; // Generate random green blobs that will cover ~80% of the screen const greenBlobs = []; const numBlobs = 45; const greenShades = ['#3dcc10', '#2db808', '#4de020', '#28a006', '#55ee30', '#35c00c', '#1a9900', '#48d418', '#60f038', '#2aaa05']; for (let i = 0; i < numBlobs; i++) { greenBlobs.push({ x: Math.random() * CANVAS_WIDTH, y: Math.random() * CANVAS_HEIGHT, radiusX: 40 + Math.random() * 100, radiusY: 40 + Math.random() * 80, color: greenShades[Math.floor(Math.random() * greenShades.length)], angle: Math.random() * Math.PI, slideSpeed: 40 + Math.random() * 80 }); } // === IMMEDIATE: Screen flash + shake + blobs + eyeball all at once (600ms) === // Press fades out during this phase while blobs/eye are drawn ON TOP await animate(600 / speed, (t, dt) => { // Screen shake const shakeDecay = Math.max(0, 1 - t * 1.8); const shakeIntensity = 90 * shakeDecay; zombie.baseX = savedBurstX + Math.sin(t * 110) * shakeIntensity; zombie.baseY = savedBurstY + Math.cos(t * 85) * shakeIntensity * 0.75; // Draw press BEHIND blobs (fading out) const pressAlpha = Math.max(0, 1 - t * 1.8); // Fades out over ~55% of this phase if (pressAlpha > 0) { ctx.save(); ctx.globalAlpha = pressAlpha; drawPress(pressY); ctx.restore(); } // Screen flash (bright green-white, fades out quickly) if (t < 0.25) { const flashAlpha = (1 - t / 0.25) * 0.85; ctx.fillStyle = `rgba(61, 168, 84, ${flashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // White-hot center flash if (t < 0.1) { ctx.fillStyle = `rgba(255, 255, 255, ${(1 - t / 0.1) * 0.5})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } } // Draw blobs IN FRONT of press at full opacity (batched by color) const colorBatch1 = {}; for (let i = 0; i < greenBlobs.length; i++) { const blob = greenBlobs[i]; if (!colorBatch1[blob.color]) colorBatch1[blob.color] = []; colorBatch1[blob.color].push(blob); } for (const color in colorBatch1) { ctx.fillStyle = color; ctx.beginPath(); const blobs = colorBatch1[color]; for (let i = 0; i < blobs.length; i++) { const b = blobs[i]; ctx.moveTo(b.x + b.radiusX, b.y); ctx.ellipse(b.x, b.y, b.radiusX, b.radiusY, b.angle, 0, Math.PI * 2); } ctx.fill(); } // Eyeball IN FRONT of everything drawCrusherEyeball(ctx, eyeCenterX, eyeCurrentY, eyeSplatSize, splatEyeColor, splatPupilSize, splatBloodshot, 1); }); zombie.baseX = savedBurstX; zombie.baseY = savedBurstY; // === PHASE B: Blobs and eyeball slide smoothly off the bottom with fade out === await animate(1800 / speed, (t, dt) => { // Smooth cubic easing for slide distance - no jitter const slideT = t * t * (3 - 2 * t); // smoothstep for buttery motion const slideDistance = slideT * CANVAS_HEIGHT * 1.4; // Total slide distance // Smooth fade out: fully visible first 40%, then smooth linear fade const fadeAlpha = t < 0.4 ? 1 : Math.max(0, 1 - (t - 0.4) / 0.6); if (fadeAlpha <= 0) return; // Batch all blobs under a single globalAlpha (they all share the same fade) ctx.save(); ctx.globalAlpha = fadeAlpha; // Group blobs by color for batched path fills const colorBatch = {}; const stretchY = 1 + slideT * 0.4; for (let i = 0; i < greenBlobs.length; i++) { const blob = greenBlobs[i]; const slideY = blob.y + (blob.slideSpeed / 80) * slideDistance; if (slideY - blob.radiusY < CANVAS_HEIGHT + 50) { if (!colorBatch[blob.color]) colorBatch[blob.color] = []; colorBatch[blob.color].push({ x: blob.x, y: slideY, rx: blob.radiusX, ry: blob.radiusY * stretchY, a: blob.angle }); } } // Draw each color group as a single batched path for (const color in colorBatch) { ctx.fillStyle = color; ctx.beginPath(); const blobs = colorBatch[color]; for (let i = 0; i < blobs.length; i++) { const b = blobs[i]; ctx.moveTo(b.x + b.rx, b.y); ctx.ellipse(b.x, b.y, b.rx, b.ry, b.a, 0, Math.PI * 2); } ctx.fill(); } ctx.restore(); // Eyeball slides down smoothly using same easing eyeCurrentY = CANVAS_HEIGHT * 0.35 + slideDistance * 0.7; // Only draw eyeball if still on screen and visible if (eyeCurrentY - eyeSplatSize < CANVAS_HEIGHT + 50) { drawCrusherEyeball(ctx, eyeCenterX, eyeCurrentY, eyeSplatSize, splatEyeColor, splatPupilSize, splatBloodshot, fadeAlpha); } }); // Zombie is already fully exploded - no need to open trap door zombie = null; }, // 15. TORNADO - Polished funnel with wind swirls, moves back and forth flinging zombie into walls tornado: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('tornado_sound'); zombie.isRagdolling = true; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Tornado state const tornadoBaseY = CANVAS_HEIGHT - 250; // Ground level for tornado base const tornadoHeight = 1100; // Total height of funnel let tornadoX = CANVAS_WIDTH / 2; let tornadoVX = 0; // Velocity for smooth movement let tornadoDirection = 1; // 1 = moving right, -1 = moving left let tornadoTime = 0; // Zombie physics state for flinging let zombieVX = 0; let zombieVY = 0; let zombieCaught = false; let zombieAngle = 0; let flingCount = 0; let wallHits = 0; const maxWallHits = 7; // Break apart after this many wall smashes const wallBounceForceBase = 3200; // Extremely powerful fling (increased for mobile parity) // Dust cloud particles circling the tornado const dustClouds = []; for (let i = 0; i < 20; i++) { dustClouds.push({ angle: Math.random() * Math.PI * 2, height: Math.random(), // 0 = bottom, 1 = top speed: 2 + Math.random() * 4, size: 8 + Math.random() * 20, alpha: 0.2 + Math.random() * 0.4, dist: 0.7 + Math.random() * 0.5 // Distance multiplier from center }); } // Wind swirl particles const windSwirls = []; for (let i = 0; i < 12; i++) { windSwirls.push({ angle: Math.random() * Math.PI * 2, height: Math.random(), speed: 3 + Math.random() * 5, length: 20 + Math.random() * 40, alpha: 0.15 + Math.random() * 0.25 }); } // Helper: Draw the polished tornado at position function drawTornado(tx, time) { ctx.save(); ctx.translate(tx, tornadoBaseY); // Tornado funnel - narrow at BOTTOM, wide at TOP // Draw from bottom (ground) to top (cloud) const numLayers = 20; const wobbleBase = Math.sin(time * 3) * 16; // Main funnel body with gradient layers for (let i = 0; i < numLayers; i++) { const t = i / numLayers; // 0 = bottom, 1 = top const layerY = -t * tornadoHeight; // Width increases from bottom to top (proper funnel shape) const width = 30 + t * t * 240; // Narrow at ground, exponentially wider at top const height = 12 + t * 8; // Ellipse height increases slightly // Wobble increases toward top (more unstable at top) const wobble = wobbleBase * t * 1.5 + Math.sin(time * 4 + i * 0.5) * t * 30; // Color: darker/denser at center, lighter at edges, greenish-gray const darkness = 0.3 + (1 - t) * 0.2; // Darker at bottom const r = Math.floor(70 + t * 40); const g = Math.floor(75 + t * 45); const b = Math.floor(90 + t * 50); const alpha = 0.5 - t * 0.2; ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`; ctx.beginPath(); ctx.ellipse(wobble, layerY, width, height, 0, 0, Math.PI * 2); ctx.fill(); // Inner darker core (narrower) if (t < 0.7) { const coreWidth = width * 0.4; ctx.fillStyle = `rgba(40, 45, 55, ${0.3 - t * 0.15})`; ctx.beginPath(); ctx.ellipse(wobble * 0.7, layerY, coreWidth, height * 0.6, 0, 0, Math.PI * 2); ctx.fill(); } } // Swirling lines inside the funnel (shows rotation) ctx.strokeStyle = 'rgba(200, 210, 220, 0.15)'; ctx.lineWidth = 2; for (let s = 0; s < 6; s++) { const swirlAngle = time * 5 + s * (Math.PI * 2 / 6); ctx.beginPath(); for (let pt = 0; pt < 20; pt++) { const ptT = pt / 20; const ptY = -ptT * tornadoHeight; const ptWidth = 15 + ptT * ptT * 120; const ptWobble = wobbleBase * ptT * 1.5 + Math.sin(time * 4 + pt * 0.3) * ptT * 15; const swirlX = ptWobble + Math.cos(swirlAngle + ptT * 8) * ptWidth * 0.6; const swirlY = ptY + Math.sin(swirlAngle + ptT * 8) * 5; if (pt === 0) ctx.moveTo(swirlX, swirlY); else ctx.lineTo(swirlX, swirlY); } ctx.stroke(); } // Dust clouds circling the funnel dustClouds.forEach(cloud => { cloud.angle += cloud.speed * 0.016; const cloudT = cloud.height; // vertical position (0=bottom, 1=top) const funnelWidth = 15 + cloudT * cloudT * 120; const cloudDist = funnelWidth * cloud.dist; const cloudWobble = wobbleBase * cloudT * 1.5; const cx = cloudWobble + Math.cos(cloud.angle) * cloudDist; const cy = -cloudT * tornadoHeight + Math.sin(cloud.angle) * 10; // Draw dust cloud as soft circle const dustGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, cloud.size); dustGrad.addColorStop(0, `rgba(120, 110, 90, ${cloud.alpha})`); dustGrad.addColorStop(0.6, `rgba(100, 95, 80, ${cloud.alpha * 0.5})`); dustGrad.addColorStop(1, 'rgba(80, 75, 65, 0)'); ctx.fillStyle = dustGrad; ctx.beginPath(); ctx.arc(cx, cy, cloud.size, 0, Math.PI * 2); ctx.fill(); }); // Wind swirl arcs (curved lines showing air movement) windSwirls.forEach(swirl => { swirl.angle += swirl.speed * 0.016; const swirlT = swirl.height; const funnelWidth = 15 + swirlT * swirlT * 120; const swirlDist = funnelWidth * 1.2; // Just outside the funnel const swirlWobble = wobbleBase * swirlT * 1.5; ctx.strokeStyle = `rgba(180, 190, 200, ${swirl.alpha})`; ctx.lineWidth = 1.5; ctx.beginPath(); const startAngle = swirl.angle; const arcLength = swirl.length / swirlDist; // Convert length to angle for (let pt = 0; pt <= 8; pt++) { const ptAngle = startAngle + (pt / 8) * arcLength; const px = swirlWobble + Math.cos(ptAngle) * swirlDist; const py = -swirlT * tornadoHeight + Math.sin(ptAngle) * 12; if (pt === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.stroke(); }); // Ground contact effect - dust/debris at base ctx.fillStyle = 'rgba(100, 90, 70, 0.3)'; ctx.beginPath(); ctx.ellipse(wobbleBase * 0.3, 10, 100 + Math.sin(time * 8) * 20, 30, 0, 0, Math.PI * 2); ctx.fill(); // Spinning debris in the funnel for (let d = 0; d < 12; d++) { const debrisAngle = time * 6 + d * 1.3; const debrisT = (d * 0.08 + time * 0.2) % 1; // Cycles up the funnel const debrisWidth = 15 + debrisT * debrisT * 120; const debrisWobble = wobbleBase * debrisT * 1.5; const dx = debrisWobble + Math.cos(debrisAngle) * debrisWidth * 0.5; const dy = -debrisT * tornadoHeight + Math.sin(debrisAngle) * 8; ctx.save(); ctx.translate(dx, dy); ctx.rotate(debrisAngle * 2); // Random debris shapes if (d % 3 === 0) { ctx.fillStyle = `rgba(90, 60, 30, ${0.6 - debrisT * 0.3})`; ctx.fillRect(-5, -3, 10, 6); // Wood plank } else if (d % 3 === 1) { ctx.fillStyle = `rgba(80, 80, 80, ${0.5 - debrisT * 0.3})`; ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); // Rock ctx.fill(); } else { ctx.fillStyle = `rgba(60, 100, 40, ${0.5 - debrisT * 0.3})`; ctx.fillRect(-4, -2, 8, 4); // Leaf/grass } ctx.restore(); } ctx.restore(); } // Phase 1: Tornado forms in center (800ms) await animate(800 / speed, (t, dt) => { const formScale = t * t; // Grow in quickly tornadoX = CANVAS_WIDTH / 2; tornadoTime += 0.016; ctx.save(); ctx.globalAlpha = formScale; ctx.translate(0, (1 - formScale) * 200); // Rise up from ground drawTornado(tornadoX, tornadoTime); ctx.restore(); // Wind particles blowing outward as it forms if (t > 0.3 && Math.random() < 0.5) { const angle = Math.random() * Math.PI * 2; const dist = 100 + Math.random() * 200; spawnParticles(tornadoX + Math.cos(angle) * 50, tornadoBaseY - Math.random() * 300, 1, { color: 'rgba(150, 140, 120, 0.4)', vx: Math.cos(angle) * dist * 0.5, vy: -30 - Math.random() * 50, size: 5 + Math.random() * 10, life: 0.5 + Math.random() * 0.3, gravity: 30, type: 'circle' }); } // Zombie starts getting blown around if (t > 0.5) { zombie.applyImpulse((Math.random() - 0.5) * 40, -15); } }); // Phase 2: Tornado moves back and forth, VIOLENTLY flinging zombie into walls (5500ms) const wallLeft = 30; const wallRight = CANVAS_WIDTH - 30; let lastFlingTime = 0; let zombieFlung = false; let detachedParts = new Set(); let screenShakeX = 0; let screenShakeY = 0; let screenShakeDecay = 0; // Parts to detach in order of wall hits const detachOrder = [ ['leftForearm', 'rightForearm'], ['leftUpperArm', 'rightUpperArm'], ['leftLowerLeg', 'rightLowerLeg'], ['head', 'leftThigh', 'rightThigh', 'torso'] ]; await animate(5500 / speed, (t, dt) => { tornadoTime += 0.016; // Decay screen shake if (screenShakeDecay > 0) { screenShakeDecay -= 0.016 * 4; screenShakeX = Math.sin(Date.now() * 0.08) * screenShakeDecay * 25; screenShakeY = Math.cos(Date.now() * 0.06) * screenShakeDecay * 15; } else { screenShakeX = 0; screenShakeY = 0; } // Apply screen shake offset ctx.save(); ctx.translate(screenShakeX, screenShakeY); // Tornado moves back and forth with aggressive motion const movePattern = Math.sin(t * Math.PI * 3.5); // Faster sweeps tornadoX = CANVAS_WIDTH / 2 + movePattern * (CANVAS_WIDTH * 0.42); // Draw tornado drawTornado(tornadoX, tornadoTime); // Heavy wind effect particles across the screen if (Math.random() < 0.8) { const windDir = tornadoX < CANVAS_WIDTH / 2 ? 1 : -1; const windY = tornadoBaseY - Math.random() * tornadoHeight; const windStartX = windDir > 0 ? -20 : CANVAS_WIDTH + 20; spawnParticles(windStartX, windY, 1, { color: `rgba(180, 180, 200, ${0.2 + Math.random() * 0.2})`, vx: windDir * (350 + Math.random() * 450), vy: (Math.random() - 0.5) * 60, size: 3 + Math.random() * 6, life: 0.25 + Math.random() * 0.15, gravity: 0, type: 'circle', shrink: false }); } // Heavy dust clouds kicked up at ground level if (Math.random() < 0.6) { spawnParticles(tornadoX + (Math.random() - 0.5) * 120, tornadoBaseY + 10, 1, { color: `rgba(120, 100, 70, ${0.4 + Math.random() * 0.3})`, vx: (Math.random() - 0.5) * 200, vy: -40 - Math.random() * 80, size: 15 + Math.random() * 25, life: 0.8 + Math.random() * 0.5, gravity: 20, type: 'circle' }); } // Calculate distance from zombie to tornado center const distToTornado = Math.sqrt( Math.pow(zombie.baseX - tornadoX, 2) + Math.pow(zombie.baseY - (tornadoBaseY - tornadoHeight * 0.4), 2) ); // Zombie interaction with tornado - much stronger suction if (distToTornado < 600 && wallHits < maxWallHits && !zombieFlung) { zombieCaught = true; // POWERFUL pull toward tornado center and lift const pullX = (tornadoX - zombie.baseX) * 0.15; const pullY = ((tornadoBaseY - tornadoHeight * 0.5) - zombie.baseY) * 0.1; zombie.baseX += pullX; zombie.baseY += pullY; // Spin the zombie VERY rapidly zombieAngle += 2700 * dt; zombie.parts.torso.rotation = zombieAngle; // Extremely violent ragdoll flailing zombie.applyImpulse( (Math.random() - 0.5) * 800, (Math.random() - 0.5) * 600 ); // All limbs flail wildly outward for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limbName !== 'torso') { const outDir = limbName.includes('left') ? 1 : -1; limb.angularVelocity += (Math.random() * 0.7 + 0.3) * outDir * 1200; } } // Periodically FLING the zombie toward a wall - faster interval const flingInterval = 0.1; // Fling more frequently const currentFlingPhase = Math.floor(t / flingInterval); if (currentFlingPhase > lastFlingTime && wallHits < maxWallHits) { lastFlingTime = currentFlingPhase; zombieFlung = true; // VIOLENTLY fling toward alternate walls const flingDir = flingCount % 2 === 0 ? 1 : -1; zombieVX = flingDir * (wallBounceForceBase + Math.random() * 1000); zombieVY = -800 - Math.random() * 600; flingCount++; // Play whoosh sound on fling playSound('tornado_sound', 0.6); } } // Apply fling physics when zombie is airborne - FAST movement if (zombieFlung) { zombie.baseX += zombieVX * dt; zombie.baseY += zombieVY * dt; zombieVY += 1800 * dt; // Strong gravity pulls it down fast zombieVX *= Math.pow(0.999, dt / 0.016); // Less air resistance, hits wall harder zombieAngle += zombieVX * 0.08 * (dt / 0.016); // Fast spin based on velocity, frame-rate independent zombie.parts.torso.rotation = zombieAngle; // Motion blur particles trailing behind zombie if (Math.random() < 0.6) { spawnParticles(zombie.baseX, zombie.baseY, 1, { color: 'rgba(100, 150, 100, 0.4)', vx: -zombieVX * 0.1, vy: -zombieVY * 0.05, size: 5 + Math.random() * 8, life: 0.15, gravity: 0, type: 'circle' }); } // Check wall collisions - MASSIVE impacts if (zombie.baseX < wallLeft && zombieVX < 0) { // HIT LEFT WALL - DEVASTATING IMPACT zombie.baseX = wallLeft; zombieVX = -zombieVX * 0.15; // Barely bounces - most energy absorbed by wall wallHits++; zombieFlung = false; // Let tornado catch again playSound('crush_sound', 1.0); playSound('explosion_sound', 0.3); // MASSIVE screen shake screenShakeDecay = 1.6; // Huge wall impact blood splatter for (let i = 0; i < 50; i++) { const bodyOffset = (Math.random() * 450 - 170) * zombie.scale * zombie.globalScale; const rotatedYOffset = bodyOffset * Math.cos(zombieAngle * Math.PI / 180); spawnParticles(wallLeft, zombie.baseY + rotatedYOffset, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: 150 + Math.random() * 500, vy: (Math.random() - 0.5) * 600, size: 8 + Math.random() * 16, life: 1.0 + Math.random() * 0.8, gravity: 400, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Wall crack/debris particles for (let i = 0; i < 15; i++) { const bodyOffset = (Math.random() * 450 - 170) * zombie.scale * zombie.globalScale; const rotatedYOffset = bodyOffset * Math.cos(zombieAngle * Math.PI / 180); spawnParticles(wallLeft + 10, zombie.baseY + rotatedYOffset, 1, { color: '#555', vx: 80 + Math.random() * 200, vy: (Math.random() - 0.5) * 250, size: 4 + Math.random() * 8, life: 0.6 + Math.random() * 0.5, gravity: 500, type: 'square' }); } // Detach parts based on wall hit count - with HUGE forces if (wallHits <= detachOrder.length) { const partsToDetach = detachOrder[wallHits - 1]; partsToDetach.forEach(partName => { if (!detachedParts.has(partName)) { detachedParts.add(partName); const forceX = 600 + Math.random() * 800; const forceY = -400 - Math.random() * 600; zombie.detachPart(partName, forceX, forceY); } }); } } else if (zombie.baseX > wallRight && zombieVX > 0) { // HIT RIGHT WALL - DEVASTATING IMPACT zombie.baseX = wallRight; zombieVX = -zombieVX * 0.15; wallHits++; zombieFlung = false; playSound('crush_sound', 1.0); playSound('explosion_sound', 0.3); // MASSIVE screen shake screenShakeDecay = 1.6; // Huge wall impact blood splatter for (let i = 0; i < 50; i++) { const bodyOffset = (Math.random() * 450 - 170) * zombie.scale * zombie.globalScale; const rotatedYOffset = bodyOffset * Math.cos(zombieAngle * Math.PI / 180); spawnParticles(wallRight, zombie.baseY + rotatedYOffset, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: -150 - Math.random() * 500, vy: (Math.random() - 0.5) * 600, size: 8 + Math.random() * 16, life: 1.0 + Math.random() * 0.8, gravity: 400, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Wall crack/debris particles for (let i = 0; i < 15; i++) { const bodyOffset = (Math.random() * 450 - 170) * zombie.scale * zombie.globalScale; const rotatedYOffset = bodyOffset * Math.cos(zombieAngle * Math.PI / 180); spawnParticles(wallRight - 10, zombie.baseY + rotatedYOffset, 1, { color: '#555', vx: -80 - Math.random() * 200, vy: (Math.random() - 0.5) * 250, size: 4 + Math.random() * 8, life: 0.6 + Math.random() * 0.5, gravity: 500, type: 'square' }); } // Detach parts with HUGE forces if (wallHits <= detachOrder.length) { const partsToDetach = detachOrder[wallHits - 1]; partsToDetach.forEach(partName => { if (!detachedParts.has(partName)) { detachedParts.add(partName); const forceX = -600 - Math.random() * 800; const forceY = -400 - Math.random() * 600; zombie.detachPart(partName, forceX, forceY); } }); } } // Floor collision when flung - bounces back up into tornado if (zombie.baseY > tornadoBaseY && zombieVY > 0) { zombie.baseY = tornadoBaseY; zombieVY = -zombieVY * 0.6; if (Math.abs(zombieVY) < 150) { zombieVY = 0; zombieFlung = false; // Let tornado catch again } } } ctx.restore(); // End screen shake transform // After enough wall hits, do final destruction if (wallHits >= maxWallHits && !zombieFlung) { // Final detach of any remaining parts with extreme force const remainingParts = ['head', 'leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm', 'leftThigh', 'rightThigh', 'leftLowerLeg', 'rightLowerLeg', 'torso']; remainingParts.forEach(partName => { if (!detachedParts.has(partName) && zombie.parts[partName] && zombie.parts[partName].attached) { detachedParts.add(partName); zombie.detachPart(partName, (Math.random() - 0.5) * 1800, -600 - Math.random() * 800 ); } }); } }); // Phase 3: Tornado dissipates (800ms) await animate(800 / speed, (t, dt) => { tornadoTime += 0.016; ctx.save(); ctx.globalAlpha = 1 - t; drawTornado(tornadoX, tornadoTime); ctx.restore(); // Final dust clouds dispersing if (Math.random() < 0.3 * (1 - t)) { spawnParticles(tornadoX + (Math.random() - 0.5) * 150, tornadoBaseY - Math.random() * 200, 1, { color: 'rgba(100, 90, 70, 0.3)', vx: (Math.random() - 0.5) * 80, vy: -20 - Math.random() * 30, size: 10 + Math.random() * 15, life: 0.8 + Math.random() * 0.5, gravity: 20, type: 'circle' }); } }); // Schedule auto-reset immediately as tornado exits scheduleAutoReset(); }, // 16. PSYCHIC - Head pulses then explodes psychic: async function() { const speed = window.gameConfig.settings.animationSpeed; zombie.isRagdolling = false; zombie.customPose = true; // Head world position for particles const headWorldX = zombie.baseX; const headWorldY = zombie.baseY + (-115) * zombie.scale; // Phase 1: Slow head pulse (2500ms) - only head scales up/down gently await animate(2500 / speed, (t, dt) => { // Slow sine pulse: frequency increases slightly over time const freq = 2 + t * 2; // 2 Hz -> 4 Hz const pulseAmt = 0.08 + t * 0.06; // 8% -> 14% scale variation const pulse = 1 + Math.sin(t * freq * Math.PI * 2) * pulseAmt; // Only affect head if (zombie.parts.head.attached) { zombie.parts.head.scaleX = pulse; zombie.parts.head.scaleY = pulse; } // Subtle purple glow around head grows with time ctx.save(); ctx.translate(headWorldX, headWorldY); const glowAlpha = t * 0.3; const glowSize = 50 + Math.sin(t * freq * Math.PI * 2) * 10; const glowGrad = ctx.createRadialGradient(0, 0, 10, 0, 0, glowSize); glowGrad.addColorStop(0, `rgba(200, 0, 255, ${glowAlpha * 0.5})`); glowGrad.addColorStop(0.6, `rgba(150, 0, 200, ${glowAlpha * 0.2})`); glowGrad.addColorStop(1, 'rgba(100, 0, 150, 0)'); ctx.fillStyle = glowGrad; ctx.beginPath(); ctx.arc(0, 0, glowSize, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Glowing eyes build up ctx.save(); ctx.translate(headWorldX, headWorldY); const eyeGlow = t * 0.6; ctx.fillStyle = `rgba(255, 0, 255, ${eyeGlow})`; ctx.shadowColor = '#ff00ff'; ctx.shadowBlur = 10 + t * 15; ctx.beginPath(); ctx.arc(-11 * zombie.scale, 0, 5 + t * 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(11 * zombie.scale, 0, 5 + t * 4, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); }); // Phase 2: Faster and bigger pulsing (2000ms) - head bulges more aggressively playSound('psychic_sound'); await animate(2000 / speed, (t, dt) => { // Frequency ramps up dramatically: 4 Hz -> 12 Hz const freq = 4 + t * 8; // Amplitude grows: 14% -> 45% const pulseAmt = 0.14 + t * 0.31; const pulse = 1 + Math.sin(t * freq * Math.PI * 2) * pulseAmt; // Only head pulses if (zombie.parts.head.attached) { zombie.parts.head.scaleX = pulse; zombie.parts.head.scaleY = pulse; } // Purple energy glow gets intense ctx.save(); ctx.translate(headWorldX, headWorldY); const glowAlpha = 0.3 + t * 0.5; const glowSize = 60 + Math.sin(t * freq * Math.PI * 2) * 20 + t * 20; const glowGrad = ctx.createRadialGradient(0, 0, 5, 0, 0, glowSize); glowGrad.addColorStop(0, `rgba(255, 50, 255, ${glowAlpha * 0.6})`); glowGrad.addColorStop(0.4, `rgba(200, 0, 255, ${glowAlpha * 0.3})`); glowGrad.addColorStop(1, 'rgba(100, 0, 150, 0)'); ctx.fillStyle = glowGrad; ctx.beginPath(); ctx.arc(0, 0, glowSize, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Bright glowing eyes ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.fillStyle = `rgba(255, 100, 255, ${0.7 + t * 0.3})`; ctx.shadowColor = '#ff44ff'; ctx.shadowBlur = 20 + t * 25; ctx.beginPath(); ctx.arc(-11 * zombie.scale, 0, 7 + t * 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(11 * zombie.scale, 0, 7 + t * 5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); // Energy crackling around head (more frequent as it builds) if (Math.random() < 0.3 + t * 0.5) { const angle = Math.random() * Math.PI * 2; const dist = 30 + Math.random() * 30; spawnParticles( headWorldX + Math.cos(angle) * dist, headWorldY + Math.sin(angle) * dist, 1, { color: Math.random() > 0.5 ? '#ff44ff' : '#cc00ff', vx: Math.cos(angle) * 30, vy: Math.sin(angle) * 30 - 20, size: 2 + Math.random() * 4, life: 0.2 + Math.random() * 0.2, gravity: -30, type: 'circle' } ); } // Body shakes slightly from the strain zombie.parts.torso.rotation = Math.sin(t * 30) * (2 + t * 4); }); // Phase 3: HEAD EXPLODES into green goo shower! playSound('explosion_sound', 0.7); // Hide the head zombie.parts.head.visible = false; zombie.parts.head.attached = false; // Massive green goo explosion from head position for (let i = 0; i < 80; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 400; spawnParticles(headWorldX, headWorldY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 80, size: 6 + Math.random() * 16, life: 1.2 + Math.random() * 0.8, gravity: 400, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Bone/skull fragments for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 250; spawnParticles(headWorldX, headWorldY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 60, size: 4 + Math.random() * 8, life: 1.5 + Math.random() * 0.6, gravity: 500, type: 'square' }); } // Purple energy burst (shockwave) await animate(200 / speed, (t, dt) => { ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.strokeStyle = `rgba(255, 0, 255, ${(1 - t) * 0.8})`; ctx.lineWidth = 8 * (1 - t); ctx.beginPath(); ctx.arc(0, 0, t * 200, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // Screen flash if (t < 0.2) { ctx.fillStyle = `rgba(255, 200, 255, ${(1 - t / 0.2) * 0.4})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Phase 4: Body collapses (headless zombie crumbles) zombie.customPose = false; zombie.isRagdolling = true; // Brief pause - headless body sways await animate(600 / speed, (t, dt) => { // Body wobbles and collapses zombie.parts.torso.rotation = Math.sin(t * 8) * (10 + t * 20); zombie.applyImpulse((Math.random() - 0.5) * 30, 0); // Blood spurts from neck stump if (Math.random() < 0.4) { const neckX = zombie.baseX; const neckY = zombie.baseY + (-70) * zombie.scale; spawnParticles(neckX, neckY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 80, vy: -40 - Math.random() * 80, size: 4 + Math.random() * 8, life: 0.5 + Math.random() * 0.3, gravity: 400, type: 'circle' }); } }); // Body topples over — stays in one piece, just falls to the side zombie.isRagdolling = true; zombie.customPose = false; // Give the torso a gentle lateral tip so it keels over naturally zombie.parts.torso.angularVelocity = (Math.random() > 0.5 ? 1 : -1) * (80 + Math.random() * 40); // Small downward nudge so legs buckle zombie.applyImpulse((Math.random() - 0.5) * 40, 30); await animate(1500 / speed, () => {}); }, // 17. WRECKING BALL - Zoom out to building, wrecking ball smashes in, zombie ejected wreckingball: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Phase 0: Brief pause so we can capture a clean frame await animate(50 / speed, () => {}); // Take a screen stamp of the current scene (zombie + background) const stampCanvas = document.createElement('canvas'); stampCanvas.width = CANVAS_WIDTH; stampCanvas.height = CANVAS_HEIGHT; const stampCtx = stampCanvas.getContext('2d'); stampCtx.drawImage(canvas, 0, 0); // Hide zombie - it's "inside" the building now zombie.globalAlpha = 0; // Building parameters - tall, thin office building const buildingW = 200; const buildingH = 850; const buildingCenterX = CANVAS_WIDTH / 2; const buildingTopY = 80; // Top of building on screen const buildingBottomY = buildingTopY + buildingH; // Window grid const winCols = 3; const winRows = 9; const winW = 46; const winH = 62; const winGapX = 14; const winGapY = 18; const winMarginX = (buildingW - winCols * winW - (winCols - 1) * winGapX) / 2; const winMarginY = 40; // The zombie's window (middle row, middle column) const zombieWinRow = 4; const zombieWinCol = 1; // Middle column // Helper: calculate window position function getWinPos(row, col) { const bLeft = buildingCenterX - buildingW / 2; const wx = bLeft + winMarginX + col * (winW + winGapX); const wy = buildingTopY + winMarginY + row * (winH + winGapY); return { x: wx, y: wy }; } // Helper: draw the full building scene (sky, building, windows) function drawBuildingScene(shakeX, shakeY, crackProgress) { shakeX = shakeX || 0; shakeY = shakeY || 0; crackProgress = crackProgress || 0; // Sky gradient const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Clouds ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); // Ground ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 4); // Sidewalk ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); ctx.save(); ctx.translate(shakeX, shakeY); const bLeft = buildingCenterX - buildingW / 2; // Building shadow on ground ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft + 60, buildingBottomY + 20); ctx.lineTo(bLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // Building body - gray concrete const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.15, '#7a7a7a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(0.85, '#7a7a7a'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); // Building outline ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 2; ctx.strokeRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); // Skip zombie window - drawn separately if (row === zombieWinRow && col === zombieWinCol) continue; // Window recessed frame ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); // Window glass - dark blue ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); // Random lights in some windows (warm yellow glow) if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } // Sky reflection on some windows if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wp.x + 3, wp.y + 3); ctx.lineTo(wp.x + winW * 0.4, wp.y + 3); ctx.lineTo(wp.x + 3, wp.y + winH * 0.4); ctx.closePath(); ctx.fill(); } } } // Draw zombie's window with stamp content const zwp = getWinPos(zombieWinRow, zombieWinCol); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(zwp.x - 2, zwp.y - 2, winW + 4, winH + 4); ctx.save(); ctx.beginPath(); ctx.rect(zwp.x, zwp.y, winW, winH); ctx.clip(); ctx.drawImage(stampCanvas, zwp.x, zwp.y, winW, winH); ctx.restore(); // Impact cracks (drawn after building when crackProgress > 0) if (crackProgress > 0) { ctx.strokeStyle = '#333'; ctx.lineWidth = 2 + crackProgress * 2; const impactX = bLeft + 15; const impactY = buildingTopY + buildingH * 0.45; // Radial cracks from impact point for (let i = 0; i < 8; i++) { const angle = (i / 8) * Math.PI * 2 + 0.2; const len = 20 + crackProgress * 50 + (i % 3) * 15; ctx.beginPath(); ctx.moveTo(impactX, impactY); let cx = impactX; let cy = impactY; const segs = 3; for (let s = 0; s < segs; s++) { cx += Math.cos(angle + (s % 2 === 0 ? 0.2 : -0.2)) * (len / segs); cy += Math.sin(angle + (s % 2 === 0 ? -0.1 : 0.15)) * (len / segs); ctx.lineTo(cx, cy); } ctx.stroke(); } } ctx.restore(); // End shake transform } // Phase 1: Zoom out - building starts big (filling screen) and scales down with stamp (2200ms) // The building starts scaled up so the zombie's window fills the entire canvas, // then the whole thing scales down to reveal the full building from outside. await animate(2200 / speed, (t, dt) => { // Eased transition const easeOut = 1 - Math.pow(1 - t, 3); // Calculate the zombie's window position in building-local coords const zwp = getWinPos(zombieWinRow, zombieWinCol); // Center of the zombie's window in building scene coords const winCenterX = zwp.x + winW / 2; const winCenterY = zwp.y + winH / 2; // At t=0: scale is large enough that the window fills the screen // At t=1: scale is 1.0 (normal building view) // Calculate initial scale: window must fill the canvas const scaleForWidth = CANVAS_WIDTH / winW; const scaleForHeight = CANVAS_HEIGHT / winH; const startScale = Math.max(scaleForWidth, scaleForHeight); const endScale = 1.0; const currentScale = startScale - (startScale - endScale) * easeOut; // Sky background (always visible behind the building) const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Zoom-to-point transform: keep winCenter mapped to a screen point that // interpolates from screen center (at startScale) to its natural position (at scale 1) const screenX = (CANVAS_WIDTH / 2) + (winCenterX - CANVAS_WIDTH / 2) * easeOut; const screenY = (CANVAS_HEIGHT / 2) + (winCenterY - CANVAS_HEIGHT / 2) * easeOut; const tx = screenX - winCenterX * currentScale; const ty = screenY - winCenterY * currentScale; ctx.save(); ctx.translate(tx, ty); ctx.scale(currentScale, currentScale); // Draw the full building scene at its normal coordinates // (drawBuildingScene draws at fixed positions, so we call it within the transform) // We need to draw the building parts directly here since drawBuildingScene uses ctx directly // --- Inline building drawing (within transform) --- const bLeft = buildingCenterX - buildingW / 2; // Clouds (behind building - drawn first) if (currentScale < 3) { const cloudAlpha = Math.min(1, (3 - currentScale) / 2); ctx.fillStyle = `rgba(255, 255, 255, ${cloudAlpha * 0.7})`; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); } // Ground - aligned to building bottom ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); // Building shadow on ground (after ground, before building) ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft + 60, buildingBottomY + 20); ctx.lineTo(bLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // Building body const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.15, '#7a7a7a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(0.85, '#7a7a7a'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); // Building outline ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows (except zombie's window) for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (row === zombieWinRow && col === zombieWinCol) continue; ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wp.x + 3, wp.y + 3); ctx.lineTo(wp.x + winW * 0.4, wp.y + 3); ctx.lineTo(wp.x + 3, wp.y + winH * 0.4); ctx.closePath(); ctx.fill(); } } } // Draw zombie's window with stamp content // Smoothly interpolate stamp dimensions from correct aspect ratio (cover) to squished (window fit) // At t=0 (zoomed in): stamp fills window preserving aspect ratio (no visible stretch) // At t=1 (zoomed out): stamp fits exactly in the small window const stampAR = CANVAS_WIDTH / CANVAS_HEIGHT; // 0.5625 const winAR = winW / winH; // ~0.742 // "Cover" dimensions: fill window while preserving stamp aspect ratio const coverW = winW; // width-constrained cover const coverH = winW / stampAR; // taller than window to maintain AR // Interpolate from cover to squished based on easeOut (same as zoom progress) const stampDrawW = coverW; // width stays the same (= winW) const stampDrawH = coverH + (winH - coverH) * easeOut; // height transitions from tall (correct AR) to winH (squished) const stampOffsetY = (winH - stampDrawH) / 2; // center vertically ctx.fillStyle = '#4a4a4a'; ctx.fillRect(zwp.x - 2, zwp.y - 2, winW + 4, winH + 4); ctx.save(); ctx.beginPath(); ctx.rect(zwp.x, zwp.y, winW, winH); ctx.clip(); ctx.drawImage(stampCanvas, zwp.x, zwp.y + stampOffsetY, stampDrawW, stampDrawH); ctx.restore(); ctx.restore(); // End transform }); // Phase 2: Building fully visible, brief pause for dramatic effect (600ms) await animate(600 / speed, (t, dt) => { drawBuildingScene(0, 0, 0); }); // Phase 3: Wrecking ball swings down in an arc, anchored from directly above the building (1000ms) playSound('wrecking_ball_sound'); const bLeft = buildingCenterX - buildingW / 2; const impactX = buildingCenterX; // Center of building (swings straight down) const impactY = buildingTopY + buildingH * 0.45; // Middle-ish height const pivotX = buildingCenterX; // Anchor directly above building center const pivotY = -150; // Above screen const chainLength = impactY - pivotY; // Vertical distance from pivot to impact const ballRadius = 80; // Ball swings from left side in an arc down to the building // startAngle: ball is off to the left (negative angle from vertical) // targetAngle: ball is at bottom of arc (0 = straight down) const startAngle = -1.2; // ~69 degrees to the left const targetAngle = 0; // Straight down = impact await animate(1000 / speed, (t, dt) => { drawBuildingScene(0, 0, 0); // Ball swings from left toward center (accelerating like a pendulum) const easeIn = t * t * t; // Accelerating swing const currentAngle = startAngle + (targetAngle - startAngle) * easeIn; const ballX = pivotX + Math.sin(currentAngle) * chainLength; const ballY = pivotY + Math.cos(currentAngle) * chainLength; // Chain endpoint is the mounting loop at top of ball const chainEndX = ballX; const chainEndY = ballY - ballRadius + 8; // Draw chain (ABOVE/behind ball) ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(pivotX, pivotY); ctx.lineTo(chainEndX, chainEndY); ctx.stroke(); // Chain links detail ctx.strokeStyle = '#666'; ctx.lineWidth = 4; const numLinks = 12; for (let i = 0; i < numLinks; i++) { const lt = i / numLinks; const lx = pivotX + (chainEndX - pivotX) * lt; const ly = pivotY + (chainEndY - pivotY) * lt; if (i % 2 === 0) { ctx.beginPath(); ctx.arc(lx, ly, 6, 0, Math.PI * 2); ctx.stroke(); } } // Draw wrecking ball ctx.fillStyle = '#2a2a2a'; ctx.shadowColor = '#000'; ctx.shadowBlur = 10; ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Ball gradient/shine const ballGrad = ctx.createRadialGradient(ballX - 10, ballY - 12, 5, ballX, ballY, ballRadius); ballGrad.addColorStop(0, '#555'); ballGrad.addColorStop(0.4, '#333'); ballGrad.addColorStop(1, '#1a1a1a'); ctx.fillStyle = ballGrad; ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.fill(); // Specular highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.25)'; ctx.beginPath(); ctx.ellipse(ballX - 12, ballY - 14, 10, 7, -0.3, 0, Math.PI * 2); ctx.fill(); // Ball outline ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.stroke(); // Mounting ring on ball ctx.strokeStyle = '#555'; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(ballX, ballY - ballRadius + 8, 8, 0, Math.PI * 2); ctx.stroke(); }); // Phase 4: IMPACT! Top half of building destroyed in massive explosion (1800ms) playSound('crush_sound', 1.0); playSound('explosion_sound', 0.8); // Break point is at the impact Y - everything above this gets destroyed const breakY = impactY; // Generate jagged break line points across the building width const jaggedPoints = []; const numJaggedPts = 14; for (let i = 0; i <= numJaggedPts; i++) { const px = bLeft + (i / numJaggedPts) * buildingW; // Jagged Y offset - large random teeth pointing up and down const jaggedOffset = (Math.random() - 0.5) * 60 + Math.sin(i * 1.7) * 20; jaggedPoints.push({ x: px, y: breakY + jaggedOffset }); } // Helper: Draw the destroyed bottom half of the building with jagged top edge function drawDestroyedBuilding(shakeX, shakeY) { ctx.save(); ctx.translate(shakeX || 0, shakeY || 0); // Sky gradient (background) const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Clouds ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); // Ground ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); // Building shadow on ground ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft + 60, buildingBottomY + 20); ctx.lineTo(bLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // Building body - ONLY bottom half (from breakY down) // Clip to jagged edge at top ctx.save(); ctx.beginPath(); // Start at bottom-left of building ctx.moveTo(bLeft - 10, buildingBottomY + 10); ctx.lineTo(bLeft - 10, jaggedPoints[0].y); // Follow the jagged line across the top for (let i = 0; i < jaggedPoints.length; i++) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y); } ctx.lineTo(bLeft + buildingW + 10, jaggedPoints[jaggedPoints.length - 1].y); ctx.lineTo(bLeft + buildingW + 10, buildingBottomY + 10); ctx.closePath(); ctx.clip(); // Draw building body (full rectangle, but clipped to bottom half) const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.15, '#7a7a7a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(0.85, '#7a7a7a'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); // Building outline ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; if (lineY > breakY - 40) { // Only draw lines below break ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } } // Windows (only those below the break) for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (wp.y + winH < breakY - 50) continue; // Skip windows above break ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } } } ctx.restore(); // End clipping // Draw the jagged torn edge on top of the building (exposed concrete/rebar) // Darker inner edge (exposed interior) ctx.fillStyle = '#3a3a3a'; ctx.beginPath(); ctx.moveTo(jaggedPoints[0].x, jaggedPoints[0].y); for (let i = 1; i < jaggedPoints.length; i++) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y); } // Draw a band below the jagged edge for (let i = jaggedPoints.length - 1; i >= 0; i--) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y + 12); } ctx.closePath(); ctx.fill(); // Rebar sticking out (bent metal rods at jagged edge) ctx.strokeStyle = '#7a5030'; ctx.lineWidth = 3; ctx.lineCap = 'round'; for (let i = 1; i < jaggedPoints.length - 1; i += 2) { const p = jaggedPoints[i]; const bendDir = (i % 4 < 2) ? -1 : 1; ctx.beginPath(); ctx.moveTo(p.x, p.y + 8); ctx.quadraticCurveTo(p.x + bendDir * 8, p.y - 15, p.x + bendDir * 12, p.y - 25); ctx.stroke(); } // Concrete texture along the torn edge ctx.fillStyle = '#555'; for (let i = 0; i < jaggedPoints.length - 1; i++) { const p = jaggedPoints[i]; // Small rubble chunks along the edge ctx.beginPath(); ctx.arc(p.x + 5, p.y + 6, 3 + Math.random() * 3, 0, Math.PI * 2); ctx.fill(); } // Dust/smoke lingering at the break edge ctx.fillStyle = 'rgba(150, 140, 130, 0.2)'; for (let i = 0; i < 5; i++) { const px = bLeft + Math.random() * buildingW; const py = breakY + (Math.random() - 0.5) * 30; ctx.beginPath(); ctx.arc(px, py, 15 + Math.random() * 20, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // End shake translate } // Massive debris explosion from the destroyed top half // Large concrete chunks for (let i = 0; i < 60; i++) { const angle = -Math.PI * 0.1 + Math.random() * Math.PI * 1.2; const spd = 150 + Math.random() * 450; const startX = bLeft + Math.random() * buildingW; const startY = breakY - Math.random() * 150; spawnParticles(startX, startY, 1, { color: Math.random() > 0.5 ? '#888' : (Math.random() > 0.5 ? '#666' : '#aaa'), vx: Math.cos(angle) * spd * (Math.random() > 0.4 ? 1 : -1), vy: -Math.abs(Math.sin(angle)) * spd - 80, size: 8 + Math.random() * 25, life: 1.5 + Math.random() * 1.0, gravity: 500, type: 'chunk' }); } // Glass shard particles from windows for (let i = 0; i < 40; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 300; const startX = bLeft + Math.random() * buildingW; const startY = breakY - 50 - Math.random() * 100; spawnParticles(startX, startY, 1, { color: 'rgba(180, 220, 255, 0.8)', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 60, size: 4 + Math.random() * 10, life: 1.2 + Math.random() * 0.8, gravity: 450, type: 'square' }); } // Smaller debris/dust particles for (let i = 0; i < 50; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 200; spawnParticles(buildingCenterX + (Math.random() - 0.5) * buildingW, breakY - Math.random() * 80, 1, { color: Math.random() > 0.5 ? '#999' : '#bbb', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 100, size: 3 + Math.random() * 8, life: 1.0 + Math.random() * 0.6, gravity: 300, type: 'square' }); } // Fire/explosion particles at the impact zone for (let i = 0; i < 25; i++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 200; spawnParticles(bLeft + Math.random() * buildingW * 0.5, breakY - 30, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ffcc00', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 80, size: 10 + Math.random() * 18, life: 0.6 + Math.random() * 0.5, gravity: -50, type: 'fire' }); } // Ejected tiny zombie position (exits from right side of building) const ejectStartX = bLeft + buildingW + 5; const ejectStartY = breakY; let tinyZombieX = ejectStartX; let tinyZombieY = ejectStartY; let tinyZombieVX = 400; let tinyZombieVY = -300; let tinyZombieRot = 0; let tinyZombieEjected = false; // Wrecking ball continues through to the right after destroying the top // Ball continues swinging in arc past impact (pendulum continues to right) let ballSwingAngle = 0; // Starts at bottom (impact point) let ballSwingVelocity = 2.5; // Angular velocity (radians/sec) - swings to the right await animate(1800 / speed, (t, dt) => { // Screen shake - very intense at start, decays const shakeDecay = Math.max(0, 1 - t * 2); const shakeIntensity = 30 * shakeDecay; const shakeX = Math.sin(t * 80) * shakeIntensity; const shakeY = Math.cos(t * 65) * shakeIntensity * 0.7; // Draw destroyed building (bottom half with jagged edge) drawDestroyedBuilding(shakeX, shakeY); // Update wrecking ball position (pendulum swing continues to right) ballSwingAngle += ballSwingVelocity * dt; ballSwingVelocity *= 0.98; // Damping - slows down // Gravity pulls back toward center (pendulum restoring force) ballSwingVelocity -= Math.sin(ballSwingAngle) * 8 * dt; const ballContinueX = pivotX + Math.sin(ballSwingAngle) * chainLength; const ballContinueY = pivotY + Math.cos(ballSwingAngle) * chainLength; // Draw chain from pivot to ball's mounting loop (ABOVE ball) ctx.save(); ctx.translate(shakeX, shakeY); const chainEndCX = ballContinueX; const chainEndCY = ballContinueY - ballRadius + 8; ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(pivotX, pivotY); ctx.lineTo(chainEndCX, chainEndCY); ctx.stroke(); // Draw the wrecking ball at its current position const ballGrad2 = ctx.createRadialGradient(ballContinueX - 15, ballContinueY - 15, 8, ballContinueX, ballContinueY, ballRadius); ballGrad2.addColorStop(0, '#555'); ballGrad2.addColorStop(0.4, '#333'); ballGrad2.addColorStop(1, '#1a1a1a'); ctx.fillStyle = ballGrad2; ctx.beginPath(); ctx.arc(ballContinueX, ballContinueY, ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(ballContinueX, ballContinueY, ballRadius, 0, Math.PI * 2); ctx.stroke(); ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; ctx.beginPath(); ctx.ellipse(ballContinueX - 15, ballContinueY - 18, 12, 8, -0.3, 0, Math.PI * 2); ctx.fill(); // Mounting ring ctx.strokeStyle = '#555'; ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(ballContinueX, ballContinueY - ballRadius + 12, 10, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // End shake for ball // Eject tiny zombie from right side if (t > 0.1) { if (!tinyZombieEjected) { tinyZombieEjected = true; for (let i = 0; i < 15; i++) { const angle = (Math.random() - 0.5) * Math.PI * 0.6; const spd = 100 + Math.random() * 200; spawnParticles(ejectStartX, ejectStartY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + 100, vy: Math.sin(angle) * spd - 80, size: 3 + Math.random() * 8, life: 1.0 + Math.random() * 0.5, gravity: 350, type: 'circle' }); } } // using passed dt tinyZombieVY += 900 * dt; tinyZombieX += tinyZombieVX * dt; tinyZombieY += tinyZombieVY * dt; tinyZombieVX *= 0.995; tinyZombieRot += 600 * dt; // Draw tiny ejected zombie ctx.save(); ctx.translate(tinyZombieX + shakeX, tinyZombieY + shakeY); ctx.rotate(tinyZombieRot * Math.PI / 180); ctx.scale(0.08, 0.08); const bodyColor = zombie.bodyColor || '#3da854'; ctx.fillStyle = bodyColor; ctx.beginPath(); ctx.ellipse(0, -115, 28, 34, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(-35, -70); ctx.bezierCurveTo(-40, -40, -32, 20, -30, 75); ctx.lineTo(30, 75); ctx.bezierCurveTo(32, 20, 40, -40, 35, -70); ctx.closePath(); ctx.fill(); ctx.fillRect(-55, -60, 14, 65); ctx.fillRect(41, -60, 14, 65); ctx.fillRect(-25, 75, 18, 75); ctx.fillRect(8, 75, 18, 75); ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 6; ctx.beginPath(); ctx.ellipse(0, -115, 28, 34, 0, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // Trail particles if (Math.random() < 0.6) { spawnParticles(tinyZombieX + shakeX, tinyZombieY + shakeY, 1, { color: Math.random() > 0.5 ? '#3dcc10' : '#22ee44', vx: -tinyZombieVX * 0.1 + (Math.random() - 0.5) * 30, vy: -tinyZombieVY * 0.05 + (Math.random() - 0.5) * 20, size: 2 + Math.random() * 5, life: 0.4 + Math.random() * 0.3, gravity: 200, type: 'circle' }); } } // Continued debris falling from the broken edge if (t < 0.7 && Math.random() < 0.5) { const debrisX = bLeft + Math.random() * buildingW; spawnParticles(debrisX + shakeX, breakY + (Math.random() - 0.5) * 30 + shakeY, 1, { color: Math.random() > 0.5 ? '#777' : '#555', vx: (Math.random() - 0.5) * 60, vy: 40 + Math.random() * 80, size: 3 + Math.random() * 8, life: 0.8 + Math.random() * 0.5, gravity: 500, type: 'square' }); } // Dust cloud rising from destruction if (t < 0.5 && Math.random() < 0.4) { spawnParticles(buildingCenterX + (Math.random() - 0.5) * buildingW + shakeX, breakY - 20 + shakeY, 1, { color: 'rgba(150, 140, 120, 0.5)', vx: (Math.random() - 0.5) * 50, vy: -40 - Math.random() * 60, size: 15 + Math.random() * 25, life: 1.2 + Math.random() * 0.8, gravity: -20, type: 'circle' }); } // Screen flash at moment of impact if (t < 0.06) { ctx.fillStyle = `rgba(255, 255, 220, ${0.5 * (1 - t / 0.06)})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Phase 5: Hold on destroyed building scene (1000ms) await animate(1000 / speed, (t, dt) => { drawDestroyedBuilding(0, 0); // Draw ball at rest position (continues gentle pendulum swing) ballSwingAngle += ballSwingVelocity * dt; ballSwingVelocity *= 0.97; ballSwingVelocity -= Math.sin(ballSwingAngle) * 8 * dt; const restBallX = pivotX + Math.sin(ballSwingAngle) * chainLength; const restBallY = pivotY + Math.cos(ballSwingAngle) * chainLength; ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(pivotX, pivotY); ctx.lineTo(restBallX, restBallY - ballRadius + 8); ctx.stroke(); const ballGrad3 = ctx.createRadialGradient(restBallX - 15, restBallY - 15, 8, restBallX, restBallY, ballRadius); ballGrad3.addColorStop(0, '#555'); ballGrad3.addColorStop(0.4, '#333'); ballGrad3.addColorStop(1, '#1a1a1a'); ctx.fillStyle = ballGrad3; ctx.beginPath(); ctx.arc(restBallX, restBallY, ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.stroke(); // Specular highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; ctx.beginPath(); ctx.ellipse(restBallX - 15, restBallY - 18, 12, 8, -0.3, 0, Math.PI * 2); ctx.fill(); // Mounting ring ctx.strokeStyle = '#555'; ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(restBallX, restBallY - ballRadius + 12, 10, 0, Math.PI * 2); ctx.stroke(); // Occasional small debris still falling from the jagged edge if (Math.random() < 0.1) { const debrisX = bLeft + Math.random() * buildingW; spawnParticles(debrisX, breakY + 10, 1, { color: '#777', vx: (Math.random() - 0.5) * 20, vy: 30 + Math.random() * 40, size: 2 + Math.random() * 5, life: 0.6, gravity: 400, type: 'square' }); } // Dust/smoke settling if (t < 0.5 && Math.random() < 0.2) { spawnParticles(buildingCenterX + (Math.random() - 0.5) * buildingW, breakY - 10, 1, { color: 'rgba(150, 140, 120, 0.3)', vx: (Math.random() - 0.5) * 25, vy: -20 - Math.random() * 25, size: 10 + Math.random() * 15, life: 0.8 + Math.random() * 0.5, gravity: 15, type: 'circle' }); } }); // Count kill now (wreckingball is interactive, handles its own counting) incrementSpecimens(); // Store ball's final resting position for the scroll const finalBallX = pivotX + Math.sin(ballSwingAngle) * chainLength; const finalBallY = pivotY + Math.cos(ballSwingAngle) * chainLength; // Phase 6: Scene scrolls left, new intact building scrolls in from right (2000ms) const scrollDistance = CANVAS_WIDTH + 100; await animate(2000 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const scrollX = -easeInOut * scrollDistance; // Fixed sky background const skyGrad6 = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad6.addColorStop(0, '#5da3d9'); skyGrad6.addColorStop(0.7, '#87CEEB'); skyGrad6.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad6; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Fixed clouds ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); // Scrolling world ctx.save(); ctx.translate(scrollX, 0); // Ground (extends across both building positions) ctx.fillStyle = '#5a5a5a'; ctx.fillRect(-100, buildingBottomY, scrollDistance + CANVAS_WIDTH + 200, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(-100, buildingBottomY, scrollDistance + CANVAS_WIDTH + 200, 4); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(-100, buildingBottomY, scrollDistance + CANVAS_WIDTH + 200, 20); // === DESTROYED BUILDING (at original position) === // Building shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft + 60, buildingBottomY + 20); ctx.lineTo(bLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // Clipped bottom half with jagged edge ctx.save(); ctx.beginPath(); ctx.moveTo(bLeft - 10, buildingBottomY + 10); ctx.lineTo(bLeft - 10, jaggedPoints[0].y); for (let i = 0; i < jaggedPoints.length; i++) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y); } ctx.lineTo(bLeft + buildingW + 10, jaggedPoints[jaggedPoints.length - 1].y); ctx.lineTo(bLeft + buildingW + 10, buildingBottomY + 10); ctx.closePath(); ctx.clip(); const bGrad6 = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad6.addColorStop(0, '#6a6a6a'); bGrad6.addColorStop(0.5, '#888'); bGrad6.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad6; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Windows below break on destroyed building for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (wp.y + winH < breakY - 50) continue; ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); } } ctx.restore(); // End destroyed building clip // Jagged edge on destroyed building ctx.fillStyle = '#3a3a3a'; ctx.beginPath(); ctx.moveTo(jaggedPoints[0].x, jaggedPoints[0].y); for (let i = 1; i < jaggedPoints.length; i++) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y); } for (let i = jaggedPoints.length - 1; i >= 0; i--) { ctx.lineTo(jaggedPoints[i].x, jaggedPoints[i].y + 12); } ctx.closePath(); ctx.fill(); // Rebar on destroyed building ctx.strokeStyle = '#7a5030'; ctx.lineWidth = 3; ctx.lineCap = 'round'; for (let i = 1; i < jaggedPoints.length - 1; i += 2) { const p = jaggedPoints[i]; const bendDir = (i % 4 < 2) ? -1 : 1; ctx.beginPath(); ctx.moveTo(p.x, p.y + 8); ctx.quadraticCurveTo(p.x + bendDir * 8, p.y - 15, p.x + bendDir * 12, p.y - 25); ctx.stroke(); } // Chain and ball (scrolls with destroyed building) ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(pivotX, pivotY); ctx.lineTo(finalBallX, finalBallY - ballRadius + 8); ctx.stroke(); const ballGrad6 = ctx.createRadialGradient(finalBallX - 15, finalBallY - 15, 8, finalBallX, finalBallY, ballRadius); ballGrad6.addColorStop(0, '#555'); ballGrad6.addColorStop(0.4, '#333'); ballGrad6.addColorStop(1, '#1a1a1a'); ctx.fillStyle = ballGrad6; ctx.beginPath(); ctx.arc(finalBallX, finalBallY, ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.stroke(); // === NEW INTACT BUILDING (at scrollDistance to the right) === const newBLeft = bLeft + scrollDistance; // New building shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(newBLeft + buildingW, buildingBottomY); ctx.lineTo(newBLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(newBLeft + 60, buildingBottomY + 20); ctx.lineTo(newBLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // New building body const bGrad6n = ctx.createLinearGradient(newBLeft, 0, newBLeft + buildingW, 0); bGrad6n.addColorStop(0, '#6a6a6a'); bGrad6n.addColorStop(0.15, '#7a7a7a'); bGrad6n.addColorStop(0.5, '#888'); bGrad6n.addColorStop(0.85, '#7a7a7a'); bGrad6n.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad6n; ctx.fillRect(newBLeft, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(newBLeft, buildingTopY, buildingW, buildingH); // New building roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(newBLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separators on new building ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(newBLeft + 5, lineY); ctx.lineTo(newBLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows on new building for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wx = newBLeft + winMarginX + col * (winW + winGapX); const wy = buildingTopY + winMarginY + row * (winH + winGapY); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wx - 2, wy - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wx, wy, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wx + 2, wy + 2, winW - 4, winH - 4); } if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wx + 3, wy + 3); ctx.lineTo(wx + winW * 0.4, wy + 3); ctx.lineTo(wx + 3, wy + winH * 0.4); ctx.closePath(); ctx.fill(); } } } ctx.restore(); // End scrolling world }); // Phase 7: Zoom into new building's zombie window until it fills the screen (2200ms) await animate(2200 / speed, (t, dt) => { const easeIn = t * t * (3 - 2 * t); // smoothstep const zwp = getWinPos(zombieWinRow, zombieWinCol); const winCenterX = zwp.x + winW / 2; const winCenterY = zwp.y + winH / 2; // Scale: 1.0 (full building) -> large enough that window fills screen const scaleForWidth = CANVAS_WIDTH / winW; const scaleForHeight = CANVAS_HEIGHT / winH; const endScale = Math.max(scaleForWidth, scaleForHeight); const startScale = 1.0; const currentScale = startScale + (endScale - startScale) * easeIn; // Sky background const skyGrad7 = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad7.addColorStop(0, '#5da3d9'); skyGrad7.addColorStop(0.7, '#87CEEB'); skyGrad7.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad7; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Zoom-to-point transform: keep winCenter mapped to a screen point that // interpolates from its natural position (at scale 1) to screen center (at endScale) const screenX = winCenterX + (CANVAS_WIDTH / 2 - winCenterX) * easeIn; const screenY = winCenterY + (CANVAS_HEIGHT / 2 - winCenterY) * easeIn; const tx = screenX - winCenterX * currentScale; const ty = screenY - winCenterY * currentScale; ctx.save(); ctx.translate(tx, ty); ctx.scale(currentScale, currentScale); // Draw building (inline) const bLeft7 = buildingCenterX - buildingW / 2; // Clouds (fade out as we zoom in) if (currentScale < 3) { const cloudAlpha = Math.min(1, (3 - currentScale) / 2); ctx.fillStyle = `rgba(255, 255, 255, ${cloudAlpha * 0.7})`; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); } // Ground ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); // Building shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft7 + buildingW, buildingBottomY); ctx.lineTo(bLeft7 + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft7 + 60, buildingBottomY + 20); ctx.lineTo(bLeft7, buildingBottomY); ctx.closePath(); ctx.fill(); // Building body const bGrad7 = ctx.createLinearGradient(bLeft7, 0, bLeft7 + buildingW, 0); bGrad7.addColorStop(0, '#6a6a6a'); bGrad7.addColorStop(0.15, '#7a7a7a'); bGrad7.addColorStop(0.5, '#888'); bGrad7.addColorStop(0.85, '#7a7a7a'); bGrad7.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad7; ctx.fillRect(bLeft7, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft7, buildingTopY, buildingW, buildingH); // Roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft7 - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft7 + 5, lineY); ctx.lineTo(bLeft7 + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); // Zombie's window shows dark empty room (game background) if (row === zombieWinRow && col === zombieWinCol) { ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = window.gameConfig.settings.backgroundColor || '#0c1225'; ctx.fillRect(wp.x, wp.y, winW, winH); continue; } ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wp.x + 3, wp.y + 3); ctx.lineTo(wp.x + winW * 0.4, wp.y + 3); ctx.lineTo(wp.x + 3, wp.y + winH * 0.4); ctx.closePath(); ctx.fill(); } } } ctx.restore(); // End zoom transform }); // Phase 7b: Window now fills the screen. Fade the window panel out to reveal the lab (800ms) // The game loop draws the lab background underneath each frame. // We overlay the window glass color (#1a2a45) and fade it from fully opaque to transparent. await animate(800 / speed, (t, dt) => { // Smooth ease-in fade so the beginning feels like a gentle dissolve const overlayAlpha = Math.pow(1 - t, 1.5); if (overlayAlpha > 0.005) { ctx.save(); ctx.globalAlpha = overlayAlpha; // Window interior color matches the building glass — no border flash ctx.fillStyle = '#1a2a45'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); ctx.restore(); } }); // Phase 8: Reset game state and spawn new zombie via door animation zombie = null; particles = []; slicedPieces = []; isAnimating = false; highlightMethod(null); bgDarkenTarget = 0; bgDarkenOpacity = 0; // Spawn fresh zombie with entrance door animation await spawnZombieWithDoorAnimation(); // Cancel any auto-reset since we handled it ourselves cancelAutoReset(); }, // 18. BLACK HOLE - Sucks zombie then entire screen into singularity blackhole: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('blackhole_sound'); // Black hole appears in the middle of the screen; zombie is drawn above it const holeX = CANVAS_WIDTH / 2; const holeY = CANVAS_HEIGHT / 2; const HOLE_SIZE = 65; // Fixed size - never changes zombie.isRagdolling = true; // Helper: draw the black hole at its fixed size function drawBlackHole(targetCtx, intensity) { targetCtx.save(); targetCtx.translate(holeX, holeY); // Accretion disk const gradient = targetCtx.createRadialGradient(0, 0, 10, 0, 0, HOLE_SIZE); gradient.addColorStop(0, '#000'); gradient.addColorStop(0.3, '#220044'); gradient.addColorStop(0.6, '#4400aa'); gradient.addColorStop(1, 'rgba(100, 0, 200, 0)'); targetCtx.fillStyle = gradient; targetCtx.beginPath(); targetCtx.arc(0, 0, HOLE_SIZE, 0, Math.PI * 2); targetCtx.fill(); // Event horizon targetCtx.fillStyle = '#000'; targetCtx.beginPath(); targetCtx.arc(0, 0, HOLE_SIZE * 0.35, 0, Math.PI * 2); targetCtx.fill(); // Swirling matter const numDots = 12 + Math.floor(intensity * 10); for (let i = 0; i < numDots; i++) { const angle = Date.now() * 0.004 + i * 0.5; const dist = HOLE_SIZE * 0.45 + Math.sin(i * 1.3) * 12; targetCtx.fillStyle = `rgba(200, 100, 255, ${0.4 + intensity * 0.2})`; targetCtx.beginPath(); targetCtx.arc(Math.cos(angle) * dist, Math.sin(angle) * dist * 0.35, 3, 0, Math.PI * 2); targetCtx.fill(); } targetCtx.restore(); } // Phase 1: Black hole fades in at full size — zombie drawn above it (800ms) await animate(800 / speed, (t, dt) => { ctx.save(); ctx.globalAlpha = t; drawBlackHole(ctx, t * 0.5); ctx.restore(); // Redraw zombie on top of black hole if (zombie) zombie.draw(ctx); // Zombie notices something below if (t > 0.4) { zombie.applyImpulse((Math.random() - 0.5) * 10, -5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 5; } } }); // Phase 2: Black hole hovers, zombie gets nervous (1500ms) await animate(1500 / speed, (t, dt) => { drawBlackHole(ctx, 0.5 + t * 0.5); // Redraw zombie on top of black hole if (zombie) zombie.draw(ctx); // Zombie starts feeling pull if (t > 0.5) { zombie.applyImpulse( (holeX - zombie.baseX) * 0.015, (holeY - zombie.baseY) * 0.015 ); } // Particles spiraling toward black hole if (Math.random() < 0.35) { const angle = Math.random() * Math.PI * 2; const dist = 150 + Math.random() * 200; spawnParticles( holeX + Math.cos(angle) * dist, holeY + Math.sin(angle) * dist, 1, { color: '#8800ff', vx: -Math.cos(angle) * dist * 1.5, vy: -Math.sin(angle) * dist * 1.5, size: 3, life: 0.5, gravity: 0 } ); } }); // Phase 3: Suck the zombie into the black hole (2000ms) await animate(2000 / speed, (t, dt) => { // Draw black hole first (behind zombie) drawBlackHole(ctx, 1); // Pull zombie toward black hole center (accelerating) const pullT = t * t; zombie.baseX += (holeX - zombie.baseX) * pullT * 0.06; zombie.baseY += (holeY - zombie.baseY) * pullT * 0.06; // Shrink and spin zombie as it gets sucked in zombie.globalScale = Math.max(0.01, 1 - t * 1.1); zombie.parts.torso.rotation += t * 25; // Spaghettification stretch toward hole zombie.parts.torso.scaleY = 1 + t * 1.8; zombie.parts.torso.scaleX = Math.max(0.3, 1 - t * 0.6); // Fade out zombie in last 30% if (t > 0.7) { zombie.globalAlpha = 1 - (t - 0.7) / 0.3; } // Redraw zombie on top of black hole if (zombie) zombie.draw(ctx); // Zombie flails toward the hole zombie.applyImpulse( (holeX - zombie.baseX) * 0.4, (holeY - zombie.baseY) * 0.4 ); // Particles streaming from zombie toward hole if (Math.random() < 0.6) { const angle = Math.random() * Math.PI * 2; const dist = 60 * (1 - t); spawnParticles( zombie.baseX + Math.cos(angle) * dist, zombie.baseY + Math.sin(angle) * dist, 1, { color: Math.random() > 0.5 ? '#8800ff' : '#4400cc', vx: (holeX - zombie.baseX) * 2, vy: (holeY - zombie.baseY) * 2, size: 3 + Math.random() * 4, life: 0.3, gravity: 0 } ); } }); // Zombie is gone zombie.globalAlpha = 0; // Count the kill incrementSpecimens(); // Phase 4: Take a stamp snapshot of the entire screen WITHOUT the black hole // Wait one frame so the game loop renders without the zombie (and we don't draw the black hole) await animate(50 / speed, (t, dt) => { // Don't draw the black hole - we want a clean stamp without it }); // Capture the current canvas as the stamp (shows: background, doors, particles - NO black hole or zombie) const stampCanvas = document.createElement('canvas'); stampCanvas.width = CANVAS_WIDTH; stampCanvas.height = CANVAS_HEIGHT; const stampCtx = stampCanvas.getContext('2d'); stampCtx.drawImage(canvas, 0, 0); // Hide UI elements const toolbar = document.getElementById('toolbar'); const headerUI = document.getElementById('header-ui'); const resetBtn = document.getElementById('reset-button'); toolbar.style.transition = 'opacity 0.8s ease-in'; toolbar.style.opacity = '0'; headerUI.style.transition = 'opacity 0.8s ease-in'; headerUI.style.opacity = '0'; resetBtn.style.transition = 'opacity 0.8s ease-in'; resetBtn.style.opacity = '0'; // Phase 5: Suck the stamped image into the black hole dramatically (3000ms) // Black rectangle behind, stamp on top shrinking/spinning into the hole await animate(3000 / speed, (t, dt) => { // Black background (the "cover" that will remain) ctx.fillStyle = '#000'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Animate the stamp being sucked toward the black hole // Accelerating pull with dramatic spin const suckT = t < 0.4 ? t * t * 6.25 : 0.4 * 0.4 * 6.25 + (t - 0.4) * (1 - 0.4 * 0.4 * 6.25) / 0.6; // Ease: slow start then accelerate const easedT = Math.min(1, t * t * 1.5); // Quadratic acceleration capped at 1 const scale = Math.max(0.0, 1 - easedT); const rotation = t * t * 8 * Math.PI; // Accelerating spin (4 full rotations) // Move stamp center toward black hole position const stampCenterX = CANVAS_WIDTH / 2 + (holeX - CANVAS_WIDTH / 2) * easedT; const stampCenterY = CANVAS_HEIGHT / 2 + (holeY - CANVAS_HEIGHT / 2) * easedT; if (scale > 0.005) { ctx.save(); ctx.translate(stampCenterX, stampCenterY); ctx.rotate(rotation); ctx.scale(scale, scale); // Draw the stamp image centered ctx.drawImage(stampCanvas, -CANVAS_WIDTH / 2, -CANVAS_HEIGHT / 2); ctx.restore(); // Warp streaks being pulled inward toward the hole (dramatic effect) if (t > 0.1 && t < 0.85) { const streakIntensity = Math.sin((t - 0.1) / 0.75 * Math.PI) * 0.5; for (let i = 0; i < 12; i++) { const angle = (i / 12) * Math.PI * 2 + t * 3; const startDist = 200 * (1 - easedT * 0.5); const endDist = 30 * (1 - easedT); ctx.strokeStyle = `rgba(150, 50, 255, ${streakIntensity})`; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(holeX + Math.cos(angle) * startDist, holeY + Math.sin(angle) * startDist); ctx.lineTo(holeX + Math.cos(angle) * endDist, holeY + Math.sin(angle) * endDist); ctx.stroke(); } } } // Draw the black hole on top (always visible as the attractor) drawBlackHole(ctx, 1); // Particles spiraling inward if (Math.random() < 0.4 && t < 0.9) { const angle = Math.random() * Math.PI * 2; const dist = 120 + Math.random() * 150; spawnParticles( holeX + Math.cos(angle) * dist, holeY + Math.sin(angle) * dist, 1, { color: Math.random() > 0.5 ? '#8800ff' : '#4400cc', vx: -Math.cos(angle) * dist * 3, vy: -Math.sin(angle) * dist * 3, size: 3, life: 0.3, gravity: 0 } ); } }); // Phase 6: Black screen remains with black hole fading away (1000ms) await animate(1000 / speed, (t, dt) => { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Black hole fades and shrinks away if (t < 0.8) { ctx.save(); ctx.globalAlpha = 1 - t / 0.8; drawBlackHole(ctx, 1 - t); ctx.restore(); } }); // Phase 7: Pure black pause (400ms) await animate(400 / speed, (t, dt) => { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // Phase 8: Fade away the black cover to reveal new scene (2500ms) // Reset zombie while screen is black zombie = null; particles = []; slicedPieces = []; zombie = new Zombie( CANVAS_WIDTH / 2, CANVAS_HEIGHT * window.gameConfig.zombie.positionY, window.gameConfig.zombie.scale ); // Fade UI back in toolbar.style.transition = 'opacity 2s ease-out'; toolbar.style.opacity = ''; headerUI.style.transition = 'opacity 2s ease-out'; headerUI.style.opacity = ''; resetBtn.style.transition = 'opacity 2s ease-out'; resetBtn.style.opacity = ''; // Slowly fade from black to reveal the fresh scene await animate(2500 / speed, (t, dt) => { const fadeAlpha = 1 - (t * t); // Quadratic ease - starts fast then slows ctx.fillStyle = `rgba(0, 0, 0, ${fadeAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // Clean up transition styles toolbar.style.transition = ''; headerUI.style.transition = ''; resetBtn.style.transition = ''; // Reset background darkening bgDarkenTarget = 0; bgDarkenOpacity = 0; // Cancel auto-reset since we handled the full reset ourselves cancelAutoReset(); // Re-enable buttons isAnimating = false; setButtonsEnabled(true); highlightMethod(null); }, // 19. LAVA - Rising lava, zombie flails and sinks, lava drains lava: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('lava_sound'); zombie.isRagdolling = true; // Lava rises to the bottom one-third of the screen const lavaTargetLevel = CANVAS_HEIGHT - (CANVAS_HEIGHT / 3); let lavaLevel = CANVAS_HEIGHT; // Helper: draw lava at current level function drawLava(level) { ctx.fillStyle = '#ff3300'; ctx.fillRect(0, level, CANVAS_WIDTH, CANVAS_HEIGHT - level); // Surface bubbles ctx.fillStyle = '#ff6600'; for (let x = 0; x < CANVAS_WIDTH; x += 30) { const waveY = level + 8 + Math.sin(Date.now() * 0.003 + x * 0.05) * 10; ctx.beginPath(); ctx.arc(x, waveY, 20, 0, Math.PI, true); ctx.fill(); } // Random bubbles popping if (Math.random() < 0.3) { const bx = Math.random() * CANVAS_WIDTH; spawnParticles(bx, level + 28, 1, { color: '#ffaa00', vy: -50, size: 10 + Math.random() * 15, life: 0.5, gravity: -100, type: 'circle' }); } } // Phase 1: Lava rises to the bottom one-third of the screen (2500ms) await animate(2500 / speed, (t, dt) => { // Move lavaLevel from bottom (CANVAS_HEIGHT) up to lavaTargetLevel (bottom 1/3 => CANVAS_HEIGHT * 2/3) lavaLevel = CANVAS_HEIGHT - t * (CANVAS_HEIGHT - lavaTargetLevel); drawLava(lavaLevel); // Zombie panics as lava approaches its lower body if (lavaLevel < zombie.baseY + 120) { zombie.applyImpulse((Math.random() - 0.5) * 40, -20); } // Black smoke emits when rising lava contacts the zombie body if (lavaLevel < zombie.baseY + 280 && Math.random() < 0.8) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, lavaLevel - 5, 1, { color: Math.random() > 0.3 ? '#111' : '#222', vx: (Math.random() - 0.5) * 40, vy: -150 - Math.random() * 100, size: 12 + Math.random() * 20, life: 1.0 + Math.random() * 0.6, gravity: -40, type: 'circle' } ); } }); // Phase 2: Zombie flails and slowly sinks into the lava while emitting black smoke (4000ms) const sinkStartY = zombie.baseY; // Zombie needs to sink until fully submerged below the lava level const sinkDistance = (CANVAS_HEIGHT - lavaTargetLevel) + 100; // Sink well below lava surface await animate(4000 / speed, (t, dt) => { // Draw lava (stays at half screen) drawLava(lavaTargetLevel); // Zombie sinks slowly (accelerating slightly) const sinkT = t * t * 0.5 + t * 0.5; // Mix of linear and quadratic zombie.baseY = sinkStartY + sinkT * sinkDistance; // Zombie flails wildly zombie.applyImpulse( (Math.random() - 0.5) * 60, (Math.random() - 0.5) * 30 ); // Arms flail outward (trying to escape) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 100 + Math.sin(t * 25) * 30; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -100 - Math.sin(t * 25 + 1.5) * 30; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 20 + Math.abs(Math.sin(t * 30)) * 30; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -20 - Math.abs(Math.sin(t * 30 + 1)) * 30; } if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 18) * 20; } // Legs kick outward if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 15 + Math.abs(Math.sin(t * 20)) * 20; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -15 - Math.abs(Math.sin(t * 20 + Math.PI)) * 20; } // Flailing intensity decreases as zombie sinks deeper const flailDecay = Math.max(0, 1 - t * 1.2); if (flailDecay < 0.3) { for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && part.attached && partName !== 'torso') { part.angularVelocity *= 0.95; } } } // Black smoke emitting from where the zombie touches the lava surface if (Math.random() < 0.6) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, lavaTargetLevel, 1, { color: Math.random() > 0.3 ? '#111' : '#222', vx: (Math.random() - 0.5) * 40, vy: -80 - Math.random() * 80, size: 15 + Math.random() * 25, life: 1.2 + Math.random() * 0.8, gravity: -40, type: 'circle' } ); } // Orange/yellow heat glow particles near lava surface if (Math.random() < 0.3 && zombie.baseY > lavaTargetLevel - 100) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 50, lavaTargetLevel + 10, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ffaa00', vx: (Math.random() - 0.5) * 30, vy: -30 - Math.random() * 40, size: 6 + Math.random() * 10, life: 0.4 + Math.random() * 0.3, gravity: -60, type: 'fire' } ); } // Fade zombie as it goes below lava surface const submergeProgress = (zombie.baseY - (lavaTargetLevel + 50)) / 150; if (submergeProgress > 0) { zombie.globalAlpha = Math.max(0, 1 - submergeProgress); } }); // Zombie is fully submerged zombie.globalAlpha = 0; // Phase 3: Brief pause with lava bubbling where zombie sank (800ms) await animate(800 / speed, (t, dt) => { drawLava(lavaTargetLevel); // Extra bubbling where zombie went under if (Math.random() < 0.5) { spawnParticles(zombie.baseX + (Math.random() - 0.5) * 80, lavaTargetLevel + 20, 1, { color: '#ffaa00', vy: -40 - Math.random() * 40, size: 8 + Math.random() * 12, life: 0.4, gravity: -80, type: 'circle' }); } // Black smoke still rising if (Math.random() < 0.3) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, lavaTargetLevel - 10, 1, { color: '#111', vx: (Math.random() - 0.5) * 20, vy: -60 - Math.random() * 50, size: 12 + Math.random() * 18, life: 1.0 + Math.random() * 0.5, gravity: -30, type: 'circle' } ); } }); // Phase 4: Lava drains away (3000ms) await animate(3000 / speed, (t, dt) => { lavaLevel = lavaTargetLevel + t * (CANVAS_HEIGHT - lavaTargetLevel); if (lavaLevel < CANVAS_HEIGHT - 10) { drawLava(lavaLevel); } // Steam as lava recedes if (Math.random() < 0.2 && lavaLevel < CANVAS_HEIGHT - 50) { spawnParticles( Math.random() * CANVAS_WIDTH, lavaLevel - 15, 1, { color: '#555', vy: -60 - Math.random() * 40, vx: (Math.random() - 0.5) * 30, size: 12 + Math.random() * 15, life: 0.8 + Math.random() * 0.4, gravity: -30, type: 'circle' } ); } }); await animate(500 / speed, () => {}); }, // 20. BEES - Angry bee swarm attack with darting sting behavior bees: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('bees_sound'); zombie.isRagdolling = true; const bees = []; const stingMarks = []; // Red dots on zombie body where stung // Optimize bee drawing with offscreen canvases for performance on mobile const beeCanvasUp = document.createElement('canvas'); beeCanvasUp.width = 24; beeCanvasUp.height = 24; const bCtxUp = beeCanvasUp.getContext('2d'); bCtxUp.translate(12, 12); bCtxUp.fillStyle = '#ffcc00'; bCtxUp.beginPath(); bCtxUp.ellipse(0, 0, 8, 5, 0, 0, Math.PI * 2); bCtxUp.fill(); bCtxUp.fillStyle = '#000'; bCtxUp.fillRect(-3, -5, 2, 10); bCtxUp.fillRect(2, -5, 2, 10); bCtxUp.fillStyle = 'rgba(200, 220, 255, 0.6)'; bCtxUp.beginPath(); bCtxUp.ellipse(-2, -7, 5, 3, -0.3, 0, Math.PI * 2); bCtxUp.fill(); bCtxUp.beginPath(); bCtxUp.ellipse(2, -7, 5, 3, 0.3, 0, Math.PI * 2); bCtxUp.fill(); const beeCanvasDown = document.createElement('canvas'); beeCanvasDown.width = 24; beeCanvasDown.height = 24; const bCtxDown = beeCanvasDown.getContext('2d'); bCtxDown.translate(12, 12); bCtxDown.fillStyle = '#ffcc00'; bCtxDown.beginPath(); bCtxDown.ellipse(0, 0, 8, 5, 0, 0, Math.PI * 2); bCtxDown.fill(); bCtxDown.fillStyle = '#000'; bCtxDown.fillRect(-3, -5, 2, 10); bCtxDown.fillRect(2, -5, 2, 10); bCtxDown.fillStyle = 'rgba(200, 220, 255, 0.6)'; bCtxDown.beginPath(); bCtxDown.ellipse(-2, -5, 5, 3, -0.3, 0, Math.PI * 2); bCtxDown.fill(); bCtxDown.beginPath(); bCtxDown.ellipse(2, -5, 5, 3, 0.3, 0, Math.PI * 2); bCtxDown.fill(); const numBees = 50; // Full swarm size for all devices since we cache the rendering now // Create bee swarm - hover anywhere on screen for (let i = 0; i < numBees; i++) { bees.push({ x: Math.random() * CANVAS_WIDTH, y: Math.random() * CANVAS_HEIGHT, hoverX: Math.random() * CANVAS_WIDTH, hoverY: Math.random() * CANVAS_HEIGHT, phase: Math.random() * Math.PI * 2, // Attack state state: 'hover', // 'hover', 'attack', 'retreat' attackTimer: 0.1 + Math.random() * 0.4, // Time before first attack (very fast) attackTargetX: 0, attackTargetY: 0, retreatTimer: 0 }); } // Helper: get a random point on the zombie's body with part-local coords // Returns world position for bee targeting AND part-local coords for sting mark rendering function getRandomZombiePoint() { const scale = zombie.scale * zombie.globalScale; // Each region maps to a body part with part-local coordinate offsets const regions = [ { partName: 'head', x: 0, y: -115, localX: 0, localY: 0, r: 25 }, { partName: 'torso', x: 0, y: -30, localX: 0, localY: -30, r: 30 }, { partName: 'torso', x: 0, y: 30, localX: 0, localY: 30, r: 25 }, { partName: 'leftUpperArm', x: -48, y: -30, localX: 0, localY: 35, r: 10 }, { partName: 'rightUpperArm', x: 48, y: -30, localX: 0, localY: 35, r: 10 }, { partName: 'leftThigh', x: -22, y: 120, localX: 0, localY: 40, r: 14 }, { partName: 'rightThigh', x: 22, y: 120, localX: 0, localY: 40, r: 14 }, ]; const region = regions[Math.floor(Math.random() * regions.length)]; const offsetX = (Math.random() - 0.5) * region.r * 2; const offsetY = (Math.random() - 0.5) * region.r * 2; return { x: zombie.baseX + (region.x + offsetX) * scale, y: zombie.baseY + (region.y + offsetY) * scale, // Part-local coords for rendering sting marks on the body part partName: region.partName, partLocalX: region.localX + offsetX, partLocalY: region.localY + offsetY }; } // Store sting marks on the zombie's parts so they follow body movement // Initialize stingMarks array on each part for (const partName in zombie.parts) { zombie.parts[partName].stingMarks = []; } await animate(4000 / speed, (t, dt) => { // using passed dt // Update and draw bees bees.forEach((bee, i) => { bee.attackTimer -= dt; if (bee.state === 'hover') { // Hover at random screen position with gentle movement bee.x += (bee.hoverX - bee.x) * 0.03; bee.y += (bee.hoverY - bee.y) * 0.03; bee.x += Math.sin(Date.now() * 0.015 + bee.phase) * 2; bee.y += Math.cos(Date.now() * 0.018 + bee.phase) * 1.5; // Retarget hover position occasionally if (Math.random() < 0.01) { bee.hoverX = Math.random() * CANVAS_WIDTH; bee.hoverY = Math.random() * CANVAS_HEIGHT; } // Start attack when timer expires if (bee.attackTimer <= 0) { bee.state = 'attack'; const target = getRandomZombiePoint(); bee.attackTargetX = target.x; bee.attackTargetY = target.y; bee.attackPartName = target.partName; bee.attackPartLocalX = target.partLocalX; bee.attackPartLocalY = target.partLocalY; } } else if (bee.state === 'attack') { // Quick, sharp dart toward the zombie const dx = bee.attackTargetX - bee.x; const dy = bee.attackTargetY - bee.y; const dist = Math.sqrt(dx * dx + dy * dy); // Move fast and direct - very aggressive darting const speed = 30; bee.x += (dx / dist) * speed; bee.y += (dy / dist) * speed; // Reached target - sting! if (dist < 15) { bee.state = 'retreat'; bee.retreatTimer = 0.08 + Math.random() * 0.12; // Add a sting mark on the specific body part const partMarks = zombie.parts[bee.attackPartName]; if (partMarks && partMarks.stingMarks) { partMarks.stingMarks.push({ x: bee.attackPartLocalX, y: bee.attackPartLocalY, size: 1 + Math.random() * 3 }); } stingMarks.push(1); // Still count for swelling logic // Set new hover position (retreat outward) const retreatAngle = Math.atan2(bee.y - zombie.baseY, bee.x - zombie.baseX); bee.hoverX = bee.x + Math.cos(retreatAngle) * (150 + Math.random() * 200); bee.hoverY = bee.y + Math.sin(retreatAngle) * (150 + Math.random() * 200); // Clamp to screen bee.hoverX = Math.max(50, Math.min(CANVAS_WIDTH - 50, bee.hoverX)); bee.hoverY = Math.max(50, Math.min(CANVAS_HEIGHT - 50, bee.hoverY)); // Zombie flinches from sting zombie.applyImpulse((Math.random() - 0.5) * 60, (Math.random() - 0.5) * 30); } } else if (bee.state === 'retreat') { // Quick retreat away from zombie bee.x += (bee.hoverX - bee.x) * 0.12; bee.y += (bee.hoverY - bee.y) * 0.12; bee.retreatTimer -= dt; if (bee.retreatTimer <= 0) { bee.state = 'hover'; bee.attackTimer = 0.05 + Math.random() * 0.25; // Wait before next attack (rapid fire) } } // Draw bee ctx.save(); ctx.translate(bee.x, bee.y); // Face movement direction when attacking let beeAngle = Math.sin(Date.now() * 0.1 + i) * 0.3; if (bee.state === 'attack') { beeAngle = Math.atan2(bee.attackTargetY - bee.y, bee.attackTargetX - bee.x); } ctx.rotate(beeAngle); const wingFlutter = bee.state === 'attack' ? 0.08 : 0.04; const wingUp = Math.sin(Date.now() * wingFlutter + i) > 0; ctx.drawImage(wingUp ? beeCanvasUp : beeCanvasDown, -12, -12); ctx.restore(); }); const stingMultiplier = 50 / numBees; const effectiveStings = stingMarks.length * stingMultiplier; // Zombie reacts more as stings accumulate if (effectiveStings > 5 && Math.random() < 0.15) { zombie.applyImpulse((Math.random() - 0.5) * 80, (Math.random() - 0.5) * 40); } // Swelling effect - zombie inflates from stings if (effectiveStings > 15) { const swell = 1 + (effectiveStings - 15) * 0.02; zombie.parts.head.scaleX = Math.min(swell, 1.6); zombie.parts.head.scaleY = Math.min(swell, 1.6); } if (effectiveStings > 25) { const swell = 1 + (effectiveStings - 25) * 0.015; zombie.parts.torso.scaleX = Math.min(swell, 1.4); } }); // Bees done stinging - zombie collapses into a heap // Brief moment of swaying before falling await animate(600 / speed, (t, dt) => { // Zombie sways dramatically as it succumbs to the venom zombie.parts.torso.rotation = Math.sin(t * 8) * (10 + t * 20); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 7 + 0.5) * (15 + t * 20); } // Arms go limp if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + t * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle - t * 40; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = t * 60; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -t * 60; } // Knees buckle if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = t * 25; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -t * 25; } // Bees scatter as zombie falls bees.forEach((bee, i) => { bee.state = 'hover'; bee.hoverX = Math.random() > 0.5 ? -100 - Math.random() * 200 : CANVAS_WIDTH + 100 + Math.random() * 200; bee.hoverY = Math.random() * CANVAS_HEIGHT; }); // Last few sting marks if (Math.random() < 0.15) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 200, 1, { color: '#ff2222', vx: (Math.random() - 0.5) * 30, vy: -20 - Math.random() * 20, size: 3 + Math.random() * 4, life: 0.5 + Math.random() * 0.3, gravity: 100, type: 'circle' } ); } }); // Crumble into a heap - all parts detach and fall with low forces zombie.noBlood = true; // Just falling, no gore // Give each part a small outward-falling force so they pile up naturally zombie.detachPart('head', (Math.random() - 0.5) * 60, -30); zombie.detachPart('leftUpperArm', -40, 20); zombie.detachPart('rightUpperArm', 40, 20); zombie.detachPart('leftForearm', -30, 30); zombie.detachPart('rightForearm', 30, 30); zombie.detachPart('leftThigh', -20, 10); zombie.detachPart('rightThigh', 20, 10); zombie.detachPart('leftLowerLeg', -15, 20); zombie.detachPart('rightLowerLeg', 15, 20); zombie.detachPart('torso', (Math.random() - 0.5) * 30, 10); // A few bees still lingering over the heap await animate(1200 / speed, (t, dt) => { // Draw some remaining bees hovering over the collapsed zombie const lingerers = bees.slice(0, 8); lingerers.forEach((bee, i) => { // Hover loosely over the zombie's fallen position const targetX = zombie.baseX + (Math.random() - 0.5) * 120; const targetY = zombie.baseY + 80 + (Math.random() - 0.5) * 80; bee.x += (targetX - bee.x) * 0.01; bee.y += (targetY - bee.y) * 0.01; bee.x += Math.sin(Date.now() * 0.015 + bee.phase) * 2; bee.y += Math.cos(Date.now() * 0.018 + bee.phase) * 1.5; // Fade out over time ctx.save(); ctx.globalAlpha = Math.max(0, 1 - t * 1.5); ctx.translate(bee.x, bee.y); const wingUp = Math.sin(Date.now() * 0.04 + i) > 0; ctx.drawImage(wingUp ? beeCanvasUp : beeCanvasDown, -12, -12); ctx.restore(); }); }); }, // 21. METEOR - Shadow grows, massive meteor smashes zombie, then small meteors rain down meteor: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // The meteor slams into the floor (ground level below zombie) const floorY = trapDoor.y; // Floor at trap door top const impactX = zombie.baseX; // Move the crater and big meteor landing spot down by 50px const impactY = floorY + 100; // Massive meteor radius const METEOR_RADIUS = 165; // Helper: draw a meteor rock at (0, 0) with optional fire trail pointing up function drawMeteorShape(ctx, r, showTrail) { if (showTrail !== false) { // Fire / glow trail pointing upward (behind rock) const trail = ctx.createRadialGradient(0, 0, r * 0.3, 0, -r * 0.8, r * 2.5); trail.addColorStop(0, 'rgba(255, 200, 50, 0.95)'); trail.addColorStop(0.25, 'rgba(255, 100, 0, 0.7)'); trail.addColorStop(0.6, 'rgba(200, 40, 0, 0.35)'); trail.addColorStop(1, 'rgba(150, 20, 0, 0)'); ctx.fillStyle = trail; ctx.beginPath(); ctx.moveTo(-r * 0.8, 0); ctx.lineTo(r * 0.8, 0); ctx.lineTo(r * 1.8, -r * 4); ctx.lineTo(-r * 1.6, -r * 3.5); ctx.closePath(); ctx.fill(); } // Rock body ctx.fillStyle = '#3a3a3a'; ctx.shadowColor = '#ff4400'; ctx.shadowBlur = r > 30 ? 30 : 10; ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Lit face (fire heating) const glow = ctx.createRadialGradient(-r * 0.25, -r * 0.25, 0, 0, 0, r); glow.addColorStop(0, 'rgba(255, 180, 60, 0.55)'); glow.addColorStop(0.5, 'rgba(200, 80, 0, 0.2)'); glow.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.fill(); // Surface craters (only on bigger meteors) if (r > 20) { ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-r * 0.35, -r * 0.2, r * 0.18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(r * 0.28, r * 0.35, r * 0.14, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(r * 0.45, -r * 0.3, r * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-r * 0.1, r * 0.45, r * 0.12, 0, Math.PI * 2); ctx.fill(); } // Rock outline ctx.strokeStyle = '#111'; ctx.lineWidth = r > 30 ? 3 : 1.5; ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.stroke(); } playSound('meteor_sound'); // Phase 1: Shadow grows at zombie's feet (2000ms) - builds tension // Shadow is drawn BEHIND the zombie via anvilShadow state (updated in game loop before zombie.draw) const maxShadowRadius = METEOR_RADIUS * 2.88; anvilShadow.active = true; anvilShadow.x = impactX; anvilShadow.y = (floorY + 105) + 50; anvilShadow.radiusX = 20; anvilShadow.radiusY = 20 * 0.3; anvilShadow.opacity = 0; await animate(2000 / speed, (t, dt) => { const shadowEase = t * t; // Accelerating growth const shadowRadius = 20 + shadowEase * (maxShadowRadius - 20); const shadowOpacity = 0.05 + shadowEase * 0.65; // Update the behind-zombie shadow state (game loop draws this before zombie.draw) anvilShadow.radiusX = shadowRadius; anvilShadow.radiusY = shadowRadius * 0.3; anvilShadow.opacity = shadowOpacity; // Zombie looks up in terror if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 10) * 8; } zombie.applyImpulse((Math.random() - 0.5) * 15, -5); // Arms raise in panic gradually if (t > 0.3) { const panicT = (t - 0.3) / 0.7; if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - panicT * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + panicT * 40; } } }); // Deactivate shadow overlay — impact flash and crater take over visuals from here anvilShadow.active = false; // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Phase 2: Instant impact — screen flash only, no visible meteor falling const meteorEndY = impactY + 100; // Hit/rest location // Phase 3: IMPACT! Massive explosion, crater, zombie obliterated playSound('explosion_sound', 1.0); playSound('crush_sound', 0.9); // Hide zombie — vaporized by meteor impact zombie.globalAlpha = 0; zombie.noBlood = true; for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part) { part.visible = false; part.attached = false; } } // Generate smouldering zombie bones scattered around the floor const meteorBones = []; const boneFloorY = floorY + 50; const boneSpreadX = METEOR_RADIUS * 3; for (let i = 0; i < 14; i++) { const boneType = i % 5; const bx = impactX + (Math.random() - 0.5) * boneSpreadX; const by = boneFloorY + (Math.random() - 0.5) * 60; meteorBones.push({ x: bx, y: by, type: boneType, rotation: Math.random() * 360, size: 0.7 + Math.random() * 0.6, smoulderPhase: Math.random() * Math.PI * 2, charLevel: 0.3 + Math.random() * 0.5 }); } // Helper: draw all scattered meteor bones function drawMeteorBones(ctx, bones, smoulderIntensity) { bones.forEach(bone => { ctx.save(); ctx.translate(bone.x, bone.y); ctx.rotate(bone.rotation * Math.PI / 180); ctx.scale(bone.size, bone.size); const charR = Math.round(232 * (1 - bone.charLevel) + 40 * bone.charLevel); const charG = Math.round(216 * (1 - bone.charLevel) + 30 * bone.charLevel); const charB = Math.round(176 * (1 - bone.charLevel) + 20 * bone.charLevel); const boneColor = `rgb(${charR}, ${charG}, ${charB})`; const boneDark = `rgb(${Math.floor(charR * 0.7)}, ${Math.floor(charG * 0.7)}, ${Math.floor(charB * 0.7)})`; ctx.fillStyle = boneColor; ctx.strokeStyle = boneDark; ctx.lineWidth = 1.5; switch (bone.type) { case 0: ctx.beginPath(); ctx.moveTo(-25, -4); ctx.lineTo(25, -3); ctx.lineTo(25, 3); ctx.lineTo(-25, 4); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(-25, 0, 6, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(25, 0, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); break; case 1: ctx.beginPath(); ctx.moveTo(-18, 0); ctx.quadraticCurveTo(0, -12, 18, 0); ctx.quadraticCurveTo(0, -8, -18, 0); ctx.closePath(); ctx.fill(); ctx.stroke(); break; case 2: ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, -7); ctx.lineTo(-3, -14); ctx.lineTo(3, -14); ctx.closePath(); ctx.fill(); break; case 3: ctx.beginPath(); ctx.moveTo(-18, -3); ctx.lineTo(18, -2); ctx.lineTo(18, 2); ctx.lineTo(-18, 3); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(-18, 0, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); break; case 4: ctx.beginPath(); ctx.moveTo(-10, -6); ctx.lineTo(5, -8); ctx.lineTo(12, -2); ctx.lineTo(8, 6); ctx.lineTo(-4, 7); ctx.lineTo(-11, 2); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.arc(2, -1, 3, 0, Math.PI * 2); ctx.fill(); break; } if (smoulderIntensity > 0) { const glowPulse = 0.3 + Math.sin(Date.now() * 0.004 + bone.smoulderPhase) * 0.15; const glowAlpha = glowPulse * smoulderIntensity * (0.5 + bone.charLevel * 0.5); ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 8 * smoulderIntensity; ctx.strokeStyle = `rgba(255, 100, 0, ${glowAlpha})`; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-5 + Math.random() * 3, -2); ctx.lineTo(5 + Math.random() * 3, 2); ctx.stroke(); ctx.shadowBlur = 0; } ctx.restore(); }); } // Massive shower of sparks and flame on impact for (let i = 0; i < 80; i++) { const angle = Math.random() * Math.PI * 2; const spd = 200 + Math.random() * 500; spawnParticles(impactX + (Math.random() - 0.5) * 60, meteorEndY - 20, 1, { color: Math.random() > 0.4 ? '#ffcc00' : (Math.random() > 0.5 ? '#ff6600' : '#ffffff'), vx: Math.cos(angle) * spd, vy: -Math.abs(Math.sin(angle)) * spd - 100, size: 4 + Math.random() * 12, life: 0.6 + Math.random() * 0.8, gravity: 400, type: Math.random() > 0.5 ? 'fire' : 'circle' }); } for (let i = 0; i < 30; i++) { spawnParticles(impactX + (Math.random() - 0.5) * 120, meteorEndY - 30, 1, { color: Math.random() > 0.5 ? '#ff4400' : '#ff8800', vx: (Math.random() - 0.5) * 150, vy: -150 - Math.random() * 250, size: 15 + Math.random() * 25, life: 0.8 + Math.random() * 0.6, gravity: -60, type: 'fire' }); } for (let i = 0; i < 120; i++) { const angle = Math.random() * Math.PI * 2; const spd = 250 + Math.random() * 600; const isRock = i < 35; spawnParticles(impactX + (Math.random() - 0.5) * 80, meteorEndY - 20, 1, { color: isRock ? (Math.random() > 0.5 ? '#555' : '#333') : (i % 3 === 0 ? '#ff6600' : (i % 3 === 1 ? '#3dcc10' : '#ffcc00')), vx: Math.cos(angle) * spd, vy: -Math.abs(Math.sin(angle)) * spd - 120, size: isRock ? (10 + Math.random() * 25) : (8 + Math.random() * 20), life: 1.2 + Math.random() * 1.2, gravity: isRock ? 600 : 300, type: isRock ? 'chunk' : (i % 2 === 0 ? 'circle' : 'fire') }); } // Fixed meteor resting position for all subsequent drawing const meteorRestX = impactX; const meteorRestY = meteorEndY; // Generate small meteor shower data (pre-generate so they're ready) const numSmallMeteors = 18; const smallMeteors = []; for (let i = 0; i < numSmallMeteors; i++) { // Random landing Y anywhere across the floor area (trap door region) const randomFloorY = floorY + Math.random() * (CANVAS_HEIGHT - floorY - 40); smallMeteors.push({ targetX: 60 + Math.random() * (CANVAS_WIDTH - 120), targetY: randomFloorY, startDelay: 0.12 + (i / numSmallMeteors) * 0.7, // Start after flash (t=0.12 to t=0.82) radius: 8 + Math.random() * 12, speed: 1400 + Math.random() * 800, startY: -80 - Math.random() * 150, hit: false }); } // Combined Phase 3+4: Screen flash, crater scene, AND small meteors all together (3500ms) await animate(3500 / speed, (t, dt) => { const shakeDecay = Math.max(0, 1 - t * 4); const shakeAmt = 22 * shakeDecay; const shakeX = Math.sin(t * 90) * shakeAmt; const shakeY = Math.cos(t * 70) * shakeAmt * 0.6; ctx.save(); ctx.translate(shakeX, shakeY); ctx.save(); ctx.translate(meteorRestX, meteorRestY); const craterW = METEOR_RADIUS * 3.2; const craterH = METEOR_RADIUS * 1.1; const scorchGrad = ctx.createRadialGradient(0, 20, craterW * 0.5, 0, 20, craterW * 1.4); scorchGrad.addColorStop(0, 'rgba(15, 8, 0, 0.9)'); scorchGrad.addColorStop(0.3, 'rgba(30, 15, 5, 0.7)'); scorchGrad.addColorStop(0.6, 'rgba(50, 25, 8, 0.4)'); scorchGrad.addColorStop(0.8, 'rgba(40, 20, 5, 0.15)'); scorchGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = scorchGrad; ctx.beginPath(); ctx.ellipse(0, 20, craterW * 1.4, craterH * 1.2, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'rgba(80, 50, 20, 0.7)'; ctx.lineWidth = 8; ctx.beginPath(); ctx.ellipse(0, 15, craterW, craterH, 0, 0, Math.PI * 2); ctx.stroke(); ctx.strokeStyle = 'rgba(10, 5, 0, 0.8)'; ctx.lineWidth = 5; ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.92, craterH * 0.9, 0, 0, Math.PI * 2); ctx.stroke(); const bowlGrad = ctx.createRadialGradient(0, 20, 0, 0, 20, craterW * 0.85); bowlGrad.addColorStop(0, '#0a0400'); bowlGrad.addColorStop(0.3, '#1a0a02'); bowlGrad.addColorStop(0.6, '#2a1205'); bowlGrad.addColorStop(0.85, '#3a1a08'); bowlGrad.addColorStop(1, '#1a0a02'); ctx.fillStyle = bowlGrad; ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.88, craterH * 0.85, 0, 0, Math.PI * 2); ctx.fill(); ctx.save(); ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.85, craterH * 0.8, 0, 0, Math.PI * 2); ctx.clip(); const crackGlow = Math.max(0, 1 - t * 0.5); ctx.strokeStyle = `rgba(255, 100, 0, ${crackGlow * 0.7})`; ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 12 * crackGlow; ctx.lineWidth = 3; for (let i = 0; i < 10; i++) { const angle = (i / 10) * Math.PI * 2 + 0.3; const len = craterW * (0.3 + (i % 3) * 0.15); ctx.beginPath(); ctx.moveTo(0, 18); let cx = 0, cy = 18; const segs = 3 + (i % 2); for (let s = 0; s < segs; s++) { cx += Math.cos(angle + (s % 2 === 0 ? 0.15 : -0.15)) * (len / segs); cy += Math.sin(angle + (s % 2 === 0 ? -0.1 : 0.12)) * (len / segs) * 0.35; ctx.lineTo(cx, cy); } ctx.stroke(); } ctx.strokeStyle = `rgba(255, 60, 0, ${crackGlow * 0.35})`; ctx.lineWidth = 2; for (let r = 0; r < 3; r++) { const ringR = METEOR_RADIUS * (0.7 + r * 0.5); ctx.beginPath(); ctx.ellipse(0, 18, ringR, ringR * 0.32, 0, 0, Math.PI * 2); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); ctx.fillStyle = '#3a2a18'; for (let i = 0; i < 16; i++) { const angle = (i / 16) * Math.PI * 2 + i * 0.2; const dist = craterW * (0.85 + (i % 3) * 0.12); const rx = Math.cos(angle) * dist; const ry = Math.sin(angle) * dist * 0.33 + 15; const rSize = 6 + (i * 7) % 12; ctx.save(); ctx.translate(rx, ry); ctx.rotate(i * 0.8); ctx.fillStyle = i % 3 === 0 ? '#4a3520' : (i % 3 === 1 ? '#2a1a0a' : '#5a4030'); ctx.beginPath(); ctx.moveTo(-rSize, -rSize * 0.5); ctx.lineTo(rSize * 0.6, -rSize * 0.7); ctx.lineTo(rSize, rSize * 0.3); ctx.lineTo(-rSize * 0.4, rSize * 0.6); ctx.closePath(); ctx.fill(); ctx.restore(); } ctx.save(); ctx.translate(-meteorRestX, -meteorRestY); drawMeteorBones(ctx, meteorBones, Math.max(0, 1 - t * 0.3)); ctx.restore(); const smokeCutLineY = METEOR_RADIUS * 0.15; const numSmokePuffs = 7; for (let _s = 0; _s < numSmokePuffs; _s++) { const smokeAge = ((Date.now() * 0.0008 + _s * 0.45) % 2.5); const smokeRise = smokeAge / 2.5; const smokePuffX = Math.sin(_s * 1.9 + Date.now() * 0.0005) * METEOR_RADIUS * 0.7; const smokePuffY = smokeCutLineY - smokeRise * 150; const smokePuffSize = (22 + _s * 9) * (0.45 + smokeRise * 0.9); const smokeAlpha = (1 - smokeRise) * 0.48 * Math.max(0, 1 - t * 0.35); if (smokeAlpha > 0.01) { const sg = ctx.createRadialGradient(smokePuffX, smokePuffY, 0, smokePuffX, smokePuffY, smokePuffSize); sg.addColorStop(0, `rgba(45, 42, 40, ${smokeAlpha})`); sg.addColorStop(0.55, `rgba(35, 32, 30, ${smokeAlpha * 0.55})`); sg.addColorStop(1, 'rgba(20, 18, 16, 0)'); ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(smokePuffX, smokePuffY, smokePuffSize, 0, Math.PI * 2); ctx.fill(); } } ctx.save(); ctx.translate(0, METEOR_RADIUS * 0.15); ctx.rotate(0.08); ctx.save(); ctx.beginPath(); ctx.rect(-METEOR_RADIUS - 10, -METEOR_RADIUS - 10, (METEOR_RADIUS + 10) * 2, METEOR_RADIUS + 10); ctx.clip(); ctx.fillStyle = '#2a2a2a'; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.fill(); const smoulderPulse = 0.5 + Math.sin(t * 8) * 0.15 + Math.sin(t * 13) * 0.1; const meteorGlow = ctx.createRadialGradient(-METEOR_RADIUS * 0.2, -METEOR_RADIUS * 0.15, 0, 0, 0, METEOR_RADIUS); meteorGlow.addColorStop(0, `rgba(255, 150, 50, ${smoulderPulse * 0.5})`); meteorGlow.addColorStop(0.3, `rgba(255, 80, 0, ${smoulderPulse * 0.35})`); meteorGlow.addColorStop(0.6, `rgba(180, 40, 0, ${smoulderPulse * 0.2})`); meteorGlow.addColorStop(1, 'rgba(60, 10, 0, 0)'); ctx.fillStyle = meteorGlow; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = `rgba(255, 120, 20, ${smoulderPulse * 0.8})`; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 8 * smoulderPulse; ctx.lineWidth = 2.5; const veinSeeds = [0.4, 1.2, 2.1, 3.0, 3.9, 4.8, 5.5]; veinSeeds.forEach((seed, i) => { const vAngle = seed; const startR = METEOR_RADIUS * 0.2; const endR = METEOR_RADIUS * (0.6 + (i % 3) * 0.15); ctx.beginPath(); ctx.moveTo(Math.cos(vAngle) * startR, Math.sin(vAngle) * startR); const midAngle = vAngle + (i % 2 === 0 ? 0.2 : -0.15); ctx.quadraticCurveTo( Math.cos(midAngle) * endR * 0.7, Math.sin(midAngle) * endR * 0.7, Math.cos(vAngle + 0.1) * endR, Math.sin(vAngle + 0.1) * endR ); ctx.stroke(); }); ctx.shadowBlur = 0; ctx.fillStyle = `rgba(255, 200, 80, ${smoulderPulse * 0.9})`; ctx.shadowColor = '#ffcc00'; ctx.shadowBlur = 10; const emberSpots = [[0.3, 0.2], [-0.4, -0.3], [0.1, -0.5], [-0.25, 0.4], [0.5, -0.1]]; emberSpots.forEach(([ex, ey]) => { ctx.beginPath(); ctx.arc(ex * METEOR_RADIUS, ey * METEOR_RADIUS, 3 + Math.sin(t * 12 + ex * 10) * 1.5, 0, Math.PI * 2); ctx.fill(); }); ctx.shadowBlur = 0; ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.arc(-METEOR_RADIUS * 0.35, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 0.18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(METEOR_RADIUS * 0.28, METEOR_RADIUS * 0.35, METEOR_RADIUS * 0.14, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(METEOR_RADIUS * 0.45, -METEOR_RADIUS * 0.3, METEOR_RADIUS * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-METEOR_RADIUS * 0.1, METEOR_RADIUS * 0.45, METEOR_RADIUS * 0.12, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#0a0a0a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // clip ctx.restore(); // meteor transform const hazeAlpha = (0.4 + Math.sin(t * 6) * 0.1) * Math.max(0, 1 - t * 0.3); const hazeGrad = ctx.createRadialGradient(0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 0.5, 0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 2.2); hazeGrad.addColorStop(0, `rgba(255, 80, 0, ${hazeAlpha * 0.6})`); hazeGrad.addColorStop(0.3, `rgba(255, 40, 0, ${hazeAlpha * 0.3})`); hazeGrad.addColorStop(0.6, `rgba(200, 20, 0, ${hazeAlpha * 0.12})`); hazeGrad.addColorStop(1, 'rgba(100, 10, 0, 0)'); ctx.fillStyle = hazeGrad; ctx.beginPath(); ctx.arc(0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 2.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // crater/meteor translate ctx.restore(); // shake translate // Screen flash (fades out quickly in first ~10%) const flashAlpha = Math.max(0, 1 - t / 0.1); if (flashAlpha > 0) { ctx.fillStyle = `rgba(255, 245, 200, ${flashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Shockwave rings (first 30%) if (t < 0.3) { const waveT = t / 0.3; ctx.save(); ctx.translate(meteorRestX, meteorRestY); const waveR = waveT * 700; ctx.strokeStyle = `rgba(255, 140, 0, ${(1 - waveT) * 0.8})`; ctx.lineWidth = 14 * (1 - waveT) + 2; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 30 * (1 - waveT); ctx.beginPath(); ctx.arc(0, 0, waveR, 0, Math.PI * 2); ctx.stroke(); if (waveT > 0.15) { const wave2R = (waveT - 0.15) * 550; ctx.strokeStyle = `rgba(255, 200, 50, ${(1 - waveT) * 0.6})`; ctx.lineWidth = 6 * (1 - waveT) + 1; ctx.beginPath(); ctx.arc(0, 0, wave2R, 0, Math.PI * 2); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); } // Ember particles from crater if (Math.random() < 0.35) { const emberAngle = Math.random() * Math.PI * 2; const emberDist = METEOR_RADIUS * (0.3 + Math.random() * 0.6); spawnParticles( meteorRestX + Math.cos(emberAngle) * emberDist, meteorRestY - METEOR_RADIUS * 0.3 + Math.sin(emberAngle) * emberDist * 0.3, 1, { color: Math.random() > 0.5 ? '#ff4400' : '#ffaa00', vx: (Math.random() - 0.5) * 30, vy: -40 - Math.random() * 60, size: 2 + Math.random() * 4, life: 0.7 + Math.random() * 0.5, gravity: -20, type: 'circle' } ); } if (t < 0.5 && Math.random() < 0.3) { spawnParticles(meteorRestX + (Math.random() - 0.5) * METEOR_RADIUS * 0.8, meteorRestY - METEOR_RADIUS * 0.6, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ff9900', vx: (Math.random() - 0.5) * 20, vy: -40 - Math.random() * 50, size: 10 + Math.random() * 14, life: 0.4 + Math.random() * 0.3, gravity: -80, type: 'fire' }); } // === SMALL METEORS raining down (start after flash at t > 0.08) === smallMeteors.forEach(sm => { if (t < sm.startDelay) return; const fallDuration = 0.04; // fraction of total animation for each meteor to fall const localT = Math.min((t - sm.startDelay) / fallDuration, 1); const fallProgress = localT * localT; const meteorY = sm.startY + fallProgress * (sm.targetY - sm.startY + sm.radius); const meteorX = sm.targetX; if (meteorY >= sm.targetY && !sm.hit) { sm.hit = true; spawnParticles(meteorX, sm.targetY, 1, { color: '#ff4400', vx: 0, vy: -10, size: sm.radius * 2.5, life: 0.25, gravity: 0, type: 'circle', shrink: true }); for (let p = 0; p < 14; p++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 220; spawnParticles(meteorX, sm.targetY, 1, { color: Math.random() > 0.4 ? '#ff6600' : (Math.random() > 0.5 ? '#555' : '#ffcc00'), vx: Math.cos(angle) * spd, vy: -Math.abs(Math.sin(angle)) * spd - 60, size: 4 + Math.random() * 8, life: 0.5 + Math.random() * 0.4, gravity: 500, type: Math.random() > 0.4 ? 'fire' : 'circle' }); } playSound('crush_sound', 0.3 + t * 0.4); } if (!sm.hit) { ctx.save(); ctx.translate(meteorX, meteorY); drawMeteorShape(ctx, sm.radius, true); ctx.restore(); } }); // Small screen rumbles from small meteor impacts const hitCount = smallMeteors.filter(sm => sm.hit).length; if (hitCount > 0) { const rumble = Math.sin(t * 50) * Math.min(hitCount * 0.5, 3); zombie.baseX = savedBaseX + rumble; } // Redraw particles on top of all meteor visuals (crater, rock, bones, small meteors) particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); // Reset position after combined phase zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Phase 5: Smooth fade-out of all meteor/crater visuals before new zombie spawns (2000ms) await animate(2000 / speed, (t, dt) => { const fadeAlpha = 1 - t; if (fadeAlpha <= 0) return; // Continue the time variable from Phase 3+4 so animations stay smooth const contT = 1 + t * (2000 / 3500); ctx.save(); ctx.globalAlpha = fadeAlpha; ctx.translate(meteorRestX, meteorRestY); const craterW = METEOR_RADIUS * 3.2; const craterH = METEOR_RADIUS * 1.1; const scorchGrad = ctx.createRadialGradient(0, 20, craterW * 0.5, 0, 20, craterW * 1.4); scorchGrad.addColorStop(0, 'rgba(15, 8, 0, 0.9)'); scorchGrad.addColorStop(0.3, 'rgba(30, 15, 5, 0.7)'); scorchGrad.addColorStop(0.6, 'rgba(50, 25, 8, 0.4)'); scorchGrad.addColorStop(0.8, 'rgba(40, 20, 5, 0.15)'); scorchGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = scorchGrad; ctx.beginPath(); ctx.ellipse(0, 20, craterW * 1.4, craterH * 1.2, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'rgba(80, 50, 20, 0.7)'; ctx.lineWidth = 8; ctx.beginPath(); ctx.ellipse(0, 15, craterW, craterH, 0, 0, Math.PI * 2); ctx.stroke(); ctx.strokeStyle = 'rgba(10, 5, 0, 0.8)'; ctx.lineWidth = 5; ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.92, craterH * 0.9, 0, 0, Math.PI * 2); ctx.stroke(); const bowlGrad = ctx.createRadialGradient(0, 20, 0, 0, 20, craterW * 0.85); bowlGrad.addColorStop(0, '#0a0400'); bowlGrad.addColorStop(0.3, '#1a0a02'); bowlGrad.addColorStop(0.6, '#2a1205'); bowlGrad.addColorStop(0.85, '#3a1a08'); bowlGrad.addColorStop(1, '#1a0a02'); ctx.fillStyle = bowlGrad; ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.88, craterH * 0.85, 0, 0, Math.PI * 2); ctx.fill(); ctx.save(); ctx.beginPath(); ctx.ellipse(0, 18, craterW * 0.85, craterH * 0.8, 0, 0, Math.PI * 2); ctx.clip(); const crackGlow = Math.max(0, 1 - contT * 0.5); ctx.strokeStyle = `rgba(255, 100, 0, ${crackGlow * 0.7})`; ctx.shadowColor = '#ff4400'; ctx.shadowBlur = 12 * crackGlow; ctx.lineWidth = 3; for (let i = 0; i < 10; i++) { const angle = (i / 10) * Math.PI * 2 + 0.3; const len = craterW * (0.3 + (i % 3) * 0.15); ctx.beginPath(); ctx.moveTo(0, 18); let cx = 0, cy = 18; const segs = 3 + (i % 2); for (let s = 0; s < segs; s++) { cx += Math.cos(angle + (s % 2 === 0 ? 0.15 : -0.15)) * (len / segs); cy += Math.sin(angle + (s % 2 === 0 ? -0.1 : 0.12)) * (len / segs) * 0.35; ctx.lineTo(cx, cy); } ctx.stroke(); } ctx.strokeStyle = `rgba(255, 60, 0, ${crackGlow * 0.35})`; ctx.lineWidth = 2; for (let r = 0; r < 3; r++) { const ringR = METEOR_RADIUS * (0.7 + r * 0.5); ctx.beginPath(); ctx.ellipse(0, 18, ringR, ringR * 0.32, 0, 0, Math.PI * 2); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); ctx.fillStyle = '#3a2a18'; for (let i = 0; i < 16; i++) { const angle = (i / 16) * Math.PI * 2 + i * 0.2; const dist = craterW * (0.85 + (i % 3) * 0.12); const rx = Math.cos(angle) * dist; const ry = Math.sin(angle) * dist * 0.33 + 15; const rSize = 6 + (i * 7) % 12; ctx.save(); ctx.translate(rx, ry); ctx.rotate(i * 0.8); ctx.fillStyle = i % 3 === 0 ? '#4a3520' : (i % 3 === 1 ? '#2a1a0a' : '#5a4030'); ctx.beginPath(); ctx.moveTo(-rSize, -rSize * 0.5); ctx.lineTo(rSize * 0.6, -rSize * 0.7); ctx.lineTo(rSize, rSize * 0.3); ctx.lineTo(-rSize * 0.4, rSize * 0.6); ctx.closePath(); ctx.fill(); ctx.restore(); } ctx.save(); ctx.translate(-meteorRestX, -meteorRestY); drawMeteorBones(ctx, meteorBones, Math.max(0, 1 - contT * 0.3)); ctx.restore(); const smokeCutLineY = METEOR_RADIUS * 0.15; const numSmokePuffs = 7; for (let _s = 0; _s < numSmokePuffs; _s++) { const smokeAge = ((Date.now() * 0.0008 + _s * 0.45) % 2.5); const smokeRise = smokeAge / 2.5; const smokePuffX = Math.sin(_s * 1.9 + Date.now() * 0.0005) * METEOR_RADIUS * 0.7; const smokePuffY = smokeCutLineY - smokeRise * 150; const smokePuffSize = (22 + _s * 9) * (0.45 + smokeRise * 0.9); const smokeAlpha = (1 - smokeRise) * 0.48 * Math.max(0, 1 - contT * 0.35); if (smokeAlpha > 0.01) { const sg = ctx.createRadialGradient(smokePuffX, smokePuffY, 0, smokePuffX, smokePuffY, smokePuffSize); sg.addColorStop(0, `rgba(45, 42, 40, ${smokeAlpha})`); sg.addColorStop(0.55, `rgba(35, 32, 30, ${smokeAlpha * 0.55})`); sg.addColorStop(1, 'rgba(20, 18, 16, 0)'); ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(smokePuffX, smokePuffY, smokePuffSize, 0, Math.PI * 2); ctx.fill(); } } ctx.save(); ctx.translate(0, METEOR_RADIUS * 0.15); ctx.rotate(0.08); ctx.save(); ctx.beginPath(); ctx.rect(-METEOR_RADIUS - 10, -METEOR_RADIUS - 10, (METEOR_RADIUS + 10) * 2, METEOR_RADIUS + 10); ctx.clip(); ctx.fillStyle = '#2a2a2a'; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.fill(); const smoulderPulse = 0.5 + Math.sin(contT * 8) * 0.15 + Math.sin(contT * 13) * 0.1; const meteorGlow = ctx.createRadialGradient(-METEOR_RADIUS * 0.2, -METEOR_RADIUS * 0.15, 0, 0, 0, METEOR_RADIUS); meteorGlow.addColorStop(0, `rgba(255, 150, 50, ${smoulderPulse * 0.5})`); meteorGlow.addColorStop(0.3, `rgba(255, 80, 0, ${smoulderPulse * 0.35})`); meteorGlow.addColorStop(0.6, `rgba(180, 40, 0, ${smoulderPulse * 0.2})`); meteorGlow.addColorStop(1, 'rgba(60, 10, 0, 0)'); ctx.fillStyle = meteorGlow; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = `rgba(255, 120, 20, ${smoulderPulse * 0.8})`; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 8 * smoulderPulse; ctx.lineWidth = 2.5; const veinSeeds = [0.4, 1.2, 2.1, 3.0, 3.9, 4.8, 5.5]; veinSeeds.forEach((seed, i) => { const vAngle = seed; const startR = METEOR_RADIUS * 0.2; const endR = METEOR_RADIUS * (0.6 + (i % 3) * 0.15); ctx.beginPath(); ctx.moveTo(Math.cos(vAngle) * startR, Math.sin(vAngle) * startR); const midAngle = vAngle + (i % 2 === 0 ? 0.2 : -0.15); ctx.quadraticCurveTo( Math.cos(midAngle) * endR * 0.7, Math.sin(midAngle) * endR * 0.7, Math.cos(vAngle + 0.1) * endR, Math.sin(vAngle + 0.1) * endR ); ctx.stroke(); }); ctx.shadowBlur = 0; ctx.fillStyle = `rgba(255, 200, 80, ${smoulderPulse * 0.9})`; ctx.shadowColor = '#ffcc00'; ctx.shadowBlur = 10; const emberSpots = [[0.3, 0.2], [-0.4, -0.3], [0.1, -0.5], [-0.25, 0.4], [0.5, -0.1]]; emberSpots.forEach(([ex, ey]) => { ctx.beginPath(); ctx.arc(ex * METEOR_RADIUS, ey * METEOR_RADIUS, 3 + Math.sin(contT * 12 + ex * 10) * 1.5, 0, Math.PI * 2); ctx.fill(); }); ctx.shadowBlur = 0; ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.arc(-METEOR_RADIUS * 0.35, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 0.18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(METEOR_RADIUS * 0.28, METEOR_RADIUS * 0.35, METEOR_RADIUS * 0.14, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(METEOR_RADIUS * 0.45, -METEOR_RADIUS * 0.3, METEOR_RADIUS * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-METEOR_RADIUS * 0.1, METEOR_RADIUS * 0.45, METEOR_RADIUS * 0.12, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#0a0a0a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 0, METEOR_RADIUS, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // clip ctx.restore(); // meteor transform const hazeAlpha = (0.4 + Math.sin(contT * 6) * 0.1) * Math.max(0, 1 - contT * 0.3); const hazeGrad = ctx.createRadialGradient(0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 0.5, 0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 2.2); hazeGrad.addColorStop(0, `rgba(255, 80, 0, ${hazeAlpha * 0.6})`); hazeGrad.addColorStop(0.3, `rgba(255, 40, 0, ${hazeAlpha * 0.3})`); hazeGrad.addColorStop(0.6, `rgba(200, 20, 0, ${hazeAlpha * 0.12})`); hazeGrad.addColorStop(1, 'rgba(100, 10, 0, 0)'); ctx.fillStyle = hazeGrad; ctx.beginPath(); ctx.arc(0, -METEOR_RADIUS * 0.2, METEOR_RADIUS * 2.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // crater/meteor translate // Redraw particles on top of fading meteor visuals particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); }, // 22. BANANA - Banana peel slip, accelerating slide, fly up, spin 180, head smash banana: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Banana peel landing position (at zombie's feet) const peelX = zombie.baseX + 10; const peelY = zombie.baseY + 260; // At foot level const peelStartY = -100; // Falls from above screen // Phase 1: Banana peel falls from above and lands at zombie's feet (800ms) await animate(800 / speed, (t, dt) => { // Quadratic fall with slight spin const fallT = t * t; const currentY = peelStartY + fallT * (peelY - peelStartY); const spinAngle = t * Math.PI * 3; // Spins as it falls ctx.save(); ctx.translate(peelX, currentY); ctx.rotate(spinAngle); ctx.scale(1.3, 1.3); // Slightly bigger peel // Draw banana peel (spinning while falling) ctx.fillStyle = '#ffcc00'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(-18, -4, -28, 8); ctx.quadraticCurveTo(-12, -2, 0, 0); ctx.fill(); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(18, -4, 28, 8); ctx.quadraticCurveTo(12, -2, 0, 0); ctx.fill(); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(0, -12, 0, -18); ctx.quadraticCurveTo(3, -8, 0, 0); ctx.fill(); ctx.fillStyle = '#8b6914'; ctx.beginPath(); ctx.arc(0, -16, 3, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Small bounce/splat on landing if (t > 0.95) { for (let i = 0; i < 3; i++) { spawnParticles(peelX + (Math.random() - 0.5) * 15, peelY, 1, { color: 'rgba(150, 140, 100, 0.5)', vx: (Math.random() - 0.5) * 30, vy: -10 - Math.random() * 15, size: 2 + Math.random() * 3, life: 0.3, gravity: 150, type: 'circle' }); } } // Zombie looks down at the peel nervously in last 30% if (t > 0.7) { const lookT = (t - 0.7) / 0.3; if (zombie.parts.head.attached) { zombie.parts.head.rotation = lookT * 12; // Looks down slightly } } }); // Activate peel render state (drawn behind zombie from now on) bananaPeelRenderState.active = true; bananaPeelRenderState.x = peelX; bananaPeelRenderState.y = peelY; bananaPeelRenderState.scale = 2.0; // Brief pause - peel sits there ominously (400ms) await animate(400 / speed, (t, dt) => { // Zombie looks at it, then looks away nervously if (zombie.parts.head.attached) { zombie.parts.head.rotation = 12 - t * 8 + Math.sin(t * 15) * 3; } }); // Phase 2: Zombie steps on peel - starts sliding slowly, then faster and faster (2500ms) playSound('banana_sound'); zombie.isRagdolling = false; zombie.customPose = true; // Slide direction: zombie slides to the right let slideX = 0; let slideSpeed = 0; const slideAcceleration = 800; // pixels/sec² - accelerates over time await animate(2500 / speed, (t, dt) => { // Zombie oscillates left/right near center, amplitude grows with speed const oscillateAmplitude = 30 + t * 60; // 30px to 90px from center const oscillateFreq = 3 + t * 8; // Gets faster as zombie panics zombie.baseX = savedBaseX + Math.sin(t * oscillateFreq) * oscillateAmplitude; // Banana peel follows zombie with vertical bobbing const peelBob = Math.sin(t * 18) * (8 + t * 12); // Bounces up and down more as speed increases bananaPeelRenderState.x = zombie.baseX; bananaPeelRenderState.y = zombie.baseY + 260 + peelBob; // Track slide speed for particle effects const accelerationCurve = t * t * t; slideSpeed = accelerationCurve * 450; // === FLAILING ANIMATION === // Intensity increases with speed const flailIntensity = Math.min(t * 1.5, 1); // Ramps up over first 67% const flailFreq = 8 + t * 20; // Frequency increases (more frantic) // Torso leans back (losing balance) - more as speed increases zombie.parts.torso.rotation = -8 - flailIntensity * 15 + Math.sin(t * flailFreq) * (3 + flailIntensity * 8); // Head wobbles wildly if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * flailFreq * 1.3 + 0.5) * (10 + flailIntensity * 25); } // Arms windmill/flail outward - rotating as zombie tries to balance if (zombie.parts.leftUpperArm.attached) { // Left arm circles outward (positive direction) const armCircle = t * flailFreq * 0.8; zombie.parts.leftUpperArm.rotation = 40 + Math.abs(Math.sin(armCircle)) * (40 + flailIntensity * 60); } if (zombie.parts.rightUpperArm.attached) { // Right arm circles outward (negative direction) const armCircle = t * flailFreq * 0.8 + Math.PI; zombie.parts.rightUpperArm.rotation = -40 - Math.abs(Math.sin(armCircle)) * (40 + flailIntensity * 60); } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 10 + Math.abs(Math.sin(t * flailFreq * 1.2)) * (20 + flailIntensity * 40); } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -10 - Math.abs(Math.sin(t * flailFreq * 1.2 + 1.5)) * (20 + flailIntensity * 40); } // Legs scramble outward (trying to regain footing) if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 10 + Math.abs(Math.sin(t * flailFreq * 0.9)) * (15 + flailIntensity * 20); } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -10 - Math.abs(Math.sin(t * flailFreq * 0.9 + Math.PI)) * (15 + flailIntensity * 20); } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = Math.sin(t * flailFreq * 1.1 + 0.3) * (10 + flailIntensity * 20); } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = -Math.abs(Math.sin(t * flailFreq * 1.1 + Math.PI + 0.3)) * (10 + flailIntensity * 20); } // Motion blur lines behind zombie (increase with speed) if (t > 0.3 && Math.random() < accelerationCurve * 0.8) { spawnParticles(zombie.baseX - 30, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: 'rgba(200, 200, 200, 0.3)', vx: -slideSpeed * 0.4, vy: (Math.random() - 0.5) * 20, size: 2 + Math.random() * 4, life: 0.15 + Math.random() * 0.1, gravity: 0, type: 'circle', shrink: false }); } // Sweat drops flying off (panic!) if (t > 0.2 && Math.random() < 0.15 + t * 0.3) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY - 100 + (Math.random() - 0.5) * 50, 1, { color: 'rgba(150, 200, 255, 0.7)', vx: -slideSpeed * 0.2 + (Math.random() - 0.5) * 40, vy: -30 - Math.random() * 50, size: 2 + Math.random() * 4, life: 0.3 + Math.random() * 0.2, gravity: 200, type: 'circle' } ); } }); // Phase 3: Zombie launches up into the air (600ms) playSound('catapult_sound', 0.5); // Capture peel's resting position (follows zombie during slide, stays here forever after) const finalPeelX = zombie.baseX; const launchBaseX = zombie.baseX; // Where zombie is after sliding (near center) const launchBaseY = zombie.baseY; const launchHeight = 500; // How high zombie flies await animate(600 / speed, (t, dt) => { // Update peel to final position (stays there for rest of animation) bananaPeelRenderState.x = finalPeelX; bananaPeelRenderState.y = peelY; // Parabolic launch upward (decelerating as it rises) const riseT = 1 - Math.pow(1 - t, 2); // Ease out - fast start, slows at top zombie.baseY = launchBaseY - riseT * launchHeight; // Stay near center horizontally (minimal drift) zombie.baseX = launchBaseX; // Zombie starts spinning during launch (0 to ~90 degrees) // Torso rotates - preparing for the 180 flip const spinProgress = t * 90; // First 90 degrees during rise zombie.parts.torso.rotation = spinProgress; // Arms and legs spread out (starfish panic pose while airborne) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 90 + Math.sin(t * 20) * 20; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -90 - Math.sin(t * 20 + 1) * 20; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 30 + Math.sin(t * 25) * 15; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -30 - Math.sin(t * 25 + 1) * 15; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 30 + Math.sin(t * 18) * 15; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -30 - Math.sin(t * 18) * 15; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = -20 + Math.sin(t * 22) * 10; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = 20 - Math.sin(t * 22) * 10; } // Head looks down in terror if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 15) * 20; } }); // Phase 4: At the top of arc - spin 180 degrees so head points down (500ms) const topY = zombie.baseY; // Current position at top of arc const topX = zombie.baseX; await animate(500 / speed, (t, dt) => { // Peel rendered behind zombie via render state // Hover briefly at the top while spinning 180 degrees // Slight parabolic hover (barely moves vertically) zombie.baseY = topY + Math.sin(t * Math.PI) * 20; // Tiny arc at top zombie.baseX = topX; // Stay centered horizontally // Spin from 90 to 180 degrees (completing the flip - head now points down) const spinProgress = 90 + t * 90; // 90° to 180° zombie.parts.torso.rotation = spinProgress; // Limbs trail behind the rotation (delayed, dramatic) const limbDelay = Math.max(0, t - 0.2); // Limbs lag behind torso if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 60 - limbDelay * 60; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -60 + limbDelay * 60; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 20 - limbDelay * 30; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -20 + limbDelay * 30; } // Head - eyes wide in terror, looking at the ground rushing up if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 12) * 10; } // Dramatic pause particles (sparkle at apex) if (Math.random() < 0.2) { spawnParticles(zombie.baseX + (Math.random() - 0.5) * 40, zombie.baseY + (Math.random() - 0.5) * 80, 1, { color: 'rgba(255, 255, 200, 0.5)', vx: (Math.random() - 0.5) * 20, vy: (Math.random() - 0.5) * 20, size: 2 + Math.random() * 3, life: 0.3, gravity: 0, type: 'circle' }); } }); // Phase 5: Plummet head-first into the ground (400ms) - FAST playSound('crush_sound', 0.9); const fallStartY = zombie.baseY; const fallStartX = zombie.baseX; // Floor is where zombie's head will impact (zombie base at savedBaseY, head at -115 offset) // Since zombie is upside down (180°), the head is now at the BOTTOM // Impact floor is at the original zombie position plus some ground offset const impactFloorY = savedBaseY + 280; // Ground level (where feet normally are) await animate(400 / speed, (t, dt) => { // Peel rendered behind zombie via render state // Accelerating fall (gravity pull) const fallT = t * t; // Quadratic acceleration zombie.baseY = fallStartY + fallT * (impactFloorY - fallStartY); zombie.baseX = fallStartX; // Stay centered // Keep torso at 180 degrees (head pointing down) zombie.parts.torso.rotation = 180; // Limbs trail upward (streaming behind as zombie falls) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = -20 + t * 40; // Arms stream up } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = 20 - t * 40; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = -10 + t * 30; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = 10 - t * 30; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = -10 + t * 20; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = 10 - t * 20; } // Head braces for impact if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } // Speed lines rushing past if (Math.random() < 0.7 + t * 0.3) { spawnParticles(zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY - 50, 1, { color: 'rgba(200, 200, 200, 0.4)', vx: (Math.random() - 0.5) * 30, vy: -200 - Math.random() * 300, size: 2 + Math.random() * 4, life: 0.12, gravity: 0, type: 'circle', shrink: false }); } }); // Phase 6: IMPACT! Head smashes into the floor playSound('explosion_sound', 0.5); // Head is destroyed on impact - keep customPose=true so torso stays inverted zombie.customPose = true; zombie.isRagdolling = false; // Hide the head (destroyed) zombie.parts.head.visible = false; zombie.parts.head.attached = false; // Calculate head world position (zombie is upside down, head at local -115) // With torso at 180°, head position is zombie.baseY + 115 (below center) const headImpactX = zombie.baseX; const headImpactY = zombie.baseY + 115 * zombie.scale; // Massive green goo explosion from head impact for (let i = 0; i < 60; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 350; spawnParticles(headImpactX, headImpactY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 80, size: 5 + Math.random() * 14, life: 1.0 + Math.random() * 0.8, gravity: 350, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Bone/skull fragments flying for (let i = 0; i < 12; i++) { const angle = Math.random() * Math.PI * 2; const spd = 60 + Math.random() * 200; spawnParticles(headImpactX, headImpactY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 60, size: 3 + Math.random() * 7, life: 1.2 + Math.random() * 0.6, gravity: 450, type: 'square' }); } // Teeth flying out for (let i = 0; i < 8; i++) { const angle = -Math.PI * 0.2 + Math.random() * Math.PI * 1.4; const spd = 50 + Math.random() * 150; spawnParticles(headImpactX, headImpactY, 1, { color: '#e0dcb0', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 2 + Math.random() * 4, life: 1.5 + Math.random() * 0.5, gravity: 500, type: 'square' }); } // Screen shake on impact await animate(400 / speed, (t, dt) => { // Peel rendered behind zombie via render state const shakeDecay = Math.max(0, 1 - t * 2.5); const shakeIntensity = 20 * shakeDecay; zombie.baseX = headImpactX + Math.sin(t * 70) * shakeIntensity * 0.5; zombie.baseY = impactFloorY + Math.cos(t * 55) * shakeIntensity * 0.3; // Body stays inverted (head smashed into ground, body still upside-down) zombie.parts.torso.rotation = 180; // Keep at 180 - body fell head-down and stays that way // Limbs go limp and flop if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 20 + Math.sin(t * 15) * 30 * shakeDecay; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -20 - Math.sin(t * 15 + 1) * 30 * shakeDecay; } // Green goo pool spreads at impact point if (t < 0.3) { for (let i = 0; i < 3; i++) { spawnParticles(headImpactX + (Math.random() - 0.5) * 50, headImpactY + 10, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#1a8800', vx: (Math.random() - 0.5) * 40, vy: 0, size: 8 + Math.random() * 12, life: 2.5, gravity: 0, type: 'circle', shrink: false }); } } // Screen flash at impact start if (t < 0.06) { ctx.fillStyle = `rgba(255, 255, 220, ${0.3 * (1 - t / 0.06)})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Reset position zombie.baseX = headImpactX; zombie.baseY = impactFloorY; // Phase 7: Zombie remains stuck in the ground upside down zombie.parts.torso.rotation = 180; zombie.customPose = true; zombie.isRagdolling = false; // Blood spurting from neck stump for (let i = 0; i < 15; i++) { spawnParticles(headImpactX + (Math.random() - 0.5) * 20, headImpactY - 20, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 100, vy: -40 - Math.random() * 80, size: 4 + Math.random() * 8, life: 0.8 + Math.random() * 0.4, gravity: 400, type: 'circle' }); } await animate(1200 / speed, (t, dt) => { // Peel fades away as zombie dies bananaPeelRenderState.alpha = Math.max(0, 1 - t); }); bananaPeelRenderState.alpha = 1.0; bananaPeelRenderState.active = false; }, // 23. ROCKET - Big rocket assembles behind zombie, straps secure it, player clicks launch button rocket: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Position rocket centered on zombie (rocket base at zombie's feet) const rocketX = zombie.baseX; const rocketY = zombie.baseY + 260; // Base of nozzle at foot level // Activate render state (draws behind zombie in game loop) rocketRenderState.active = true; rocketRenderState.x = rocketX; rocketRenderState.y = rocketY; rocketRenderState.parts = { nozzle: 0, lowerBody: 0, upperBody: 0, noseCone: 0, leftFin: 0, rightFin: 0 }; rocketRenderState.strapsOut = 0; rocketRenderState.launching = false; rocketRenderState.launchProgress = 0; rocketRenderState.flameIntensity = 0; // === ASSEMBLY SEQUENCE: Each part zooms in from off-screen === // Part 1: Engine nozzle rises from below (300ms) playSound('crush_sound', 0.4); await animate(300 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.nozzle = ease; // Slight screen vibration on landing if (t > 0.85) { const impact = (t - 0.85) / 0.15; zombie.baseX = savedBaseX + Math.sin(impact * 30) * 3 * (1 - impact); } }); zombie.baseX = savedBaseX; // Impact sparks for (let i = 0; i < 6; i++) { spawnParticles(rocketX + (Math.random() - 0.5) * 40, rocketY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 80, vy: -30 - Math.random() * 50, size: 2 + Math.random() * 4, life: 0.25, gravity: 200, type: 'circle' }); } // Brief pause (80ms) await animate(80 / speed, () => {}); // Part 2: Lower body section flies in from the right (300ms) playSound('crush_sound', 0.4); await animate(300 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.lowerBody = ease; if (t > 0.85) { const impact = (t - 0.85) / 0.15; zombie.baseX = savedBaseX + Math.sin(impact * 30) * 4 * (1 - impact); } }); zombie.baseX = savedBaseX; for (let i = 0; i < 6; i++) { spawnParticles(rocketX + (Math.random() - 0.5) * 50, rocketY - 100, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 60, vy: -20 - Math.random() * 40, size: 2 + Math.random() * 3, life: 0.2, gravity: 200, type: 'circle' }); } await animate(80 / speed, () => {}); // Part 3: Upper body section flies in from the left (300ms) playSound('crush_sound', 0.4); await animate(300 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.upperBody = ease; if (t > 0.85) { const impact = (t - 0.85) / 0.15; zombie.baseX = savedBaseX + Math.sin(impact * 30) * 4 * (1 - impact); } }); zombie.baseX = savedBaseX; for (let i = 0; i < 6; i++) { spawnParticles(rocketX + (Math.random() - 0.5) * 50, rocketY - 250, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 60, vy: -20 - Math.random() * 40, size: 2 + Math.random() * 3, life: 0.2, gravity: 200, type: 'circle' }); } await animate(80 / speed, () => {}); // Part 4: Nose cone drops from above (250ms) playSound('crush_sound', 0.5); await animate(250 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.noseCone = ease; if (t > 0.85) { const impact = (t - 0.85) / 0.15; zombie.baseY = savedBaseY + Math.sin(impact * 30) * 3 * (1 - impact); } }); zombie.baseY = savedBaseY; for (let i = 0; i < 8; i++) { const side = Math.random() > 0.5 ? -1 : 1; spawnParticles(rocketX + side * 40, rocketY - 420, 1, { color: Math.random() > 0.5 ? '#ddd' : '#999', vx: side * (20 + Math.random() * 40), vy: -15 - Math.random() * 30, size: 2 + Math.random() * 3, life: 0.2, gravity: 200, type: 'circle' }); } await animate(80 / speed, () => {}); // Part 5: Left fin slides in from left (200ms) playSound('beartrap_sound', 0.3); await animate(200 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.leftFin = ease; }); await animate(60 / speed, () => {}); // Part 6: Right fin slides in from right (200ms) playSound('beartrap_sound', 0.3); await animate(200 / speed, (t, dt) => { const ease = 1 - Math.pow(1 - t, 3); rocketRenderState.parts.rightFin = ease; }); // Assembly complete! Brief hold (200ms) await animate(200 / speed, () => {}); // Zombie notices the rocket behind it zombie.applyImpulse(0, -15); if (zombie.parts.head.attached) { zombie.parts.head.rotation = 8; } // === STRAPS flip out and secure the zombie (600ms) === playSound('beartrap_sound', 0.5); await animate(600 / speed, (t, dt) => { // Elastic overshoot easing let strap; if (t < 0.6) { strap = (t / 0.6) * (t / 0.6) * 1.2; // Accelerate past 1.0 } else { strap = 1.2 - (t - 0.6) / 0.4 * 0.2; // Settle back to 1.0 } strap = Math.min(strap, 1.2); rocketRenderState.strapsOut = Math.min(strap, 1); // Zombie jolts when straps clamp if (t > 0.5 && t < 0.6) { zombie.applyImpulse((Math.random() - 0.5) * 40, -20); } }); rocketRenderState.strapsOut = 1; // Zombie struggles against straps await animate(400 / speed, (t, dt) => { zombie.applyImpulse((Math.random() - 0.5) * 30, (Math.random() - 0.5) * 15); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 25) * 12; } if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - 30 + Math.sin(t * 20) * 20; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + 30 - Math.sin(t * 20 + 1) * 20; } }); // === LAUNCH BUTTON pops up from the floor (350ms) === const buttonX = zombie.baseX - 220; const buttonY = zombie.baseY + 290; playSound('beartrap_sound', 0.3); await animate(350 / speed, (t, dt) => { // Elastic bounce let spring; if (t < 0.5) { spring = 4 * t * t; } else if (t < 0.75) { spring = 1 + Math.sin((t - 0.5) / 0.25 * Math.PI) * 0.15; } else { spring = 1 + (1 - (t - 0.75) / 0.25) * 0.05 * Math.sin((t - 0.75) * 40); } spring = Math.max(0, Math.min(spring, 1.2)); const btnRise = spring; const btnDrawY = buttonY + (1 - btnRise) * 120; drawRocketLaunchButton(ctx, buttonX, btnDrawY, false, Math.min(btnRise, 1)); }); // Dust puff for (let i = 0; i < 5; i++) { spawnParticles(buttonX + (Math.random() - 0.5) * 30, buttonY + 5, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 60, vy: -20 - Math.random() * 40, size: 3 + Math.random() * 5, life: 0.35, gravity: 150, type: 'circle' }); } // === WAIT FOR PLAYER TO CLICK THE LAUNCH BUTTON === document.getElementById('reset-button').disabled = false; let buttonPressed = false; const checkButtonClick = (e) => { if (buttonPressed) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; let px, py; if (e.touches) { px = (e.touches[0].clientX - rect.left) * scaleX; py = (e.touches[0].clientY - rect.top) * scaleY; } else { px = (e.clientX - rect.left) * scaleX; py = (e.clientY - rect.top) * scaleY; } // Check if click is near the button const dx = px - buttonX; const dy = py - buttonY; if (Math.sqrt(dx * dx + dy * dy) < 70) { buttonPressed = true; e.preventDefault(); } }; canvas.addEventListener('mousedown', checkButtonClick); canvas.addEventListener('touchstart', checkButtonClick, { passive: false }); // Wait for button press or timeout (30 seconds) const waitStartTime = Date.now(); await new Promise((resolve) => { let lastFrame = performance.now(); const waitLoop = (now) => { if (buttonPressed) { resolve(); return; } if (Date.now() - waitStartTime > 30000) { buttonPressed = true; resolve(); return; } if (!rocketRenderState.active) { resolve(); return; } // Reset was pressed // Draw the button (glowing/pulsing) drawRocketLaunchButton(ctx, buttonX, buttonY, false, 1); // Zombie struggles while strapped const dt = (now - lastFrame) / 1000; lastFrame = now; if (Math.random() < 0.08) { zombie.applyImpulse((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10); } requestAnimationFrame(waitLoop); }; requestAnimationFrame(waitLoop); }); // Remove listeners canvas.removeEventListener('mousedown', checkButtonClick); canvas.removeEventListener('touchstart', checkButtonClick); // If reset was triggered during wait, bail out if (!rocketRenderState.active) return; // === BUTTON PRESS ANIMATION (200ms) === playSound('button_click_sound', 0.7); await animate(200 / speed, (t, dt) => { drawRocketLaunchButton(ctx, buttonX, buttonY, true, 1); }); // === IGNITION SEQUENCE (1000ms) - rumble and flame builds === playSound('rocket_sound'); zombie.isRagdolling = true; await animate(1000 / speed, (t, dt) => { // Flame intensity builds up rocketRenderState.flameIntensity = t * t; // Screen rumble (increasing) const rumble = t * 6; zombie.baseX = savedBaseX + Math.sin(t * 60) * rumble; zombie.baseY = savedBaseY + Math.cos(t * 50) * rumble * 0.5; rocketRenderState.x = rocketX + Math.sin(t * 60) * rumble; // Smoke/fire particles from nozzle if (Math.random() < 0.5 + t * 0.5) { spawnParticles(rocketX + (Math.random() - 0.5) * 30, rocketY + 20, 1, { color: Math.random() > 0.4 ? '#ff6600' : '#ffcc00', vx: (Math.random() - 0.5) * 60, vy: 80 + Math.random() * 120 + t * 100, size: 8 + Math.random() * 14, life: 0.5 + Math.random() * 0.3, gravity: 50, type: 'fire' }); } // Smoke clouds if (Math.random() < 0.3 * t) { spawnParticles(rocketX + (Math.random() - 0.5) * 80, rocketY + 40, 1, { color: '#888', vx: (Math.random() - 0.5) * 100, vy: 30 + Math.random() * 50, size: 15 + Math.random() * 25, life: 1.0 + Math.random() * 0.5, gravity: -20, type: 'circle' }); } // Zombie flails in terror (arms fly outward, away from body) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 50 + Math.sin(t * 30) * 30; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -50 - Math.sin(t * 30 + 1) * 30; } if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 20) * 15; } // Draw button fading into ground const btnFade = 1 - t; if (btnFade > 0) { ctx.save(); ctx.globalAlpha = btnFade; drawRocketLaunchButton(ctx, buttonX, buttonY, true, 1); ctx.restore(); } }); // === LIFTOFF! Rocket + zombie launch upward (1500ms) === rocketRenderState.flameIntensity = 1; rocketRenderState.launching = true; await animate(1500 / speed, (t, dt) => { // Accelerating upward (quadratic) const liftT = t * t; rocketRenderState.launchProgress = liftT; // Move zombie with rocket zombie.baseY = savedBaseY - liftT * (CANVAS_HEIGHT + 500); rocketRenderState.x = rocketX; rocketRenderState.y = rocketY; // Massive flame and smoke trail if (Math.random() < 0.8) { const worldRocketY = rocketY - liftT * (CANVAS_HEIGHT + 500); spawnParticles(rocketX + (Math.random() - 0.5) * 40, worldRocketY + 30, 1, { color: Math.random() > 0.3 ? '#ff6600' : '#ffcc00', vx: (Math.random() - 0.5) * 80, vy: 150 + Math.random() * 200, size: 10 + Math.random() * 18, life: 0.6 + Math.random() * 0.4, gravity: 30, type: 'fire' }); } // Dense smoke clouds left behind if (Math.random() < 0.6) { const worldRocketY = rocketY - liftT * (CANVAS_HEIGHT + 500); spawnParticles(rocketX + (Math.random() - 0.5) * 100, worldRocketY + 60, 1, { color: Math.random() > 0.5 ? '#777' : '#999', vx: (Math.random() - 0.5) * 120, vy: 50 + Math.random() * 80, size: 20 + Math.random() * 30, life: 1.5 + Math.random() * 1.0, gravity: -15, type: 'circle' }); } // Screen shake during liftoff (decreasing as rocket leaves) const shakeAmt = 10 * (1 - t); zombie.baseX = savedBaseX + Math.sin(t * 80) * shakeAmt * 0.3; // Zombie legs dangle/flail if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(t * 20) * 25; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -Math.sin(t * 20) * 25; } }); // Rocket is off screen - hide zombie zombie.globalAlpha = 0; // Deactivate rocket render state rocketRenderState.active = false; // Smoke lingers on screen (already spawned as particles) // Distant explosion at top of screen (500ms) await animate(300 / speed, () => {}); playSound('explosion_sound', 0.6); // Explosion flash at top await animate(200 / speed, (t, dt) => { ctx.fillStyle = `rgba(255, 200, 100, ${(1 - t) * 0.4})`; ctx.fillRect(0, 0, CANVAS_WIDTH, 200); }); // Some body parts and debris rain back down for (let i = 0; i < 30; i++) { const angle = Math.random() * Math.PI * 0.6 + Math.PI * 0.2; const spd = 100 + Math.random() * 200; spawnParticles(CANVAS_WIDTH / 2 + (Math.random() - 0.5) * 300, -50, 1, { color: i % 4 === 0 ? '#e8d8b0' : (i % 3 === 0 ? '#3dcc10' : (Math.random() > 0.5 ? '#ff6600' : '#888')), vx: Math.cos(angle) * spd * (Math.random() > 0.5 ? 1 : -1), vy: 50 + Math.random() * 200, size: 4 + Math.random() * 12, life: 2.0 + Math.random() * 1.0, gravity: 400, type: i % 3 === 0 ? 'chunk' : (i % 2 === 0 ? 'square' : 'circle') }); } await animate(1500 / speed, () => {}); }, // 24. SHRINK RAY - Shrink then chase tiny zombie shrinkray: async function() { const speed = window.gameConfig.settings.animationSpeed; playSound('shrinkray_sound'); zombie.isRagdolling = true; // Phase 1: Shrink beam fires and shrinks the zombie await animate(1200 / speed, (t, dt) => { // Shrink beam from upper-left corner ctx.save(); const beamAlpha = t < 0.8 ? 1 : (1 - (t - 0.8) / 0.2); ctx.strokeStyle = `rgba(200, 0, 255, ${beamAlpha * 0.8})`; ctx.lineWidth = 18 - t * 10; ctx.shadowColor = '#cc00ff'; ctx.shadowBlur = 20 * beamAlpha; ctx.beginPath(); ctx.moveTo(0, zombie.baseY - 200); ctx.lineTo(zombie.baseX, zombie.baseY); ctx.stroke(); // Rings moving along beam if (t < 0.8) { const numRings = 3; for (let r = 0; r < numRings; r++) { const ringT = ((t * 4 + r / numRings) % 1); const rx = ringT * zombie.baseX; const ry = (zombie.baseY - 200) + ringT * 200; ctx.strokeStyle = `rgba(255, 100, 255, ${(1 - ringT) * 0.6})`; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(rx, ry, 8 + ringT * 15, 3 + ringT * 8, Math.atan2(200, zombie.baseX), 0, Math.PI * 2); ctx.stroke(); } } ctx.shadowBlur = 0; ctx.restore(); // Zombie shrinks zombie.globalScale = 1 - t * 0.85; // Down to 15% size // Adjust position so feet stay on ground zombie.baseY = window.gameConfig.zombie.positionY * CANVAS_HEIGHT + (1 - zombie.globalScale) * 100; // Confused animation if (t > 0.5) { zombie.parts.head.rotation = Math.sin(t * 20) * 30; } // Sparkle particles around zombie as it shrinks if (t > 0.2 && Math.random() < 0.5) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80 * (1 - t), zombie.baseY + (Math.random() - 0.5) * 150 * (1 - t), 1, { color: Math.random() > 0.5 ? '#cc44ff' : '#ff88ff', vx: (Math.random() - 0.5) * 40, vy: -20 - Math.random() * 30, size: 3 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: -30, type: 'circle' } ); } }); // Phase 1.5: Tiny zombie falls down to the floor const floorY = CANVAS_HEIGHT - 330; // Ground level where it will run const fallStartY = zombie.baseY; await animate(500 / speed, (t, dt) => { // Quadratic fall (gravity) const fallT = t * t; zombie.baseY = fallStartY + (floorY - fallStartY) * fallT; // Tiny wobble/flail as it falls if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 80 + Math.sin(t * 20) * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -80 - Math.sin(t * 20 + 1) * 40; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(t * 15) * 20; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -Math.sin(t * 15) * 20; } // Small dust puff on landing if (t > 0.95) { for (let i = 0; i < 5; i++) { spawnParticles(zombie.baseX + (Math.random() - 0.5) * 15, floorY + 10, 1, { color: 'rgba(150, 140, 120, 0.5)', vx: (Math.random() - 0.5) * 40, vy: -10 - Math.random() * 20, size: 2 + Math.random() * 3, life: 0.3, gravity: 80, type: 'circle' }); } } }); // Phase 2: Tiny zombie runs around randomly on the floor - player must tap/click it // Set zombie to floor level (small) zombie.baseY = floorY; zombie.globalScale = 0.15; zombie.isRagdolling = false; zombie.customPose = true; // Running state let tinyX = zombie.baseX; let tinyY = floorY; let targetX = CANVAS_WIDTH * 0.3 + Math.random() * CANVAS_WIDTH * 0.4; let direction = 1; // 1 = right, -1 = left let runTime = 0; let caught = false; let retargetTimer = 0; // Enable reset button during interactive phase document.getElementById('reset-button').disabled = false; // Set up click/tap handler to catch the tiny zombie const catchHandler = (e) => { if (caught) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; let px, py; if (e.touches) { px = (e.touches[0].clientX - rect.left) * scaleX; py = (e.touches[0].clientY - rect.top) * scaleY; } else { px = (e.clientX - rect.left) * scaleX; py = (e.clientY - rect.top) * scaleY; } // Check if tap is near the tiny zombie (generous hit area since it's small) const dx = px - tinyX; const dy = py - tinyY; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 80) { // Generous tap radius caught = true; e.preventDefault(); } }; canvas.addEventListener('mousedown', catchHandler); canvas.addEventListener('touchstart', catchHandler, { passive: false }); // Animate tiny zombie running around const startTime = Date.now(); await new Promise((resolve) => { let lastFrameTime = performance.now(); const runLoop = (now) => { if (caught) { resolve(); return; } if (Date.now() - startTime > 30000) { caught = true; resolve(); return; } // 30s timeout const dt = Math.min((now - lastFrameTime) / 1000, 0.05); lastFrameTime = now; runTime += dt; // Retarget periodically (every 0.8-1.5 seconds) retargetTimer -= dt; if (retargetTimer <= 0) { targetX = 80 + Math.random() * (CANVAS_WIDTH - 160); retargetTimer = 0.8 + Math.random() * 0.7; } // Move toward target const moveSpeed = 250; // pixels per second const dx = targetX - tinyX; if (Math.abs(dx) > 5) { tinyX += Math.sign(dx) * moveSpeed * dt; direction = Math.sign(dx); } // Clamp to screen tinyX = Math.max(60, Math.min(CANVAS_WIDTH - 60, tinyX)); // Update zombie position zombie.baseX = tinyX; zombie.baseY = tinyY; // Walk animation on the zombie parts const walkCycle = runTime * 12; zombie.parts.torso.rotation = Math.sin(walkCycle * 0.5) * 4; if (zombie.parts.head.attached) { zombie.parts.head.rotation = direction * -5 + Math.sin(walkCycle * 0.7) * 3; } if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + Math.sin(walkCycle) * 35; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle - Math.sin(walkCycle) * 35; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(walkCycle) * 25; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -Math.sin(walkCycle) * 25; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = Math.sin(walkCycle - 0.3) * 15; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = -Math.sin(walkCycle - 0.3) * 15; } // Tiny dust puffs from running if (Math.random() < 0.15) { spawnParticles(tinyX + (Math.random() - 0.5) * 10, tinyY + 20, 1, { color: 'rgba(150, 140, 120, 0.5)', vx: -direction * (10 + Math.random() * 20), vy: -5 - Math.random() * 10, size: 2 + Math.random() * 3, life: 0.3 + Math.random() * 0.2, gravity: 50, type: 'circle' }); } // Draw "TAP!" hint text that pulses const hintAlpha = 0.5 + Math.sin(runTime * 4) * 0.3; ctx.save(); ctx.fillStyle = `rgba(255, 200, 0, ${hintAlpha})`; ctx.font = 'bold 24px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('TAP THE ZOMBIE!', CANVAS_WIDTH / 2, 100); ctx.restore(); // Draw arrow pointing at tiny zombie ctx.save(); ctx.translate(tinyX, tinyY - 60); ctx.fillStyle = `rgba(255, 200, 0, ${hintAlpha})`; ctx.beginPath(); ctx.moveTo(0, 20); ctx.lineTo(-8, 5); ctx.lineTo(8, 5); ctx.closePath(); ctx.fill(); ctx.restore(); requestAnimationFrame(runLoop); }; requestAnimationFrame(runLoop); }); // Remove handler canvas.removeEventListener('mousedown', catchHandler); canvas.removeEventListener('touchstart', catchHandler); // Phase 3: SPLAT! Green explosion when caught playSound('crush_sound', 0.8); // Hide zombie zombie.globalAlpha = 0; // Green splat explosion at tiny zombie position for (let i = 0; i < 40; i++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 200; spawnParticles(tinyX, tinyY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 4 + Math.random() * 10, life: 1.0 + Math.random() * 0.6, gravity: 350, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Smaller bone fragments for (let i = 0; i < 10; i++) { const angle = Math.random() * Math.PI * 2; const spd = 30 + Math.random() * 120; spawnParticles(tinyX, tinyY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 30, size: 2 + Math.random() * 5, life: 1.2 + Math.random() * 0.5, gravity: 400, type: 'square' }); } // Green splat mark on the ground (drawn as particles that stick) for (let i = 0; i < 15; i++) { spawnParticles(tinyX + (Math.random() - 0.5) * 40, tinyY + Math.random() * 10, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#1a8800', vx: (Math.random() - 0.5) * 20, vy: 0, size: 6 + Math.random() * 10, life: 3.0, gravity: 0, type: 'circle', shrink: false }); } // Brief pause to admire the splat await animate(1200 / speed, () => {}); }, // 25. TRAFFIC - Springboard launches zombie outside, car hits on street traffic: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Building parameters (same as wrecking ball for consistent visuals) const buildingW = 200; const buildingH = 850; const buildingCenterX = CANVAS_WIDTH / 2; const buildingTopY = 80; const buildingBottomY = buildingTopY + buildingH; // Window grid (same as wrecking ball) const winCols = 3; const winRows = 9; const winW = 46; const winH = 62; const winGapX = 14; const winGapY = 18; const winMarginX = (buildingW - winCols * winW - (winCols - 1) * winGapX) / 2; const winMarginY = 40; // Zombie's window position const zombieWinRow = 4; const zombieWinCol = 1; function getWinPos(row, col) { const bLeft = buildingCenterX - buildingW / 2; const wx = bLeft + winMarginX + col * (winW + winGapX); const wy = buildingTopY + winMarginY + row * (winH + winGapY); return { x: wx, y: wy }; } // Helper: Draw a cartoon car function drawCar(cx, cy, scale) { ctx.save(); ctx.translate(cx, cy); ctx.scale(scale || 1, scale || 1); ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.moveTo(-80, -15); ctx.lineTo(-70, -40); ctx.lineTo(-20, -55); ctx.lineTo(40, -55); ctx.lineTo(70, -40); ctx.lineTo(80, -15); ctx.lineTo(80, 15); ctx.lineTo(-80, 15); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#881111'; ctx.lineWidth = 3; ctx.stroke(); ctx.fillStyle = '#88ccff'; ctx.beginPath(); ctx.moveTo(-18, -50); ctx.lineTo(35, -50); ctx.lineTo(55, -38); ctx.lineTo(-55, -38); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#ffff88'; ctx.beginPath(); ctx.ellipse(78, -5, 8, 10, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#888'; ctx.fillRect(72, -10, 12, 22); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-45, 18, 16, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(45, 18, 16, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(-45, 18, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(45, 18, 7, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Helper: Draw a springboard at position function drawSpringboard(sx, sy, compressionT, fired) { ctx.save(); ctx.translate(sx, sy); // Base (heavy metal frame bolted to floor) ctx.fillStyle = '#4a4a55'; ctx.beginPath(); ctx.roundRect(-60, 0, 120, 18, 4); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Bolts ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(-45, 9, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(45, 9, 5, 0, Math.PI * 2); ctx.fill(); // Spring coils (compressed or extended based on compressionT) const springHeight = 40 + compressionT * 50; // Compressed: 40, Extended (fired): 90 const numCoils = 6; const coilSpacing = springHeight / numCoils; ctx.strokeStyle = '#aaa'; ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(-25, 0); for (let i = 0; i < numCoils; i++) { const coilY = -(i + 0.5) * coilSpacing; const dir = i % 2 === 0 ? 1 : -1; ctx.lineTo(dir * 20, coilY); } ctx.lineTo(0, -springHeight); ctx.stroke(); // Right spring ctx.beginPath(); ctx.moveTo(25, 0); for (let i = 0; i < numCoils; i++) { const coilY = -(i + 0.5) * coilSpacing; const dir = i % 2 === 0 ? -1 : 1; ctx.lineTo(25 + dir * 15, coilY); } ctx.lineTo(25, -springHeight); ctx.stroke(); // Platform (the board that launches) const platY = -springHeight - 5; ctx.fillStyle = fired ? '#cc8800' : '#ffaa22'; ctx.beginPath(); ctx.roundRect(-55, platY - 12, 110, 14, 3); ctx.fill(); ctx.strokeStyle = '#996600'; ctx.lineWidth = 2; ctx.stroke(); // Hazard stripes on platform ctx.fillStyle = '#222'; for (let i = 0; i < 5; i++) { ctx.fillRect(-45 + i * 22, platY - 10, 10, 10); } // Arrow pointing up when ready if (!fired) { ctx.fillStyle = '#ff4444'; ctx.beginPath(); ctx.moveTo(0, platY - 25); ctx.lineTo(-10, platY - 15); ctx.lineTo(10, platY - 15); ctx.closePath(); ctx.fill(); } ctx.restore(); } // Helper: Draw the building scene with optional broken window function drawBuildingScene(brokenWinRow, brokenWinCol, tinyZombieData) { const bLeft = buildingCenterX - buildingW / 2; // Sky gradient const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Clouds ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(350, 200, 50, 22, 0, 0, Math.PI * 2); ctx.fill(); // Ground / Street ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 4); // Sidewalk ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); // Road markings (dashed center line) ctx.strokeStyle = '#cccc00'; ctx.lineWidth = 3; ctx.setLineDash([30, 20]); ctx.beginPath(); ctx.moveTo(0, buildingBottomY + 55); ctx.lineTo(CANVAS_WIDTH, buildingBottomY + 55); ctx.stroke(); ctx.setLineDash([]); // Building shadow on ground ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + 60, buildingBottomY + 20); ctx.lineTo(bLeft + 60, buildingBottomY + 20); ctx.lineTo(bLeft, buildingBottomY); ctx.closePath(); ctx.fill(); // Building body const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.15, '#7a7a7a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(0.85, '#7a7a7a'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); // Building outline ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 2; ctx.strokeRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); // Broken window (zombie crashed through) if (row === brokenWinRow && col === brokenWinCol) { // Dark hole where window was ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#0a0a0a'; ctx.fillRect(wp.x, wp.y, winW, winH); // Jagged broken glass shards around edges ctx.fillStyle = 'rgba(180, 220, 255, 0.6)'; // Top edge shards for (let s = 0; s < 4; s++) { const sx = wp.x + 5 + s * 10; ctx.beginPath(); ctx.moveTo(sx, wp.y); ctx.lineTo(sx + 3, wp.y + 8 + Math.random() * 6); ctx.lineTo(sx + 6, wp.y); ctx.closePath(); ctx.fill(); } // Bottom edge shards for (let s = 0; s < 3; s++) { const sx = wp.x + 8 + s * 12; ctx.beginPath(); ctx.moveTo(sx, wp.y + winH); ctx.lineTo(sx + 4, wp.y + winH - 10 - Math.random() * 5); ctx.lineTo(sx + 8, wp.y + winH); ctx.closePath(); ctx.fill(); } // Side shards ctx.beginPath(); ctx.moveTo(wp.x, wp.y + 15); ctx.lineTo(wp.x + 7, wp.y + 20); ctx.lineTo(wp.x, wp.y + 25); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(wp.x + winW, wp.y + 20); ctx.lineTo(wp.x + winW - 8, wp.y + 28); ctx.lineTo(wp.x + winW, wp.y + 35); ctx.closePath(); ctx.fill(); continue; } // Normal window ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wp.x + 3, wp.y + 3); ctx.lineTo(wp.x + winW * 0.4, wp.y + 3); ctx.lineTo(wp.x + 3, wp.y + winH * 0.4); ctx.closePath(); ctx.fill(); } } } // Draw tiny zombie if provided if (tinyZombieData) { ctx.save(); ctx.translate(tinyZombieData.x, tinyZombieData.y); ctx.rotate(tinyZombieData.rotation * Math.PI / 180); ctx.scale(0.14, 0.14); const bodyColor = zombie ? zombie.bodyColor : '#3da854'; ctx.fillStyle = bodyColor; ctx.beginPath(); ctx.ellipse(0, -115, 28, 34, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(-35, -70); ctx.bezierCurveTo(-40, -40, -32, 20, -30, 75); ctx.lineTo(30, 75); ctx.bezierCurveTo(32, 20, 40, -40, 35, -70); ctx.closePath(); ctx.fill(); ctx.fillRect(-55, -60, 14, 65); ctx.fillRect(41, -60, 14, 65); ctx.fillRect(-25, 75, 18, 75); ctx.fillRect(8, 75, 18, 75); ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 6; ctx.beginPath(); ctx.ellipse(0, -115, 28, 34, 0, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } } // === PHASE 1: Springboard pops up from the floor (400ms) === playSound('beartrap_sound', 0.4); const springX = zombie.baseX; const springY = zombie.baseY + 381; // Adjusted to be even with zombie's feet // At zombie's feet await animate(400 / speed, (t, dt) => { // Elastic bounce easing let spring; if (t < 0.5) { spring = 4 * t * t; } else if (t < 0.75) { spring = 1 + Math.sin((t - 0.5) / 0.25 * Math.PI) * 0.15; } else { spring = 1 + (1 - (t - 0.75) / 0.25) * 0.05 * Math.sin((t - 0.75) * 40); } spring = Math.max(0, Math.min(spring, 1.2)); const riseY = springY + (1 - spring) * 100; drawSpringboard(springX, riseY, 0, false); // Zombie looks down if (t > 0.3 && zombie.parts.head.attached) { zombie.parts.head.rotation = 8 + Math.sin(t * 12) * 3; } }); // Dust puff for (let i = 0; i < 6; i++) { spawnParticles(springX + (Math.random() - 0.5) * 60, springY + 5, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 70, vy: -25 - Math.random() * 40, size: 4 + Math.random() * 5, life: 0.35, gravity: 150, type: 'circle' }); } // Brief pause - tension (300ms) await animate(300 / speed, (t, dt) => { drawSpringboard(springX, springY, 0, false); // Zombie looks down nervously if (zombie.parts.head.attached) { zombie.parts.head.rotation = 10 + Math.sin(t * 15) * 3; } }); // === PHASE 2: Spring compresses then FIRES - zombie launched upward (500ms) === playSound('catapult_sound', 0.9); zombie.isRagdolling = true; await animate(500 / speed, (t, dt) => { if (t < 0.2) { // Compression phase (spring pushes down briefly) const compressT = t / 0.2; drawSpringboard(springX, springY, -0.3 * compressT, false); } else { // FIRE! Spring extends rapidly, zombie flies up const fireT = (t - 0.2) / 0.8; const easeOut = 1 - Math.pow(1 - fireT, 3); drawSpringboard(springX, springY, easeOut, true); // Zombie flies upward and off screen zombie.baseY = savedBaseY - easeOut * (CANVAS_HEIGHT + 200); zombie.parts.torso.rotation = fireT * 200; // Spinning zombie.globalScale = Math.max(0.3, 1 - fireT * 0.7); // Shrinks as it goes up // Arms and legs flail outward if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 90 + Math.sin(fireT * 20) * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -90 - Math.sin(fireT * 20 + 1) * 40; } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 30 + Math.sin(fireT * 18) * 25; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -30 - Math.sin(fireT * 18) * 25; } // Launch particles (spring sparks and dust) if (fireT < 0.4 && Math.random() < 0.7) { spawnParticles(springX + (Math.random() - 0.5) * 50, springY - 40, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff8800', vx: (Math.random() - 0.5) * 100, vy: -100 - Math.random() * 200, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: 200, type: 'circle' }); } } }); // === PHASE 3: Transition to exterior - zoom out from zombie's window (2000ms) === // Hide zombie (it's now "outside" the building, will be shown as tiny figure) zombie.globalAlpha = 0; // Take a stamp of the empty lab (springboard still visible) const stampCanvas = document.createElement('canvas'); stampCanvas.width = CANVAS_WIDTH; stampCanvas.height = CANVAS_HEIGHT; const stampCtx = stampCanvas.getContext('2d'); // Draw just the springboard on the stamp for the window view stampCtx.fillStyle = window.gameConfig.settings.backgroundColor || '#0c1225'; stampCtx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw springboard in fired state on stamp stampCtx.save(); stampCtx.translate(springX, springY); stampCtx.fillStyle = '#4a4a55'; stampCtx.beginPath(); stampCtx.roundRect(-60, 0, 120, 18, 4); stampCtx.fill(); stampCtx.restore(); const zwp = getWinPos(zombieWinRow, zombieWinCol); const winCenterX = zwp.x + winW / 2; const winCenterY = zwp.y + winH / 2; // Zoom out from window to full building view await animate(2000 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); const scaleForWidth = CANVAS_WIDTH / winW; const scaleForHeight = CANVAS_HEIGHT / winH; const startScale = Math.max(scaleForWidth, scaleForHeight); const endScale = 1.0; const currentScale = startScale - (startScale - endScale) * easeOut; // Sky background const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); const screenX = (CANVAS_WIDTH / 2) + (winCenterX - CANVAS_WIDTH / 2) * easeOut; const screenY = (CANVAS_HEIGHT / 2) + (winCenterY - CANVAS_HEIGHT / 2) * easeOut; const tx = screenX - winCenterX * currentScale; const ty = screenY - winCenterY * currentScale; ctx.save(); ctx.translate(tx, ty); ctx.scale(currentScale, currentScale); // Draw building inline (same as wrecking ball) const bLeft = buildingCenterX - buildingW / 2; if (currentScale < 3) { const cloudAlpha = Math.min(1, (3 - currentScale) / 2); ctx.fillStyle = `rgba(255, 255, 255, ${cloudAlpha * 0.7})`; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); } // Ground/street ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); // Building body const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (row === zombieWinRow && col === zombieWinCol) { // Zombie's window shows stamp (lab interior with springboard) ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.save(); ctx.beginPath(); ctx.rect(wp.x, wp.y, winW, winH); ctx.clip(); // Interpolate stamp display const coverH = winW / (CANVAS_WIDTH / CANVAS_HEIGHT); const stampDrawH = coverH + (winH - coverH) * easeOut; const stampOffsetY = (winH - stampDrawH) / 2; ctx.drawImage(stampCanvas, wp.x, wp.y + stampOffsetY, winW, stampDrawH); ctx.restore(); continue; } ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } } } ctx.restore(); }); // === PHASE 4: Full building view - zombie crashes through window (1200ms) === playSound('shatter_sound', 0.7); // Zombie exits through the window and arcs down to the street const exitWinPos = getWinPos(zombieWinRow, zombieWinCol); const exitX = exitWinPos.x + winW / 2; const exitY = exitWinPos.y + winH / 2; const streetY = buildingBottomY + 35; // Landing spot on street let tinyZombieX = exitX; let tinyZombieY = exitY; let tinyVX = 180; // Flies outward to the right let tinyVY = -150; // Initial upward velocity from launch let tinyRot = 0; // Glass shard particles EXPLODING out when the window breaks for (let i = 0; i < 40; i++) { const angle = Math.random() * Math.PI * 1.2 - Math.PI * 0.3; const spd = 100 + Math.random() * 300; spawnParticles(exitX + (Math.random() - 0.5) * 20, exitY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.3 ? 'rgba(180, 220, 255, 1.0)' : 'rgba(255, 255, 255, 1.0)', vx: Math.cos(angle) * spd + 120, vy: Math.sin(angle) * spd - 60, size: 3 + Math.random() * 6, life: 1.2 + Math.random() * 0.8, gravity: 450, type: 'square' }); } // Extra sparkle/glint particles for glass catching light for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI - Math.PI * 0.2; const spd = 60 + Math.random() * 200; spawnParticles(exitX, exitY, 1, { color: '#ffffff', vx: Math.cos(angle) * spd + 60, vy: Math.sin(angle) * spd - 40, size: 2 + Math.random() * 3, life: 0.4 + Math.random() * 0.3, gravity: 300, type: 'circle' }); } await animate(1200 / speed, (t, dt) => { // using passed dt // Update tiny zombie physics tinyVY += 800 * dt; // Gravity tinyZombieX += tinyVX * dt; tinyZombieY += tinyVY * dt; tinyVX *= 0.995; tinyRot += 500 * dt; // Floor collision (street level) if (tinyZombieY > streetY && tinyVY > 0) { tinyZombieY = streetY; tinyVY = -tinyVY * 0.3; tinyVX *= 0.6; if (Math.abs(tinyVY) < 30) { tinyVY = 0; tinyVX = 0; tinyRot = 0; // Stop spinning when landed } // Impact dust if (t < 0.9) { for (let i = 0; i < 5; i++) { spawnParticles(tinyZombieX, streetY, 1, { color: '#8a8a8a', vx: (Math.random() - 0.5) * 40, vy: -15 - Math.random() * 30, size: 2 + Math.random() * 4, life: 0.3 + Math.random() * 0.2, gravity: 200, type: 'circle' }); } } } // Draw building scene with broken window and tiny zombie drawBuildingScene(zombieWinRow, zombieWinCol, { x: tinyZombieX, y: tinyZombieY, rotation: tinyRot }); // Redraw particles on top of the building scene particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); // === PHASE 5+6+7: Multi-car bouncing bonanza! === // Zombie lands on street, then gets repeatedly hit by cars from both sides const landedX = tinyZombieX; const landedY = streetY; const carStreetY = streetY - 5; // Tiny zombie physics state for bouncing between car hits let bounceX = landedX; let bounceY = landedY; let bounceVX = 0; let bounceVY = 0; let bounceRot = 0; let bounceRotVel = 0; const bounceGravity = 3000; const bounceFloorY = streetY; // Brief dazed moment on the street (400ms) playSound('catapult_sound', 0.5); // Horn honk in distance await animate(400 / speed, (t, dt) => { drawBuildingScene(zombieWinRow, zombieWinCol, { x: bounceX, y: bounceY, rotation: Math.sin(t * 12) * 15 // Dazed wobble }); particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); // Define car sequence - 7 cars from alternating directions with varying speeds const carSequence = [ { fromLeft: true, speed: 1400, delay: 0 }, { fromLeft: false, speed: 1600, delay: 0.6 }, { fromLeft: true, speed: 1800, delay: 0.5 }, { fromLeft: false, speed: 1500, delay: 0.4 }, { fromLeft: true, speed: 2000, delay: 0.35 }, { fromLeft: false, speed: 1700, delay: 0.3 }, { fromLeft: true, speed: 1000, delay: 0.5, isTruck: true } // Final - big transport truck (slower, heavier) ]; // Car colors for variety const carColors = ['#cc2222', '#2244cc', '#22aa44', '#cc8800', '#8822cc', '#cc2288', '#2288cc']; // Process each car hit for (let carIdx = 0; carIdx < carSequence.length; carIdx++) { const car = carSequence[carIdx]; const carColor = carColors[carIdx % carColors.length]; // Wait for delay (zombie falls/bounces during this time) if (car.delay > 0) { await animate((car.delay * 1000) / speed, (t, dt) => { // using passed dt // Apply gravity to bouncing zombie bounceVY += bounceGravity * dt; bounceX += bounceVX * dt; bounceY += bounceVY * dt; bounceRot += bounceRotVel * dt; bounceVX *= 0.995; bounceRotVel *= 0.99; // Floor bounce if (bounceY > bounceFloorY) { bounceY = bounceFloorY; bounceVY = -bounceVY * 0.4; bounceVX *= 0.7; bounceRotVel *= 0.6; if (Math.abs(bounceVY) < 30) bounceVY = 0; } // Wall bounds (keep zombie on screen) if (bounceX < 80) { bounceX = 80; bounceVX = Math.abs(bounceVX) * 0.5; } if (bounceX > CANVAS_WIDTH - 80) { bounceX = CANVAS_WIDTH - 80; bounceVX = -Math.abs(bounceVX) * 0.5; } // Draw scene with bouncing zombie drawBuildingScene(zombieWinRow, zombieWinCol, { x: bounceX, y: bounceY, rotation: bounceRot }); particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); } // Car/truck approaches and hits the zombie (300ms for cars, 500ms for truck) const carStartX = car.fromLeft ? -250 : CANVAS_WIDTH + 250; const carEndX = car.fromLeft ? CANVAS_WIDTH + 250 : -250; let thisCarHit = false; playSound('crush_sound', 0.6 + carIdx * 0.05); const vehicleDuration = car.isTruck ? 500 : 300; if (car.isTruck) { playSound('truck_horn_sound', 1.0); } await animate(vehicleDuration / speed, (t, dt) => { // using passed dt // Apply gravity to zombie between hits bounceVY += bounceGravity * dt; bounceX += bounceVX * dt; bounceY += bounceVY * dt; bounceRot += bounceRotVel * dt; bounceVX *= 0.995; bounceRotVel *= 0.99; // Floor bounce if (bounceY > bounceFloorY) { bounceY = bounceFloorY; bounceVY = -bounceVY * 0.4; bounceVX *= 0.7; if (Math.abs(bounceVY) < 30) bounceVY = 0; } // Wall bounds if (bounceX < 80) { bounceX = 80; bounceVX = Math.abs(bounceVX) * 0.5; } if (bounceX > CANVAS_WIDTH - 80) { bounceX = CANVAS_WIDTH - 80; bounceVX = -Math.abs(bounceVX) * 0.5; } // Car position const carX = carStartX + t * (carEndX - carStartX); // Draw building scene with zombie if (!thisCarHit) { drawBuildingScene(zombieWinRow, zombieWinCol, { x: bounceX, y: bounceY, rotation: bounceRot }); } else if (car.isTruck && car._pancakedAt) { // Draw scene with tiny pancake on road instead of zombie drawBuildingScene(zombieWinRow, zombieWinCol, null); // Draw pancake at hit location ctx.save(); ctx.translate(car._pancakedAt.x, car._pancakedAt.y); ctx.fillStyle = '#3da854'; ctx.beginPath(); ctx.ellipse(0, 0, 28, 5, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#1a4a1a'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.fillStyle = 'rgba(61, 204, 16, 0.4)'; ctx.beginPath(); ctx.ellipse(0, 2, 40, 8, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } else if (carIdx >= carSequence.length - 1) { // Final car (non-truck) - zombie disappears after hit drawBuildingScene(zombieWinRow, zombieWinCol, null); } else { drawBuildingScene(zombieWinRow, zombieWinCol, { x: bounceX, y: bounceY, rotation: bounceRot }); } // Draw vehicle ctx.save(); ctx.translate(carX, carStreetY); const vehDir = car.fromLeft ? 1.2 : -1.2; ctx.scale(vehDir, 1.2); if (car.isTruck) { // === BIG TRANSPORT TRUCK WITH TRAILER === // Trailer (long box behind cab) ctx.fillStyle = '#ddd'; ctx.fillRect(-220, -60, 200, 70); ctx.strokeStyle = '#999'; ctx.lineWidth = 2; ctx.strokeRect(-220, -60, 200, 70); // Trailer ribbing ctx.strokeStyle = '#bbb'; ctx.lineWidth = 1.5; for (let r = 0; r < 5; r++) { ctx.beginPath(); ctx.moveTo(-210 + r * 40, -58); ctx.lineTo(-210 + r * 40, 8); ctx.stroke(); } // Trailer undercarriage ctx.fillStyle = '#333'; ctx.fillRect(-200, 10, 160, 10); // Trailer wheels (two axles) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-160, 25, 18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-130, 25, 18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-80, 25, 18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-50, 25, 18, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(-160, 25, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-130, 25, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-80, 25, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-50, 25, 7, 0, Math.PI * 2); ctx.fill(); // Mud flaps ctx.fillStyle = '#222'; ctx.fillRect(-180, 12, 8, 14); ctx.fillRect(-45, 12, 8, 14); // Cab (front) ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.moveTo(-20, -60); ctx.lineTo(80, -60); ctx.lineTo(100, -40); ctx.lineTo(100, 15); ctx.lineTo(-20, 15); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#881111'; ctx.lineWidth = 3; ctx.stroke(); // Cab window ctx.fillStyle = '#88ccff'; ctx.beginPath(); ctx.moveTo(10, -55); ctx.lineTo(75, -55); ctx.lineTo(90, -42); ctx.lineTo(10, -42); ctx.closePath(); ctx.fill(); // Cab headlight ctx.fillStyle = '#ffff88'; ctx.beginPath(); ctx.ellipse(98, -20, 6, 10, 0, 0, Math.PI * 2); ctx.fill(); // Bumper ctx.fillStyle = '#888'; ctx.fillRect(95, -10, 12, 25); // Cab front wheel ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(60, 25, 20, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(60, 25, 8, 0, Math.PI * 2); ctx.fill(); // Exhaust stack ctx.fillStyle = '#444'; ctx.fillRect(-10, -75, 8, 18); // Smoke from exhaust ctx.fillStyle = 'rgba(100,100,100,0.4)'; ctx.beginPath(); ctx.arc(-6, -80, 6, 0, Math.PI * 2); ctx.fill(); } else { // === REGULAR CAR === ctx.fillStyle = carColor; ctx.beginPath(); ctx.moveTo(-80, -15); ctx.lineTo(-70, -40); ctx.lineTo(-20, -55); ctx.lineTo(40, -55); ctx.lineTo(70, -40); ctx.lineTo(80, -15); ctx.lineTo(80, 15); ctx.lineTo(-80, 15); ctx.closePath(); ctx.fill(); const darkColor = darkenColorSimple(carColor, 0.3); ctx.strokeStyle = darkColor; ctx.lineWidth = 3; ctx.stroke(); ctx.fillStyle = '#88ccff'; ctx.beginPath(); ctx.moveTo(-18, -50); ctx.lineTo(35, -50); ctx.lineTo(55, -38); ctx.lineTo(-55, -38); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#ffff88'; ctx.beginPath(); ctx.ellipse(78, -5, 8, 10, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-45, 18, 16, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(45, 18, 16, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(-45, 18, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(45, 18, 7, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // Speed lines behind vehicle if (Math.random() < 0.7) { const trailOffset = car.isTruck ? 220 : 80; const trailX = car.fromLeft ? carX - trailOffset : carX + trailOffset; const trailVX = car.fromLeft ? -200 - Math.random() * 150 : 200 + Math.random() * 150; spawnParticles(trailX, carStreetY + (Math.random() - 0.5) * 30, 1, { color: 'rgba(200, 200, 200, 0.4)', vx: trailVX, vy: (Math.random() - 0.5) * 15, size: 2 + Math.random() * 3, life: 0.1, gravity: 0, type: 'circle' }); } // Check if car hits zombie (based on vehicle reaching zombie's X position) const frontOffset = car.isTruck ? 100 * 1.2 : 80 * 1.2; const carFrontX = car.fromLeft ? carX + frontOffset : carX - frontOffset; const hitCheck = car.fromLeft ? (carFrontX > bounceX - 20) : (carFrontX < bounceX + 20); if (!thisCarHit && hitCheck) { thisCarHit = true; if (car.isTruck) { // TRUCK SQUISH! Flatten zombie into a tiny pancake playSound('crush_sound', 1.0); playSound('explosion_sound', 0.5); // Massive green splat explosion (wider, flatter spread) for (let i = 0; i < 50; i++) { const angle = (Math.random() - 0.5) * Math.PI; const spd = 100 + Math.random() * 350; spawnParticles(bounceX, bounceY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd * 2, vy: -Math.abs(Math.sin(angle) * spd * 0.3), size: 5 + Math.random() * 14, life: 1.2 + Math.random() * 0.8, gravity: 300, type: Math.random() > 0.6 ? 'chunk' : 'circle' }); } // Bone fragments for (let i = 0; i < 10; i++) { const angle = Math.random() * Math.PI * 2; const spd = 60 + Math.random() * 180; spawnParticles(bounceX, bounceY, 1, { color: '#e8d8b0', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 3 + Math.random() * 5, life: 1.0 + Math.random() * 0.5, gravity: 450, type: 'square' }); } // Mark zombie as pancaked - will be drawn as tiny flat oval on the road bounceVX = 0; bounceVY = 0; bounceRotVel = 0; bounceRot = 0; // Store pancake state for the aftermath phase car._pancakedAt = { x: bounceX, y: bounceFloorY }; } else { // SPLAT! Green goo burst at impact point (normal car bounce) const hitDir = car.fromLeft ? 1 : -1; for (let i = 0; i < 25; i++) { const angle = (Math.random() - 0.5) * Math.PI; const spd = 80 + Math.random() * 250; spawnParticles(bounceX, bounceY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + hitDir * 150, vy: Math.sin(angle) * spd - 80, size: 3 + Math.random() * 8, life: 0.7 + Math.random() * 0.5, gravity: 350, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Bone/clothing scraps for (let i = 0; i < 6; i++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 150; spawnParticles(bounceX, bounceY, 1, { color: i % 2 === 0 ? '#e8d8b0' : '#2a1f5e', vx: Math.cos(angle) * spd + hitDir * 80, vy: Math.sin(angle) * spd - 60, size: 2 + Math.random() * 5, life: 0.8 + Math.random() * 0.4, gravity: 400, type: 'square' }); } // Launch zombie in hit direction with strong upward bounce bounceVX = hitDir * (300 + Math.random() * 200 + carIdx * 40); bounceVY = -400 - Math.random() * 100 - carIdx * 15; // Higher bounce each time bounceRotVel = hitDir * (600 + Math.random() * 400); // Spin wildly // Play impact sound playSound('boxing_sound', 0.5 + carIdx * 0.05); } } // Redraw particles on top particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); } // === Brief aftermath: truck left a pancake on the road (1200ms) === // Find the pancake position from the truck hit const truckCar = carSequence[carSequence.length - 1]; const pancakePos = truckCar._pancakedAt || { x: landedX, y: streetY }; await animate(1200 / speed, (t, dt) => { // Draw building scene without zombie (it's a pancake now) drawBuildingScene(zombieWinRow, zombieWinCol, null); // Draw the tiny green pancake on the road where the truck hit ctx.save(); ctx.translate(pancakePos.x, pancakePos.y); // Flat green oval (squished zombie) ctx.fillStyle = '#3da854'; ctx.beginPath(); ctx.ellipse(0, 0, 28, 5, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#1a4a1a'; ctx.lineWidth = 1.5; ctx.stroke(); // Tiny eyes on the pancake (looking dazed) ctx.fillStyle = '#e8e4c8'; ctx.beginPath(); ctx.ellipse(-8, -3, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(8, -3, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); // Pupils (spinning/dazed) ctx.fillStyle = '#0a0a0a'; const pupilAngle = t * 10; ctx.beginPath(); ctx.arc(-8 + Math.cos(pupilAngle) * 1.5, -3 + Math.sin(pupilAngle) * 1, 1.5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(8 + Math.cos(pupilAngle + Math.PI) * 1.5, -3 + Math.sin(pupilAngle + Math.PI) * 1, 1.5, 0, Math.PI * 2); ctx.fill(); // Green goo pool around pancake ctx.fillStyle = 'rgba(61, 204, 16, 0.4)'; ctx.beginPath(); ctx.ellipse(0, 2, 40, 8, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Smoke/dust settling if (t < 0.5 && Math.random() < 0.2) { spawnParticles(pancakePos.x + (Math.random() - 0.5) * 50, pancakePos.y - 5, 1, { color: '#555', vx: (Math.random() - 0.5) * 20, vy: -15 - Math.random() * 20, size: 5 + Math.random() * 7, life: 0.5 + Math.random() * 0.3, gravity: -10, type: 'circle' }); } particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); // Add an additional second before zooming back into the main scene await animate(1000 / speed, () => { // Keep the last frame of the aftermath visible during the pause const truckCar = carSequence[carSequence.length - 1]; const pancakePos = truckCar._pancakedAt || { x: landedX, y: streetY }; drawBuildingScene(zombieWinRow, zombieWinCol, null); ctx.save(); ctx.translate(pancakePos.x, pancakePos.y); ctx.fillStyle = '#3da854'; ctx.beginPath(); ctx.ellipse(0, 0, 28, 5, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#1a4a1a'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.fillStyle = '#e8e4c8'; ctx.beginPath(); ctx.ellipse(-8, -3, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(8, -3, 4, 3, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#0a0a0a'; const pupilAngle = Date.now() * 0.01; // Just a static dazed look ctx.beginPath(); ctx.arc(-8 + Math.cos(pupilAngle) * 1.5, -3 + Math.sin(pupilAngle) * 1, 1.5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(8 + Math.cos(pupilAngle + Math.PI) * 1.5, -3 + Math.sin(pupilAngle + Math.PI) * 1, 1.5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'rgba(61, 204, 16, 0.4)'; ctx.beginPath(); ctx.ellipse(0, 2, 40, 8, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); }); // === PHASE 8: Zoom back in to new window (same as wrecking ball ending) === await animate(2000 / speed, (t, dt) => { const easeIn = t * t * (3 - 2 * t); const scaleForWidth = CANVAS_WIDTH / winW; const scaleForHeight = CANVAS_HEIGHT / winH; const endScale = Math.max(scaleForWidth, scaleForHeight); const startScale = 1.0; const currentScale = startScale + (endScale - startScale) * easeIn; // Sky background const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#5da3d9'); skyGrad.addColorStop(0.7, '#87CEEB'); skyGrad.addColorStop(1, '#b0d4e8'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); const screenX = winCenterX + (CANVAS_WIDTH / 2 - winCenterX) * easeIn; const screenY = winCenterY + (CANVAS_HEIGHT / 2 - winCenterY) * easeIn; const tx2 = screenX - winCenterX * currentScale; const ty2 = screenY - winCenterY * currentScale; ctx.save(); ctx.translate(tx2, ty2); ctx.scale(currentScale, currentScale); // Building with repaired window (new zombie's room) const bLeft = buildingCenterX - buildingW / 2; if (currentScale < 3) { const cloudAlpha = Math.min(1, (3 - currentScale) / 2); ctx.fillStyle = `rgba(255, 255, 255, ${cloudAlpha * 0.7})`; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); } ctx.fillStyle = '#5a5a5a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); ctx.fillStyle = '#8a8a8a'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 20); const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (row === zombieWinRow && col === zombieWinCol) { ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = window.gameConfig.settings.backgroundColor || '#0c1225'; ctx.fillRect(wp.x, wp.y, winW, winH); continue; } ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } } } // Redraw particles on top of the building scene, inside the transform // so they scale and pan with the building! particles.forEach(p => { if (p.life > 0) p.draw(ctx); }); ctx.restore(); }); // Fade from window glass to lab (800ms) await animate(800 / speed, (t, dt) => { const overlayAlpha = Math.pow(1 - t, 1.5); if (overlayAlpha > 0.005) { ctx.save(); ctx.globalAlpha = overlayAlpha; ctx.fillStyle = '#1a2a45'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); ctx.restore(); } }); incrementSpecimens(); // Reset and spawn new zombie zombie = null; particles = []; slicedPieces = []; isAnimating = false; highlightMethod(null); bgDarkenTarget = 0; bgDarkenOpacity = 0; await spawnZombieWithDoorAnimation(); cancelAutoReset(); }, // 26. BOXING GLOVE - Spring-loaded punch boxing: async function() { const speed = window.gameConfig.settings.animationSpeed; const gloveStartX = -100; const gloveTargetX = zombie.baseX - 40; const gloveY = zombie.baseY - 130; playSound('boxing_sound'); // Punch extends await animate(200 / speed, (t, dt) => { const currentX = gloveStartX + (gloveTargetX - gloveStartX) * Math.sin(t * Math.PI / 2); // Fast out ctx.save(); ctx.translate(currentX, gloveY); // Spring ctx.strokeStyle = '#aaa'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(-currentX - 50, 0); // Wall const springEndX = -40; // Stop behind the glove (glove center is at 0, radius 40) const numCoils = 10; const stretch = (springEndX - (-currentX - 50)) / numCoils; for(let i=0; i 0.8 && !zombie.isRagdolling) { zombie.isRagdolling = true; zombie.applyImpulse(400, -100); zombie.detachPart('head', 300, -200); // Blood and teeth for (let i = 0; i < 30; i++) { // doubled debris count spawnParticles(zombie.baseX, gloveY, 1, { color: i % 4 === 0 ? '#fff' : '#3dcc10', // Teeth and blood vx: 100 + Math.random() * 200, vy: -50 - Math.random() * 100, size: i % 4 === 0 ? 4 : 5 + Math.random() * 5, life: 1 }); } } }); // Retract glove fully off the left edge of the screen await animate(800 / speed, (t, dt) => { // Ease-in: starts slow, accelerates off screen const easeIn = t * t; const currentX = gloveTargetX - easeIn * (gloveTargetX + 200); // Moves to -200 (off screen left) ctx.save(); ctx.translate(currentX, gloveY); // Spring ctx.strokeStyle = '#aaa'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(-currentX - 50, 0); // Wall const springEndX2 = -40; // Stop behind the glove const numCoils = 10; const stretch = (springEndX2 - (-currentX - 50)) / numCoils; for(let i=0; i 1 ? col / (gridCols - 1) : 0.5; const px = centerX - rowWidth / 2 + colT * rowWidth; spikePositions.push({ x: px, y: rowY, scale: perspectiveScale // Smaller in back, bigger in front }); } } // The spike height - long thin spikes that reach well above the zombie const maxSpikeHeight = 750; // Very tall spikes const baseSpikeWidth = 5; // Thin spikes (scaled by depth) let currentSpikeHeight = 0; // Animated height (0 = hidden, maxSpikeHeight = fully extended) // Helper: Draw all spikes at current height with pseudo-3D depth function drawSpikes(height, bloody) { if (height <= 0) return; ctx.save(); ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let i = 0; i < spikePositions.length; i++) { const sp = spikePositions[i]; const sw = baseSpikeWidth * sp.scale; // Width scales with depth const sh = height * sp.scale; // Height also scales (back spikes shorter) // Spike color: slightly darker in back for depth const brightness = Math.floor(140 + sp.scale * 30); ctx.fillStyle = `rgb(${brightness}, ${brightness}, ${brightness})`; // Draw long thin spike pointing upward from position ctx.beginPath(); ctx.moveTo(sp.x - sw, sp.y); ctx.lineTo(sp.x, sp.y - sh); ctx.lineTo(sp.x + sw, sp.y); ctx.closePath(); ctx.fill(); ctx.stroke(); // Metallic shine on spike ctx.fillStyle = `rgba(255, 255, 255, ${0.1 + sp.scale * 0.08})`; ctx.beginPath(); ctx.moveTo(sp.x - 1, sp.y - 10 * sp.scale); ctx.lineTo(sp.x, sp.y - sh + 5); ctx.lineTo(sp.x + 1, sp.y - 10 * sp.scale); ctx.closePath(); ctx.fill(); // Blood on spike tips when impaled if (bloody && sp.y - sh < zombie.baseY + 200) { ctx.fillStyle = '#3dcc10'; const bloodY = sp.y - sh; ctx.beginPath(); ctx.moveTo(sp.x - 3 * sp.scale, bloodY + 30 * sp.scale); ctx.lineTo(sp.x, bloodY); ctx.lineTo(sp.x + 3 * sp.scale, bloodY + 30 * sp.scale); ctx.closePath(); ctx.fill(); } } ctx.restore(); } // Phase 1: Brief tremble/anticipation - floor vibrates await animate(400 / speed, (t, dt) => { // Floor vibration hint zombie.baseY += Math.sin(t * 60) * 1.5; zombie.applyImpulse((Math.random() - 0.5) * 8, 0); }); // Phase 2: Spikes SHOOT up rapidly (150ms - very fast) playSound('spikes_sound'); zombie.isRagdolling = true; await animate(150 / speed, (t, dt) => { // Cubic ease-out for rapid shooting motion const easeOut = 1 - Math.pow(1 - t, 3); currentSpikeHeight = easeOut * maxSpikeHeight; drawSpikes(currentSpikeHeight, t > 0.6); // Zombie gets lifted/impaled at the moment spikes reach it if (t > 0.4) { // Freeze zombie in place (impaled) zombie.isRagdolling = false; zombie.customPose = true; // Jolt upward slightly from impact zombie.baseY -= (t - 0.4) * 20; // Arms and legs splay outward in shock if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = -60 + (t - 0.4) * 80; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = 60 - (t - 0.4) * 80; } if (zombie.parts.head.attached) { zombie.parts.head.rotation = (Math.random() - 0.5) * 10; } } // Blood burst on impact if (t > 0.5 && Math.random() < 0.8) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 150, vy: -50 - Math.random() * 80, size: 5 + Math.random() * 10, life: 0.8 + Math.random() * 0.4, gravity: 400, type: 'circle' } ); } }); // Phase 3: Zombie frozen in place on spikes - HOLD (1500ms) // Zombie is impaled and motionless zombie.customPose = true; zombie.isRagdolling = false; // Set frozen impaled pose if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = 60; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = -60; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = 30; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = -30; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 15; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = -15; if (zombie.parts.head.attached) zombie.parts.head.rotation = -5; await animate(1500 / speed, (t, dt) => { // Draw spikes at full height with blood drawSpikes(maxSpikeHeight, true); // Drip blood from zombie if (Math.random() < 0.15) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + 50 + Math.random() * 100, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 10, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.5 + Math.random() * 0.3, gravity: 300, type: 'circle' } ); } }); // Phase 4: Spikes retract rapidly back down (200ms) await animate(200 / speed, (t, dt) => { // Cubic ease-in for fast retraction const easeIn = t * t * t; currentSpikeHeight = maxSpikeHeight * (1 - easeIn); drawSpikes(currentSpikeHeight, true); }); // Phase 5: Zombie collapses to the floor now that spikes are gone zombie.customPose = false; zombie.isRagdolling = true; zombie.noBlood = false; // Crumble - all parts detach with small forces (collapse, not explosion) zombie.detachPart('head', (Math.random() - 0.5) * 40, -20); zombie.detachPart('leftUpperArm', -30, 10); zombie.detachPart('rightUpperArm', 30, 10); zombie.detachPart('leftForearm', -25, 15); zombie.detachPart('rightForearm', 25, 15); zombie.detachPart('leftThigh', -15, 5); zombie.detachPart('rightThigh', 15, 5); zombie.detachPart('leftLowerLeg', -10, 10); zombie.detachPart('rightLowerLeg', 10, 10); zombie.detachPart('torso', (Math.random() - 0.5) * 20, 5); // Blood pool particles on the ground for (let i = 0; i < 15; i++) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + 100 + Math.random() * 50, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 40, vy: -10 - Math.random() * 20, size: 6 + Math.random() * 10, life: 1.5 + Math.random() * 0.5, gravity: 300, type: 'circle' } ); } // Let the body settle await animate(1200 / speed, () => {}); }, // 28. BASS - Multiple speakers roll in, headphones drop on zombie, zombie dances, bass destroys bass: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Speaker positions (2 per side, stacked vertically) // Each stack has a bottom speaker and a top speaker stacked on it const speakerScale = 0.8; const cabinetH = 210 * speakerScale; // Cabinet height at this scale const leftStackX = zombie.baseX - 180; const rightStackX = zombie.baseX + 180; const bottomY = zombie.baseY + 100; // Bottom speaker center Y const topY = bottomY - cabinetH - 5; // Top speaker sits on bottom one const speakers = [ { targetX: leftStackX, y: bottomY, side: 'left', scale: speakerScale }, { targetX: leftStackX, y: topY, side: 'left', scale: speakerScale }, { targetX: rightStackX, y: bottomY, side: 'right', scale: speakerScale }, { targetX: rightStackX, y: topY, side: 'right', scale: speakerScale } ]; speakers.forEach(s => { s.x = s.side === 'left' ? -300 : CANVAS_WIDTH + 300; s.pulse = 0; s.power = 0; }); // Helper: Draw headphones at position function drawHeadphones(ctx, hx, hy, openAngle) { ctx.save(); ctx.translate(hx, hy); // Headband (curved arc on top) ctx.strokeStyle = '#222'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.beginPath(); ctx.arc(0, 5, 38, Math.PI + 0.4, -0.4); ctx.stroke(); // Headband padding on top ctx.strokeStyle = '#444'; ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(0, 5, 38, Math.PI + 0.7, -0.7); ctx.stroke(); // Headband cushion ctx.fillStyle = '#555'; ctx.beginPath(); ctx.ellipse(0, -32, 20, 6, 0, 0, Math.PI * 2); ctx.fill(); // Left ear cup ctx.save(); ctx.translate(-38, 5); ctx.rotate(-openAngle * 0.01); // Cup body ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.ellipse(0, 0, 22, 26, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Cushion (inner ring) ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(0, 0, 16, 20, 0, 0, Math.PI * 2); ctx.fill(); // Driver center ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(0, 0, 8, 0, Math.PI * 2); ctx.fill(); // Logo ctx.fillStyle = '#ff6600'; ctx.font = 'bold 8px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('B', 0, 3); ctx.restore(); // Right ear cup ctx.save(); ctx.translate(38, 5); ctx.rotate(openAngle * 0.01); ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.ellipse(0, 0, 22, 26, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(0, 0, 16, 20, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(0, 0, 8, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff6600'; ctx.font = 'bold 8px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('B', 0, 3); ctx.restore(); ctx.restore(); } // Phase 1: Speakers roll in from both sides (1500ms) playSound('crush_sound', 0.4); // Activate bass render state (speakers drawn behind zombie by game loop) bassRenderState.active = true; bassRenderState.speakers = speakers; await animate(1500 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); speakers.forEach(s => { const startX = s.side === 'left' ? -300 : CANVAS_WIDTH + 300; s.x = startX + (s.targetX - startX) * easeOut; }); // Rolling dust if (t < 0.8 && Math.random() < 0.4) { const s = speakers[Math.floor(Math.random() * speakers.length)]; const dustDir = s.side === 'left' ? -1 : 1; spawnParticles(s.x + dustDir * 50, s.y + 90 * s.scale, 1, { color: '#8B7355', vx: dustDir * (20 + Math.random() * 30), vy: -10 - Math.random() * 15, size: 3 + Math.random() * 5, life: 0.4, gravity: 100, type: 'circle' }); } // Zombie notices if (t > 0.4) { zombie.applyImpulse((Math.random() - 0.5) * 10, -5); if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 8) * 5; } }); // Speakers are now in position speakers.forEach(s => { s.x = s.targetX; }); // Phase 2: Headphones drop from ceiling onto zombie's head (900ms) playSound('beartrap_sound', 0.4); const headWorldY = zombie.baseY + (-115) * zombie.scale; const headWorldX = zombie.baseX; const headphoneStartY = -200; const headphoneTargetY = headWorldY - 5; // Sits on top of head let headphonesLanded = false; await animate(900 / speed, (t, dt) => { // Draw speakers in background (via render state - no direct draw needed) speakers.forEach(s => { s.pulse = 0; s.power = 0; }); // Headphones fall with gravity, land at ~60% const landT = 0.55; let hpY; if (t < landT) { const fallT = t / landT; hpY = headphoneStartY + fallT * fallT * (headphoneTargetY - headphoneStartY); } else { const bounceT = (t - landT) / (1 - landT); const bounce = Math.sin(bounceT * Math.PI * 3) * Math.exp(-bounceT * 5) * 10; hpY = headphoneTargetY + bounce; if (!headphonesLanded) { headphonesLanded = true; playSound('crush_sound', 0.3); // Zombie reacts zombie.applyImpulse(0, 10); } } drawHeadphones(ctx, headWorldX, hpY, headphonesLanded ? 0 : 15); // Zombie looks up nervously if (!headphonesLanded && zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 10) * 3; } }); // Phase 3: Speakers power on, music starts, zombie dances! (5000ms) playSound('bass_sound', 0.8); zombie.isRagdolling = false; zombie.customPose = true; let beatTime = 0; const bpm = 128; // beats per minute const beatInterval = 60 / bpm; // seconds per beat let lastBeatSound = 0; await animate(5000 / speed, (t, dt) => { beatTime += dt; const beat = beatTime / beatInterval; const beatPhase = (beat % 1); // 0-1 within each beat const beatPulse = Math.sin(beatPhase * Math.PI * 2) * 0.5 + 0.5; // Smooth pulse 0-1 // Play bass sound on strong beats (every 2 beats) const currentBeat = Math.floor(beat); if (currentBeat > lastBeatSound && currentBeat % 2 === 0) { lastBeatSound = currentBeat; playSound('bass_sound', 0.4 + t * 0.3); } // Power up speakers over first 20%, then stay powered const powerLevel = Math.min(t / 0.2, 1); // Draw speakers with pulsing woofers speakers.forEach((s, i) => { const phasedPulse = Math.sin(beatPhase * Math.PI * 2 + i * 0.3) * 0.5 + 0.5; s.pulse = phasedPulse * powerLevel * (0.5 + t * 0.5); s.power = powerLevel; // Render state handles drawing }); // === ZOMBIE DANCE ANIMATION === const danceIntensity = Math.min(t / 0.3, 1); // Ramps up over first 30% const danceFreq = 2 * Math.PI * (bpm / 60); // Match BPM // Body bob (up and down to the beat) const bobAmount = 12 + t * 8; // Gets more intense zombie.baseY = savedBaseY + Math.sin(beatTime * danceFreq) * bobAmount * danceIntensity; // Hip sway (side to side) const swayAmount = 8 + t * 6; zombie.baseX = savedBaseX + Math.sin(beatTime * danceFreq * 0.5) * swayAmount * danceIntensity; // Torso groove (lean into the beat) zombie.parts.torso.rotation = Math.sin(beatTime * danceFreq * 0.5 + 0.5) * (5 + t * 8) * danceIntensity; // Head nod (forward/back bobbing) if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(beatTime * danceFreq + 0.3) * (8 + t * 6) * danceIntensity; } // Arms pump! (raise up on beat, down between beats) if (zombie.parts.leftUpperArm.attached) { const armPump = Math.abs(Math.sin(beatTime * danceFreq)); zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - armPump * (50 + t * 30) * danceIntensity; } if (zombie.parts.rightUpperArm.attached) { const armPump = Math.abs(Math.sin(beatTime * danceFreq + Math.PI * 0.3)); zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + armPump * (50 + t * 30) * danceIntensity; } // Forearms follow if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = Math.abs(Math.sin(beatTime * danceFreq + 0.2)) * 40 * danceIntensity; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -Math.abs(Math.sin(beatTime * danceFreq + 0.2 + Math.PI * 0.3)) * 40 * danceIntensity; } // Legs step/bounce if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(beatTime * danceFreq) * (10 + t * 8) * danceIntensity; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = Math.sin(beatTime * danceFreq + Math.PI) * (10 + t * 8) * danceIntensity; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = Math.sin(beatTime * danceFreq - 0.3) * (6 + t * 5) * danceIntensity; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = -Math.sin(beatTime * danceFreq + Math.PI - 0.3) * (6 + t * 5) * danceIntensity; } // Draw headphones on zombie head (parented to head part) if (zombie.parts.head.attached) { const zScale = zombie.scale * zombie.globalScale; const hpX = zombie.baseX + zombie.parts.head.x * zScale; const hpY = zombie.baseY + zombie.parts.head.y * zScale; const headRot = zombie.parts.head.rotation * Math.PI / 180; ctx.save(); ctx.translate(hpX, hpY); ctx.rotate(headRot); drawHeadphones(ctx, 0, 0, 0); ctx.restore(); } // Musical note particles floating up from speakers if (Math.random() < 0.15 * powerLevel) { const s = speakers[Math.floor(Math.random() * speakers.length)]; spawnParticles(s.x + (Math.random() - 0.5) * 40, s.y - 80 * s.scale, 1, { color: Math.random() > 0.5 ? '#ff6600' : '#ffcc00', vx: (Math.random() - 0.5) * 30, vy: -40 - Math.random() * 50, size: 8 + Math.random() * 10, life: 1.0 + Math.random() * 0.5, gravity: -30, type: 'circle', shrink: false }); } // Bass pressure wave rings from speakers on strong beats if (beatPhase < 0.1 && Math.floor(beat) % 2 === 0 && t > 0.2) { speakers.forEach(s => { if (Math.random() < 0.5) { spawnParticles(s.x, s.y, 1, { color: 'rgba(255, 130, 0, 0.3)', vx: (zombie.baseX - s.x) * 0.3, vy: (zombie.baseY - s.y) * 0.2, size: 20 + Math.random() * 15, life: 0.4, gravity: 0, type: 'circle' }); } }); } // Screen pulse on strong beats (subtle) if (beatPhase < 0.05 && t > 0.3) { ctx.fillStyle = `rgba(255, 100, 0, ${0.05 + t * 0.03})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Phase 4: BASS DROP! Too intense - zombie shakes apart (1800ms) playSound('bass_sound', 1.0); playSound('explosion_sound', 0.6); zombie.customPose = false; zombie.isRagdolling = true; await animate(1800 / speed, (t, dt) => { beatTime += dt; const beatPhase2 = ((beatTime / beatInterval) % 1); // All speakers fire MAXIMUM bass simultaneously speakers.forEach((s, i) => { const megaPulse = Math.abs(Math.sin(t * 30 + i)) * (1 + t); s.pulse = megaPulse; s.power = 1; }); // Screen shake - INTENSE const shakeIntensity = 20 + t * 30; zombie.baseX = savedBaseX + Math.sin(t * 80) * shakeIntensity; zombie.baseY = savedBaseY + Math.cos(t * 65) * shakeIntensity * 0.6; // Zombie vibrates violently zombie.applyImpulse( (Math.random() - 0.5) * (200 + t * 300), (Math.random() - 0.5) * (100 + t * 200) ); // All limbs flail wildly outward for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limbName !== 'torso') { limb.angularVelocity += (Math.random() - 0.5) * 600 * t; } } // Detach parts progressively if (t > 0.2 && t < 0.25) { zombie.detachPart('leftForearm', -300, -200); zombie.detachPart('rightForearm', 300, -200); } if (t > 0.35 && t < 0.4) { zombie.detachPart('leftUpperArm', -400, -250); zombie.detachPart('rightUpperArm', 400, -250); } if (t > 0.5 && t < 0.55) { zombie.detachPart('head', (Math.random() - 0.5) * 300, -400); // Headphones fly off with head playSound('crush_sound', 0.5); } if (t > 0.65 && t < 0.7) { zombie.detachPart('leftLowerLeg', -200, -150); zombie.detachPart('rightLowerLeg', 200, -150); zombie.detachPart('leftThigh', -250, -180); zombie.detachPart('rightThigh', 250, -180); } if (t > 0.8 && t < 0.85) { zombie.detachPart('torso', (Math.random() - 0.5) * 100, -200); } // Draw headphones following the head (or flying off if detached) if (zombie.parts.head.attached) { const zScale2 = zombie.scale * zombie.globalScale; const hpX2 = zombie.baseX + zombie.parts.head.x * zScale2; const hpY2 = zombie.baseY + zombie.parts.head.y * zScale2; const headRot2 = zombie.parts.head.rotation * Math.PI / 180; ctx.save(); ctx.translate(hpX2, hpY2); ctx.rotate(headRot2); drawHeadphones(ctx, 0, -5, 0); ctx.restore(); } // Massive shockwave rings expanding from speakers if (t > 0.1 && Math.random() < 0.3) { const s = speakers[Math.floor(Math.random() * speakers.length)]; const waveR = t * 200; ctx.strokeStyle = `rgba(255, 130, 0, ${(1 - t) * 0.5})`; ctx.lineWidth = 8 * (1 - t) + 2; ctx.beginPath(); ctx.arc(s.x, s.y, waveR, 0, Math.PI * 2); ctx.stroke(); } // Screen flash on each detachment if ((t > 0.2 && t < 0.22) || (t > 0.35 && t < 0.37) || (t > 0.5 && t < 0.52) || (t > 0.65 && t < 0.67) || (t > 0.8 && t < 0.82)) { ctx.fillStyle = 'rgba(255, 160, 50, 0.4)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Green goo particles from each detachment if (Math.random() < 0.5 * t) { spawnParticles(zombie.baseX + (Math.random() - 0.5) * 100, zombie.baseY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 300, vy: (Math.random() - 0.5) * 200 - 50, size: 5 + Math.random() * 12, life: 0.8 + Math.random() * 0.5, gravity: 350, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } }); // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Phase 5: Speakers slide back off-screen (800ms) await animate(800 / speed, (t, dt) => { const easeIn = t * t; speakers.forEach(s => { const exitX = s.side === 'left' ? -300 : CANVAS_WIDTH + 300; s.x = s.targetX + easeIn * (exitX - s.targetX); s.pulse = 0; s.power = Math.max(0, 1 - t * 2); }); // Trailing dust if (t < 0.7 && Math.random() < 0.3) { const s = speakers[Math.floor(Math.random() * speakers.length)]; const dustDir = s.side === 'left' ? 1 : -1; spawnParticles(s.x + dustDir * 40, s.y + 80 * s.scale, 1, { color: '#8B7355', vx: dustDir * (15 + Math.random() * 25), vy: -8 - Math.random() * 12, size: 3 + Math.random() * 4, life: 0.35, gravity: 100, type: 'circle' }); } }); await animate(500 / speed, () => {}); // Deactivate bass render state bassRenderState.active = false; bassRenderState.speakers = []; }, // 29. POSSESSION - Dark ritual pentagram + candles (rendered BEHIND zombie via possessionRenderState) possession: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; playSound('possession_sound'); // Pentagram parameters - drawn on floor around zombie const pentaX = zombie.baseX; const pentaY = zombie.baseY + 250; // Floor level (perspective foreshortened) const pentaRadius = 200; const pentaSquash = 0.35; // Generate pentagram points (5 points of the star) const pentaPoints = []; for (let i = 0; i < 5; i++) { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; pentaPoints.push({ x: pentaX + Math.cos(angle) * pentaRadius, y: pentaY + Math.sin(angle) * pentaRadius * pentaSquash }); } // Star drawing order const starOrder = [0, 2, 4, 1, 3, 0]; const starSegments = []; for (let i = 0; i < starOrder.length - 1; i++) { const from = pentaPoints[starOrder[i]]; const to = pentaPoints[starOrder[i + 1]]; const dx = to.x - from.x; const dy = to.y - from.y; const len = Math.sqrt(dx * dx + dy * dy); starSegments.push({ from, to, len }); } const totalStarLen = starSegments.reduce((sum, s) => sum + s.len, 0); // Initialise render state so game loop draws everything behind the zombie possessionRenderState.active = true; possessionRenderState.pentaX = pentaX; possessionRenderState.pentaY = pentaY; possessionRenderState.pentaRadius = pentaRadius; possessionRenderState.pentaSquash = pentaSquash; possessionRenderState.pentaPoints = pentaPoints; possessionRenderState.starSegments = starSegments; possessionRenderState.totalStarLen = totalStarLen; possessionRenderState.pentagramProgress = 0; possessionRenderState.pentagramAlpha = 1; possessionRenderState.candles = []; // Phase 1: Pentagram draws itself on the floor (3000ms) // The "invisible pen" effect - lines appear progressively // The game loop draws everything BEHIND the zombie via possessionRenderState await animate(3000 / speed, (t, dt) => { // Update render state - game loop draws pentagram behind zombie possessionRenderState.pentagramProgress = t; // Spark/ember at the drawing tip if (t > 0.01 && t < 0.98) { let tipX, tipY; if (t < 0.4) { const circleT = t / 0.4; const circleAngle = -Math.PI / 2 + circleT * Math.PI * 2; tipX = pentaX + Math.cos(circleAngle) * (pentaRadius + 15); tipY = pentaY + Math.sin(circleAngle) * (pentaRadius + 15) * pentaSquash; } else { const starT = (t - 0.4) / 0.6; const drawLen = starT * totalStarLen; let accumulated = 0; tipX = starSegments[0].from.x; tipY = starSegments[0].from.y; for (let i = 0; i < starSegments.length; i++) { const seg = starSegments[i]; if (accumulated + seg.len <= drawLen) { tipX = seg.to.x; tipY = seg.to.y; accumulated += seg.len; } else { const remaining = drawLen - accumulated; const st = remaining / seg.len; tipX = seg.from.x + (seg.to.x - seg.from.x) * st; tipY = seg.from.y + (seg.to.y - seg.from.y) * st; break; } } } if (Math.random() < 0.7) { spawnParticles(tipX, tipY, 1, { color: Math.random() > 0.4 ? '#ff4400' : '#ffaa00', vx: (Math.random() - 0.5) * 30, vy: -20 - Math.random() * 30, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: -30, type: 'circle' }); } } // Zombie watches nervously if (t > 0.2) { zombie.applyImpulse((Math.random() - 0.5) * 8, -3); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 6) * 5; } } }); // Phase 2: Candles pop in behind the zombie (1500ms) const numCandles = 14; const candles = []; // Floor area: from near top of trap door down, full width const floorY = trapDoor.y; // top of trap door / floor level for (let i = 0; i < numCandles; i++) { // Spread candles across the entire floor area width and depth // Y range moved down by 100px from previous setting, and candles near pentagram are excluded const floorStart = floorY - 10 + 300; // bottom of visible floor area (moved down 100px) const floorDepth = 300; // how far up into the scene candles can appear // Try a few times to place a candle that isn't too close to the pentagram center let cx, cy, attempts = 0; do { cx = 60 + Math.random() * (CANVAS_WIDTH - 120); cy = floorStart - Math.random() * floorDepth + 30; attempts++; const dxPenta = cx - pentaX; const dyPenta = cy - pentaY; const distToPenta = Math.sqrt(dxPenta * dxPenta + dyPenta * dyPenta); if (distToPenta > pentaRadius + 40) break; // Far enough from pentagram } while (attempts < 15); candles.push({ x: cx, y: cy, height: 30 + Math.random() * 25, width: 5 + Math.random() * 3, popDelay: (i / numCandles) * 0.7 + Math.random() * 0.15, scale: 0, flamePhase: Math.random() * Math.PI * 2, flameSize: 0.8 + Math.random() * 0.4 }); } // Sort candles by Y for depth (back ones first) candles.sort((a, b) => a.y - b.y); // Add candles to render state so game loop draws them behind zombie possessionRenderState.candles = candles; possessionRenderState.pentagramProgress = 1; await animate(1500 / speed, (t, dt) => { // Update candle scales (game loop draws them behind zombie) candles.forEach(c => { if (t >= c.popDelay) { const localT = Math.min((t - c.popDelay) / 0.15, 1); if (localT < 0.6) { c.scale = (localT / 0.6) * 1.2; } else { c.scale = 1.2 - (localT - 0.6) / 0.4 * 0.2; } c.scale = Math.min(c.scale, 1.1); } }); // Puff particles on candle pop candles.forEach(c => { if (t >= c.popDelay && t < c.popDelay + 0.03 && c.scale > 0) { spawnParticles(c.x, c.y - c.height, 1, { color: '#ffcc00', vx: (Math.random() - 0.5) * 20, vy: -15 - Math.random() * 20, size: 3 + Math.random() * 4, life: 0.3, gravity: -20, type: 'circle' }); } }); if (Math.random() < 0.08) { zombie.applyImpulse((Math.random() - 0.5) * 12, -5); } }); // Phase 3: Hold the scene - pentagram glows, candles flicker, eerie atmosphere (2000ms) await animate(2000 / speed, (t, dt) => { // Pentagram pulses (update alpha so game loop draws it pulsing) possessionRenderState.pentagramAlpha = 0.7 + Math.sin(t * 8) * 0.3; // All candles fully visible (game loop draws behind zombie) candles.forEach(c => { c.scale = 1; }); // Zombie trembles zombie.applyImpulse((Math.random() - 0.5) * 10, (Math.random() - 0.5) * 5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 12) * 4; } }); // Phase 4: Big dark shadow passes over the floor from right to left (2000ms) // Each candle goes out the moment the shadow's leading edge touches it playSound('possession_sound', 0.4); // Activate floor shadow in render state (drawn BEHIND zombie by drawPossessionScene) possessionRenderState.floorShadowActive = true; await animate(2000 / speed, (t, dt) => { // Update pentagram possessionRenderState.pentagramAlpha = 0.7 + Math.sin(t * 6) * 0.2; // Update shadow progress in render state (game loop draws it behind zombie) possessionRenderState.floorShadowProgress = t; // Calculate leading edge X for candle extinguishing logic const shadowRightEdge = CANVAS_WIDTH + 50; const drawLeft = shadowRightEdge - t * (CANVAS_WIDTH + 100); // Blow out each candle when the shadow leading edge reaches it candles.forEach(c => { if (c.flameSize > 0 && c.x >= drawLeft - 20) { // Shadow has touched this candle - extinguish it c.flameSize = 0; // Smoke puff spawnParticles(c.x, c.y - c.height - 12, 1, { color: '#555', vx: (Math.random() - 0.5) * 20 - 15, vy: -30 - Math.random() * 30, size: 5 + Math.random() * 8, life: 0.8 + Math.random() * 0.5, gravity: -20, type: 'circle' }); } }); // Zombie stands up straight as shadow passes over // Smoothly transition all parts to upright rest pose const straightenT = Math.min(t / 0.7, 1); // Fully straight by 70% of shadow pass const ease = straightenT * straightenT * (3 - 2 * straightenT); // smoothstep if (zombie.parts.head.attached) { zombie.parts.head.rotation *= (1 - ease); } zombie.parts.torso.rotation *= (1 - ease); if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + (zombie.parts.leftUpperArm.rotation - zombie.parts.leftUpperArm.restAngle) * (1 - ease); } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + (zombie.parts.rightUpperArm.rotation - zombie.parts.rightUpperArm.restAngle) * (1 - ease); } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = zombie.parts.leftForearm.restAngle + (zombie.parts.leftForearm.rotation - zombie.parts.leftForearm.restAngle) * (1 - ease); } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = zombie.parts.rightForearm.restAngle + (zombie.parts.rightForearm.rotation - zombie.parts.rightForearm.restAngle) * (1 - ease); } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation *= (1 - ease); } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation *= (1 - ease); } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = zombie.parts.leftLowerLeg.restAngle + (zombie.parts.leftLowerLeg.rotation - zombie.parts.leftLowerLeg.restAngle) * (1 - ease); } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = zombie.parts.rightLowerLeg.restAngle + (zombie.parts.rightLowerLeg.rotation - zombie.parts.rightLowerLeg.restAngle) * (1 - ease); } }); // Darken the screen by 20% (persists for remainder) bgDarkenTarget = Math.min((bgDarkenTarget || 0) + 0.2, 0.8); // Shadow now persists via render state (floorShadowProgress stays at 1) possessionRenderState.floorShadowProgress = 1; // Zombie is now standing perfectly straight - set custom pose zombie.isRagdolling = false; zombie.customPose = true; // Phase 5: Zombie closes eyes (800ms) // Dim pentagram, candles stay out, shadow persists possessionRenderState.pentagramAlpha = 0.4; await animate(800 / speed, (t, dt) => { // Shadow persists via render state (drawn behind zombie automatically) // Force zombie's eyes closed by setting isBlinking zombie.isBlinking = true; zombie.blinkDuration = 999; // Keep eyes closed indefinitely // Keep zombie perfectly still and straight if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } zombie.parts.torso.rotation = 0; }); // Phase 6: Erratic head movement - fast bursts with pauses, escalating intensity zombie.isRagdolling = false; zombie.customPose = true; // Store head afterimage positions for the trail effect const headAfterimages = []; // Array of { rotation, alpha } const maxAfterimages = 6; // Keep eyes closed throughout erratic movement zombie.isBlinking = true; zombie.blinkDuration = 999; // Helper: draw afterimage trail for head function drawHeadAfterimages() { if (headAfterimages.length > 1) { const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; ctx.save(); for (let i = 0; i < headAfterimages.length - 1; i++) { const img = headAfterimages[i]; const alpha = (i + 1) / headAfterimages.length * 0.35; ctx.save(); ctx.globalAlpha = alpha; ctx.translate(headWorldX, headWorldY); ctx.rotate(img.rotation * Math.PI / 180); ctx.scale(scale, scale); ctx.fillStyle = zombie.bodyColor; ctx.beginPath(); ctx.ellipse(0, 3, 32, 38, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } ctx.restore(); } } // Helper: spawn dark rising particles (disabled) function spawnDarkParticles() { // Particles removed per user request if (false) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY - 100 + (Math.random() - 0.5) * 50, 1, { color: Math.random() > 0.5 ? '#220000' : '#440022', vx: (Math.random() - 0.5) * 15, vy: -30 - Math.random() * 40, size: 4 + Math.random() * 6, life: 0.8 + Math.random() * 0.5, gravity: -40, type: 'circle' } ); } } // Define escalating bursts: each burst is { duration, freq, amp, pauseAfter } const bursts = [ { duration: 600, freq: 25, amp: 8, pauseAfter: 400 }, { duration: 500, freq: 35, amp: 12, pauseAfter: 300 }, { duration: 450, freq: 45, amp: 16, pauseAfter: 250 }, { duration: 400, freq: 55, amp: 20, pauseAfter: 200 }, { duration: 350, freq: 70, amp: 25, pauseAfter: 150 }, ]; // Execute each burst-pause cycle for (let b = 0; b < bursts.length; b++) { const burst = bursts[b]; // Burst: fast erratic head vibration with afterimages await animate(burst.duration / speed, (t, dt) => { zombie.isBlinking = true; const headRot = Math.sin(t * burst.freq) * burst.amp; if (zombie.parts.head.attached) { zombie.parts.head.rotation = headRot; } // Update afterimages if (headAfterimages.length === 0 || Math.abs(headRot - (headAfterimages[headAfterimages.length - 1] || {}).rotation || 0) > 3) { headAfterimages.push({ rotation: headRot, time: t }); if (headAfterimages.length > maxAfterimages) { headAfterimages.shift(); } } drawHeadAfterimages(); // No dark particles during head shaking - clean visual focus on the erratic movement }); // Pause: head stops completely, afterimages fade headAfterimages.length = 0; // Clear trail during pause if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } await animate(burst.pauseAfter / speed, (t, dt) => { zombie.isBlinking = true; // Head stays still - eerie silence if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } // No particles during pauses - builds tension through silence }); } // Phase 7: Snap straight then freeze - zombie stands motionless (800ms) // No more particles from this point - complete silence headAfterimages.length = 0; // Snap ALL body parts to perfectly straight pose instantly if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } zombie.parts.torso.rotation = 0; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = zombie.parts.leftForearm.restAngle; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = zombie.parts.rightForearm.restAngle; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 0; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = 0; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = zombie.parts.leftLowerLeg.restAngle; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = zombie.parts.rightLowerLeg.restAngle; await animate(800 / speed, (t, dt) => { zombie.isBlinking = true; // Total stillness - no movement, no particles, deeply unsettling silence if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } zombie.parts.torso.rotation = 0; }); // Phase 8: Eyes SNAP open - blood red! (200ms) playSound('beartrap_sound', 0.4); // Force eyes open by disabling blink zombie.isBlinking = false; zombie.blinkDuration = 0; zombie.blinkTimer = 9999; // Prevent future blinks // Override eye color to blood red by modifying faceParams const originalEyeColor = zombie.faceParams.eyeColor; zombie.faceParams.eyeColor = '#880000'; // Dark blood red sclera // Make pupils glow red const originalPupilSize = zombie.faceParams.pupilSize; zombie.faceParams.pupilSize = 2; // Tiny pinpoint pupils await animate(200 / speed, (t, dt) => { // Eyes are open and blood red (rendered by zombie.drawHead using faceParams) // Brief screen flash of dark red on the snap if (t < 0.3) { ctx.fillStyle = `rgba(80, 0, 0, ${(1 - t / 0.3) * 0.3})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Hold with red eyes staring - deeply unsettling (1500ms) await animate(1500 / speed, (t, dt) => { // Zombie stands perfectly still with blood-red eyes if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } zombie.parts.torso.rotation = 0; // Subtle red glow around the eyes const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; const glowPulse = 0.3 + Math.sin(t * 6) * 0.15; ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.scale(scale, scale); // Left eye glow ctx.fillStyle = `rgba(255, 0, 0, ${glowPulse})`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 12; ctx.beginPath(); ctx.ellipse(zombie.faceParams.leftEyeX, zombie.faceParams.leftEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); // Right eye glow ctx.beginPath(); ctx.ellipse(zombie.faceParams.rightEyeX, zombie.faceParams.rightEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); // Particles removed }); // Phase 9: Zombie slowly turns red (2500ms) // Store original colors for lerping const originalBodyColor = zombie.bodyColor; const originalClothingColor = zombie.clothingColor; const targetRedBody = '#8b1a1a'; // Dark blood red const targetRedClothing = '#4a0a0a'; // Very dark red await animate(2500 / speed, (t, dt) => { // Keep zombie still with red eyes if (zombie.parts.head.attached) { zombie.parts.head.rotation = 0; } zombie.parts.torso.rotation = 0; // Slowly lerp body color from green to red zombie.bodyColor = zombie.lerpColor(originalBodyColor, targetRedBody, t); zombie.clothingColor = zombie.lerpColor(originalClothingColor, targetRedClothing, t); // Subtle red glow around eyes continues const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; const glowPulse = 0.3 + Math.sin(t * 8) * 0.15; ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.scale(scale, scale); ctx.fillStyle = `rgba(255, 0, 0, ${glowPulse})`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 12; ctx.beginPath(); ctx.ellipse(zombie.faceParams.leftEyeX, zombie.faceParams.leftEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(zombie.faceParams.rightEyeX, zombie.faceParams.rightEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); }); // Zombie is now fully red zombie.bodyColor = targetRedBody; zombie.clothingColor = targetRedClothing; // Phase 10: Zombie vibrates violently (1500ms) zombie.customPose = true; zombie.isRagdolling = false; const vibSavedX = zombie.baseX; const vibSavedY = zombie.baseY; await animate(1500 / speed, (t, dt) => { // Violent vibration - intensity increases over time const vibIntensity = 5 + t * 20; // 5px to 25px const vibFreq = 60 + t * 40; // Gets faster zombie.baseX = vibSavedX + Math.sin(t * vibFreq) * vibIntensity; zombie.baseY = vibSavedY + Math.cos(t * vibFreq * 0.8) * vibIntensity * 0.5; // All body parts vibrate independently for chaotic look if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * vibFreq * 1.3) * (3 + t * 8); } zombie.parts.torso.rotation = Math.sin(t * vibFreq * 0.9 + 1) * (2 + t * 5); if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + Math.sin(t * vibFreq * 1.1 + 2) * (5 + t * 12); } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + Math.sin(t * vibFreq * 1.2 + 3) * (5 + t * 12); } if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(t * vibFreq * 0.95 + 4) * (3 + t * 8); } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = Math.sin(t * vibFreq * 1.05 + 5) * (3 + t * 8); } // Red mist particles start leaking out as vibration intensifies (last 40%) if (t > 0.6 && Math.random() < (t - 0.6) * 1.5) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 80, zombie.baseY + (Math.random() - 0.5) * 200, 1, { color: Math.random() > 0.3 ? '#cc0000' : '#880000', vx: (Math.random() - 0.5) * 40, vy: -20 - Math.random() * 30, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: -20, type: 'circle' } ); } // Red eye glow persists const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.scale(scale, scale); ctx.fillStyle = `rgba(255, 0, 0, 0.35)`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 10; ctx.beginPath(); ctx.ellipse(zombie.faceParams.leftEyeX, zombie.faceParams.leftEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(zombie.faceParams.rightEyeX, zombie.faceParams.rightEyeY, 14, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); }); // Phase 11: Sequential body part explosions into red mist! // Keep zombie vibrating throughout the explosions (don't freeze in place) zombie.noBlood = true; zombie.customPose = false; zombie.isRagdolling = true; const burstX = vibSavedX; const burstY = vibSavedY; const scale = zombie.scale * zombie.globalScale; // Body parts in sequence order (extremities first, torso last) const partBurstOrder = [ 'leftForearm', 'rightForearm', 'leftLowerLeg', 'rightLowerLeg', 'leftUpperArm', 'rightUpperArm', 'leftThigh', 'rightThigh', 'head', 'torso' ]; // World positions for each part (for particle spawning) const partWorldPositions = { head: { x: 0, y: -115 }, torso: { x: 0, y: 0 }, leftUpperArm: { x: -48, y: -30 }, rightUpperArm: { x: 48, y: -30 }, leftForearm: { x: -48, y: 60 }, rightForearm: { x: 48, y: 60 }, leftThigh: { x: -22, y: 120 }, rightThigh: { x: 22, y: 120 }, leftLowerLeg: { x: -22, y: 200 }, rightLowerLeg: { x: 22, y: 200 } }; // Explode each part one at a time with a short delay between for (let i = 0; i < partBurstOrder.length; i++) { const partName = partBurstOrder[i]; const part = zombie.parts[partName]; if (!part || !part.visible) continue; // Get world position of this part const partPos = partWorldPositions[partName] || { x: 0, y: 0 }; const partWorldX = burstX + partPos.x * scale; const partWorldY = burstY + partPos.y * scale; // Hide the part instantly part.visible = false; part.attached = false; // Play a small sound for each burst if (i === partBurstOrder.length - 1) { playSound('explosion_sound', 0.7); // Bigger sound for torso (final) } else { playSound('crush_sound', 0.3 + i * 0.03); } // Fine red mist particles from this part's position const mistCount = partName === 'torso' ? 40 : (partName === 'head' ? 25 : 18); for (let p = 0; p < mistCount; p++) { const angle = Math.random() * Math.PI * 2; const spd = 40 + Math.random() * 200; spawnParticles( partWorldX + (Math.random() - 0.5) * 30, partWorldY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.4 ? '#cc0000' : (Math.random() > 0.5 ? '#880000' : '#ff2222'), vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 30, size: 3 + Math.random() * 7, life: 1.5 + Math.random() * 1.5, gravity: -30 + Math.random() * 50, type: 'circle', shrink: true } ); } // A few darker chunks per part for (let p = 0; p < 5; p++) { const angle = Math.random() * Math.PI * 2; const spd = 60 + Math.random() * 150; spawnParticles(partWorldX, partWorldY, 1, { color: Math.random() > 0.5 ? '#990000' : '#660000', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 6 + Math.random() * 10, life: 1.0 + Math.random() * 0.8, gravity: 150, type: 'chunk' }); } // Brief pause between each part explosion (120ms each) // Keep zombie vibrating during pause so it doesn't freeze await animate(120 / speed, (t, dt) => { const vibIntensity = 15; const vibFreq = 50; zombie.baseX = vibSavedX + Math.sin(Date.now() * 0.05 * vibFreq / 50) * vibIntensity; zombie.baseY = savedBaseY + Math.cos(Date.now() * 0.04 * vibFreq / 50) * vibIntensity * 0.5; // Keep ragdoll active so limbs flail zombie.applyImpulse((Math.random() - 0.5) * 60, (Math.random() - 0.5) * 30); }); } // Screen flash after all parts have burst await animate(150 / speed, (t, dt) => { ctx.fillStyle = `rgba(150, 0, 0, ${(1 - t) * 0.5})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // Let the mist settle await animate(2000 / speed, () => {}); scheduleAutoReset(); }, // 30. INFLATE - Interactive pump: player clicks to pump, zombie inflates and floats, bursts after 8 pumps inflate: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Pump position (same area as the Crusher button) const pumpX = zombie.baseX - 260; const pumpY = zombie.baseY + 320; // Zombie's belly button world position (navel is at local (0, 28) on torso, torso at (0,0) relative to base) const navelWorldX = zombie.baseX; const navelWorldY = zombie.baseY + 28 * zombie.scale; // Total pumps needed to burst const maxPumps = 8; let pumpCount = 0; let pumpClicked = false; let animatingPump = false; let handleProgress = 0; // 0 = up, 1 = down zombie.isRagdolling = false; zombie.customPose = true; // Phase 1: Pump pops up from the ground with spring bounce (400ms) playSound('beartrap_sound', 0.3); await animate(400 / speed, (t, dt) => { // Elastic bounce easing let spring; if (t < 0.5) { spring = 4 * t * t; } else if (t < 0.75) { spring = 1 + Math.sin((t - 0.5) / 0.25 * Math.PI) * 0.15; } else { spring = 1 + (1 - (t - 0.75) / 0.25) * 0.05 * Math.sin((t - 0.75) * 40); } spring = Math.max(0, Math.min(spring, 1.2)); const pumpRise = spring; const pumpDrawY = pumpY + (1 - pumpRise) * 140; drawInflatePump(ctx, pumpX, pumpDrawY, 0, Math.min(pumpRise, 1)); }); // Dust puff from pump popping up for (let i = 0; i < 6; i++) { spawnParticles(pumpX + (Math.random() - 0.5) * 30, pumpY + 5, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 70, vy: -25 - Math.random() * 45, size: 4 + Math.random() * 6, life: 0.4, gravity: 150, type: 'circle' }); } // Phase 2: Hose extends from pump to zombie's belly button (600ms) await animate(600 / speed, (t, dt) => { // Draw pump at final position drawInflatePump(ctx, pumpX, pumpY, 0, 1); // Animate hose growing from pump nozzle to zombie belly const hoseProgress = t; drawInflateHose(ctx, pumpX, pumpY, navelWorldX, navelWorldY, hoseProgress); }); // Phase 3: Interactive - wait for player to click pump 8 times document.getElementById('reset-button').disabled = false; // Set up click/tap handler on the pump const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const isOnPump = (px, py) => { // Check if click is near the pump handle area (generous hit zone) const dx = px - pumpX; const dy = py - (pumpY - 60); return Math.sqrt(dx * dx + dy * dy) < 80; }; const handlePumpClick = (e) => { if (pumpCount >= maxPumps || animatingPump) return; const pos = getPointerPos(e); if (isOnPump(pos.x, pos.y)) { pumpClicked = true; e.preventDefault(); } }; canvas.addEventListener('mousedown', handlePumpClick); canvas.addEventListener('touchstart', handlePumpClick, { passive: false }); // Smooth interpolation state for inflation (lerps toward target each frame) let smoothPumpLevel = 0; // Smoothly tracks pumpCount (0 to maxPumps) const inflateSmoothing = 4.5; // How fast it catches up (higher = faster) // Interactive loop: wait for clicks, animate each pump const waitStartTime = Date.now(); await new Promise((resolve) => { let lastFrameTime = performance.now(); const pumpLoop = (now) => { if (pumpCount >= maxPumps) { resolve(); return; } if (Date.now() - waitStartTime > 60000) { resolve(); return; } // 60s timeout const dt = Math.min((now - lastFrameTime) / 1000, 0.05); lastFrameTime = now; // Smoothly interpolate toward target pump level smoothPumpLevel += (pumpCount - smoothPumpLevel) * inflateSmoothing * dt; // Clamp to avoid overshooting if (Math.abs(smoothPumpLevel - pumpCount) < 0.01) smoothPumpLevel = pumpCount; // Use smoothPumpLevel instead of pumpCount for all visual calculations const sp = smoothPumpLevel; // Shorthand // Calculate current inflation state from smooth level const floatOffset = sp * 25; // Float up 25px per pump // Update zombie pose and inflation zombie.baseY = savedBaseY - floatOffset; zombie.globalScale = 1; // We scale torso/head individually // Torso and head inflate MORE than limbs const torsoInflation = 1 + sp * 0.25; const headInflation = 1 + sp * 0.22; // Roundness: at 0 pumps aspect is normal, at max pumps it's perfectly round (1:1) const roundness = sp / maxPumps; // 0 to 1 // Set inflate roundness on zombie so draw methods can round corners zombie._inflateRoundness = roundness; // Torso starts wider than tall; as roundness increases, scaleY catches up to scaleX zombie.parts.torso.scaleX = torsoInflation; zombie.parts.torso.scaleY = torsoInflation * (0.9 + roundness * 0.1); if (zombie.parts.head.attached) { zombie.parts.head.scaleX = headInflation; zombie.parts.head.scaleY = headInflation; } // === ADJUST JOINT OFFSETS so limbs stay attached to the inflating torso edge === const tScX = zombie.parts.torso.scaleX; const tScY = zombie.parts.torso.scaleY; // Head: push upward as torso grows taller zombie.joints[0].parentOffset.y = -115 * tScY; // Left upper arm: push left and up/down with torso growth zombie.joints[1].parentOffset.x = -48 * tScX; zombie.joints[1].parentOffset.y = -65 * tScY; // Right upper arm zombie.joints[2].parentOffset.x = 48 * tScX; zombie.joints[2].parentOffset.y = -65 * tScY; // Left thigh: push down and out zombie.joints[5].parentOffset.x = -22 * tScX; zombie.joints[5].parentOffset.y = 80 * tScY; // Right thigh zombie.joints[6].parentOffset.x = 22 * tScX; zombie.joints[6].parentOffset.y = 80 * tScY; // X-pose: arms out to sides, legs spread // Limbs become rounder: scaleX grows faster (fattens width) while scaleY grows less const limbRoundX = 1 + sp * (0.08 + roundness * 0.12); // Gets wider faster const limbRoundY = 1 + sp * 0.05; // Height grows less (becoming rounder) if (zombie.parts.leftUpperArm.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + xPose * 80; zombie.parts.leftUpperArm.scaleX = limbRoundX; zombie.parts.leftUpperArm.scaleY = limbRoundY; } if (zombie.parts.rightUpperArm.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle - xPose * 80; zombie.parts.rightUpperArm.scaleX = limbRoundX; zombie.parts.rightUpperArm.scaleY = limbRoundY; } if (zombie.parts.leftForearm.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.leftForearm.rotation = xPose * 20; zombie.parts.leftForearm.scaleX = limbRoundX; zombie.parts.leftForearm.scaleY = limbRoundY; } if (zombie.parts.rightForearm.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.rightForearm.rotation = -xPose * 20; zombie.parts.rightForearm.scaleX = limbRoundX; zombie.parts.rightForearm.scaleY = limbRoundY; } if (zombie.parts.leftThigh.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.leftThigh.rotation = xPose * 30; zombie.parts.leftThigh.scaleX = limbRoundX; zombie.parts.leftThigh.scaleY = limbRoundY; } if (zombie.parts.rightThigh.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.rightThigh.rotation = -xPose * 30; zombie.parts.rightThigh.scaleX = limbRoundX; zombie.parts.rightThigh.scaleY = limbRoundY; } if (zombie.parts.leftLowerLeg.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.leftLowerLeg.rotation = xPose * 15; zombie.parts.leftLowerLeg.scaleX = limbRoundX; zombie.parts.leftLowerLeg.scaleY = limbRoundY; } if (zombie.parts.rightLowerLeg.attached) { const xPose = Math.min(sp / 3, 1); zombie.parts.rightLowerLeg.rotation = -xPose * 15; zombie.parts.rightLowerLeg.scaleX = limbRoundX; zombie.parts.rightLowerLeg.scaleY = limbRoundY; } // Handle pump click animation if (pumpClicked && !animatingPump) { animatingPump = true; pumpClicked = false; handleProgress = 0; playSound('inflate_sound', 0.7); } if (animatingPump) { // Animate pump handle down then back up (one full stroke) handleProgress += dt * 4; // Complete stroke in ~0.5 seconds if (handleProgress >= 1) { // Stroke complete - count the pump animatingPump = false; handleProgress = 0; pumpCount++; // Zombie jolts upward slightly from the air burst zombie.baseY -= 5; // Air puff particles at the navel connection const currentNavelY = zombie.baseY + 28 * zombie.scale * (zombie.parts.torso.scaleY || 1); for (let i = 0; i < 5; i++) { spawnParticles(navelWorldX + (Math.random() - 0.5) * 20, currentNavelY, 1, { color: 'rgba(200, 220, 255, 0.6)', vx: (Math.random() - 0.5) * 40, vy: -20 - Math.random() * 30, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: -30, type: 'circle' }); } // If final pump reached, resolve immediately if (pumpCount >= maxPumps) { resolve(); return; } } } // Draw pump handle progress (0=up, peaks at 0.5=down, returns to 0=up) const strokeT = animatingPump ? Math.sin(handleProgress * Math.PI) : 0; drawInflatePump(ctx, pumpX, pumpY, strokeT, 1); // Draw hose from pump to current belly button position (adjusted for torso inflation) const currentNavelY = zombie.baseY + 28 * zombie.scale * (zombie.parts.torso.scaleY || 1); drawInflateHose(ctx, pumpX, pumpY, navelWorldX, currentNavelY, 1); // Draw "PUMP!" hint text that pulses (only if no pumps done yet) if (pumpCount === 0 && !animatingPump) { const hintAlpha = 0.5 + Math.sin(now * 0.005) * 0.3; ctx.save(); ctx.fillStyle = `rgba(255, 200, 0, ${hintAlpha})`; ctx.font = 'bold 22px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('TAP THE PUMP!', pumpX, pumpY - 120); ctx.restore(); // Arrow pointing at pump ctx.save(); ctx.translate(pumpX, pumpY - 90); ctx.fillStyle = `rgba(255, 200, 0, ${hintAlpha})`; ctx.beginPath(); ctx.moveTo(0, 15); ctx.lineTo(-8, 0); ctx.lineTo(8, 0); ctx.closePath(); ctx.fill(); ctx.restore(); } // Show pump counter if (pumpCount > 0) { ctx.save(); ctx.fillStyle = 'rgba(255, 100, 100, 0.8)'; ctx.font = 'bold 18px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText(`${pumpCount} / ${maxPumps}`, pumpX, pumpY - 110); ctx.restore(); } // Zombie gently bobs when inflated (floating feel) if (sp > 2) { const bobAmount = Math.sin(now * 0.003) * (sp * 1.5); zombie.baseY += bobAmount * 0.3; } requestAnimationFrame(pumpLoop); }; requestAnimationFrame(pumpLoop); }); // Remove click handlers canvas.removeEventListener('mousedown', handlePumpClick); canvas.removeEventListener('touchstart', handlePumpClick); // Reset inflate state zombie._inflateRoundness = 0; // Reset joint offsets to original values zombie.joints[0].parentOffset.y = -115; zombie.joints[1].parentOffset.x = -48; zombie.joints[1].parentOffset.y = -65; zombie.joints[2].parentOffset.x = 48; zombie.joints[2].parentOffset.y = -65; zombie.joints[5].parentOffset.x = -22; zombie.joints[5].parentOffset.y = 80; zombie.joints[6].parentOffset.x = 22; zombie.joints[6].parentOffset.y = 80; // Phase 4: POP! Massive explosion with crusher-style splatter playSound('explosion_sound'); playSound('shatter_sound'); // Store final zombie position for explosion center const burstX = zombie.baseX; const burstY = zombie.baseY; zombie.globalAlpha = 0; // Disappear // Get zombie's teeth data for the splatter (instead of eyeball) const fp = zombie.faceParams || {}; const teethColor = fp.teethColor || '#d4d0b8'; const upperTeeth = fp.upperTeeth || []; const lowerTeeth = fp.lowerTeeth || []; const savedBurstX = zombie.baseX; const savedBurstY = zombie.baseY; // Teeth position (centered on screen, slightly above middle) const teethCenterX = CANVAS_WIDTH / 2; let teethCurrentY = CANVAS_HEIGHT * 0.35; // Generate random green blobs that will cover ~80% of the screen const greenBlobs = []; const numBlobs = 45; const greenShades = ['#3dcc10', '#2db808', '#4de020', '#28a006', '#55ee30', '#35c00c', '#1a9900', '#48d418', '#60f038', '#2aaa05']; for (let i = 0; i < numBlobs; i++) { greenBlobs.push({ x: Math.random() * CANVAS_WIDTH, y: Math.random() * CANVAS_HEIGHT, radiusX: 40 + Math.random() * 100, radiusY: 40 + Math.random() * 80, color: greenShades[Math.floor(Math.random() * greenShades.length)], angle: Math.random() * Math.PI, slideSpeed: 40 + Math.random() * 80 }); } // Massive bloody explosion particles for (let i = 0; i < 100; i++) { const angle = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 600; spawnParticles(burstX, burstY, 1, { color: i % 3 === 0 ? '#3dcc10' : (i % 3 === 1 ? zombie.bodyColor : zombie.clothingColor), vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, size: 6 + Math.random() * 18, life: 1.2 + Math.random(), type: i % 4 === 0 ? 'chunk' : 'circle' }); } // Flesh chunks for (let i = 0; i < 30; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 350; spawnParticles(burstX + (Math.random() - 0.5) * 80, burstY + (Math.random() - 0.5) * 100, 1, { color: Math.random() > 0.5 ? '#3dcc10' : '#5cc85c', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 100, size: 10 + Math.random() * 20, life: 1.5 + Math.random() * 0.8, gravity: 400, type: 'chunk' }); } // Bone fragments for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 250; spawnParticles(burstX, burstY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 80, size: 4 + Math.random() * 8, life: 1.5 + Math.random(), gravity: 500, type: 'square' }); } // Green flash starts at full intensity and fades slowly across both phases // Total flash duration = 600ms (burst) + 1800ms (slide) = 2400ms // Flash fades from 0.9 to 0 over ~1800ms total let greenFlashAlpha = 0.9; // === IMMEDIATE: Screen shake + green flash + blobs + teeth (600ms) === await animate(600 / speed, (t, dt) => { // Screen shake const shakeDecay = Math.max(0, 1 - t * 1.8); const shakeIntensity = 90 * shakeDecay; zombie.baseX = savedBurstX + Math.sin(t * 110) * shakeIntensity; zombie.baseY = savedBurstY + Math.cos(t * 85) * shakeIntensity * 0.75; // Green screen flash (BEHIND blobs/teeth) - starts strong, begins fading greenFlashAlpha = 0.9 * (1 - t * 0.3); // Fade from 0.9 to ~0.63 during burst phase ctx.fillStyle = `rgba(61, 204, 16, ${greenFlashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Initial white-hot flash at very start (on top of green) if (t < 0.1) { ctx.fillStyle = `rgba(255, 255, 255, ${(1 - t / 0.1) * 0.7})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Fade out pump and hose during burst const pumpFade = Math.max(0, 1 - t * 2.5); // Fades out over ~40% of this phase if (pumpFade > 0) { ctx.save(); ctx.globalAlpha = pumpFade; drawInflatePump(ctx, pumpX, pumpY, 0, 1); const currentNavelY = savedBurstY + 28 * zombie.scale; drawInflateHose(ctx, pumpX, pumpY, navelWorldX, currentNavelY, 1); ctx.restore(); } // Draw blobs IN FRONT of green flash (batched by color for performance) const colorBatch1 = {}; for (let i = 0; i < greenBlobs.length; i++) { const blob = greenBlobs[i]; if (!colorBatch1[blob.color]) colorBatch1[blob.color] = []; colorBatch1[blob.color].push(blob); } for (const color in colorBatch1) { ctx.fillStyle = color; ctx.beginPath(); const blobs = colorBatch1[color]; for (let i = 0; i < blobs.length; i++) { const b = blobs[i]; ctx.moveTo(b.x + b.radiusX, b.y); ctx.ellipse(b.x, b.y, b.radiusX, b.radiusY, b.angle, 0, Math.PI * 2); } ctx.fill(); } // Draw zombie's TEETH IN FRONT of green flash drawInflateTeeth(ctx, teethCenterX, teethCurrentY, teethColor, upperTeeth, lowerTeeth, 1); }); zombie.baseX = savedBurstX; zombie.baseY = savedBurstY; // === PHASE B: Green flash continues fading + blobs/teeth slide off === await animate(1800 / speed, (t, dt) => { // Continue fading the green flash (from ~0.63 down to 0) const fadeProgress = Math.min(1, t * 3.0); // Fade out over ~600ms const phaseB_flashAlpha = 0.63 * (1 - fadeProgress); if (phaseB_flashAlpha > 0.01) { ctx.fillStyle = `rgba(61, 204, 16, ${phaseB_flashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Smooth cubic easing for slide distance const slideT = t * t * (3 - 2 * t); // smoothstep const slideDistance = slideT * CANVAS_HEIGHT * 1.4; // Smooth fade out: fully visible first 40%, then smooth linear fade const fadeAlpha = t < 0.4 ? 1 : Math.max(0, 1 - (t - 0.4) / 0.6); // Draw all blobs sliding down IN FRONT of green flash (batched) if (fadeAlpha > 0) { ctx.save(); ctx.globalAlpha = fadeAlpha; const stretchY = 1 + slideT * 0.4; const colorBatch = {}; for (let i = 0; i < greenBlobs.length; i++) { const blob = greenBlobs[i]; const slideY = blob.y + (blob.slideSpeed / 80) * slideDistance; if (slideY - blob.radiusY < CANVAS_HEIGHT + 50) { if (!colorBatch[blob.color]) colorBatch[blob.color] = []; colorBatch[blob.color].push({ x: blob.x, y: slideY, rx: blob.radiusX, ry: blob.radiusY * stretchY, a: blob.angle }); } } for (const color in colorBatch) { ctx.fillStyle = color; ctx.beginPath(); const blobs = colorBatch[color]; for (let i = 0; i < blobs.length; i++) { const b = blobs[i]; ctx.moveTo(b.x + b.rx, b.y); ctx.ellipse(b.x, b.y, b.rx, b.ry, b.a, 0, Math.PI * 2); } ctx.fill(); } ctx.restore(); } // Teeth slide down IN FRONT of green flash teethCurrentY = CANVAS_HEIGHT * 0.35 + slideDistance * 0.7; if (teethCurrentY < CANVAS_HEIGHT + 100 && fadeAlpha > 0) { drawInflateTeeth(ctx, teethCenterX, teethCurrentY, teethColor, upperTeeth, lowerTeeth, fadeAlpha); } }); // Brief pause await animate(800 / speed, () => {}); }, // 31. DINOSAUR - T-Rex approaches with escalating footstep shakes, shadow passes, then chomps zombie dinosaur: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Phase 1: Escalating footstep shakes - simulates T-Rex approaching // Each step: shake, then pause. Intensity increases with each step. const footsteps = [ { intensity: 3, duration: 120, pause: 700 }, { intensity: 5, duration: 140, pause: 650 }, { intensity: 8, duration: 160, pause: 580 }, { intensity: 12, duration: 180, pause: 500 }, { intensity: 17, duration: 200, pause: 420 }, { intensity: 23, duration: 220, pause: 350 }, { intensity: 30, duration: 240, pause: 280 }, { intensity: 38, duration: 260, pause: 220 } ]; for (let step = 0; step < footsteps.length; step++) { const fs = footsteps[step]; // Play a thud sound for each footstep (louder as it gets closer) const volume = 0.2 + (step / footsteps.length) * 0.7; playSound('crush_sound', volume * 0.6); // Shake phase await animate(fs.duration / speed, (t, dt) => { // Quick shake that decays within the step duration const shakeDecay = 1 - t; const shakeAmt = fs.intensity * shakeDecay; const freq = 50 + step * 10; // Higher frequency with closer steps zombie.baseX = savedBaseX + Math.sin(t * freq) * shakeAmt; zombie.baseY = savedBaseY + Math.cos(t * freq * 0.7) * shakeAmt * 0.5; // Dust particles on bigger steps if (step >= 3 && Math.random() < 0.3 * (step / footsteps.length)) { spawnParticles( Math.random() * CANVAS_WIDTH, trapDoor.y - 5, 1, { color: 'rgba(150, 140, 120, 0.5)', vx: (Math.random() - 0.5) * 40, vy: -10 - Math.random() * 20, size: 2 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: 100, type: 'circle' } ); } }); // Reset position after each shake zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Zombie reacts more as steps get closer if (step >= 2) { zombie.applyImpulse((Math.random() - 0.5) * (step * 3), -step * 2); if (zombie.parts.head.attached) { zombie.parts.head.rotation = (Math.random() - 0.5) * (step * 2); } } // Arms raise in panic on later steps if (step >= 5) { if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - (step - 4) * 12; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + (step - 4) * 12; } } // Pause between steps (silence - building tension) await animate(fs.pause / speed, () => {}); } // Phase 2: Big shadow slides across the floor from left to right // Simulates the T-Rex body passing overhead, blocking light const floorY = trapDoor.y; await animate(3000 / speed, (t, dt) => { // Shadow grows from left side to slowly cover the entire floor area // Simulates a massive creature passing overhead, blocking all light const shadowProgress = t; // 0 = no shadow, 1 = entire floor covered // Shadow expands as a dark rectangle from left to right across the full floor const shadowRightEdge = shadowProgress * (CANVAS_WIDTH + 100); const shadowOpacity = Math.min(shadowProgress * 1.5, 0.7); // Max 0.7 opacity ctx.save(); // Main shadow body - flat rectangle from left edge to just before the rounded front const roundRadius = 120; // Radius of the rounded front edge const shadowBodyRight = shadowRightEdge - roundRadius; if (shadowBodyRight > -50) { ctx.fillStyle = `rgba(0, 0, 0, ${shadowOpacity})`; ctx.fillRect(-50, floorY - 20, shadowBodyRight + 50, CANVAS_HEIGHT - floorY + 50); } // Rounded front edge - semicircle cap drawn with a radial gradient for soft falloff if (shadowRightEdge > 0) { const capCenterX = shadowBodyRight > -50 ? shadowBodyRight : -50; const capHeight = CANVAS_HEIGHT - floorY + 50; const capCenterY = floorY - 20 + capHeight / 2; // Draw the filled rounded cap using a path ctx.fillStyle = `rgba(0, 0, 0, ${shadowOpacity})`; ctx.beginPath(); ctx.moveTo(capCenterX, floorY - 20); ctx.lineTo(capCenterX, floorY - 20 + capHeight); ctx.quadraticCurveTo(shadowRightEdge + roundRadius * 0.15, floorY - 20 + capHeight, shadowRightEdge, capCenterY + capHeight * 0.1); ctx.quadraticCurveTo(shadowRightEdge + roundRadius * 0.3, capCenterY, shadowRightEdge, capCenterY - capHeight * 0.1); ctx.quadraticCurveTo(shadowRightEdge + roundRadius * 0.15, floorY - 20, capCenterX, floorY - 20); ctx.closePath(); ctx.fill(); // Soft gradient fade at the very leading edge const edgeGrad = ctx.createRadialGradient(shadowRightEdge - roundRadius * 0.5, capCenterY, 0, shadowRightEdge - roundRadius * 0.5, capCenterY, roundRadius * 1.2); edgeGrad.addColorStop(0, `rgba(0, 0, 0, ${shadowOpacity * 0.3})`); edgeGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = edgeGrad; ctx.fillRect(shadowRightEdge - roundRadius, floorY - 20, roundRadius * 2, CANVAS_HEIGHT - floorY + 50); } ctx.restore(); // Continuous light rumble during shadow pass const rumble = Math.sin(t * 60) * 4; zombie.baseX = savedBaseX + rumble * 0.5; zombie.baseY = savedBaseY + Math.cos(t * 45) * 2; // Zombie looks up and around in terror if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 15; } // Dust and small debris falling from above if (Math.random() < 0.4) { spawnParticles( Math.random() * CANVAS_WIDTH, 50 + Math.random() * 100, 1, { color: 'rgba(120, 110, 90, 0.4)', vx: (Math.random() - 0.5) * 30, vy: 30 + Math.random() * 50, size: 2 + Math.random() * 4, life: 0.8 + Math.random() * 0.5, gravity: 150, type: 'circle' } ); } }); // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Helper: draw the full dino shadow covering the floor (stays until jaws retract) function drawDinoShadow() { const shadowOpacity = 0.7; ctx.save(); ctx.fillStyle = `rgba(0, 0, 0, ${shadowOpacity})`; ctx.fillRect(-50, floorY - 20, CANVAS_WIDTH + 100, CANVAS_HEIGHT - floorY + 50); ctx.restore(); } // Brief pause - ominous silence before the chomp await animate(400 / speed, () => { drawDinoShadow(); // Zombie freezes in terror zombie.isRagdolling = false; zombie.customPose = true; if (zombie.parts.head.attached) { zombie.parts.head.rotation = -5; // Looking slightly up } }); // Phase 3: MASSIVE JAWS descend from top of screen, then snap shut HORIZONTALLY on zombie playSound('piano_sound', 0.8); // Dramatic sound // Jaw dimensions - each jaw is a tall vertical slab const jawWidth = 500; // Each jaw slab is 500px wide const biteLineX = zombie.baseX; // Where teeth meet (zombie center X) const openGap = 120; // How far apart the jaws are when open (each side) // Phase 3a: Both jaws descend from above the screen (700ms) await animate(700 / speed, (t, dt) => { drawDinoShadow(); const easeOut = 1 - Math.pow(1 - t, 2.5); // Both jaws slide down from above // offsetY: -CANVAS_HEIGHT (fully above) to 0 (fully on screen) const offsetY = -CANVAS_HEIGHT + easeOut * CANVAS_HEIGHT; // Left jaw: right edge at biteLineX - openGap // Right jaw: left edge at biteLineX + openGap drawDinoLeftJaw(ctx, biteLineX - openGap, offsetY, false); drawDinoRightJaw(ctx, biteLineX + openGap, offsetY, false); // Wind/pressure effect as jaws descend if (t > 0.3 && Math.random() < 0.5) { spawnParticles( Math.random() * CANVAS_WIDTH, Math.random() * CANVAS_HEIGHT, 1, { color: 'rgba(200, 220, 200, 0.3)', vx: (Math.random() - 0.5) * 100, vy: 50 + Math.random() * 80, size: 3 + Math.random() * 5, life: 0.2 + Math.random() * 0.15, gravity: 0, type: 'circle' } ); } }); // SNAP! Jaws close horizontally on zombie playSound('crush_sound', 1.0); playSound('beartrap_sound', 0.7); // Phase 3b: Jaws snap shut horizontally (200ms) await animate(200 / speed, (t, dt) => { drawDinoShadow(); const easeIn = t * t * t; // Fast acceleration // Left jaw's right edge moves from (biteLineX - openGap) to biteLineX const leftRightEdge = biteLineX - openGap + easeIn * openGap; // Right jaw's left edge moves from (biteLineX + openGap) to biteLineX const rightLeftEdge = biteLineX + openGap - easeIn * openGap; drawDinoLeftJaw(ctx, leftRightEdge, 0, false); drawDinoRightJaw(ctx, rightLeftEdge, 0, false); }); // Hide zombie instantly - devoured zombie.globalAlpha = 0; // Screen shake + blood squirting from between the closed jaws (400ms) await animate(400 / speed, (t, dt) => { drawDinoShadow(); const shakeDecay = Math.max(0, 1 - t * 2.5); const shakeIntensity = 30 * shakeDecay; const shakeX = Math.sin(t * 70) * shakeIntensity; const shakeY = Math.cos(t * 55) * shakeIntensity * 0.6; ctx.save(); ctx.translate(shakeX, shakeY); // Draw closed jaws (teeth interlocked at bite line) drawDinoLeftJaw(ctx, biteLineX, 0, true); drawDinoRightJaw(ctx, biteLineX, 0, true); ctx.restore(); // Green goo squirts out from between the jaws (vertical seam) if (Math.random() < 0.8) { const gooY = Math.random() * CANVAS_HEIGHT; spawnParticles( biteLineX + (Math.random() - 0.5) * 30, gooY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 200, vy: (Math.random() - 0.5) * 100, size: 5 + Math.random() * 12, life: 0.8 + Math.random() * 0.5, gravity: 350, type: 'circle' } ); } }); // Blood/goo burst at the vertical seam for (let i = 0; i < 50; i++) { const gooY = Math.random() * CANVAS_HEIGHT; const angle = Math.random() * Math.PI * 2; const spd = 60 + Math.random() * 250; spawnParticles( biteLineX + (Math.random() - 0.5) * 20, gooY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, size: 5 + Math.random() * 14, life: 1.0 + Math.random() * 0.6, gravity: 350, type: Math.random() > 0.7 ? 'chunk' : 'circle' } ); } // Bone fragments for (let i = 0; i < 15; i++) { const boneY = CANVAS_HEIGHT * 0.2 + Math.random() * CANVAS_HEIGHT * 0.6; const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 180; spawnParticles( biteLineX + (Math.random() - 0.5) * 15, boneY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, size: 3 + Math.random() * 7, life: 1.2 + Math.random() * 0.6, gravity: 450, type: 'square' } ); } // Clothing scraps for (let i = 0; i < 10; i++) { const scrapY = CANVAS_HEIGHT * 0.2 + Math.random() * CANVAS_HEIGHT * 0.6; const angle = Math.random() * Math.PI * 2; const spd = 40 + Math.random() * 140; spawnParticles( biteLineX + (Math.random() - 0.5) * 20, scrapY, 1, { color: Math.random() > 0.5 ? '#2a1f5e' : '#3a2a6e', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, size: 5 + Math.random() * 10, life: 1.0 + Math.random() * 0.5, gravity: 300, type: 'square' } ); } // Brief hold with jaws closed - dramatic moment (300ms) await animate(300 / speed, (t, dt) => { drawDinoShadow(); drawDinoLeftJaw(ctx, biteLineX, 0, true); drawDinoRightJaw(ctx, biteLineX, 0, true); // Dripping from seam if (Math.random() < 0.3) { spawnParticles( biteLineX + (Math.random() - 0.5) * 10, CANVAS_HEIGHT * 0.3 + Math.random() * CANVAS_HEIGHT * 0.4, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 40, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: 350, type: 'circle' } ); } }); // Phase 4: Both jaws rise upward together (closed) and exit the screen (1000ms) await animate(1000 / speed, (t, dt) => { // Shadow fades out as jaws retract const shadowFade = 0.7 * (1 - t); if (shadowFade > 0.01) { ctx.save(); ctx.fillStyle = `rgba(0, 0, 0, ${shadowFade})`; ctx.fillRect(-50, floorY - 20, CANVAS_WIDTH + 100, CANVAS_HEIGHT - floorY + 50); ctx.restore(); } // Accelerating rise upward const easeIn = t * t; const riseOffset = -easeIn * (CANVAS_HEIGHT + 100); // Both jaws move up together (still closed) drawDinoLeftJaw(ctx, biteLineX, riseOffset, true); drawDinoRightJaw(ctx, biteLineX, riseOffset, true); // Blood drips trailing behind as they rise if (Math.random() < 0.4 * (1 - t)) { spawnParticles( biteLineX + (Math.random() - 0.5) * 20, CANVAS_HEIGHT + riseOffset + CANVAS_HEIGHT - 50, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 20, vy: 30 + Math.random() * 50, size: 4 + Math.random() * 6, life: 0.6 + Math.random() * 0.4, gravity: 400, type: 'circle' } ); } // One final rumble as it departs if (t > 0.5 && t < 0.6) { zombie.baseX = savedBaseX + Math.sin(t * 60) * 6; zombie.baseY = savedBaseY + Math.cos(t * 45) * 3; } }); // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Brief pause - dust settles await animate(800 / speed, (t, dt) => { // Settling dust particles if (Math.random() < 0.15 * (1 - t)) { spawnParticles( Math.random() * CANVAS_WIDTH, 100 + Math.random() * 200, 1, { color: 'rgba(120, 110, 90, 0.3)', vx: (Math.random() - 0.5) * 20, vy: 10 + Math.random() * 20, size: 3 + Math.random() * 5, life: 0.6 + Math.random() * 0.4, gravity: 50, type: 'circle' } ); } }); }, // 32. UFO - Abduction and zap ufo: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Phase 1: UFO flies in from upper-right, curves to hover above zombie playSound('ufo_sound', 0.7); const ufoTargetX = zombie.baseX; const ufoTargetY = zombie.baseY - 260; await animate(1000 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); const ufoX = CANVAS_WIDTH + 100 - (CANVAS_WIDTH + 100 - ufoTargetX) * easeOut; const ufoY = -120 + (ufoTargetY + 120) * easeOut; drawCartoonUFO(ctx, ufoX, ufoY, 0); // Zombie notices something above if (t > 0.4) { zombie.applyImpulse(0, -5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 5; } } }); // Phase 2: UFO hovers and tractor beam activates (grows brighter) zombie.isRagdolling = true; await animate(900 / speed, (t, dt) => { const wobbleY = Math.sin(t * 15) * 3; const wobbleX = Math.cos(t * 10) * 2; // Draw beam first (behind UFO body) - extends to zombie's feet const beamFootY = savedBaseY + 280 * zombie.scale; drawTractorBeam(ctx, ufoTargetX + wobbleX, ufoTargetY + 38, zombie.baseX, beamFootY, t); // Draw UFO on top drawCartoonUFO(ctx, ufoTargetX + wobbleX, ufoTargetY + wobbleY, t); // Zombie starts to feel the pull if (t > 0.5) { zombie.applyImpulse(0, -10); } // Rising green particles along beam if (t > 0.3 && Math.random() < 0.3 * t) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 50, zombie.baseY + (Math.random() - 0.5) * 80, 1, { color: Math.random() > 0.5 ? '#88ffaa' : '#44ff88', vx: (Math.random() - 0.5) * 20, vy: -50 - Math.random() * 40, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: -120, type: 'circle' } ); } }); // Phase 3: Lift zombie upward while wiggling/struggling, shrinking fast await animate(1800 / speed, (t, dt) => { const wobbleY = Math.sin(t * 20) * 3; const wobbleX = Math.cos(t * 12) * 2; // Zombie lifts upward (accelerating) const liftEase = t * t; const liftDistance = savedBaseY - (ufoTargetY + 88); // Ensure it stops exactly at UFO base zombie.baseY = savedBaseY - liftEase * liftDistance; // Zombie shrinks much faster as it rises (1.0 -> 0.1 over the phase) zombie.globalScale = Math.max(0.1, 1 - t * t * 1.5); // Redraw zombie so beam and UFO can be drawn on top if (zombie) zombie.draw(ctx); // Draw beam AFTER zombie so it appears in front of the zombie const beamFootY = savedBaseY + 280 * zombie.scale; drawTractorBeam(ctx, ufoTargetX + wobbleX, ufoTargetY + 38, zombie.baseX, beamFootY, 1); // Draw UFO ALWAYS on top of zombie and beam drawCartoonUFO(ctx, ufoTargetX + wobbleX, ufoTargetY + wobbleY, 1); // Zombie wiggles/struggles as it rises zombie.parts.torso.rotation = Math.sin(t * 30) * 12; if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 25 + 1) * 20; } // Arms flail outward wildly (left arm: positive = outward, right arm: negative = outward) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 60 + Math.abs(Math.sin(t * 35)) * 40; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -60 - Math.abs(Math.sin(t * 35 + 2)) * 40; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 40 + Math.abs(Math.sin(t * 40)) * 35; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -40 - Math.abs(Math.sin(t * 40 + 1)) * 35; } // Legs dangle and kick outward (left: positive = outward, right: negative = outward) if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 15 + Math.abs(Math.sin(t * 28)) * 20; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -15 - Math.abs(Math.sin(t * 28 + Math.PI)) * 20; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = -10 + Math.abs(Math.sin(t * 32)) * 20; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = 10 - Math.abs(Math.sin(t * 32 + Math.PI)) * 20; } // Rising beam particles around zombie if (Math.random() < 0.5) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 60, zombie.baseY + (Math.random() - 0.5) * 120, 1, { color: Math.random() > 0.5 ? '#88ffaa' : '#44ff88', vx: (Math.random() - 0.5) * 25, vy: -70 - Math.random() * 50, size: 4 + Math.random() * 6, life: 0.5 + Math.random() * 0.3, gravity: -150, type: 'circle' } ); } }); // Phase 4: ZAP! Screen flash - zombie disintegrates into green particles and bones playSound('lightning_sound', 0.6); // Hide zombie instantly - it's been disintegrated (no flash or flicker) zombie.globalAlpha = 0; // Phase 5: Beam retracts back into UFO (shrinks upward) const beamFootY = savedBaseY + 280 * zombie.scale; await animate(800 / speed, (t, dt) => { const wobbleY = Math.sin(t * 15) * 2; // Beam retracts: bottom of beam rises from feet toward UFO const retractedFootY = beamFootY - t * (beamFootY - (ufoTargetY + 38)); if (retractedFootY > ufoTargetY + 42) { drawTractorBeam(ctx, ufoTargetX, ufoTargetY + 38, ufoTargetX, retractedFootY, 1 - t * 0.5); } // Draw UFO on top drawCartoonUFO(ctx, ufoTargetX, ufoTargetY + wobbleY, Math.max(0, 1 - t)); }); // Phase 6: UFO flies away to the upper-left await animate(800 / speed, (t, dt) => { const easeIn = t * t; const ufoX = ufoTargetX - easeIn * (CANVAS_WIDTH + 200); const ufoY = ufoTargetY - easeIn * 300; drawCartoonUFO(ctx, ufoX, ufoY, 0); }); // Brief pause await animate(100 / speed, () => {}); // Count kill and reset immediately since the screen is empty incrementSpecimens(); performReset(); }, // 33. TNT - Bundle of dynamite dropped at zombie's feet, fuse lights, big kaboom tnt: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // === TNT ANIMATION === // Drop multiple bundles of TNT in sequence around zombie's feet const tntFloorY = CANVAS_HEIGHT - 300; // Ground level const tntStartY = -150; let fuseProgress = 0; // Generate positions for multiple TNT bundles around zombie's feet const numBundles = 6; const tntBundles = []; for (let i = 0; i < numBundles; i++) { // Spread around zombie's feet in a semicircle const spreadX = (i - (numBundles - 1) / 2) * 70; // Evenly spaced tntBundles.push({ x: zombie.baseX + spreadX + (Math.random() - 0.5) * 20, y: tntStartY - i * 80, // Stagger start heights so they arrive in sequence vy: 0, landed: false, bounceCount: 0, rotation: (Math.random() - 0.5) * 15, // Slight rotation for variety angularVel: (Math.random() - 0.5) * 100 }); } // Helper: draw the TNT bundle at position function drawTNTBundle(bx, by, fuseT) { ctx.save(); ctx.translate(bx, by); // Four dynamite sticks arranged in a 2x2 bundle const stickColor = '#cc2222'; const stickDark = '#991a1a'; const stickLight = '#dd4444'; const stickW = 22; const stickH = 65; const offsets = [[-12, -10], [12, -10], [-12, 10], [12, 10]]; offsets.forEach(([ox, oy]) => { // Stick shadow ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.beginPath(); ctx.roundRect(ox - stickW/2 + 2, oy - stickH/2 + 3, stickW, stickH, 6); ctx.fill(); // Stick body const grad = ctx.createLinearGradient(ox - stickW/2, oy, ox + stickW/2, oy); grad.addColorStop(0, stickDark); grad.addColorStop(0.3, stickLight); grad.addColorStop(0.7, stickColor); grad.addColorStop(1, stickDark); ctx.fillStyle = grad; ctx.beginPath(); ctx.roundRect(ox - stickW/2, oy - stickH/2, stickW, stickH, 6); ctx.fill(); ctx.strokeStyle = '#660000'; ctx.lineWidth = 1.5; ctx.stroke(); // TNT label ctx.fillStyle = '#ffee00'; ctx.font = 'bold 11px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('TNT', ox, oy); // Cap (top) ctx.fillStyle = '#888'; ctx.beginPath(); ctx.roundRect(ox - stickW/2 + 2, oy - stickH/2 - 5, stickW - 4, 8, 2); ctx.fill(); }); // Binding twine (wrap around bundle) ctx.strokeStyle = '#8b6914'; ctx.lineWidth = 4; ctx.beginPath(); ctx.roundRect(-26, -38, 52, 76, 8); ctx.stroke(); ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-26, 0); ctx.lineTo(26, 0); ctx.stroke(); // Fuse (top center, gets shorter as it burns) const fuseLen = 50 * (1 - fuseT); if (fuseLen > 2) { ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, -43); ctx.quadraticCurveTo(12, -43 - fuseLen * 0.6, 8, -43 - fuseLen); ctx.stroke(); // Spark at fuse tip if (fuseT > 0) { const sparkX = 8 - fuseLen * 0.08; const sparkY = -43 - fuseLen; ctx.shadowColor = '#fff'; ctx.shadowBlur = 15 + Math.sin(Date.now() * 0.04) * 5; ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(sparkX, sparkY, 5 + Math.sin(Date.now() * 0.05) * 2, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff6600'; ctx.beginPath(); ctx.arc(sparkX, sparkY, 3, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } } ctx.restore(); } // Phase 1: TNT bundles fall from above in sequence, each bouncing as it lands (2400ms) await animate(2400 / speed, (t, dt) => { const gravity = 2500; // Update physics for all bundles tntBundles.forEach((bundle, i) => { if (bundle.landed && bundle.bounceCount >= 3) { // Fully settled - just sit on the ground at their landed orientation bundle.y = tntFloorY; return; } // Apply gravity bundle.vy += gravity * dt; bundle.y += bundle.vy * dt; bundle.rotation += bundle.angularVel * dt; // Ground collision with bounce if (bundle.y >= tntFloorY) { bundle.y = tntFloorY; bundle.landed = true; bundle.bounceCount++; // Bounce with decreasing energy const bounciness = Math.max(0, 0.45 - bundle.bounceCount * 0.12); bundle.vy = -bundle.vy * bounciness; bundle.angularVel *= 0.5; // Play sound on first bounce only if (bundle.bounceCount === 1) { playSound('crush_sound', 0.3 + i * 0.03); // Dust particles on first landing for (let p = 0; p < 5; p++) { spawnParticles(bundle.x, tntFloorY, 1, { color: '#8B7355', vx: (Math.random()-0.5)*50, vy: -15-Math.random()*30, size: 2+Math.random()*4, life: 0.3, gravity: 150, type: 'circle' }); } } // Stop bouncing if velocity is very low if (Math.abs(bundle.vy) < 20) { bundle.vy = 0; bundle.bounceCount = 3; // Force settled bundle.angularVel = 0; } } }); // Draw all bundles tntBundles.forEach((bundle) => { ctx.save(); ctx.translate(bundle.x, bundle.y); ctx.rotate(bundle.rotation * Math.PI / 180); ctx.translate(-bundle.x, -bundle.y); drawTNTBundle(bundle.x, bundle.y, 0); ctx.restore(); }); // Zombie notices bundles landing around it if (t > 0.3) { if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 6; } if (t > 0.6) { zombie.applyImpulse((Math.random() - 0.5) * 10, -5); } } }); // Phase 2: Fuses burn on all bundles (1800ms) — zombie watches nervously playSound('cannon_sound', 0.5); // Use center bundle position for spark reference const tntCenterX = zombie.baseX; await animate(1800 / speed, (t, dt) => { fuseProgress = t; // Draw all bundles with burning fuses (keep their landed orientations) tntBundles.forEach((bundle) => { ctx.save(); ctx.translate(bundle.x, tntFloorY); ctx.rotate(bundle.rotation * Math.PI / 180); ctx.translate(-bundle.x, -tntFloorY); drawTNTBundle(bundle.x, tntFloorY, fuseProgress); ctx.restore(); }); // Fuse sparks from random bundles if (Math.random() < 0.7) { const sparkBundle = tntBundles[Math.floor(Math.random() * tntBundles.length)]; spawnParticles(sparkBundle.x + 6, tntFloorY - 43 - 50*(1-t), 1, { color: Math.random()>0.5?'#ffcc00':'#ff6600', vx:(Math.random()-0.5)*40, vy:-25-Math.random()*35, size:2+Math.random()*3, life:0.2, gravity:80, type:'circle' }); } // Zombie watches nervously, inches backward if (t > 0.3) { zombie.applyImpulse(-6, -3); if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t*10)*8; } if (t > 0.6) { if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - 20; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + 20; } }); // Phase 3: KABOOM! Massive explosion obliterates the zombie playSound('explosion_sound', 1.0); playSound('crush_sound', 0.7); // Detach all parts with explosive force outward const scale2 = zombie.scale * zombie.globalScale; const partPositionsTNT = { head:{x:0,y:-115}, torso:{x:0,y:0}, leftUpperArm:{x:-48,y:-65}, rightUpperArm:{x:48,y:-65}, leftForearm:{x:-48,y:5}, rightForearm:{x:48,y:5}, leftThigh:{x:-22,y:80}, rightThigh:{x:22,y:80}, leftLowerLeg:{x:-22,y:160}, rightLowerLeg:{x:22,y:160} }; for (const partName in partPositionsTNT) { const pp = partPositionsTNT[partName]; const pWorldX = zombie.baseX + pp.x * scale2; const pWorldY = zombie.baseY + pp.y * scale2; const dx = pWorldX - tntCenterX; const dy = pWorldY - tntFloorY; const dist = Math.sqrt(dx*dx+dy*dy)+30; const forceMult = 2800*(1+60/dist); zombie.detachPart(partName, (dx/dist)*forceMult+(Math.random()-0.5)*100, (dy/dist)*forceMult-200); zombie.parts[partName].continuousBleeding = true; } // Screen flash ctx.fillStyle = 'rgba(255,255,200,0.9)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Massive particle burst at TNT location for (let i = 0; i < 120; i++) { const angle = Math.random()*Math.PI*2; const spd = 250+Math.random()*550; spawnParticles(tntCenterX, tntFloorY, 1, { color: i%3===0?'#ff6600':(i%3===1?'#ffcc00':'#3dcc10'), vx:Math.cos(angle)*spd, vy:Math.sin(angle)*spd-180, size:6+Math.random()*18, life:1.0+Math.random(), type:i%2===0?'fire':'chunk' }); } // Debris for (let i=0;i<30;i++) { spawnParticles(tntCenterX+(Math.random()-0.5)*60, tntFloorY, 1, { color:'#444', vx:(Math.random()-0.5)*400, vy:-200-Math.random()*300, size:4+Math.random()*10, life:1.5, gravity:600, type:'square' }); } // Expanding shockwave + brief hold await animate(300 / speed, (t, dt) => { const waveR = t*800; ctx.strokeStyle = `rgba(255,160,50,${(1-t)*0.7})`; ctx.lineWidth = 14*(1-t)+2; ctx.shadowColor='#ff6600'; ctx.shadowBlur=25*(1-t); ctx.beginPath(); ctx.arc(tntCenterX, tntFloorY, waveR, 0, Math.PI*2); ctx.stroke(); ctx.shadowBlur=0; if (t<0.06) { ctx.fillStyle=`rgba(255,255,200,${0.6*(1-t/0.06)})`;ctx.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT); } }); await animate(1500 / speed, () => {}); }, // 34. CANNON - Escalating cannons: small one bounces off, bigger one pushes zombie slightly cannon: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; const cannonY = zombie.baseY + 180; // Cannon vertical position // ===================================================== // PART 1: Small cannon rolls in, fires straight, ball bounces off zombie harmlessly // ===================================================== const smallCannonTargetX = zombie.baseX - 280; // Small cannon rolls in from the left await animate(1000 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); const cannonX = -200 + (smallCannonTargetX + 200) * easeOut; drawCartoonCannon(ctx, cannonX, cannonY, -10, 0, false); // angle -10 = angled slightly up // Rolling dust from wheels if (t < 0.8 && Math.random() < 0.4) { spawnParticles(cannonX - 20, cannonY + 55, 1, { color: '#8B7355', vx: -20 - Math.random() * 30, vy: -10 - Math.random() * 20, size: 4 + Math.random() * 6, life: 0.4 + Math.random() * 0.3, gravity: 100, type: 'circle' }); } // Zombie notices if (t > 0.5) { zombie.applyImpulse(-5, -3); } }); // Brief pause - cannon settles await animate(300 / speed, (t, dt) => { drawCartoonCannon(ctx, smallCannonTargetX, cannonY, -10, 0, false); if (zombie.parts.head.attached) { zombie.parts.head.rotation = -5 + Math.sin(t * 10) * 3; } }); // Fuse lights and burns playSound('cannon_sound', 0.6); await animate(1200 / speed, (t, dt) => { drawCartoonCannon(ctx, smallCannonTargetX, cannonY, -10, t, false); // Fuse sparks if (Math.random() < 0.6) { const fuseX = smallCannonTargetX - 30; const fuseY = cannonY - 50; spawnParticles(fuseX, fuseY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff6600', vx: (Math.random() - 0.5) * 40, vy: -30 - Math.random() * 40, size: 2 + Math.random() * 4, life: 0.2 + Math.random() * 0.2, gravity: 50, type: 'circle' }); } }); // FIRE! playSound('explosion_sound', 0.7); // Muzzle flash (angled up 10°) const smallMuzzleX = smallCannonTargetX + 130 * Math.cos(10 * Math.PI / 180); const smallMuzzleY = cannonY - 130 * Math.sin(10 * Math.PI / 180); await animate(100 / speed, (t, dt) => { drawCartoonCannon(ctx, smallCannonTargetX - (1 - t) * 30, cannonY, -10, 1, true); const flashSize = 80 * (1 - t); ctx.save(); ctx.translate(smallMuzzleX, smallMuzzleY); const flashGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, flashSize); flashGrad.addColorStop(0, `rgba(255, 255, 200, ${1 - t})`); flashGrad.addColorStop(0.5, `rgba(255, 200, 50, ${0.6 * (1 - t)})`); flashGrad.addColorStop(1, 'rgba(255, 50, 0, 0)'); ctx.fillStyle = flashGrad; ctx.beginPath(); ctx.arc(0, 0, flashSize, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // Smoke from muzzle for (let i = 0; i < 15; i++) { spawnParticles(smallMuzzleX, smallMuzzleY, 1, { color: Math.random() > 0.3 ? '#888' : '#aaa', vx: 50 + Math.random() * 100, vy: (Math.random() - 0.5) * 60, size: 12 + Math.random() * 18, life: 0.8 + Math.random() * 0.5, gravity: -20, type: 'circle' }); } // Cannonball flies slightly upward (matching cannon angle) const smallBallStartX = smallMuzzleX + 10; const smallBallStartY = smallMuzzleY; const smallBallEndX = zombie.baseX - 30; // Reaches zombie's body const smallBallEndY = smallMuzzleY - Math.tan(10 * Math.PI / 180) * (smallBallEndX - smallBallStartX); // Angled up 10° await animate(200 / speed, (t, dt) => { const ballX = smallBallStartX + (smallBallEndX - smallBallStartX) * t; const ballY = smallBallStartY + (smallBallEndY - smallBallStartY) * t; drawCartoonCannon(ctx, smallCannonTargetX - 15 * (1 - t), cannonY, -10, 1, false); // Draw cannonball ctx.save(); ctx.translate(ballX, ballY); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(0, 0, 25, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-6, -6, 8, 0, Math.PI * 2); ctx.fill(); // Smoke trail ctx.fillStyle = 'rgba(150, 150, 150, 0.4)'; ctx.beginPath(); ctx.arc(-20, (Math.random() - 0.5) * 8, 10, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // Ball hits zombie and BOUNCES off - NO effect on zombie playSound('crush_sound', 0.4); // Small metallic "clink" sparks - ball just deflects off for (let i = 0; i < 8; i++) { spawnParticles(smallBallEndX + 10, smallBallEndY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#aaa', vx: -50 - Math.random() * 80, vy: (Math.random() - 0.5) * 60, size: 2 + Math.random() * 4, life: 0.3, gravity: 200, type: 'circle' }); } // Ball bounces back to the left (arcs away with gravity) let bounceX = smallBallEndX; let bounceY = smallBallEndY; let bounceVX = -250; // Bounces back left let bounceVY = -180; // Arcs upward await animate(800 / speed, (t, dt) => { // Ball bounces away with gravity bounceVY += 1200 * dt; bounceX += bounceVX * dt; bounceY += bounceVY * dt; drawCartoonCannon(ctx, smallCannonTargetX, cannonY, -10, 1, false); // Draw bouncing ball (getting smaller as it recedes) if (bounceY < CANVAS_HEIGHT + 50) { const ballScale = Math.max(0.3, 1 - t * 0.5); ctx.save(); ctx.translate(bounceX, bounceY); ctx.scale(ballScale, ballScale); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(0, 0, 25, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-6, -6, 8, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }); // Small cannon rolls off screen to the left await animate(800 / speed, (t, dt) => { const easeIn = t * t; const cannonX = smallCannonTargetX - easeIn * (smallCannonTargetX + 300); drawCartoonCannon(ctx, cannonX, cannonY, -10, 1, false); if (t < 0.7 && Math.random() < 0.3) { spawnParticles(cannonX + 30, cannonY + 55, 1, { color: '#8B7355', vx: 20 + Math.random() * 30, vy: -10 - Math.random() * 15, size: 3 + Math.random() * 5, life: 0.3, gravity: 100, type: 'circle' }); } }); // Brief empty pause between cannons await animate(600 / speed, () => {}); // ===================================================== // PART 2: BIGGER cannon rolls in (partially off-screen), fires, slightly affects zombie // ===================================================== const bigScale = 2.0; // 2x bigger cannon const bigCannonY = cannonY - 50; // Moved up 100px from previous position const bigCannonTargetX = -60; // Partially off-screen left (doesn't fully fit) playSound('crush_sound', 0.5); // Big cannon rolls in from left (slower, heavier, ground rumbles) await animate(1500 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2.5); const cannonX = -600 + (bigCannonTargetX + 600) * easeOut; // Draw bigger cannon (scaled 2x) ctx.save(); ctx.translate(cannonX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-cannonX, -bigCannonY); drawCartoonCannon(ctx, cannonX, bigCannonY, -8, 0, false); ctx.restore(); // Heavier dust clouds from wheels if (t < 0.85 && Math.random() < 0.5) { spawnParticles(cannonX - 40, bigCannonY + 90, 1, { color: '#8B7355', vx: -30 - Math.random() * 40, vy: -15 - Math.random() * 25, size: 6 + Math.random() * 10, life: 0.5, gravity: 100, type: 'circle' }); } // Screen rumble as heavy cannon approaches if (t > 0.3) { const rumble = (t - 0.3) * 4; zombie.baseX = savedBaseX + Math.sin(t * 30) * rumble; zombie.baseY = savedBaseY + Math.cos(t * 25) * rumble * 0.5; } }); zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Brief heavy pause - cannon settles with weight await animate(400 / speed, (t, dt) => { ctx.save(); ctx.translate(bigCannonTargetX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-bigCannonTargetX, -bigCannonY); drawCartoonCannon(ctx, bigCannonTargetX, bigCannonY, -8, 0, false); ctx.restore(); // Zombie looks more nervous at the bigger cannon if (zombie.parts.head.attached) { zombie.parts.head.rotation = -8 + Math.sin(t * 12) * 4; } }); // Big cannon fuse burns (slightly longer, more dramatic) playSound('cannon_sound', 0.8); await animate(1500 / speed, (t, dt) => { ctx.save(); ctx.translate(bigCannonTargetX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-bigCannonTargetX, -bigCannonY); drawCartoonCannon(ctx, bigCannonTargetX, bigCannonY, -8, t, false); ctx.restore(); // Bigger fuse sparks if (Math.random() < 0.7) { const fuseX = bigCannonTargetX - 30 * bigScale; const fuseY = bigCannonY - 50 * bigScale; spawnParticles(fuseX, fuseY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff6600', vx: (Math.random() - 0.5) * 60, vy: -40 - Math.random() * 60, size: 3 + Math.random() * 6, life: 0.3, gravity: 50, type: 'circle' }); } // Screen vibrates as fuse burns (building tension) if (t > 0.6) { const shakeAmt = (t - 0.6) * 8; zombie.baseX = savedBaseX + Math.sin(t * 50) * shakeAmt; } }); zombie.baseX = savedBaseX; // BIG FIRE! playSound('explosion_sound', 0.9); // Bigger muzzle flash (angled up 8°) const bigMuzzleX = bigCannonTargetX + 130 * bigScale * Math.cos(8 * Math.PI / 180); const bigMuzzleY = bigCannonY - 130 * bigScale * Math.sin(8 * Math.PI / 180); await animate(120 / speed, (t, dt) => { ctx.save(); ctx.translate(bigCannonTargetX - (1 - t) * 50, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-(bigCannonTargetX - (1 - t) * 50), -bigCannonY); drawCartoonCannon(ctx, bigCannonTargetX - (1 - t) * 50, bigCannonY, -8, 1, true); ctx.restore(); const flashSize = 150 * (1 - t); ctx.save(); ctx.translate(bigMuzzleX, bigMuzzleY); const flashGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, flashSize); flashGrad.addColorStop(0, `rgba(255, 255, 200, ${1 - t})`); flashGrad.addColorStop(0.3, `rgba(255, 200, 50, ${0.8 * (1 - t)})`); flashGrad.addColorStop(0.7, `rgba(255, 100, 0, ${0.5 * (1 - t)})`); flashGrad.addColorStop(1, 'rgba(255, 50, 0, 0)'); ctx.fillStyle = flashGrad; ctx.beginPath(); ctx.arc(0, 0, flashSize, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Screen flash if (t < 0.3) { ctx.fillStyle = `rgba(255, 255, 200, ${0.3 * (1 - t / 0.3)})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); // Big smoke cloud for (let i = 0; i < 25; i++) { spawnParticles(bigMuzzleX, bigMuzzleY, 1, { color: Math.random() > 0.3 ? '#888' : '#aaa', vx: 60 + Math.random() * 150, vy: (Math.random() - 0.5) * 80, size: 18 + Math.random() * 28, life: 1.0 + Math.random() * 0.6, gravity: -25, type: 'circle' }); } // Big sparks for (let i = 0; i < 20; i++) { spawnParticles(bigMuzzleX, bigMuzzleY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#ff6600', vx: 100 + Math.random() * 250, vy: (Math.random() - 0.5) * 120, size: 3 + Math.random() * 6, life: 0.4, gravity: 200, type: 'circle' }); } // Bigger cannonball flies slightly upward (matching cannon angle) const bigBallStartX = bigMuzzleX + 10; const bigBallStartY = bigMuzzleY; const bigBallEndX = zombie.baseX - 30; const bigBallEndY = bigMuzzleY - Math.tan(8 * Math.PI / 180) * (bigBallEndX - bigBallStartX); // Angled up 8° const bigBallRadius = 40; // Bigger ball await animate(180 / speed, (t, dt) => { const ballX = bigBallStartX + (bigBallEndX - bigBallStartX) * t; const ballY = bigBallStartY + (bigBallEndY - bigBallStartY) * t; ctx.save(); ctx.translate(bigCannonTargetX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-bigCannonTargetX, -bigCannonY); drawCartoonCannon(ctx, bigCannonTargetX, bigCannonY, -8, 1, false); ctx.restore(); // Draw big cannonball ctx.save(); ctx.translate(ballX, ballY); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(0, 0, bigBallRadius, 0, Math.PI * 2); ctx.fill(); const ballGrad = ctx.createRadialGradient(-10, -10, 5, 0, 0, bigBallRadius); ballGrad.addColorStop(0, '#555'); ballGrad.addColorStop(0.5, '#333'); ballGrad.addColorStop(1, '#1a1a1a'); ctx.fillStyle = ballGrad; ctx.beginPath(); ctx.arc(0, 0, bigBallRadius, 0, Math.PI * 2); ctx.fill(); // Smoke trail ctx.fillStyle = 'rgba(150, 150, 150, 0.4)'; ctx.beginPath(); ctx.arc(-30, (Math.random() - 0.5) * 12, 16, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }); // Impact - SLIGHT effect on zombie (small flinch, no dismemberment) playSound('crush_sound', 0.7); // Zombie flinches slightly from the bigger impact zombie.isRagdolling = true; zombie.applyImpulse(100, -40); // Small push (noticeable but not destructive) // More sparks on impact (bigger than first cannon) for (let i = 0; i < 15; i++) { spawnParticles(bigBallEndX + 15, bigBallEndY, 1, { color: Math.random() > 0.4 ? '#ffcc00' : '#aaa', vx: -80 - Math.random() * 150, vy: (Math.random() - 0.5) * 120, size: 3 + Math.random() * 6, life: 0.4, gravity: 200, type: 'circle' }); } // A tiny bit of green goo (slight damage visible) for (let i = 0; i < 5; i++) { spawnParticles(bigBallEndX + 10, bigBallEndY + (Math.random() - 0.5) * 30, 1, { color: '#3dcc10', vx: -40 - Math.random() * 60, vy: (Math.random() - 0.5) * 50, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: 300, type: 'circle' }); } // Ball bounces off (arcs away higher/further this time) let bigBounceX = bigBallEndX; let bigBounceY = bigBallEndY; let bigBounceVX = -350; let bigBounceVY = -280; // Screen shake from bigger impact (mild) + knockback drift const knockbackDist = 40; // Zombie gets pushed 40px to the right await animate(700 / speed, (t, dt) => { // Mild screen shake + gradual knockback drift to the right const shakeDecay = Math.max(0, 1 - t * 3); const shakeAmt = 10 * shakeDecay; const knockbackProgress = Math.min(t / 0.5, 1); // Reaches full offset at 50% const knockbackEase = 1 - Math.pow(1 - knockbackProgress, 2); zombie.baseX = savedBaseX + knockbackEase * knockbackDist + Math.sin(t * 50) * shakeAmt; zombie.baseY = savedBaseY + Math.cos(t * 40) * shakeAmt * 0.5; // Ball bounces away bigBounceVY += 1500 * dt; bigBounceX += bigBounceVX * dt; bigBounceY += bigBounceVY * dt; ctx.save(); ctx.translate(bigCannonTargetX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-bigCannonTargetX, -bigCannonY); drawCartoonCannon(ctx, bigCannonTargetX, bigCannonY, -8, 1, false); ctx.restore(); // Draw bouncing ball if (bigBounceY < CANVAS_HEIGHT + 100) { const ballScale = Math.max(0.4, 1 - t * 0.4); ctx.save(); ctx.translate(bigBounceX, bigBounceY); ctx.scale(ballScale, ballScale); ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(0, 0, bigBallRadius, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-8, -8, 12, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }); // Reset zombie position (knocked back slightly from impact, stays standing) zombie.baseX = savedBaseX + knockbackDist; zombie.baseY = savedBaseY; zombie.isRagdolling = false; // Go back to idle // Big cannon rolls off to the left await animate(1200 / speed, (t, dt) => { const easeIn = t * t; const cannonX = bigCannonTargetX - easeIn * 700; ctx.save(); ctx.translate(cannonX, bigCannonY); ctx.scale(bigScale, bigScale); ctx.translate(-cannonX, -bigCannonY); drawCartoonCannon(ctx, cannonX, bigCannonY, -8, 1, false); ctx.restore(); if (t < 0.7 && Math.random() < 0.4) { spawnParticles(cannonX + 60, bigCannonY + 90, 1, { color: '#8B7355', vx: 25 + Math.random() * 40, vy: -12 - Math.random() * 20, size: 5 + Math.random() * 8, life: 0.4, gravity: 100, type: 'circle' }); } }); // Brief pause after big cannon leaves - zombie still standing await animate(600 / speed, () => {}); // ===================================================== // PART 3: MASSIVE cannon barrel appears, pointed at zombie's torso // ===================================================== // The barrel is SO massive that only it fits on screen - no carriage, no wheels const massiveBarrelScale = 5.0; // 5x the normal barrel size const massiveBarrelY = zombie.baseY - 20; // Aimed at torso center const massiveBarrelTargetX = -200; // Doesn't come as far onto screen - just enough to push zombie const massiveBarrelLength = 130 * massiveBarrelScale; // Very long barrel // Calculate muzzle end X at target position (where barrel tip will be) const muzzleTipAtTarget = massiveBarrelTargetX + 136 * massiveBarrelScale; // ~480px from left // Zombie will be pushed from its current position to the right edge area const zombiePushTargetX = CANVAS_WIDTH - 150; // Push zombie to right side of screen // Massive barrel slides in from the left, PUSHING zombie ahead of it (1200ms) playSound('crush_sound', 0.7); await animate(1200 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2.5); const barrelX = -800 + (massiveBarrelTargetX + 800) * easeOut; // Calculate current muzzle tip position const currentMuzzleTip = barrelX + 136 * massiveBarrelScale; // Push zombie when barrel tip reaches it const zombieCurrentX = zombie.baseX; if (currentMuzzleTip > zombieCurrentX - 40) { // Barrel is touching/pushing zombie - zombie moves with the barrel tip zombie.baseX = currentMuzzleTip + 40; // Zombie reacts to being pushed if (Math.random() < 0.15) { zombie.applyImpulse(20, (Math.random() - 0.5) * 15); } } // Draw the massive barrel (just a barrel, no wheels/carriage) ctx.save(); ctx.translate(barrelX, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); // Barrel body - dark iron with menacing gradient const barrelGrad = ctx.createLinearGradient(0, -22, 0, 22); barrelGrad.addColorStop(0, '#2a2a3a'); barrelGrad.addColorStop(0.3, '#4a4a5a'); barrelGrad.addColorStop(0.5, '#555'); barrelGrad.addColorStop(0.7, '#4a4a5a'); barrelGrad.addColorStop(1, '#2a2a3a'); ctx.fillStyle = barrelGrad; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); // Reinforcement rings ctx.fillStyle = '#444'; ctx.strokeStyle = '#222'; ctx.lineWidth = 1.5; const ringPos = [-20, 20, 60, 100]; ringPos.forEach(rx => { const widthAtPos = 18 - (rx + 40) * 0.01; ctx.beginPath(); ctx.moveTo(rx, -widthAtPos - 2); ctx.lineTo(rx + 10, -widthAtPos - 2); ctx.lineTo(rx + 10, widthAtPos + 2); ctx.lineTo(rx, widthAtPos + 2); ctx.closePath(); ctx.fill(); ctx.stroke(); }); // Muzzle (flared end) ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2; ctx.stroke(); // Bore (dark hole) ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.ellipse(141, 0, 3, 18, 0, 0, Math.PI * 2); ctx.fill(); // Barrel shine ctx.fillStyle = 'rgba(255, 255, 255, 0.08)'; ctx.beginPath(); ctx.moveTo(-30, -17); ctx.lineTo(110, -14); ctx.lineTo(110, -8); ctx.lineTo(-30, -10); ctx.closePath(); ctx.fill(); ctx.restore(); // Heavy screen rumble as this massive thing slides in (Y only - X is handled by push) if (t > 0.2) { const rumble = (t - 0.2) * 6; zombie.baseY = savedBaseY + Math.cos(t * 30) * rumble * 0.4; } }); // Save zombie's pushed position for the rest of Part 3 const zombiePushedX = zombie.baseX; zombie.baseY = savedBaseY; // Zombie shifts nervously - the barrel is pointed RIGHT at them (1500ms) zombie.isRagdolling = false; zombie.customPose = true; await animate(1500 / speed, (t, dt) => { // Draw the massive barrel at rest position ctx.save(); ctx.translate(massiveBarrelTargetX, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); const barrelGrad2 = ctx.createLinearGradient(0, -22, 0, 22); barrelGrad2.addColorStop(0, '#2a2a3a'); barrelGrad2.addColorStop(0.3, '#4a4a5a'); barrelGrad2.addColorStop(0.5, '#555'); barrelGrad2.addColorStop(0.7, '#4a4a5a'); barrelGrad2.addColorStop(1, '#2a2a3a'); ctx.fillStyle = barrelGrad2; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#444'; ctx.strokeStyle = '#222'; ctx.lineWidth = 1.5; [-20, 20, 60, 100].forEach(rx => { const widthAtPos = 18 - (rx + 40) * 0.01; ctx.beginPath(); ctx.moveTo(rx, -widthAtPos - 2); ctx.lineTo(rx + 10, -widthAtPos - 2); ctx.lineTo(rx + 10, widthAtPos + 2); ctx.lineTo(rx, widthAtPos + 2); ctx.closePath(); ctx.fill(); ctx.stroke(); }); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.ellipse(141, 0, 3, 18, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'rgba(255, 255, 255, 0.08)'; ctx.beginPath(); ctx.moveTo(-30, -17); ctx.lineTo(110, -14); ctx.lineTo(110, -8); ctx.lineTo(-30, -10); ctx.closePath(); ctx.fill(); ctx.restore(); // Zombie nervous shifting const shiftX = Math.sin(t * 8) * (3 + t * 5); const shiftY = Math.cos(t * 6) * 2; zombie.baseX = zombiePushedX + shiftX; zombie.baseY = savedBaseY + shiftY; // Head darts around nervously looking at the barrel if (zombie.parts.head.attached) { zombie.parts.head.rotation = -12 + Math.sin(t * 12) * 6; } // Arms twitch and try to shield if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - 20 + Math.sin(t * 10) * 10; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + 15 + Math.sin(t * 9 + 1) * 8; } // Knees buckle slightly if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 3 + Math.sin(t * 7) * 3; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -3 + Math.sin(t * 7 + Math.PI) * 3; } }); // FIRE THE MASSIVE CANNON! playSound('explosion_sound', 1.0); playSound('cannon_sound', 1.0); zombie.baseX = zombiePushedX; zombie.baseY = savedBaseY; zombie.customPose = false; zombie.isRagdolling = true; // Muzzle position (end of the massive barrel in world coords) const massiveMuzzleX = massiveBarrelTargetX + 136 * massiveBarrelScale; const massiveMuzzleY = massiveBarrelY; // Giant muzzle flash (150ms) await animate(150 / speed, (t, dt) => { // Draw barrel with recoil (kicks back) ctx.save(); ctx.translate(massiveBarrelTargetX - (1 - t) * 80, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); const barrelGrad3 = ctx.createLinearGradient(0, -22, 0, 22); barrelGrad3.addColorStop(0, '#2a2a3a'); barrelGrad3.addColorStop(0.3, '#4a4a5a'); barrelGrad3.addColorStop(0.5, '#555'); barrelGrad3.addColorStop(0.7, '#4a4a5a'); barrelGrad3.addColorStop(1, '#2a2a3a'); ctx.fillStyle = barrelGrad3; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#444'; [-20, 20, 60, 100].forEach(rx => { const widthAtPos = 18 - (rx + 40) * 0.01; ctx.fillRect(rx, -widthAtPos - 2, 10, (widthAtPos + 2) * 2); }); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); // Glowing hot muzzle ctx.fillStyle = `rgba(255, 200, 50, ${(1 - t) * 0.8})`; ctx.beginPath(); ctx.ellipse(141, 0, 4, 19, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // MASSIVE muzzle flash (huge, fills a large area) const flashSize = 250 * (1 - t); ctx.save(); ctx.translate(massiveMuzzleX, massiveMuzzleY); const flashGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, flashSize); flashGrad.addColorStop(0, `rgba(255, 255, 230, ${(1 - t)})`); flashGrad.addColorStop(0.2, `rgba(255, 220, 80, ${0.9 * (1 - t)})`); flashGrad.addColorStop(0.5, `rgba(255, 130, 0, ${0.6 * (1 - t)})`); flashGrad.addColorStop(0.8, `rgba(255, 60, 0, ${0.3 * (1 - t)})`); flashGrad.addColorStop(1, 'rgba(200, 30, 0, 0)'); ctx.fillStyle = flashGrad; ctx.beginPath(); ctx.arc(0, 0, flashSize, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Screen flash if (t < 0.3) { ctx.fillStyle = `rgba(255, 255, 200, ${0.6 * (1 - t / 0.3)})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Screen shake const shakeAmt = 35 * (1 - t); zombie.baseX = zombiePushedX + Math.sin(t * 100) * shakeAmt; zombie.baseY = savedBaseY + Math.cos(t * 80) * shakeAmt * 0.6; }); // Massive smoke cloud from muzzle for (let i = 0; i < 40; i++) { spawnParticles(massiveMuzzleX, massiveMuzzleY + (Math.random() - 0.5) * 60, 1, { color: Math.random() > 0.3 ? '#888' : '#aaa', vx: 80 + Math.random() * 200, vy: (Math.random() - 0.5) * 120, size: 20 + Math.random() * 35, life: 1.2 + Math.random() * 0.8, gravity: -25, type: 'circle' }); } // IMMEDIATE OBLITERATION! No cannonball visible - just instant destruction playSound('explosion_sound', 1.0); playSound('crush_sound', 1.0); // Screen flash ctx.fillStyle = 'rgba(255, 255, 200, 0.8)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Detach ALL parts with extreme force (rightward - direction of cannonball) const obliterateForce = 3000; const partPositions2 = { head: { x: 0, y: -115 }, torso: { x: 0, y: 0 }, leftUpperArm: { x: -48, y: -65 }, rightUpperArm: { x: 48, y: -65 }, leftForearm: { x: -48, y: 5 }, rightForearm: { x: 48, y: 5 }, leftThigh: { x: -22, y: 80 }, rightThigh: { x: 22, y: 80 }, leftLowerLeg: { x: -22, y: 160 }, rightLowerLeg: { x: 22, y: 160 } }; for (const partName in partPositions2) { const partPos = partPositions2[partName]; // Force direction: mostly rightward (cannonball direction) with spread const forceX = obliterateForce * (0.6 + Math.random() * 0.4) + (Math.random() - 0.5) * 400; const forceY = (Math.random() - 0.5) * obliterateForce * 0.5 - 200; zombie.detachPart(partName, forceX, forceY); zombie.parts[partName].continuousBleeding = true; } // Massive green goo explosion for (let i = 0; i < 100; i++) { const angle = Math.random() * Math.PI * 2; const spd = 200 + Math.random() * 600; spawnParticles(zombie.baseX, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd + 300, vy: Math.sin(angle) * spd - 100, size: 8 + Math.random() * 20, life: 1.2 + Math.random() * 0.8, gravity: 350, type: Math.random() > 0.6 ? 'chunk' : 'circle' }); } // Bone fragments for (let i = 0; i < 25; i++) { const angle = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 400; spawnParticles(zombie.baseX, zombie.baseY, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd + 200, vy: Math.sin(angle) * spd - 150, size: 5 + Math.random() * 10, life: 1.5 + Math.random() * 0.8, gravity: 500, type: 'square' }); } // Clothing scraps for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 300; spawnParticles(zombie.baseX, zombie.baseY + (Math.random() - 0.5) * 100, 1, { color: Math.random() > 0.5 ? '#2a1f5e' : '#3a2a6e', vx: Math.cos(angle) * spd + 250, vy: Math.sin(angle) * spd - 80, size: 6 + Math.random() * 12, life: 1.3 + Math.random() * 0.6, gravity: 300, type: 'square' }); } // Shockwave ring from impact await animate(300 / speed, (t, dt) => { // Draw barrel still visible ctx.save(); ctx.translate(massiveBarrelTargetX, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); const bGrad2 = ctx.createLinearGradient(0, -22, 0, 22); bGrad2.addColorStop(0, '#2a2a3a'); bGrad2.addColorStop(0.5, '#555'); bGrad2.addColorStop(1, '#2a2a3a'); ctx.fillStyle = bGrad2; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#444'; [-20, 20, 60, 100].forEach(rx => { ctx.fillRect(rx, -18, 10, 36); }); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); ctx.restore(); // Shockwave const waveR = t * 600; ctx.strokeStyle = `rgba(255, 180, 50, ${(1 - t) * 0.7})`; ctx.lineWidth = 12 * (1 - t) + 2; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 20 * (1 - t); ctx.beginPath(); ctx.arc(zombiePushedX, massiveBarrelY, waveR, 0, Math.PI * 2); ctx.stroke(); ctx.shadowBlur = 0; // Screen shake decaying const shakeDecay = Math.max(0, 1 - t * 2); const shakeAmt2 = 25 * shakeDecay; zombie.baseX = zombiePushedX + Math.sin(t * 70) * shakeAmt2; zombie.baseY = savedBaseY + Math.cos(t * 55) * shakeAmt2 * 0.6; }); // Reset position zombie.baseX = zombiePushedX; zombie.baseY = savedBaseY; // Hold with barrel visible and debris settling (1000ms) await animate(1000 / speed, (t, dt) => { // Draw barrel ctx.save(); ctx.translate(massiveBarrelTargetX, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); const bGrad3 = ctx.createLinearGradient(0, -22, 0, 22); bGrad3.addColorStop(0, '#2a2a3a'); bGrad3.addColorStop(0.5, '#555'); bGrad3.addColorStop(1, '#2a2a3a'); ctx.fillStyle = bGrad3; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#444'; [-20, 20, 60, 100].forEach(rx => { ctx.fillRect(rx, -18, 10, 36); }); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); ctx.restore(); // Smoke wisps from barrel muzzle if (Math.random() < 0.15 * (1 - t)) { spawnParticles(massiveMuzzleX, massiveMuzzleY + (Math.random() - 0.5) * 30, 1, { color: '#777', vx: 20 + Math.random() * 40, vy: -20 - Math.random() * 30, size: 12 + Math.random() * 15, life: 0.8 + Math.random() * 0.5, gravity: -20, type: 'circle' }); } }); // Barrel retracts off-screen to the left (800ms) await animate(800 / speed, (t, dt) => { const easeIn = t * t; const barrelX = massiveBarrelTargetX - easeIn * 800; ctx.save(); ctx.translate(barrelX, massiveBarrelY); ctx.scale(massiveBarrelScale, massiveBarrelScale); const bGrad4 = ctx.createLinearGradient(0, -22, 0, 22); bGrad4.addColorStop(0, '#2a2a3a'); bGrad4.addColorStop(0.5, '#555'); bGrad4.addColorStop(1, '#2a2a3a'); ctx.fillStyle = bGrad4; ctx.beginPath(); ctx.moveTo(-40, -20); ctx.lineTo(130, -16); ctx.quadraticCurveTo(140, 0, 130, 16); ctx.lineTo(-40, 20); ctx.quadraticCurveTo(-50, 0, -40, -20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a1a2a'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#444'; [-20, 20, 60, 100].forEach(rx => { ctx.fillRect(rx, -18, 10, 36); }); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.moveTo(120, -18); ctx.lineTo(138, -22); ctx.quadraticCurveTo(145, 0, 138, 22); ctx.lineTo(120, 18); ctx.closePath(); ctx.fill(); ctx.restore(); }); await animate(500 / speed, () => {}); }, // 35. LIGHT SABER - Interactive: rises from bottom on holder, player grabs to ignite lightsaber: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Lightsaber color - classic blue/cyan const saberColor = '#00ccff'; const saberGlow = '#0088ff'; const saberCore = '#ffffff'; const bladeLength = 260; const bladeWidth = 8; const handleLength = 75; // Lightsaber interactive state const saber = { x: 0, y: 0, // Handle center position (emitter end) angle: 0, // Current angle (radians) dragging: false, active: false // Whether blade is ignited and interactive }; // Helper: draw a lightsaber at world position with given angle and glow function drawLightsaberAt(ctx, sx, sy, angle, bladeAlpha, handleAlpha) { ctx.save(); ctx.translate(sx, sy); ctx.rotate(angle); // Blade glow (outer) - blade EXTENDS proportional to bladeAlpha if (bladeAlpha > 0) { ctx.save(); ctx.globalAlpha = Math.min(bladeAlpha * 2, 1); // Opacity reaches full at 50% extension const currentBladeLen = bladeLength * bladeAlpha; // Blade extends over time ctx.shadowColor = saberColor; ctx.shadowBlur = 30; ctx.strokeStyle = saberGlow; ctx.lineWidth = bladeWidth * 3; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentBladeLen); ctx.stroke(); ctx.shadowBlur = 15; ctx.strokeStyle = saberColor; ctx.lineWidth = bladeWidth; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentBladeLen); ctx.stroke(); ctx.shadowBlur = 5; ctx.strokeStyle = saberCore; ctx.lineWidth = bladeWidth * 0.35; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentBladeLen + 5); ctx.stroke(); ctx.fillStyle = saberColor; ctx.shadowBlur = 20; ctx.beginPath(); ctx.arc(0, -currentBladeLen + 3, bladeWidth * 0.8, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Handle / hilt if (handleAlpha > 0) { ctx.save(); ctx.globalAlpha = handleAlpha; const handleGrad = ctx.createLinearGradient(-10, 0, 10, 0); handleGrad.addColorStop(0, '#2a2a3a'); handleGrad.addColorStop(0.4, '#555566'); handleGrad.addColorStop(0.6, '#444455'); handleGrad.addColorStop(1, '#1a1a28'); ctx.fillStyle = handleGrad; ctx.beginPath(); ctx.roundRect(-10, 0, 20, handleLength, 4); ctx.fill(); ctx.strokeStyle = '#000'; // Black outline ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#1a1a28'; for (let i = 0; i < 5; i++) { ctx.fillRect(-10, 12 + i * 10, 20, 4); } ctx.fillStyle = '#888899'; ctx.beginPath(); ctx.roundRect(-12, -8, 24, 12, 3); ctx.fill(); ctx.strokeStyle = '#aaaacc'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.fillStyle = bladeAlpha > 0.3 ? '#00ccff' : '#004466'; ctx.shadowColor = '#00ccff'; ctx.shadowBlur = bladeAlpha > 0.3 ? 8 : 0; ctx.beginPath(); ctx.arc(0, 45, 5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#666677'; ctx.beginPath(); ctx.roundRect(-8, 72, 16, 8, 2); ctx.fill(); ctx.restore(); } ctx.restore(); } // Helper: draw the arm + holder for the lightsaber (long arm from bottom with cradle at top) // armTopY: the Y position of the top of the arm (where the cradle is) function drawArmAndHolder(ctx, armX, armTopY) { ctx.save(); ctx.translate(armX, 0); // Long vertical arm from bottom of screen up to armTopY const armBottomY = CANVAS_HEIGHT + 20; const armWidth = 16; // Arm body (metallic dark gray) const armGrad = ctx.createLinearGradient(-armWidth/2, 0, armWidth/2, 0); armGrad.addColorStop(0, '#3a3a4a'); armGrad.addColorStop(0.3, '#5a5a6a'); armGrad.addColorStop(0.5, '#6a6a7a'); armGrad.addColorStop(0.7, '#5a5a6a'); armGrad.addColorStop(1, '#3a3a4a'); ctx.fillStyle = armGrad; ctx.fillRect(-armWidth/2, armTopY, armWidth, armBottomY - armTopY); // Arm outline ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.strokeRect(-armWidth/2, armTopY, armWidth, armBottomY - armTopY); // Joint rings along the arm (every 80px) ctx.fillStyle = '#4a4a5a'; for (let ry = armTopY + 40; ry < armBottomY - 40; ry += 80) { ctx.fillRect(-armWidth/2 - 3, ry, armWidth + 6, 8); } // Pivot joint at top (where cradle connects) ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(0, armTopY, 12, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(0, armTopY, 5, 0, Math.PI * 2); ctx.fill(); // Horizontal cradle at top (two prongs pointing up, spaced for horizontal saber) const cradleWidth = handleLength + 20; // Wide enough for handle const prongHeight = 25; // Cradle bar (horizontal) ctx.fillStyle = '#4a4a5a'; ctx.fillRect(-cradleWidth/2, armTopY - 8, cradleWidth, 10); ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5; ctx.strokeRect(-cradleWidth/2, armTopY - 8, cradleWidth, 10); // Left prong ctx.fillStyle = '#555'; ctx.fillRect(-cradleWidth/2 + 5, armTopY - 8 - prongHeight, 6, prongHeight); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(-cradleWidth/2 + 8, armTopY - 8 - prongHeight, 5, 0, Math.PI * 2); ctx.fill(); // Right prong ctx.fillStyle = '#555'; ctx.fillRect(cradleWidth/2 - 11, armTopY - 8 - prongHeight, 6, prongHeight); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(cradleWidth/2 - 8, armTopY - 8 - prongHeight, 5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Position: arm rises from bottom center-left const holderX = savedBaseX - 180; // The cradle top (where saber sits) rests at this Y when fully risen const cradleRestY = savedBaseY + 300; // Saber sits horizontally on the cradle: rotated 90° (Math.PI/2), centered on cradle. // Offset handleRestX by half the handle length so the handle centers over the arm. const handleRestX = holderX + handleLength / 2; const handleRestY = cradleRestY - 30; // Slightly above cradle bar const saberRestAngle = Math.PI / 2; // Horizontal (pointing right) // Zombie's red lightsaber state (drops into zombie's right hand) const zombieSaber = { active: false, igniteProgress: 0, // 0 = off, 1 = fully ignited _extraSpinAngle: 0, // Extra blade rotation around handle anchor (radians) // Position is calculated from zombie's right forearm each frame }; // Darth Vader helmet state let helmetOn = false; // Once true, helmet is worn permanently const helmetTargetY = zombie.baseY + (-115) * zombie.scale; // Head center world Y const helmetTargetX = zombie.baseX; // Head center world X const helmetStartY = -200; // Starts above screen // Phase 1: Arm rises from below AND helmet drops onto zombie's head simultaneously (900ms) playSound('crush_sound', 0.3); await animate(900 / speed, (t, dt) => { // Elastic bounce easing for arm let spring; if (t < 0.5) { spring = 4 * t * t; } else if (t < 0.75) { spring = 1 + Math.sin((t - 0.5) / 0.25 * Math.PI) * 0.12; } else { spring = 1 + (1 - (t - 0.75) / 0.25) * 0.04 * Math.sin((t - 0.75) * 40); } spring = Math.max(0, Math.min(spring, 1.15)); // Arm top rises from well below screen to cradleRestY const startArmTop = CANVAS_HEIGHT + 100; const currentArmTopY = startArmTop + (cradleRestY - startArmTop) * spring; const currentHandleY = currentArmTopY - 30; // Draw arm and holder drawArmAndHolder(ctx, holderX, currentArmTopY); // Draw handle horizontally (blade OFF, no glow) - rotated 90° drawLightsaberAt(ctx, handleRestX, currentHandleY, saberRestAngle, 0, 1); // === HELMET DROP (simultaneous with arm rise) === // Helmet falls with gravity, lands on head at ~60% of the animation const helmetLandT = 0.55; // When helmet reaches the head let currentHelmetY; if (t < helmetLandT) { // Falling with quadratic acceleration const fallT = t / helmetLandT; const fallEase = fallT * fallT; // Accelerating fall currentHelmetY = helmetStartY + fallEase * (helmetTargetY - helmetStartY); } else { // Landed - small bounce settle const bounceT = (t - helmetLandT) / (1 - helmetLandT); const bounce = Math.sin(bounceT * Math.PI * 3) * Math.exp(-bounceT * 5) * 8; currentHelmetY = helmetTargetY + bounce; if (!helmetOn) { helmetOn = true; if (zombie) zombie._helmetOn = true; playSound('crush_sound', 0.4); // Impact particles for (let i = 0; i < 6; i++) { spawnParticles(helmetTargetX + (Math.random() - 0.5) * 30, helmetTargetY + 20, 1, { color: '#333', vx: (Math.random() - 0.5) * 60, vy: -20 - Math.random() * 30, size: 2 + Math.random() * 3, life: 0.3, gravity: 200, type: 'circle' }); } } } // Draw helmet (slightly larger than head to fit over it) if (!helmetOn) { drawVaderHelmet(ctx, helmetTargetX, currentHelmetY, 1.166 * zombie.scale * zombie.globalScale); } // === RED SABER HANDLE drops into zombie's right hand (simultaneous) === const saberHandleStartY = -250; const zScale2 = zombie.scale * zombie.globalScale; // Right hand world position (forearm at (48, 5), hand at part-local y~78) const rightHandX = zombie.baseX + 48 * zScale2; const rightHandY = zombie.baseY + (5 + 78) * zScale2; const saberHandleLandT = 0.65; // Lands slightly after helmet let redHandleY; if (t < saberHandleLandT) { const fallT2 = t / saberHandleLandT; const fallEase2 = fallT2 * fallT2; redHandleY = saberHandleStartY + fallEase2 * (rightHandY - saberHandleStartY); } else { const bounceT2 = (t - saberHandleLandT) / (1 - saberHandleLandT); const bounce2 = Math.sin(bounceT2 * Math.PI * 2) * Math.exp(-bounceT2 * 4) * 5; redHandleY = rightHandY + bounce2; if (!zombieSaber.active) { zombieSaber.active = true; } } // Draw red saber handle (blade OFF) falling into hand drawLightsaberAt(ctx, rightHandX, redHandleY, Math.PI, 0, 1); // Zombie reacts when helmet lands if (helmetOn && t < 0.75) { zombie.applyImpulse(0, 5); } }); // Set zombie to guard stance for the duel zombie.customPose = true; zombie.isRagdolling = false; // Stand retract state — arm slides back down after player grabs saber let standRetractStart = null; const drawStand = () => { const _elapsed = standRetractStart ? Date.now() - standRetractStart : 0; const _t = Math.min(_elapsed / 500, 1); const _y = cradleRestY + _t * _t * (CANVAS_HEIGHT + 200 - cradleRestY); if (_y < CANVAS_HEIGHT + 50) drawArmAndHolder(ctx, holderX, _y); }; // Ignite zombie's red saber (400ms) while raising arm to guard position playSound('lightning_sound', 0.3); await animate(500 / speed, (t, dt) => { zombieSaber.igniteProgress = t; // Raise right arm to guard position during ignition if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -8 + t * (-60 - (-8)); // Rest to guard } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = 0 + t * (-30); // Slight bend } // Keep drawing the player's saber and pedestal so it doesn't disappear drawStand(); drawLightsaberAt(ctx, handleRestX, handleRestY, saberRestAngle, 0, 1); // Calculate hand world position from arm chain const zScale2 = zombie.scale * zombie.globalScale; const forearm = zombie.parts.rightForearm; const forearmRad = forearm.rotation * Math.PI / 180; const handLocalX = forearm.x - 78 * Math.sin(forearmRad); const handLocalY = forearm.y + 78 * Math.cos(forearmRad); const handWorldX = zombie.baseX + handLocalX * zScale2; const handWorldY = zombie.baseY + handLocalY * zScale2; const saberAngleRad = forearmRad + (zombieSaber._extraSpinAngle || 0); // Draw red saber at hand position with partial blade drawRedLightsaber(ctx, handWorldX, handWorldY, saberAngleRad, t, bladeLength, bladeWidth, handleLength); }); // Dust puff from arm arriving for (let i = 0; i < 5; i++) { spawnParticles(holderX + (Math.random() - 0.5) * 40, cradleRestY + 10, 1, { color: '#8B7355', vx: (Math.random() - 0.5) * 50, vy: -15 - Math.random() * 30, size: 3 + Math.random() * 4, life: 0.3, gravity: 150, type: 'circle' }); } // Phase 2: Wait for player to grab the handle — then ignite document.getElementById('reset-button').disabled = false; let grabbed = false; let igniteProgress = 0; // 0 = off, 1 = fully ignited let pointerDown = false; // Track if pointer is still held from the grab let lastPointerPos = null; // Track pointer position during ignite for seamless transition const getPointerPos = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches && e.touches.length > 0) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } if (e.changedTouches && e.changedTouches.length > 0) { return { x: (e.changedTouches[0].clientX - rect.left) * scaleX, y: (e.changedTouches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; }; const isOnHandle2 = (px, py) => { const dx = px - handleRestX; const dy = py - handleRestY; return Math.sqrt(dx * dx + dy * dy) < 100; }; // These handlers persist from grab through ignite and into interactive phase let saberKills = 0; let killTime = 0; let saberDone = false; let spinning = false; // Track previous position for collision let prevSaberX = 0; let prevSaberY = 0; let prevSaberAngle = 0; const grabHandler = (e) => { if (grabbed) return; const pos = getPointerPos(e); if (isOnHandle2(pos.x, pos.y)) { grabbed = true; pointerDown = true; lastPointerPos = pos; e.preventDefault(); } }; const globalMoveHandler = (e) => { if (!pointerDown) return; e.preventDefault(); const pos = getPointerPos(e); lastPointerPos = pos; // If saber is active and dragging, process interactive movement if (saber.active && saber.dragging) { prevSaberX = saber.x; prevSaberY = saber.y; prevSaberAngle = saber.angle; const targetX = savedBaseX; const targetY = savedBaseY; const dx = targetX - pos.x; const dy = targetY - pos.y; const angleToZombie = Math.atan2(dx, -dy); if (!spinning) { saber.angle = angleToZombie; } const dist = Math.sqrt(dx * dx + dy * dy); if (dist > 1) { const normX = dx / dist; const normY = dy / dist; saber.x = pos.x + normX * (handleLength / 2); saber.y = pos.y + normY * (handleLength / 2); } else { saber.x = pos.x; saber.y = pos.y; } // Check collision with zombie if (!saberDone) { const tipX = saber.x + Math.sin(saber.angle) * bladeLength; const tipY = saber.y - Math.cos(saber.angle) * bladeLength; const prevTipX = prevSaberX + Math.sin(prevSaberAngle) * bladeLength; const prevTipY = prevSaberY - Math.cos(prevSaberAngle) * bladeLength; const moveSpeed = Math.sqrt((saber.x - prevSaberX) ** 2 + (saber.y - prevSaberY) ** 2); const partsToCheck = ['head', 'leftForearm', 'rightForearm', 'leftUpperArm', 'rightUpperArm', 'leftLowerLeg', 'rightLowerLeg', 'leftThigh', 'rightThigh', 'torso']; for (const partName of partsToCheck) { const part = zombie.parts[partName]; if (!part || !part.visible || !part.attached) continue; const bounds = getPartBounds(partName); if (!bounds) continue; let hit = false; let hitPoint = null; for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection({ x: prevTipX, y: prevTipY }, { x: tipX, y: tipY }, bounds[i], bounds[j]); if (intersection) { hit = true; hitPoint = intersection; break; } } if (!hit) { for (let i = 0; i < bounds.length; i++) { const j = (i + 1) % bounds.length; const intersection = lineIntersection({ x: saber.x, y: saber.y }, { x: tipX, y: tipY }, bounds[i], bounds[j]); if (intersection) { hit = true; hitPoint = intersection; break; } } } if (!hit && pointInPolygon(tipX, tipY, bounds)) { hit = true; hitPoint = { x: tipX, y: tipY }; } if (hit && hitPoint) { // Visual feedback only - no damage accumulation // The saber cuts parts off during automatic 360 spins instead zombie.isRagdolling = true; zombie.applyImpulse((Math.random() - 0.5) * 40, (Math.random() - 0.5) * 20); // Sparks and saber contact particles for (let i = 0; i < 5; i++) { const a = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 200; spawnParticles(hitPoint.x, hitPoint.y, 1, { color: Math.random() > 0.4 ? '#00ccff' : '#ffffff', vx: Math.cos(a) * spd, vy: Math.sin(a) * spd - 60, size: 3 + Math.random() * 6, life: 0.3 + Math.random() * 0.3, gravity: 200, type: 'circle' }); } if (Math.random() < 0.08) playSound('lightning_sound', 0.3); break; } } } } }; const globalEndHandler = (e) => { pointerDown = false; saber.dragging = false; }; // Register all handlers upfront — they persist through grab, ignite, and interactive phases canvas.addEventListener('mousedown', grabHandler); canvas.addEventListener('touchstart', grabHandler, { passive: false }); canvas.addEventListener('mousemove', globalMoveHandler); canvas.addEventListener('touchmove', globalMoveHandler, { passive: false }); canvas.addEventListener('mouseup', globalEndHandler); canvas.addEventListener('mouseleave', globalEndHandler); canvas.addEventListener('touchend', globalEndHandler); canvas.addEventListener('touchcancel', globalEndHandler); // Also allow re-grabbing if user releases and clicks again during interactive phase const reGrabHandler = (e) => { if (!saber.active) return; const pos = getPointerPos(e); // Check if near the saber handle const handleCX = saber.x + Math.sin(saber.angle) * (handleLength / 2); const handleCY = saber.y + Math.cos(saber.angle) * (handleLength / 2); const dx = pos.x - handleCX; const dy = pos.y - handleCY; if (Math.sqrt(dx * dx + dy * dy) < 80) { pointerDown = true; saber.dragging = true; lastPointerPos = pos; e.preventDefault(); } }; canvas.addEventListener('mousedown', reGrabHandler); canvas.addEventListener('touchstart', reGrabHandler, { passive: false }); // Wait loop: draw holder + handle (off) until grabbed, with hint text const waitStart = Date.now(); await new Promise((resolve) => { const waitLoop = (now) => { if (grabbed) { resolve(); return; } if (Date.now() - waitStart > 30000) { grabbed = true; resolve(); return; } // Draw arm/holder and handle (blade off, horizontal) with scale pulse drawStand(); const pulseScale = 1 + Math.sin(Date.now() * 0.005) * 0.07; ctx.save(); ctx.translate(handleRestX, handleRestY); ctx.scale(pulseScale, pulseScale); ctx.translate(-handleRestX, -handleRestY); drawLightsaberAt(ctx, handleRestX, handleRestY, saberRestAngle, 0, 1); ctx.restore(); // Draw zombie's red lightsaber parented to right hand if (zombieSaber.active && zombie && zombie.parts.rightForearm.attached) { const zs = zombie.scale * zombie.globalScale; const forearm = zombie.parts.rightForearm; const forearmRad = forearm.rotation * Math.PI / 180; const handLocalX = forearm.x - 78 * Math.sin(forearmRad); const handLocalY = forearm.y + 78 * Math.cos(forearmRad); const handWorldX = zombie.baseX + handLocalX * zs; const handWorldY = zombie.baseY + handLocalY * zs; const saberAngleRad = forearmRad + (zombieSaber._extraSpinAngle || 0); drawRedLightsaber(ctx, handWorldX, handWorldY, saberAngleRad, zombieSaber.igniteProgress, bladeLength, bladeWidth, handleLength); } // Zombie gently sways red saber in guard position while waiting if (zombie && zombie.parts.rightUpperArm.attached) { const swayT = Date.now() * 0.001; zombie.parts.rightUpperArm.rotation = -60 + Math.sin(swayT * 1.5) * 8; if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -30 + Math.sin(swayT * 1.2 + 0.5) * 5; } } requestAnimationFrame(waitLoop); }; requestAnimationFrame(waitLoop); }); // Stand retracts the moment the player grabs the saber standRetractStart = Date.now(); // Phase 2b: Activate saber immediately — blade extends while player moves it around playSound('sword_slash_sound', 0.7); const landX = handleRestX; const landY = handleRestY; const targetSaberAngle = Math.atan2(savedBaseX - landX, -(savedBaseY - landY)); // Activate saber right away so movement is not frozen during blade extension saber.x = landX; saber.y = landY; saber.angle = targetSaberAngle; saber.active = true; prevSaberX = saber.x; prevSaberY = saber.y; prevSaberAngle = saber.angle; // igniteProgress will ramp from 0 to 1 over ~800ms in the interactive loop below igniteProgress = 0; // Seamless transition: if user's finger is still down from the grab, start dragging immediately if (pointerDown) { saber.dragging = true; } // Enable reset button document.getElementById('reset-button').disabled = false; // Interactive rendering loop - saber spins every few seconds to cut parts const startTime = Date.now(); const spinInterval = 1250; // ms between auto-spins (reduced by 50%) let lastSpinTime = Date.now(); spinning = false; let spinAngleAccum = 0; // Accumulated spin angle during a 360 const maxKills = 3; // Exit interactive clashing after 3 simultaneous spins // Parts available to cut (in order of priority) const cuttablePartsOrder = [ 'leftForearm', 'rightForearm', 'leftUpperArm', 'rightUpperArm', 'leftLowerLeg', 'rightLowerLeg', 'leftThigh', 'rightThigh', 'head', 'torso' ]; await new Promise((resolve) => { let lastFrameTime = performance.now(); const checkComplete = (now) => { if (!saber.active) { resolve(); return; } if (saberKills >= maxKills) { saberDone = true; resolve(); return; } if (Date.now() - startTime > 60000) { saberDone = true; resolve(); return; } const frameDt = Math.min((now - lastFrameTime) / 1000, 0.05); lastFrameTime = now; // Ramp up blade ignition over ~800ms while player moves freely if (igniteProgress < 1) { igniteProgress = Math.min(1, igniteProgress + frameDt / 0.5); } // Check if it's time to spin (only when blade is fully ignited) if (!spinning && Date.now() - lastSpinTime >= spinInterval && saber.dragging && igniteProgress >= 1) { spinning = true; spinAngleAccum = 0; playSound('sword_slash_sound', 0.9); // Start zombie's counter-spin simultaneously zombieSaber._counterSpin = 360; playSound('lightning_sound', 0.7); } // Process spin animation if (spinning) { const spinSpeed = 1200; // degrees per second - fast spin const spinAmount = spinSpeed * frameDt; spinAngleAccum += spinAmount; saber.angle += spinAmount * Math.PI / 180; // Big swoosh visual effect during 360 spin const tipX = saber.x + Math.sin(saber.angle) * bladeLength; const tipY = saber.y - Math.cos(saber.angle) * bladeLength; const midX = saber.x + Math.sin(saber.angle) * bladeLength * 0.5; const midY = saber.y - Math.cos(saber.angle) * bladeLength * 0.5; // Draw a wide glowing arc swoosh trail behind the blade ctx.save(); ctx.translate(saber.x, saber.y); const trailAngles = 8; // Number of trail segments const trailSpread = 0.6; // Radians of trail behind blade for (let tr = 0; tr < trailAngles; tr++) { const trailT = tr / trailAngles; const trailAngle = saber.angle - trailSpread * trailT; const trailAlpha = (1 - trailT) * 0.6; const trailWidth = 12 + (1 - trailT) * 20; // Wider at blade, thinner behind const trTipX = Math.sin(trailAngle) * bladeLength; const trTipY = -Math.cos(trailAngle) * bladeLength; const trBaseX = Math.sin(trailAngle) * 30; const trBaseY = -Math.cos(trailAngle) * 30; ctx.strokeStyle = `rgba(0, 204, 255, ${trailAlpha})`; ctx.lineWidth = trailWidth; ctx.lineCap = 'round'; ctx.shadowColor = '#00ccff'; ctx.shadowBlur = 15 * (1 - trailT); ctx.beginPath(); ctx.moveTo(trBaseX, trBaseY); ctx.lineTo(trTipX, trTipY); ctx.stroke(); } // Bright white core swoosh (thinner, brighter) for (let tr = 0; tr < 4; tr++) { const trailT = tr / 4; const trailAngle = saber.angle - trailSpread * 0.4 * trailT; const trailAlpha = (1 - trailT) * 0.8; const trTipX = Math.sin(trailAngle) * bladeLength; const trTipY = -Math.cos(trailAngle) * bladeLength; const trBaseX = Math.sin(trailAngle) * 40; const trBaseY = -Math.cos(trailAngle) * 40; ctx.strokeStyle = `rgba(255, 255, 255, ${trailAlpha * 0.5})`; ctx.lineWidth = 4 + (1 - trailT) * 6; ctx.shadowBlur = 8; ctx.shadowColor = '#ffffff'; ctx.beginPath(); ctx.moveTo(trBaseX, trBaseY); ctx.lineTo(trTipX, trTipY); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); // Cyan spark particles flying off the tip if (Math.random() < 0.9) { spawnParticles(tipX, tipY, 1, { color: Math.random() > 0.3 ? '#00ccff' : '#ffffff', vx: (Math.random() - 0.5) * 150, vy: (Math.random() - 0.5) * 150, size: 5 + Math.random() * 10, life: 0.25 + Math.random() * 0.2, gravity: 0, type: 'circle' }); } // Mid-blade sparks too if (Math.random() < 0.5) { spawnParticles(midX, midY, 1, { color: '#88eeff', vx: (Math.random() - 0.5) * 80, vy: (Math.random() - 0.5) * 80, size: 3 + Math.random() * 6, life: 0.2 + Math.random() * 0.15, gravity: 0, type: 'circle' }); } // Complete one full rotation (360 degrees) if (spinAngleAccum >= 360) { spinning = false; lastSpinTime = Date.now(); // CLASH! Screen flash + sparks (zombie spin was already started simultaneously) saberKills++; // Count clashes for exit condition playSound('sword_slash_sound', 0.8); // Screen flash (bright white-cyan) ctx.save(); ctx.fillStyle = 'rgba(200, 255, 255, 0.6)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); ctx.restore(); // Massive spark burst at the clash point (between the two sabers) const zs = zombie.scale * zombie.globalScale; const forearm = zombie.parts.rightForearm; const forearmRad = forearm ? forearm.rotation * Math.PI / 180 : 0; const handLocalX = forearm ? forearm.x - 78 * Math.sin(forearmRad) : 48; const handLocalY = forearm ? forearm.y + 78 * Math.cos(forearmRad) : 80; const clashX = (saber.x + zombie.baseX + handLocalX * zs) / 2; const clashY = (saber.y + zombie.baseY + handLocalY * zs) / 2; for (let i = 0; i < 40; i++) { const a = Math.random() * Math.PI * 2; const spd = 150 + Math.random() * 400; spawnParticles(clashX, clashY, 1, { color: Math.random() > 0.3 ? '#ffff88' : (Math.random() > 0.5 ? '#00ccff' : '#ff4444'), vx: Math.cos(a) * spd, vy: Math.sin(a) * spd, size: 4 + Math.random() * 10, life: 0.4 + Math.random() * 0.3, gravity: 100, type: 'circle' }); } // Zombie recoils from the clash zombie.applyImpulse((Math.random() - 0.5) * 60, -20); } } // === ZOMBIE COUNTER-SPIN (responsive 360 when player spins) === if (zombieSaber._counterSpin && zombieSaber._counterSpin > 0) { // Spin the blade around the handle anchor point (not the arm joints) const counterSpinSpeed = 1400; // degrees per second const counterSpinAmount = counterSpinSpeed * frameDt; zombieSaber._counterSpin -= counterSpinAmount; zombieSaber._extraSpinAngle += counterSpinAmount * Math.PI / 180; // Screen flash pulse during counter-spin (fading) const flashIntensity = zombieSaber._counterSpin / 360; if (flashIntensity > 0.3) { ctx.fillStyle = `rgba(255, 100, 100, ${(flashIntensity - 0.3) * 0.15})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Sparks fly off zombie's saber tip during counter-spin // Tip is at handle position + blade direction from combined angle if (Math.random() < 0.8 && zombie && zombie.parts.rightForearm.attached) { const zs2 = zombie.scale * zombie.globalScale; const fa = zombie.parts.rightForearm; const faRad = fa ? fa.rotation * Math.PI / 180 : 0; const handLX = fa ? fa.x - 78 * Math.sin(faRad) : 48; const handLY = fa ? fa.y + 78 * Math.cos(faRad) : 80; const handWX = zombie.baseX + handLX * zs2; const handWY = zombie.baseY + handLY * zs2; const totalAngle = faRad + zombieSaber._extraSpinAngle; const tipX2 = handWX + Math.sin(totalAngle) * bladeLength; const tipY2 = handWY - Math.cos(totalAngle) * bladeLength; spawnParticles(tipX2, tipY2, 1, { color: Math.random() > 0.4 ? '#ff4444' : '#ffff88', vx: (Math.random() - 0.5) * 200, vy: (Math.random() - 0.5) * 200, size: 4 + Math.random() * 8, life: 0.2 + Math.random() * 0.2, gravity: 0, type: 'circle' }); } if (zombieSaber._counterSpin <= 0) { zombieSaber._counterSpin = 0; zombieSaber._extraSpinAngle = 0; // Reset after spin completes } } else { // === ZOMBIE BLOCKING AI === // Zombie moves its right arm to try to intercept the player's saber if (zombieSaber.active && zombie && zombie.parts.rightUpperArm.attached && zombie.parts.rightForearm.attached) { const zs = zombie.scale * zombie.globalScale; // Shoulder world position (where upper arm attaches) const shoulderWorldX = zombie.baseX + zombie.parts.rightUpperArm.x * zs; const shoulderWorldY = zombie.baseY + zombie.parts.rightUpperArm.y * zs; // Direction from shoulder to player's saber const dxBlock = saber.x - shoulderWorldX; const dyBlock = saber.y - shoulderWorldY; // Angle from vertical-down axis (0 = straight down, + = clockwise) const angleFromDown = Math.atan2(dxBlock, dyBlock) * 180 / Math.PI; // Target upper arm rotation: point toward player's saber // For right arm: negative rotation = extend outward/right let targetUpperRot = -angleFromDown * 0.85 - 5; targetUpperRot = Math.max(-140, Math.min(50, targetUpperRot)); // Forearm: add some bend to position blade for blocking let targetForearmRot = -angleFromDown * 0.25 - 15; targetForearmRot = Math.max(-120, Math.min(5, targetForearmRot)); // Add slight oscillation to make blocking feel alive (not robotic) const blockOscil = Math.sin(Date.now() * 0.004) * 5; targetUpperRot += blockOscil; targetForearmRot += blockOscil * 0.3; // Smooth interpolation with deliberate lag (zombie reacts, not instant) const reactSpeed = 3.5 * frameDt; zombie.parts.rightUpperArm.rotation += (targetUpperRot - zombie.parts.rightUpperArm.rotation) * reactSpeed; zombie.parts.rightForearm.rotation += (targetForearmRot - zombie.parts.rightForearm.rotation) * reactSpeed * 0.85; } } // end counter-spin else // Draw zombie's red lightsaber parented to right hand (BEHIND player's saber) if (zombieSaber.active && zombie && zombie.parts.rightForearm.attached) { const zs = zombie.scale * zombie.globalScale; const forearm = zombie.parts.rightForearm; const forearmRad = forearm.rotation * Math.PI / 180; const handLocalX = forearm.x - 78 * Math.sin(forearmRad); const handLocalY = forearm.y + 78 * Math.cos(forearmRad); const handWorldX = zombie.baseX + handLocalX * zs; const handWorldY = zombie.baseY + handLocalY * zs; const saberAngleRad = forearmRad + (zombieSaber._extraSpinAngle || 0); drawRedLightsaber(ctx, handWorldX, handWorldY, saberAngleRad, zombieSaber.igniteProgress, bladeLength, bladeWidth, handleLength); } // Draw the empty pedestal drawStand(); // Draw the player's lightsaber ON TOP (blade extends as igniteProgress ramps 0→1) drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, igniteProgress, 1); // Ambient glow ctx.save(); ctx.globalAlpha = 0.08; const ambGrad = ctx.createRadialGradient(saber.x, saber.y, 0, saber.x, saber.y, 250); ambGrad.addColorStop(0, saberColor); ambGrad.addColorStop(1, 'rgba(0, 204, 255, 0)'); ctx.fillStyle = ambGrad; ctx.beginPath(); ctx.arc(saber.x, saber.y, 250, 0, Math.PI * 2); ctx.fill(); ctx.restore(); requestAnimationFrame(checkComplete); }; requestAnimationFrame(checkComplete); }); // Keep input handlers active - player retains control during final spins // Set spinning flag so globalMoveHandler doesn't overwrite angle during auto-spins spinning = true; // === PHASE: DOUBLE SPIN ARM CHOP (after 3 simultaneous clashes) === // Brief anticipation pause (400ms) await animate(400 / speed, (t, dt) => { // Draw empty pedestal drawStand(); if (zombieSaber.active && zombie && zombie.parts.rightForearm && zombie.parts.rightForearm.attached) { const zs = zombie.scale * zombie.globalScale; const forearm = zombie.parts.rightForearm; const forearmRad = forearm.rotation * Math.PI / 180; const handLocalX = forearm.x - 78 * Math.sin(forearmRad); const handLocalY = forearm.y + 78 * Math.cos(forearmRad); const handWorldX = zombie.baseX + handLocalX * zs; const handWorldY = zombie.baseY + handLocalY * zs; const saberAngleRad = forearmRad + (zombieSaber._extraSpinAngle || 0); drawRedLightsaber(ctx, handWorldX, handWorldY, saberAngleRad, zombieSaber.igniteProgress, bladeLength, bladeWidth, handleLength); } drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); // Double spin (720°) - player's saber ONLY, zombie does NOT counter-spin (700ms) playSound('sword_slash_sound', 1.0); await animate(700 / speed, (t, dt) => { // Incremental spin - adds rotation on top of player's tracked position const spinSpeed = 720 / 0.7; // degrees per second to complete 720° in 700ms saber.angle += spinSpeed * dt * Math.PI / 180; // Big swoosh trail effect ctx.save(); ctx.translate(saber.x, saber.y); const trailAngles2 = 10; const trailSpread2 = 0.8; for (let tr = 0; tr < trailAngles2; tr++) { const trailT = tr / trailAngles2; const trailAngle = saber.angle - trailSpread2 * trailT; const trailAlpha = (1 - trailT) * 0.7; const trailWidth = 12 + (1 - trailT) * 25; const trTipX = Math.sin(trailAngle) * bladeLength; const trTipY = -Math.cos(trailAngle) * bladeLength; const trBaseX = Math.sin(trailAngle) * 30; const trBaseY = -Math.cos(trailAngle) * 30; ctx.strokeStyle = `rgba(0, 204, 255, ${trailAlpha})`; ctx.lineWidth = trailWidth; ctx.lineCap = 'round'; ctx.shadowColor = '#00ccff'; ctx.shadowBlur = 15 * (1 - trailT); ctx.beginPath(); ctx.moveTo(trBaseX, trBaseY); ctx.lineTo(trTipX, trTipY); ctx.stroke(); } ctx.shadowBlur = 0; ctx.restore(); // Cyan sparks from tip const dsTipX = saber.x + Math.sin(saber.angle) * bladeLength; const dsTipY = saber.y - Math.cos(saber.angle) * bladeLength; if (Math.random() < 0.9) { spawnParticles(dsTipX, dsTipY, 1, { color: Math.random() > 0.3 ? '#00ccff' : '#ffffff', vx: (Math.random() - 0.5) * 200, vy: (Math.random() - 0.5) * 200, size: 5 + Math.random() * 10, life: 0.25 + Math.random() * 0.2, gravity: 0, type: 'circle' }); } // Draw zombie's red saber (NOT spinning - standing still, vulnerable) if (zombieSaber.active && zombie && zombie.parts.rightForearm && zombie.parts.rightForearm.attached) { const zs2 = zombie.scale * zombie.globalScale; const fa = zombie.parts.rightForearm; const faRad = fa.rotation * Math.PI / 180; const hlX = fa.x - 78 * Math.sin(faRad); const hlY = fa.y + 78 * Math.cos(faRad); const hwX = zombie.baseX + hlX * zs2; const hwY = zombie.baseY + hlY * zs2; drawRedLightsaber(ctx, hwX, hwY, faRad, zombieSaber.igniteProgress, bladeLength, bladeWidth, handleLength); } // Draw empty pedestal drawStand(); // Draw player's saber on top drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); // ARM CHOP! Detach zombie's saber arm playSound('sword_slash_sound', 0.9); playSound('lightning_sound', 0.5); // Deactivate zombie's red saber zombieSaber.active = false; // Detach right arm parts zombie.detachPart('rightForearm', 250, -180); zombie.detachPart('rightUpperArm', 200, -220); // Cut sparks at separation - DRAMATIC burst (matches rapid slice intensity) const armCutX = zombie.baseX + 48 * zombie.scale; const armCutY = zombie.baseY + (-65) * zombie.scale; for (let i = 0; i < 35; i++) { const a = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 450; spawnParticles(armCutX, armCutY, 1, { color: Math.random() > 0.4 ? '#00ccff' : (Math.random() > 0.5 ? '#ffffff' : '#3dcc10'), vx: Math.cos(a) * spd, vy: Math.sin(a) * spd - 50, size: 4 + Math.random() * 14, life: 0.4 + Math.random() * 0.3, gravity: 200, type: 'circle' }); } // Screen flash playSound('lightning_sound', 0.4); ctx.fillStyle = 'rgba(0, 220, 255, 0.5)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Dramatic pause - arm falls away (800ms) await animate(800 / speed, (t, dt) => { drawStand(); if (t < 0.3) zombie.applyImpulse(-30, -10); drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); // === RAPID SLICING PHASE === // Quick automatic spins, each slicing off a zombie body part const partsToSlice = ['leftForearm', 'leftUpperArm', 'leftLowerLeg', 'rightLowerLeg', 'leftThigh', 'rightThigh']; for (let i = 0; i < partsToSlice.length; i++) { const partName = partsToSlice[i]; if (!zombie.parts[partName] || !zombie.parts[partName].attached) continue; // Quick spin (167ms - 50% faster) playSound('sword_slash_sound', 0.8); await animate(167 / speed, (t, dt) => { // Incremental spin - adds rotation on top of player's tracked position const spinSpeed = 360 / 0.167; // degrees per second to complete 360° in 167ms saber.angle += spinSpeed * dt * Math.PI / 180; // Quick swoosh trail ctx.save(); ctx.translate(saber.x, saber.y); for (let tr = 0; tr < 6; tr++) { const trT = tr / 6; const trAngle = saber.angle - 0.5 * trT; const trAlpha = (1 - trT) * 0.5; const trTipX2 = Math.sin(trAngle) * bladeLength; const trTipY2 = -Math.cos(trAngle) * bladeLength; const trBaseX2 = Math.sin(trAngle) * 30; const trBaseY2 = -Math.cos(trAngle) * 30; ctx.strokeStyle = `rgba(0, 204, 255, ${trAlpha})`; ctx.lineWidth = 10 + (1 - trT) * 15; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(trBaseX2, trBaseY2); ctx.lineTo(trTipX2, trTipY2); ctx.stroke(); } ctx.restore(); // Tip sparks const sTipX = saber.x + Math.sin(saber.angle) * bladeLength; const sTipY = saber.y - Math.cos(saber.angle) * bladeLength; if (Math.random() < 0.7) { spawnParticles(sTipX, sTipY, 1, { color: '#00ccff', vx: (Math.random() - 0.5) * 150, vy: (Math.random() - 0.5) * 150, size: 4 + Math.random() * 7, life: 0.2, gravity: 0, type: 'circle' }); } drawStand(); drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); // Detach the part const forceDir = partName.includes('left') ? -1 : 1; const forceUp = partName.includes('Leg') || partName.includes('Thigh') ? 50 : -150; zombie.detachPart(partName, forceDir * (180 + Math.random() * 100), forceUp - Math.random() * 80); // Cut sparks at separation - DRAMATIC burst const pd = zombie.parts[partName]; const pcX = zombie.baseX + (pd ? pd.x : 0) * zombie.scale; const pcY = zombie.baseY + (pd ? pd.y : 0) * zombie.scale; for (let s = 0; s < 35; s++) { const a2 = Math.random() * Math.PI * 2; const spd2 = 100 + Math.random() * 350; spawnParticles(pcX, pcY, 1, { color: Math.random() > 0.4 ? '#00ccff' : (Math.random() > 0.5 ? '#ffffff' : '#3dcc10'), vx: Math.cos(a2) * spd2, vy: Math.sin(a2) * spd2 - 50, size: 4 + Math.random() * 10, life: 0.4 + Math.random() * 0.3, gravity: 200, type: 'circle' }); } // Screen flash on each slice playSound('lightning_sound', 0.4); ctx.fillStyle = 'rgba(0, 220, 255, 0.5)'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Brief pause between slices with flash fade (80ms) await animate(80 / speed, (t, dt) => { // Fading flash overlay const flashAlpha = (1 - t) * 0.35; if (flashAlpha > 0.01) { ctx.fillStyle = `rgba(0, 220, 255, ${flashAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } drawStand(); drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); } // === FINAL COLLAPSE === // Brief wobble before collapse (300ms) await animate(300 / speed, (t, dt) => { drawStand(); drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); if (zombie.parts.torso.attached) { zombie.parts.torso.rotation = Math.sin(t * 20) * (5 + t * 15); } }); // Collapse - detach torso (cascades to head and remaining parts) zombie.detachPart('torso', (Math.random() - 0.5) * 60, 30); // Watch collapse with helmet following head (1000ms) await animate(1000 / speed, (t, dt) => { drawStand(); drawLightsaberAt(ctx, saber.x, saber.y, saber.angle, 1, 1); }); saber.active = false; spinning = false; // Cleanup all input handlers now that the sequence is fully complete canvas.removeEventListener('mousedown', grabHandler); canvas.removeEventListener('touchstart', grabHandler); canvas.removeEventListener('mousemove', globalMoveHandler); canvas.removeEventListener('touchmove', globalMoveHandler); canvas.removeEventListener('mouseup', globalEndHandler); canvas.removeEventListener('mouseleave', globalEndHandler); canvas.removeEventListener('touchend', globalEndHandler); canvas.removeEventListener('touchcancel', globalEndHandler); canvas.removeEventListener('mousedown', reGrabHandler); canvas.removeEventListener('touchstart', reGrabHandler); // Schedule auto-reset scheduleAutoReset(); }, // 36. MAGIC TRICK - Magician's sword box: rolls in, doors slide, swords inserted, reveal pieces, vanish magictrick: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Box position - centered on zombie const boxTargetX = zombie.baseX; const boxTargetY = zombie.baseY + 66; // Centered on zombie's actual center of mass // Activate render state (drawn behind zombie by game loop) magicBoxRenderState.active = true; magicBoxRenderState.x = CANVAS_WIDTH + 200; // Start off-screen right magicBoxRenderState.y = boxTargetY; magicBoxRenderState.doorOpenAmount = 0; magicBoxRenderState.doorsInFront = false; magicBoxRenderState.swords = []; magicBoxRenderState.showPieces = false; magicBoxRenderState.showEmpty = false; // Phase 1: Box rolls in from the right to position behind zombie (1200ms) playSound('crush_sound', 0.4); await animate(1200 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); magicBoxRenderState.x = CANVAS_WIDTH + 200 - (CANVAS_WIDTH + 200 - boxTargetX) * easeOut; // Rolling dust from wheels if (t < 0.85 && Math.random() < 0.4) { spawnParticles(magicBoxRenderState.x + 50, boxTargetY + 310, 1, { color: '#8B7355', vx: 20 + Math.random() * 30, vy: -10 - Math.random() * 20, size: 4 + Math.random() * 5, life: 0.4 + Math.random() * 0.2, gravity: 100, type: 'circle' }); } // Zombie notices something behind it if (t > 0.4) { zombie.applyImpulse((Math.random() - 0.5) * 8, -3); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 5; } } }); // Box is now in position behind zombie magicBoxRenderState.x = boxTargetX; // Brief pause - box settles (300ms) await animate(300 / speed, (t, dt) => { if (zombie.parts.head.attached) { zombie.parts.head.rotation = 6 + Math.sin(t * 10) * 3; } }); // Phase 2: Front doors slide open (800ms) playSound('crusher_sound', 0.3); await animate(800 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2.5); magicBoxRenderState.doorOpenAmount = easeOut; // Zombie reacts to doors opening behind it if (t > 0.2) { zombie.applyImpulse((Math.random() - 0.5) * 6, -2); } if (zombie.parts.head.attached) { zombie.parts.head.rotation = 5 + Math.sin(t * 6) * 4; } }); // Doors are fully open - brief hold (400ms) await animate(400 / speed, (t, dt) => { if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 6; } }); // Phase 3: Doors slide closed - switch to drawing in FRONT of zombie (800ms) playSound('crush_sound', 0.3); magicBoxRenderState.doorsInFront = true; await animate(800 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; magicBoxRenderState.doorOpenAmount = 1 - easeInOut; // Zombie gets frantic as doors close on it if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 15) * (5 + t * 8); } if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - t * 30; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + t * 30; } }); // Doors are now closed in front - zombie is hidden magicBoxRenderState.doorOpenAmount = 0; zombie.globalAlpha = 0; // Hide zombie (it's "inside" the box) zombie.isRagdolling = false; zombie.customPose = true; // Brief dramatic pause - silence before swords (600ms) await animate(600 / speed, (t, dt) => { // Muffled sounds from inside if (t > 0.3 && t < 0.35) playSound('crush_sound', 0.15); }); // Phase 4: Swords slide into slits one by one (7 swords, ~250ms each) const numSwords = 7; const swordSides = ['left', 'right', 'left', 'right', 'left', 'right', 'left']; for (let i = 0; i < numSwords; i++) { const newSword = { slitIndex: i, progress: 0, side: swordSides[i] }; magicBoxRenderState.swords.push(newSword); // Sword slides in quickly (200ms) playSound('sword_slash_sound', 0.5); await animate(200 / speed, (t, dt) => { // Sword insertion progress (ease-out for snappy insertion) const easeOut = 1 - Math.pow(1 - t, 3); newSword.progress = easeOut; // Box shakes on each sword insertion const shakeDecay = Math.max(0, 1 - t * 2); const shakeAmt = 4 * shakeDecay; magicBoxRenderState.x = boxTargetX + Math.sin(t * 50) * shakeAmt; magicBoxRenderState.y = boxTargetY + Math.cos(t * 40) * shakeAmt * 0.5; }); // Reset box position after shake magicBoxRenderState.x = boxTargetX; magicBoxRenderState.y = boxTargetY; // Small metallic impact particles const slitY = boxTargetY + (-magicBoxRenderState.boxH/2 + 55 + i * (magicBoxRenderState.boxH - 110) / (numSwords - 1)); const sideX = swordSides[i] === 'left' ? boxTargetX - magicBoxRenderState.boxW/2 - 20 : boxTargetX + magicBoxRenderState.boxW/2 + 20; for (let p = 0; p < 4; p++) { spawnParticles(sideX, slitY, 1, { color: Math.random() > 0.5 ? '#ffcc00' : '#aaa', vx: (Math.random() - 0.5) * 60, vy: (Math.random() - 0.5) * 40, size: 2 + Math.random() * 3, life: 0.2 + Math.random() * 0.15, gravity: 150, type: 'circle' }); } // Brief pause between swords (100ms) if (i < numSwords - 1) { await animate(100 / speed, () => {}); } } // All swords inserted - dramatic pause (800ms) await animate(800 / speed, (t, dt) => { // Slight ominous silence }); // Phase 5: Doors slide open to reveal zombie TRANSFIXED with swords through it (800ms) playSound('crusher_sound', 0.4); magicBoxRenderState.showPieces = true; // Reuse flag - interior draws transfixed zombie await animate(800 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2.5); magicBoxRenderState.doorOpenAmount = easeOut; }); // Green blood gushing from sword entry points for (let i = 0; i < 20; i++) { const slitIdx = Math.floor(Math.random() * numSwords); const slitY = boxTargetY + (-magicBoxRenderState.boxH/2 + 55 + slitIdx * (magicBoxRenderState.boxH - 110) / (numSwords - 1)); spawnParticles( boxTargetX + (Math.random() - 0.5) * 60, slitY + (Math.random() - 0.5) * 10, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 40, vy: 10 + Math.random() * 30, size: 3 + Math.random() * 6, life: 0.8 + Math.random() * 0.5, gravity: 200, type: 'circle' } ); } // Hold showing transfixed zombie (1500ms) await animate(1500 / speed, (t, dt) => { // Green blood dripping from sword wounds if (Math.random() < 0.3) { const slitIdx = Math.floor(Math.random() * numSwords); const slitY = boxTargetY + (-magicBoxRenderState.boxH/2 + 55 + slitIdx * (magicBoxRenderState.boxH - 110) / (numSwords - 1)); spawnParticles( boxTargetX + (Math.random() - 0.5) * 40, slitY, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 15, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 5, life: 0.5 + Math.random() * 0.3, gravity: 250, type: 'circle' } ); } }); // Phase 6: Doors slide closed (600ms) playSound('crush_sound', 0.3); await animate(600 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; magicBoxRenderState.doorOpenAmount = 1 - easeInOut; }); magicBoxRenderState.doorOpenAmount = 0; magicBoxRenderState.showPieces = false; // Phase 7: Brief dramatic wait - zombie vanishes inside (1000ms) await animate(1000 / speed, (t, dt) => { // Subtle sparkle particles around the box (magic happening) if (Math.random() < 0.15) { const sparkX = boxTargetX + (Math.random() - 0.5) * (magicBoxRenderState.boxW + 40); const sparkY = boxTargetY + (Math.random() - 0.5) * magicBoxRenderState.boxH; spawnParticles(sparkX, sparkY, 1, { color: Math.random() > 0.5 ? '#ffe488' : '#ffffff', vx: (Math.random() - 0.5) * 20, vy: -15 - Math.random() * 20, size: 2 + Math.random() * 3, life: 0.4 + Math.random() * 0.3, gravity: -30, type: 'circle' }); } }); // Phase 8: Doors open to show empty box - just swords visible, zombie GONE (800ms) playSound('crusher_sound', 0.3); magicBoxRenderState.showEmpty = true; await animate(800 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 2.5); magicBoxRenderState.doorOpenAmount = easeOut; }); // Hold showing empty box with swords (1200ms) await animate(1200 / speed, (t, dt) => { }); // Phase 9: Doors slide closed (600ms) playSound('crush_sound', 0.3); await animate(600 / speed, (t, dt) => { const easeInOut = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; magicBoxRenderState.doorOpenAmount = 1 - easeInOut; }); magicBoxRenderState.doorOpenAmount = 0; magicBoxRenderState.showEmpty = false; // Brief pause before exit (300ms) await animate(300 / speed, () => {}); // Phase 10: Box rolls off screen to the left (1200ms) playSound('crush_sound', 0.3); await animate(1200 / speed, (t, dt) => { const easeIn = t * t; magicBoxRenderState.x = boxTargetX - easeIn * (boxTargetX + 300); // Rolling dust if (t < 0.85 && Math.random() < 0.3) { spawnParticles(magicBoxRenderState.x - 50, boxTargetY + 310, 1, { color: '#8B7355', vx: -15 - Math.random() * 25, vy: -10 - Math.random() * 15, size: 3 + Math.random() * 4, life: 0.3 + Math.random() * 0.2, gravity: 100, type: 'circle' }); } }); // Deactivate magic box magicBoxRenderState.active = false; magicBoxRenderState.swords = []; // Count kill and schedule auto-reset incrementSpecimens(); scheduleAutoReset(); }, // 37. SWAT - Laser targeting then SWAT team takedown swat: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Calculate zombie's forehead position in world coordinates const scale = zombie.scale * zombie.globalScale; const foreheadX = zombie.baseX + 0 * scale; // Center of head const foreheadY = zombie.baseY + (-115 - 15) * scale; // Head center (-115) minus offset up to forehead (-15) // Laser origin: from right side of screen const laserOriginX = CANVAS_WIDTH + 10; const laserOriginY = foreheadY - 30; // Slightly above to angle down // Phase 0: Thin red laser appears from side and targets zombie's forehead (2000ms) await animate(1000 / speed, (t, dt) => { // Laser fades in over first 30%, then holds steady const laserAlpha = Math.min(t / 0.3, 1); // Laser beam progress: extends from right edge to forehead const beamProgress = Math.min(t / 0.2, 1); // Reaches forehead quickly (20%) const currentEndX = laserOriginX + (foreheadX - laserOriginX) * beamProgress; const currentEndY = laserOriginY + (foreheadY - laserOriginY) * beamProgress; // Draw thin red laser beam ctx.save(); ctx.globalAlpha = laserAlpha; // Outer glow (very subtle) ctx.strokeStyle = 'rgba(255, 0, 0, 0.15)'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(laserOriginX, laserOriginY); ctx.lineTo(currentEndX, currentEndY); ctx.stroke(); // Core beam (thin bright red line) ctx.strokeStyle = 'rgba(255, 0, 0, 0.9)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(laserOriginX, laserOriginY); ctx.lineTo(currentEndX, currentEndY); ctx.stroke(); // Red dot on forehead (only once beam has reached) if (beamProgress >= 1) { // Pulsing red dot const pulse = 0.7 + Math.sin(t * 20) * 0.3; const dotSize = 4 + Math.sin(t * 15) * 0.5; // Dot glow ctx.fillStyle = `rgba(255, 0, 0, ${0.3 * pulse * laserAlpha})`; ctx.beginPath(); ctx.arc(foreheadX, foreheadY, dotSize * 3, 0, Math.PI * 2); ctx.fill(); // Bright dot center ctx.fillStyle = `rgba(255, 20, 20, ${pulse * laserAlpha})`; ctx.beginPath(); ctx.arc(foreheadX, foreheadY, dotSize, 0, Math.PI * 2); ctx.fill(); // Hot white core ctx.fillStyle = `rgba(255, 200, 200, ${0.8 * pulse * laserAlpha})`; ctx.beginPath(); ctx.arc(foreheadX, foreheadY, dotSize * 0.4, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // Zombie slowly notices (looks around nervously in last 50%) if (t > 0.5) { const noticeT = (t - 0.5) / 0.5; if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(noticeT * 3) * 1; } } }); // === MULTI-LASER TARGETING SEQUENCE === // Helper: draw a single laser beam + dot given origin and target function drawLaserBeamAndDot(ctx, originX, originY, targetX, targetY, alpha) { if (alpha <= 0) return; ctx.save(); ctx.globalAlpha = alpha; // Outer glow ctx.strokeStyle = 'rgba(255, 0, 0, 0.15)'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(originX, originY); ctx.lineTo(targetX, targetY); ctx.stroke(); // Core beam ctx.strokeStyle = 'rgba(255, 0, 0, 0.9)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(originX, originY); ctx.lineTo(targetX, targetY); ctx.stroke(); // Red dot const pulse = 1.0; // Solid, no pulsing const dotSize = 4; // Constant size ctx.fillStyle = `rgba(255, 0, 0, ${0.3 * pulse})`; ctx.beginPath(); ctx.arc(targetX, targetY, dotSize * 3, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = `rgba(255, 20, 20, ${pulse})`; ctx.beginPath(); ctx.arc(targetX, targetY, dotSize, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = `rgba(255, 200, 200, ${0.8 * pulse})`; ctx.beginPath(); ctx.arc(targetX, targetY, dotSize * 0.4, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // All active lasers will be collected here // Each: { originX, originY, targetX, targetY } const activeLasers = [ { originX: laserOriginX, originY: laserOriginY, targetX: foreheadX, targetY: foreheadY } ]; // Helper: draw all active lasers function drawAllLasers() { activeLasers.forEach(l => drawLaserBeamAndDot(ctx, l.originX, l.originY, l.targetX, l.targetY, 1)); } // Zombie body target points (world coords) const chestY = zombie.baseY + (-30) * scale; const chest2Y = zombie.baseY + (10) * scale; // Wait 0.5 seconds with first laser visible, then add second laser on chest await animate(500 / speed, (t, dt) => { drawAllLasers(); // Zombie barely moves — just a tiny nervous twitch if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 2) * 1; } }); // Second laser appears - aimed at zombie's chest, from left side const laser2OriginX = -10; const laser2OriginY = chestY + 20; const laser2TargetX = zombie.baseX + 5 * scale; const laser2TargetY = chestY; // Beam extends in quickly (200ms) await animate(200 / speed, (t, dt) => { drawAllLasers(); const endX = laser2OriginX + (laser2TargetX - laser2OriginX) * t; const endY = laser2OriginY + (laser2TargetY - laser2OriginY) * t; drawLaserBeamAndDot(ctx, laser2OriginX, laser2OriginY, endX, endY, t); }); activeLasers.push({ originX: laser2OriginX, originY: laser2OriginY, targetX: laser2TargetX, targetY: laser2TargetY }); // Wait 0.4 seconds await animate(400 / speed, (t, dt) => { drawAllLasers(); if (zombie.parts.head.attached) zombie.parts.head.rotation = Math.sin(t * 2) * 1; }); // Third laser - different point on chest, from top of screen const laser3OriginX = zombie.baseX + 80; const laser3OriginY = -10; const laser3TargetX = zombie.baseX - 10 * scale; const laser3TargetY = chest2Y; await animate(200 / speed, (t, dt) => { drawAllLasers(); const endX = laser3OriginX + (laser3TargetX - laser3OriginX) * t; const endY = laser3OriginY + (laser3TargetY - laser3OriginY) * t; drawLaserBeamAndDot(ctx, laser3OriginX, laser3OriginY, endX, endY, t); }); activeLasers.push({ originX: laser3OriginX, originY: laser3OriginY, targetX: laser3TargetX, targetY: laser3TargetY }); // Brief hold (300ms) await animate(300 / speed, (t, dt) => { drawAllLasers(); }); // 17 more lasers appear rapidly in sequence from various screen edges (total = 20 lasers) // Target various body parts: head, shoulders, arms, chest, torso, thighs, lower legs const extraLaserTargets = [ { tx: zombie.baseX - 15 * scale, ty: zombie.baseY + (-115) * scale }, // Left side of head { tx: zombie.baseX + 20 * scale, ty: zombie.baseY + (-100) * scale }, // Right side of head { tx: zombie.baseX - 45 * scale, ty: zombie.baseY + (-50) * scale }, // Left shoulder { tx: zombie.baseX + 45 * scale, ty: zombie.baseY + (-50) * scale }, // Right shoulder { tx: zombie.baseX - 48 * scale, ty: zombie.baseY + (5) * scale }, // Left upper arm { tx: zombie.baseX + 48 * scale, ty: zombie.baseY + (5) * scale }, // Right upper arm { tx: zombie.baseX + 0, ty: zombie.baseY + (50) * scale }, // Lower torso center { tx: zombie.baseX - 22 * scale, ty: zombie.baseY + (120) * scale }, // Left thigh { tx: zombie.baseX + 22 * scale, ty: zombie.baseY + (120) * scale }, // Right thigh { tx: zombie.baseX + 10 * scale, ty: zombie.baseY + (-70) * scale }, // Upper torso right { tx: zombie.baseX - 10 * scale, ty: zombie.baseY + (-70) * scale }, // Upper torso left { tx: zombie.baseX + 25 * scale, ty: zombie.baseY + (-120) * scale }, // Top of head right { tx: zombie.baseX - 48 * scale, ty: zombie.baseY + (60) * scale }, // Left forearm { tx: zombie.baseX + 48 * scale, ty: zombie.baseY + (60) * scale }, // Right forearm { tx: zombie.baseX - 22 * scale, ty: zombie.baseY + (180) * scale }, // Left lower leg { tx: zombie.baseX + 22 * scale, ty: zombie.baseY + (180) * scale }, // Right lower leg { tx: zombie.baseX + 15 * scale, ty: zombie.baseY + (30) * scale } // Mid torso right ]; // Origins from various positions around all 4 screen edges const extraLaserOrigins = [ { ox: -10, oy: CANVAS_HEIGHT * 0.3 }, { ox: CANVAS_WIDTH + 10, oy: CANVAS_HEIGHT * 0.2 }, { ox: CANVAS_WIDTH * 0.2, oy: -10 }, { ox: CANVAS_WIDTH * 0.8, oy: -10 }, { ox: -10, oy: CANVAS_HEIGHT * 0.6 }, { ox: CANVAS_WIDTH + 10, oy: CANVAS_HEIGHT * 0.5 }, { ox: CANVAS_WIDTH * 0.3, oy: CANVAS_HEIGHT + 10 }, { ox: -10, oy: CANVAS_HEIGHT * 0.8 }, { ox: CANVAS_WIDTH + 10, oy: CANVAS_HEIGHT * 0.75 }, { ox: CANVAS_WIDTH * 0.6, oy: -10 }, { ox: CANVAS_WIDTH * 0.4, oy: -10 }, { ox: -10, oy: CANVAS_HEIGHT * 0.15 }, { ox: CANVAS_WIDTH + 10, oy: CANVAS_HEIGHT * 0.65 }, { ox: CANVAS_WIDTH * 0.7, oy: CANVAS_HEIGHT + 10 }, { ox: -10, oy: CANVAS_HEIGHT * 0.9 }, { ox: CANVAS_WIDTH + 10, oy: CANVAS_HEIGHT * 0.9 }, { ox: CANVAS_WIDTH * 0.5, oy: CANVAS_HEIGHT + 10 } ]; // Lasers appear one by one with 80ms extend + 40ms pause each (~2040ms total for 17 lasers) for (let i = 0; i < 17; i++) { const ol = extraLaserOrigins[i]; const tl = extraLaserTargets[i]; // Quick beam extend (80ms) await animate(80 / speed, (t, dt) => { drawAllLasers(); const endX = ol.ox + (tl.tx - ol.ox) * t; const endY = ol.oy + (tl.ty - ol.oy) * t; drawLaserBeamAndDot(ctx, ol.ox, ol.oy, endX, endY, t); }); activeLasers.push({ originX: ol.ox, originY: ol.oy, targetX: tl.tx, targetY: tl.ty }); // Tiny pause between each new laser (40ms) await animate(40 / speed, (t, dt) => { drawAllLasers(); }); // Zombie stands still during laser lock-on } // Hold all 20 lasers visible for dramatic tension await animate(800 / speed, (t, dt) => { drawAllLasers(); // Zombie stands very still — all lasers locked on if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 2) * 0.8; } }); // === MACHINE GUN PHASE: shoot zombie full of holes === // Take a stamp of the zombie at this moment const stampCanvas = document.createElement('canvas'); stampCanvas.width = CANVAS_WIDTH; stampCanvas.height = CANVAS_HEIGHT; const stampCtx = stampCanvas.getContext('2d'); // Draw the zombie onto the stamp canvas zombie.draw(stampCtx); // Hide the real zombie - we'll draw from the stamp now zombie.globalAlpha = 0; // Holes array - each hole is { x, y, radius } const holes = []; const holeRadius = 8 + Math.random() * 4; // Small bullet holes // Calculate zombie bounding box for hole placement const zScale = zombie.scale * zombie.globalScale; const zombieLeft = zombie.baseX - 60 * zScale; const zombieRight = zombie.baseX + 60 * zScale; const zombieTop = zombie.baseY - 170 * zScale; const zombieBottom = zombie.baseY + 280 * zScale; const zombieW = zombieRight - zombieLeft; const zombieH = zombieBottom - zombieTop; // Machine gun fire phase - progressively punch holes until image disappears (4000ms) playSound('explosion_sound', 0.5); let lastSoundTime = 0; let totalHoles = 0; const maxHoles = 300; // Enough holes to cover the entire zombie // Create an offscreen canvas to accumulate holes. // Holes are punched here with destination-out, then this canvas is drawn // onto the main canvas so transparent holes reveal the game background. const holesCanvas = document.createElement('canvas'); holesCanvas.width = CANVAS_WIDTH; holesCanvas.height = CANVAS_HEIGHT; const holesCtx = holesCanvas.getContext('2d'); holesCtx.drawImage(stampCanvas, 0, 0); let holesApplied = 0; await animate(4000 / speed, (t, dt) => { // Draw all lasers with erratic wild vibration during shooting // Each laser gets its own large random offset every frame - totally erratic const vibBase = 30 + t * 80; // 30px at start, up to 110px at end activeLasers.forEach(l => { // Each laser jumps to a completely new random position each frame const vx = (Math.random() - 0.5) * vibBase * 2; const vy = (Math.random() - 0.5) * vibBase * 2; // Also randomly shift the origin slightly for extra chaos const ox = (Math.random() - 0.5) * 20; const oy = (Math.random() - 0.5) * 20; drawLaserBeamAndDot(ctx, l.originX + ox, l.originY + oy, l.targetX + vx, l.targetY + vy, 1); }); // Add new holes each frame - rate accelerates over time const holesPerFrame = Math.floor(2 + t * 8); // 2 to 10 holes per frame for (let i = 0; i < holesPerFrame && totalHoles < maxHoles; i++) { // Random position within the zombie's silhouette area const hx = zombieLeft + Math.random() * zombieW; const hy = zombieTop + Math.random() * zombieH; const hr = 6 + Math.random() * 6; // Vary hole size slightly holes.push({ x: hx, y: hy, radius: hr }); totalHoles++; // Mini green goo explosion at each hole (2-3 particles, performant) const numGoo = 2 + Math.floor(Math.random() * 2); for (let g = 0; g < numGoo; g++) { const angle = Math.random() * Math.PI * 2; const spd = 30 + Math.random() * 80; spawnParticles(hx, hy, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 20, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.3, gravity: 300, type: 'circle' }); } // Muzzle flash from a random laser origin (shows which gun fired) if (Math.random() < 0.3) { const laserIdx = Math.floor(Math.random() * activeLasers.length); const laser = activeLasers[laserIdx]; spawnParticles(laser.originX + (laser.targetX - laser.originX) * 0.05, laser.originY + (laser.targetY - laser.originY) * 0.05, 1, { color: '#ffcc00', vx: (laser.targetX - laser.originX) * 0.1, vy: (laser.targetY - laser.originY) * 0.1, size: 4 + Math.random() * 6, life: 0.08, gravity: 0, type: 'circle' }); } } // Play gunfire sound periodically const now = Date.now(); if (now - lastSoundTime > 150) { playSound('explosion_sound', 0.3 + Math.random() * 0.2); lastSoundTime = now; } // Apply new holes to the offscreen canvas (incremental — only newly added holes) if (holes.length > holesApplied) { holesCtx.globalCompositeOperation = 'destination-out'; for (let i = holesApplied; i < holes.length; i++) { const h = holes[i]; holesCtx.beginPath(); holesCtx.arc(h.x, h.y, h.radius, 0, Math.PI * 2); holesCtx.fill(); } holesCtx.globalCompositeOperation = 'source-over'; holesApplied = holes.length; } // Draw offscreen holey canvas onto main canvas with violent vibration. // Transparent holes reveal the game background drawn earlier this frame. const vibIntensity = 4 + t * 8; // Vibration increases over time const vibX = (Math.random() - 0.5) * vibIntensity * 2; const vibY = (Math.random() - 0.5) * vibIntensity * 2; ctx.drawImage(holesCanvas, vibX, vibY); // Bone/flesh chunks flying off as holes accumulate if (t > 0.3 && Math.random() < 0.15) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 150; const chunkX = zombieLeft + Math.random() * zombieW; const chunkY = zombieTop + Math.random() * zombieH; spawnParticles(chunkX, chunkY, 1, { color: Math.random() > 0.5 ? '#5cc85c' : '#e8d8b0', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 4 + Math.random() * 8, life: 0.8 + Math.random() * 0.5, gravity: 400, type: 'chunk' }); } }); // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Lasers turn off instantly (no fade) // Draw one frame without lasers to show they're gone await animate(50 / speed, () => { // Draw remaining holey stamp (lasers are OFF now) ctx.drawImage(holesCanvas, 0, 0); }); // Wait 0.3s - dramatic silence await animate(300 / speed, (t, dt) => { // Holey stamp still visible, no lasers ctx.drawImage(holesCanvas, 0, 0); }); // Chop up the remainder of the zombie stamp into tiny grid pieces that fall const chopCols = 12; const chopRows = 16; const chopCellW = Math.floor(CANVAS_WIDTH / chopCols); const chopCellH = Math.floor(CANVAS_HEIGHT / chopRows); const chopPieces = []; // Create pieces from what remains on the holesCanvas for (let row = 0; row < chopRows; row++) { for (let col = 0; col < chopCols; col++) { const cellX = col * chopCellW; const cellY = row * chopCellH; // Check if this cell has any visible content const checkData = holesCtx.getImageData(cellX, cellY, chopCellW, chopCellH); let hasContent = false; for (let i = 3; i < checkData.data.length; i += 32) { if (checkData.data[i] > 10) { hasContent = true; break; } } if (hasContent) { chopPieces.push({ srcX: cellX, srcY: cellY, x: cellX, y: cellY, w: chopCellW, h: chopCellH, vx: (Math.random() - 0.5) * 40, vy: 0, rotation: 0, angularVel: (Math.random() - 0.5) * 200, grounded: false, groundY: CANVAS_HEIGHT - 300 + Math.random() * 10 }); } } } // Brief "chop" moment - pieces separate with small gaps (200ms) playSound('sword_slash_sound', 0.5); await animate(200 / speed, (t, dt) => { // Draw pieces with growing gaps between them const gap = t * 4; for (const p of chopPieces) { ctx.drawImage(holesCanvas, p.srcX, p.srcY, p.w, p.h, p.srcX + (p.srcX / CANVAS_WIDTH - 0.5) * gap * 10, p.srcY + (p.srcY / CANVAS_HEIGHT - 0.5) * gap * 10, p.w, p.h); } }); // Pieces fall to the floor with gravity (1200ms) await animate(1200 / speed, (t, dt) => { // using passed dt const gravity = 1200; chopPieces.forEach(p => { if (!p.grounded) { p.vy += gravity * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.rotation += p.angularVel * dt; p.vx *= 0.99; // Ground collision if (p.y + p.h > p.groundY) { p.y = p.groundY - p.h; p.vy = -p.vy * 0.25; p.vx *= 0.6; p.angularVel *= 0.4; if (Math.abs(p.vy) < 30) { p.grounded = true; p.vy = 0; p.vx = 0; p.angularVel = 0; } } } }); // Draw all pieces for (const p of chopPieces) { ctx.save(); const cx = p.x + p.w / 2; const cy = p.y + p.h / 2; ctx.translate(cx, cy); if (Math.abs(p.rotation) > 0.1) { ctx.rotate(p.rotation * Math.PI / 180); } ctx.drawImage(holesCanvas, p.srcX, p.srcY, p.w, p.h, -p.w / 2, -p.h / 2, p.w, p.h); ctx.restore(); } }); // Count the kill incrementSpecimens(); // Open trap door and let pieces fall into the pit trapDoor.phase = 'opening'; trapDoor.isAnimating = true; playSound('crush_sound', 0.4); // Wait for trap door to open and pieces to fall through await animate(900 / speed, (t, dt) => { const trapOpen = trapDoor.leftAngle > 30; chopPieces.forEach(p => { if (trapOpen && p.grounded) { p.grounded = false; p.vy = 50 + Math.random() * 80; p.vx = (Math.random() - 0.5) * 60; p.angularVel = (Math.random() - 0.5) * 300; } if (!p.grounded) { p.vy += 1800 * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.rotation += p.angularVel * dt; } }); // Draw visible pieces for (const p of chopPieces) { if (p.y < CANVAS_HEIGHT + 50) { ctx.save(); const cx = p.x + p.w / 2; const cy = p.y + p.h / 2; ctx.translate(cx, cy); if (Math.abs(p.rotation) > 0.1) { ctx.rotate(p.rotation * Math.PI / 180); } ctx.drawImage(holesCanvas, p.srcX, p.srcY, p.w, p.h, -p.w / 2, -p.h / 2, p.w, p.h); ctx.restore(); } } }); // Close the trap door trapDoor.phase = 'closing'; playSound('crush_sound', 0.3); // Wait for close await new Promise(resolve => { const checkClosed = () => { if (trapDoor.phase === 'closed') resolve(); else requestAnimationFrame(checkClosed); }; checkClosed(); }); // Small delay then spawn new zombie await new Promise(resolve => setTimeout(resolve, 133)); // Reset zombie state and spawn new one zombie = null; particles = []; slicedPieces = []; isAnimating = false; highlightMethod(null); bgDarkenTarget = 0; spawnZombieWithDoorAnimation(); // Cancel the default auto-reset since we handled it cancelAutoReset(); }, // 38. PORTAL - Zombie falls into horizontal blue portal below, then smaller zombie falls between portals in top-left portal: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Floor portal position (horizontal, below zombie's feet) const floorPortalX = zombie.baseX; const floorPortalY = zombie.baseY + 280 * zombie.scale; // At feet level let floorPortalSpin = 0; let floorPortalScale = 0; // Helper: Draw a horizontal portal (ellipse viewed from above - wide, short) function drawHorizontalPortal(cx, cy, scale, spin, color, intensity) { if (scale <= 0) return; intensity = intensity || 0; ctx.save(); ctx.translate(cx, cy); ctx.scale(scale, scale); const isBlue = color === 'blue'; const baseColor = isBlue ? [60, 130, 255] : [160, 60, 255]; const glowColor = isBlue ? '#4488ff' : '#aa44ff'; const coreColor = isBlue ? '#88ccff' : '#dd88ff'; // Horizontal portal is wide ellipse (like looking down at a hole) const portalW = 100; const portalH = 35; // Foreshortened height (perspective) // Outer glow const glowW = portalW + 20 + intensity * 10; const glowH = portalH + 10 + intensity * 5; const outerGrad = ctx.createRadialGradient(0, 0, 10, 0, 0, glowW * 0.8); outerGrad.addColorStop(0, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${0.4 + intensity * 0.2})`); outerGrad.addColorStop(0.5, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${0.15 + intensity * 0.1})`); outerGrad.addColorStop(1, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, 0)`); ctx.fillStyle = outerGrad; ctx.beginPath(); ctx.ellipse(0, 0, glowW, glowH, 0, 0, Math.PI * 2); ctx.fill(); // Main ring ctx.strokeStyle = glowColor; ctx.lineWidth = 8 + intensity * 4; ctx.shadowColor = glowColor; ctx.shadowBlur = 20 + intensity * 15; ctx.beginPath(); ctx.ellipse(0, 0, portalW, portalH, 0, 0, Math.PI * 2); ctx.stroke(); // Inner ring ctx.strokeStyle = coreColor; ctx.lineWidth = 4; ctx.shadowBlur = 10; ctx.beginPath(); ctx.ellipse(0, 0, portalW * 0.75, portalH * 0.7, 0, 0, Math.PI * 2); ctx.stroke(); // Swirling energy inside const numArcs = 4; for (let i = 0; i < numArcs; i++) { const arcAngle = (i / numArcs) * Math.PI * 2 + spin * 0.03; const arcRX = portalW * 0.5 + Math.sin(spin * 0.05 + i) * 10; const arcRY = portalH * 0.4 + Math.sin(spin * 0.05 + i) * 4; ctx.strokeStyle = `rgba(${baseColor[0] + 60}, ${baseColor[1] + 60}, ${baseColor[2]}, ${0.4 + intensity * 0.3})`; ctx.lineWidth = 2.5; ctx.shadowBlur = 8; ctx.beginPath(); ctx.ellipse(0, 0, arcRX, arcRY, arcAngle, 0, Math.PI * 0.8); ctx.stroke(); } // Dark center (void/hole) const centerGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, portalW * 0.55); centerGrad.addColorStop(0, 'rgba(5, 2, 15, 0.9)'); centerGrad.addColorStop(0.6, `rgba(${Math.floor(baseColor[0] * 0.2)}, ${Math.floor(baseColor[1] * 0.2)}, ${Math.floor(baseColor[2] * 0.2)}, 0.5)`); centerGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = centerGrad; ctx.beginPath(); ctx.ellipse(0, 0, portalW * 0.6, portalH * 0.55, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); } // Phase 1: Blue horizontal portal opens below zombie (800ms) playSound('portal_sound', 0.7); await animate(800 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); floorPortalScale = easeOut; floorPortalSpin = t * 180; drawHorizontalPortal(floorPortalX, floorPortalY, floorPortalScale, floorPortalSpin, 'blue', t * 0.5); // Zombie notices something below if (t > 0.3) { zombie.applyImpulse((Math.random() - 0.5) * 10, -5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = 8 + Math.sin(t * 10) * 5; // Looking down } } }); // Phase 2: Zombie falls into the portal (1500ms) zombie.isRagdolling = true; zombie.customPose = true; const fallStartY = zombie.baseY; const fallEndY = floorPortalY + 50; // Falls slightly past portal center await animate(1500 / speed, (t, dt) => { floorPortalSpin += 360 * dt; // Draw portal (always visible, intensifying) drawHorizontalPortal(floorPortalX, floorPortalY, 1, floorPortalSpin, 'blue', 0.5 + t * 0.5); // Zombie falls with accelerating gravity const fallT = t * t; // Quadratic fall zombie.baseY = fallStartY + fallT * (fallEndY - fallStartY); // Zombie shrinks as it enters the portal (perspective - going "into" it) if (t > 0.3) { const shrinkT = (t - 0.3) / 0.7; zombie.globalScale = Math.max(0.05, 1 - shrinkT * 1.1); // Also fade out in last 40% if (shrinkT > 0.6) { zombie.globalAlpha = Math.max(0, 1 - (shrinkT - 0.6) / 0.4); } } // Arms flail if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = 80 + Math.sin(t * 20) * 30; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = -80 - Math.sin(t * 20 + 1) * 30; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 20 + Math.abs(Math.sin(t * 25)) * 30; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -20 - Math.abs(Math.sin(t * 25 + 1)) * 30; } // Head looks down in terror if (zombie.parts.head.attached) { zombie.parts.head.rotation = 10 + Math.sin(t * 15) * 8; } // Legs dangle if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = 10 + Math.sin(t * 18) * 15; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = -10 - Math.sin(t * 18 + Math.PI) * 15; } // Blue energy particles swirling into portal if (t > 0.2 && Math.random() < 0.6) { const angle = Math.random() * Math.PI * 2; const dist = 60 + Math.random() * 40; spawnParticles( floorPortalX + Math.cos(angle) * dist, floorPortalY + Math.sin(angle) * dist * 0.35, 1, { color: Math.random() > 0.5 ? '#4488ff' : '#88ccff', vx: -Math.cos(angle) * dist * 2, vy: -Math.sin(angle) * dist * 0.7, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: 0, type: 'circle' } ); } }); // Zombie is gone zombie.globalAlpha = 0; // Phase 3: Floor portal closes (600ms) await animate(600 / speed, (t, dt) => { floorPortalSpin += 400 * dt; const shrink = 1 - t; drawHorizontalPortal(floorPortalX, floorPortalY, shrink, floorPortalSpin, 'blue', (1 - t) * 0.8); }); // Brief pause - empty screen moment (400ms) await animate(400 / speed, () => {}); // Phase 4: Two portals open in the top-left area (800ms) // Purple portal on top, blue portal below it const leftPortalX = 160; const purplePortalY = 250; // Top-left area const bluePortalY = 650; // Below the purple one let sidePortalSpin = 0; let sidePortalScale = 0; playSound('portal_sound', 0.6); await animate(800 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); sidePortalScale = easeOut; sidePortalSpin = t * 180; // Purple portal (top) drawHorizontalPortal(leftPortalX, purplePortalY, sidePortalScale, sidePortalSpin, 'purple', t * 0.5); // Blue portal (bottom) drawHorizontalPortal(leftPortalX, bluePortalY, sidePortalScale, sidePortalSpin + 90, 'blue', t * 0.5); }); // Phase 5: Smaller zombie falls out of purple portal, drops into blue portal (1400ms) // Draw a tiny zombie falling between the two portals const miniScale = 0.4; // Smaller zombie const miniStartY = purplePortalY - 20; // Emerges from purple portal const miniEndY = bluePortalY + 30; // Falls into blue portal let miniZombieAlpha = 0; await animate(1400 / speed, (t, dt) => { sidePortalSpin += 300 * dt; // Draw both portals (pulsing) drawHorizontalPortal(leftPortalX, purplePortalY, 1, sidePortalSpin, 'purple', 0.5 + Math.sin(t * 8) * 0.2); drawHorizontalPortal(leftPortalX, bluePortalY, 1, sidePortalSpin + 90, 'blue', 0.5 + Math.sin(t * 8 + 1) * 0.2); // Mini zombie falls with gravity from purple to blue // Scale up when emerging, scale down when entering portal miniZombieAlpha = 1; if (t > 0.80) miniZombieAlpha = 0; // Hide after fully shrunk // Quadratic fall from purple portal to blue portal const fallProgress = t * t * 1.2 + t * 0.2; // Faster fall const miniY = miniStartY + fallProgress * (miniEndY - miniStartY); // Scale up quickly from portal (first 12%), scale down into portal let miniCurrentScale = miniScale; if (t < 0.12) { miniCurrentScale = miniScale * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.65) { const shrinkT = Math.min((t - 0.65) / 0.15, 1); miniCurrentScale = miniScale * (1 - shrinkT * 0.85); } // Draw the mini zombie (scaled version of actual rendered zombie) if (miniZombieAlpha > 0) { drawMiniZombieFalling(leftPortalX, miniY, miniCurrentScale, t * 360, miniZombieAlpha, { head: true, torso: true, arms: true, legs: true }); } // Purple portal emits purple energy upward when zombie exits if (t < 0.3 && Math.random() < 0.5) { spawnParticles(leftPortalX + (Math.random() - 0.5) * 60, purplePortalY, 1, { color: Math.random() > 0.5 ? '#aa44ff' : '#dd88ff', vx: (Math.random() - 0.5) * 40, vy: 30 + Math.random() * 40, size: 3 + Math.random() * 5, life: 0.3 + Math.random() * 0.2, gravity: 0, type: 'circle' }); } // Blue portal absorbs blue energy when zombie enters if (t > 0.6 && Math.random() < 0.5) { const angle = Math.random() * Math.PI * 2; const dist = 50 + Math.random() * 30; spawnParticles( leftPortalX + Math.cos(angle) * dist, bluePortalY + Math.sin(angle) * dist * 0.35, 1, { color: Math.random() > 0.5 ? '#4488ff' : '#88ccff', vx: -Math.cos(angle) * dist * 2, vy: -Math.sin(angle) * dist * 0.7, size: 3 + Math.random() * 4, life: 0.25 + Math.random() * 0.15, gravity: 0, type: 'circle' } ); } }); // Phase 6: Open RIGHT-side portals while keeping left ones open (800ms) const rightPortalX = CANVAS_WIDTH - 160; const rightPurplePortalY = 250; const rightBluePortalY = 650; let rightPortalSpin = 0; playSound('portal_sound', 0.6); await animate(800 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin = t * 180; const easeOut = 1 - Math.pow(1 - t, 3); // Left portals stay open drawHorizontalPortal(leftPortalX, purplePortalY, 1, sidePortalSpin, 'purple', 0.5 + Math.sin(t * 8) * 0.2); drawHorizontalPortal(leftPortalX, bluePortalY, 1, sidePortalSpin + 90, 'blue', 0.5 + Math.sin(t * 8 + 1) * 0.2); // Right portals opening drawHorizontalPortal(rightPortalX, rightPurplePortalY, easeOut, rightPortalSpin, 'purple', t * 0.5); drawHorizontalPortal(rightPortalX, rightBluePortalY, easeOut, rightPortalSpin + 90, 'blue', t * 0.5); }); // Helper: draw mini zombie parts falling (configurable body parts) // Uses the zombie's actual draw methods for a properly rendered scaled version function drawMiniZombieFalling(cx, cy, currentScale, spinAngle, alpha, parts) { if (alpha <= 0 || !zombie) return; ctx.save(); ctx.translate(cx, cy); ctx.scale(currentScale, currentScale); ctx.globalAlpha = alpha; ctx.rotate(spinAngle * Math.PI / 180 * 0.3); // If only head, offset so head is centered at target position if (parts.head && !parts.torso && !parts.arms && !parts.legs) { ctx.translate(0, 115); } // Temporarily hide parts we don't want to show const savedVisibility = {}; const partMapping = { head: ['head'], torso: ['torso'], arms: ['leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm'], legs: ['leftThigh', 'rightThigh', 'leftLowerLeg', 'rightLowerLeg'] }; // Save all visibility states and hide everything first for (const partName in zombie.parts) { savedVisibility[partName] = zombie.parts[partName].visible; zombie.parts[partName].visible = false; } // Show only the requested parts for (const groupName in parts) { if (parts[groupName] && partMapping[groupName]) { partMapping[groupName].forEach(pn => { if (zombie.parts[pn]) { zombie.parts[pn].visible = true; } }); } } // Save and override zombie transform state const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; const savedScale = zombie.scale; const savedGlobalScale = zombie.globalScale; const savedGlobalAlpha = zombie.globalAlpha; // Draw at origin (transform already applied above) zombie.baseX = 0; zombie.baseY = 0; zombie.scale = 1; zombie.globalScale = 1; zombie.globalAlpha = 1; zombie.draw(ctx); // Restore zombie state zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; zombie.scale = savedScale; zombie.globalScale = savedGlobalScale; zombie.globalAlpha = savedGlobalAlpha; // Restore visibility for (const partName in savedVisibility) { zombie.parts[partName].visible = savedVisibility[partName]; } ctx.restore(); } // Helper: draw all 4 portals function drawAllFourPortals() { drawHorizontalPortal(leftPortalX, purplePortalY, 1, sidePortalSpin, 'purple', 0.5 + Math.sin(Date.now() * 0.008) * 0.2); drawHorizontalPortal(leftPortalX, bluePortalY, 1, sidePortalSpin + 90, 'blue', 0.5 + Math.sin(Date.now() * 0.008 + 1) * 0.2); drawHorizontalPortal(rightPortalX, rightPurplePortalY, 1, rightPortalSpin, 'purple', 0.5 + Math.sin(Date.now() * 0.008 + 2) * 0.2); drawHorizontalPortal(rightPortalX, rightBluePortalY, 1, rightPortalSpin + 90, 'blue', 0.5 + Math.sin(Date.now() * 0.008 + 3) * 0.2); } // Phase 7: Full mini zombie falls through RIGHT portals (1200ms) await animate(1200 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); let mAlpha = 1; if (t > 0.84) mAlpha = 0; const mY = rightPurplePortalY - 20 + t * t * 1.3 * (rightBluePortalY + 30 - (rightPurplePortalY - 20)); let mScale = miniScale; if (t < 0.12) { mScale = miniScale * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.70) { const shrinkT = Math.min((t - 0.70) / 0.14, 1); mScale = miniScale * (1 - shrinkT * 0.85); } drawMiniZombieFalling(rightPortalX, mY, mScale, t * 360, mAlpha, { head: true, torso: true, arms: true, legs: true }); if (t < 0.3 && Math.random() < 0.5) { spawnParticles(rightPortalX + (Math.random() - 0.5) * 60, rightPurplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 40, vy: 30 + Math.random() * 40, size: 3 + Math.random() * 5, life: 0.3, gravity: 0, type: 'circle' }); } if (t > 0.6 && Math.random() < 0.5) { const angle = Math.random() * Math.PI * 2; const dist = 50 + Math.random() * 30; spawnParticles(rightPortalX + Math.cos(angle) * dist, rightBluePortalY + Math.sin(angle) * dist * 0.35, 1, { color: '#88ccff', vx: -Math.cos(angle) * dist * 2, vy: -Math.sin(angle) * dist * 0.7, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } }); // Brief pause (300ms) await animate(300 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); }); // Phase 8: Full mini zombie falls through LEFT portals again (1200ms) await animate(1200 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); let mAlpha = 1; if (t > 0.84) mAlpha = 0; const mY = purplePortalY - 20 + t * t * 1.3 * (bluePortalY + 30 - (purplePortalY - 20)); let mScale = miniScale; if (t < 0.12) { mScale = miniScale * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.70) { const shrinkT = Math.min((t - 0.70) / 0.14, 1); mScale = miniScale * (1 - shrinkT * 0.85); } drawMiniZombieFalling(leftPortalX, mY, mScale, t * 360, mAlpha, { head: true, torso: true, arms: true, legs: true }); if (t < 0.3 && Math.random() < 0.5) { spawnParticles(leftPortalX + (Math.random() - 0.5) * 60, purplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 40, vy: 30 + Math.random() * 40, size: 3 + Math.random() * 5, life: 0.3, gravity: 0, type: 'circle' }); } if (t > 0.6 && Math.random() < 0.5) { const angle = Math.random() * Math.PI * 2; const dist = 50 + Math.random() * 30; spawnParticles(leftPortalX + Math.cos(angle) * dist, bluePortalY + Math.sin(angle) * dist * 0.35, 1, { color: '#88ccff', vx: -Math.cos(angle) * dist * 2, vy: -Math.sin(angle) * dist * 0.7, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } }); // Brief pause (300ms) await animate(300 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); }); // Phase 9: HEAD through RIGHT portals, BODY (no head) through LEFT portals simultaneously (1400ms) await animate(1400 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); let mAlpha = 1; if (t > 0.84) mAlpha = 0; let mScale = miniScale; if (t < 0.12) { mScale = miniScale * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.70) { const shrinkT = Math.min((t - 0.70) / 0.14, 1); mScale = miniScale * (1 - shrinkT * 0.85); } // HEAD falls through RIGHT portals const headY = rightPurplePortalY - 20 + t * t * 1.3 * (rightBluePortalY + 30 - (rightPurplePortalY - 20)); drawMiniZombieFalling(rightPortalX, headY, mScale, t * 420, mAlpha, { head: true, torso: false, arms: false, legs: false }); // BODY (no head) falls through LEFT portals const bodyY = purplePortalY - 20 + t * t * 1.3 * (bluePortalY + 30 - (purplePortalY - 20)); drawMiniZombieFalling(leftPortalX, bodyY, mScale, t * 300, mAlpha, { head: false, torso: true, arms: true, legs: true }); if (t < 0.3 && Math.random() < 0.4) { spawnParticles(rightPortalX + (Math.random() - 0.5) * 40, rightPurplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); spawnParticles(leftPortalX + (Math.random() - 0.5) * 40, purplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } }); // Brief pause (300ms) await animate(300 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); }); // Phase 10: HEAD through LEFT portals, TORSO ONLY (no arms/legs/head) through RIGHT portals simultaneously (1400ms) await animate(1400 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); let mAlpha = 1; if (t > 0.84) mAlpha = 0; let mScale = miniScale; if (t < 0.12) { mScale = miniScale * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.70) { const shrinkT = Math.min((t - 0.70) / 0.14, 1); mScale = miniScale * (1 - shrinkT * 0.85); } // HEAD falls through LEFT portals const headY = purplePortalY - 20 + t * t * 1.3 * (bluePortalY + 30 - (purplePortalY - 20)); drawMiniZombieFalling(leftPortalX, headY, mScale, t * 420, mAlpha, { head: true, torso: false, arms: false, legs: false }); // TORSO ONLY (no arms, legs, or head) falls through RIGHT portals const torsoY = rightPurplePortalY - 20 + t * t * 1.3 * (rightBluePortalY + 30 - (rightPurplePortalY - 20)); drawMiniZombieFalling(rightPortalX, torsoY, mScale, t * 300, mAlpha, { head: false, torso: true, arms: false, legs: false }); if (t < 0.3 && Math.random() < 0.4) { spawnParticles(leftPortalX + (Math.random() - 0.5) * 40, purplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); spawnParticles(rightPortalX + (Math.random() - 0.5) * 40, rightPurplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } }); // Phase 11: Individual pieces drop through LEFT portals one by one, quickly // Helper: draw a single zombie body part function drawSingleZombiePart(cx, cy, partScale, spinAngle, alpha, partType) { if (alpha <= 0 || !zombie) return; ctx.save(); ctx.translate(cx, cy); // Apply partScale AND the global zombie scale so it's truly full size const finalScale = partScale * zombie.scale; ctx.scale(finalScale, finalScale); ctx.globalAlpha = alpha; ctx.rotate(spinAngle * Math.PI / 180 * 0.3); // Set up drawing state for zombie parts zombie._currentPartColor = zombie.bodyColor; zombie._currentPartClothing = zombie.clothingColor; zombie._currentPartOutline = zombie.outlineColor; zombie._lwScale = 1; // To keep line widths consistent with normal drawing switch(partType) { case 'leftArm': ctx.translate(0, -60); zombie.drawUpperArm(ctx, true); ctx.translate(0, 70); zombie.drawForearm(ctx, true); break; case 'rightArm': ctx.translate(0, -60); zombie.drawUpperArm(ctx, false); ctx.translate(0, 70); zombie.drawForearm(ctx, false); break; case 'leftLeg': ctx.translate(0, -70); zombie.drawThigh(ctx, true); ctx.translate(0, 80); zombie.drawLowerLeg(ctx, true); break; case 'rightLeg': ctx.translate(0, -70); zombie.drawThigh(ctx, false); ctx.translate(0, 80); zombie.drawLowerLeg(ctx, false); break; case 'head': zombie.drawHead(ctx); break; case 'torso': zombie.drawTorso(ctx); break; } // Reset state zombie._currentPartColor = null; zombie._currentPartClothing = null; zombie._currentPartOutline = null; ctx.restore(); } const pieceTypes = ['leftArm', 'rightArm', 'leftLeg', 'rightLeg', 'head', 'torso']; for (let p = 0; p < pieceTypes.length; p++) { const partType = pieceTypes[p]; await animate(500 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); let mAlpha = 1; if (t > 0.84) mAlpha = 0; const mY = purplePortalY - 20 + t * t * 1.3 * (bluePortalY + 30 - (purplePortalY - 20)); let mScale = miniScale * 0.85; if (t < 0.12) { mScale = miniScale * 0.85 * (0.15 + (t / 0.12) * 0.85); } else if (t > 0.70) { const shrinkT = Math.min((t - 0.70) / 0.14, 1); mScale = miniScale * 0.85 * (1 - shrinkT * 0.85); } drawSingleZombiePart(leftPortalX, mY, mScale, t * 500, mAlpha, partType); if (t < 0.2 && Math.random() < 0.4) { spawnParticles(leftPortalX + (Math.random() - 0.5) * 40, purplePortalY, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 20 + Math.random() * 30, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } if (t > 0.7 && Math.random() < 0.4) { const angle = Math.random() * Math.PI * 2; const dist = 50 + Math.random() * 30; spawnParticles(leftPortalX + Math.cos(angle) * dist, bluePortalY + Math.sin(angle) * dist * 0.35, 1, { color: '#88ccff', vx: -Math.cos(angle) * dist * 2, vy: -Math.sin(angle) * dist * 0.7, size: 3 + Math.random() * 4, life: 0.25, gravity: 0, type: 'circle' }); } }); // Brief gap between pieces (80ms) if (p < pieceTypes.length - 1) { await animate(80 / speed, (t, dt) => { sidePortalSpin += 300 * dt; rightPortalSpin += 300 * dt; drawAllFourPortals(); }); } } // Phase 12: All 4 portals close (800ms) await animate(800 / speed, (t, dt) => { sidePortalSpin += 400 * dt; rightPortalSpin += 400 * dt; const shrink = 1 - t; drawHorizontalPortal(leftPortalX, purplePortalY, shrink, sidePortalSpin, 'purple', (1 - t) * 0.5); drawHorizontalPortal(leftPortalX, bluePortalY, shrink, sidePortalSpin + 90, 'blue', (1 - t) * 0.5); drawHorizontalPortal(rightPortalX, rightPurplePortalY, shrink, rightPortalSpin, 'purple', (1 - t) * 0.5); drawHorizontalPortal(rightPortalX, rightBluePortalY, shrink, rightPortalSpin + 90, 'blue', (1 - t) * 0.5); }); // Phase 13: Brief pause - empty, quiet screen (1000ms) await animate(1000 / speed, () => {}); // Phase 14: Purple portal opens at top middle of screen (600ms) const finalPortalX = CANVAS_WIDTH / 2; const finalPortalY = 180; let finalPortalSpin = 0; playSound('portal_sound', 0.6); await animate(600 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); finalPortalSpin = t * 180; drawHorizontalPortal(finalPortalX, finalPortalY, easeOut, finalPortalSpin, 'purple', t * 0.6); }); // Phase 15: Body pieces fall out one at a time, quickly, bounce and settle on floor const splatFloorY = trapDoor.y - 30; // Just above trap door const splatPieces = ['leftArm', 'rightArm', 'leftLeg', 'rightLeg', 'head', 'torso']; const landedPieces = []; // Track pieces with bounce physics // Pre-calculate landing X positions (all from same point - directly below portal) const landingXPositions = splatPieces.map((_, i) => { return finalPortalX; }); // Helper: update physics for all landed pieces (bounce and settle) function updateLandedPiecesPhysics(dt) { landedPieces.forEach(lp => { if (lp.settled) return; // Apply gravity lp.vy += 2200 * dt; lp.x += lp.vx * dt; lp.y += lp.vy * dt; lp.rotation += lp.angularVel * dt; // Floor collision with bounce (bomb-like physics) if (lp.y >= splatFloorY) { lp.y = splatFloorY; lp.bounceCount = (lp.bounceCount || 0) + 1; lp.vy = -lp.vy * 0.45; // Strong bounce (like bomb pieces) lp.vx *= 0.8; // Keep horizontal momentum for scatter lp.angularVel *= 0.6; // Spin damping on impact // Add random horizontal impulse on each bounce (tumbling effect) lp.vx += (Math.random() - 0.5) * 80; // On each bounce, nudge rotation toward flat target if (lp.targetRotation !== undefined) { const rotDiff = lp.targetRotation - lp.rotation; lp.angularVel += rotDiff * 1.5; // Torque toward flat } // Splat particles on each bounce if (Math.abs(lp.vy) > 30) { for (let i = 0; i < 4; i++) { spawnParticles(lp.x + (Math.random() - 0.5) * 20, splatFloorY, 1, { color: '#3dcc10', vx: (Math.random() - 0.5) * 60, vy: -15 - Math.random() * 30, size: 3 + Math.random() * 5, life: 0.4, gravity: 300, type: 'circle' }); } } // Settle when barely moving (need more bounces to settle) if (Math.abs(lp.vy) < 20 && Math.abs(lp.vx) < 10 && lp.bounceCount >= 5) { lp.vy = 0; lp.vx = 0; lp.angularVel = 0; lp.rotation = lp.targetRotation || lp.rotation; // Snap to flat lp.settled = true; } } // Wall bounds (bounce off walls to scatter across full floor) if (lp.x < 50) { lp.x = 50; lp.vx *= -0.6; } if (lp.x > CANVAS_WIDTH - 50) { lp.x = CANVAS_WIDTH - 50; lp.vx *= -0.6; } // Air damping (minimal - let them fly far) lp.vx *= 0.998; lp.angularVel *= 0.998; }); } // Helper: draw all landed pieces function drawAllLandedPieces() { landedPieces.forEach(lp => { drawSingleZombiePart(lp.x, lp.y, lp.scale, lp.rotation, lp.alpha, lp.type); }); } for (let p = 0; p < splatPieces.length; p++) { const partType = splatPieces[p]; const landX = landingXPositions[p]; let hasLanded = false; await animate(500 / speed, (t, dt) => { finalPortalSpin += 300 * dt; // Update bounce physics for all landed pieces updateLandedPiecesPhysics(dt); // Draw portal drawHorizontalPortal(finalPortalX, finalPortalY, 1, finalPortalSpin, 'purple', 0.6 + Math.sin(t * 8) * 0.1); // Draw all previously landed pieces (bouncing) drawAllLandedPieces(); // Falling piece animation let mAlpha = 1; if (t < 0.08) mAlpha = t / 0.08; // Quick fade in from portal // Fall with gravity (quadratic acceleration) const fallStartY = finalPortalY + 25; const fallT = t * t; const currentY = fallStartY + fallT * (splatFloorY - fallStartY); const spinAngle = t * 700; // Fast spin while falling const mScale = 1.0; // Full-size parts // Check if hit floor if (currentY >= splatFloorY && !hasLanded) { hasLanded = true; // Add to landed pieces WITH bounce physics // Target flat rotation: arms/legs lay on their side (90°), head/torso flat (0°) const flatRotations = { leftArm: 90, rightArm: -90, leftLeg: 90, rightLeg: -90, head: 0, torso: 0 }; const targetFlatRot = (flatRotations[partType] || 0) + (Math.random() - 0.5) * 20; landedPieces.push({ x: landX, y: splatFloorY, scale: mScale, rotation: (Math.random() - 0.5) * 60, targetRotation: targetFlatRot, alpha: 1, type: partType, // Bounce physics - bomb-like explosive scatter! vx: (Math.random() - 0.5) * 600, // Wide horizontal scatter like bomb vy: -500 - Math.random() * 400, // Very high initial bounce angularVel: (Math.random() - 0.5) * 800, // Lots of spin settled: false, bounceCount: 0 }); // Green goo SPLAT! playSound('crush_sound', 0.35); for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI * 2; const spd = 40 + Math.random() * 140; spawnParticles(landX, splatFloorY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 4 + Math.random() * 9, life: 0.6 + Math.random() * 0.4, gravity: 400, type: 'circle' }); } // Goo pool on floor for (let i = 0; i < 5; i++) { spawnParticles(landX + (Math.random() - 0.5) * 25, splatFloorY + 5, 1, { color: Math.random() > 0.5 ? '#3dcc10' : '#1a8800', vx: (Math.random() - 0.5) * 10, vy: 0, size: 6 + Math.random() * 8, life: 3.0, gravity: 0, type: 'circle', shrink: false }); } } if (hasLanded) { // Piece is now in landedPieces with bounce physics (drawn above) } else { // Draw falling piece drawSingleZombiePart(landX, currentY, mScale, spinAngle, mAlpha, partType); } // Portal emit particles when piece exits if (t < 0.15 && Math.random() < 0.6) { spawnParticles(finalPortalX + (Math.random() - 0.5) * 50, finalPortalY + 10, 1, { color: '#dd88ff', vx: (Math.random() - 0.5) * 30, vy: 25 + Math.random() * 35, size: 3 + Math.random() * 5, life: 0.3, gravity: 0, type: 'circle' }); } }); // Brief gap between pieces (120ms) if (p < splatPieces.length - 1) { await animate(120 / speed, (t, dt) => { finalPortalSpin += 300 * dt; updateLandedPiecesPhysics(dt); drawHorizontalPortal(finalPortalX, finalPortalY, 1, finalPortalSpin, 'purple', 0.6); drawAllLandedPieces(); }); } } // Hold showing all pieces bouncing and settling on the floor (2000ms) await animate(2000 / speed, (t, dt) => { finalPortalSpin += 300 * dt; updateLandedPiecesPhysics(dt); drawHorizontalPortal(finalPortalX, finalPortalY, 1, finalPortalSpin, 'purple', 0.6); drawAllLandedPieces(); }); // Phase 16: Portal closes (600ms) await animate(600 / speed, (t, dt) => { finalPortalSpin += 400 * dt; updateLandedPiecesPhysics(dt); const shrink = 1 - t; drawHorizontalPortal(finalPortalX, finalPortalY, shrink, finalPortalSpin, 'purple', (1 - t) * 0.6); // Landed pieces stay visible drawAllLandedPieces(); }); // Brief pause with pieces on floor (still settling) await animate(800 / speed, (t, dt) => { updateLandedPiecesPhysics(dt); drawAllLandedPieces(); }); // Count the kill incrementSpecimens(); // Open the trap door and let pieces fall into the pit trapDoor.phase = 'opening'; trapDoor.isAnimating = true; playSound('crush_sound', 0.4); // Wait for trap door to open and pieces to fall through await animate(900 / speed, (t, dt) => { const trapOpen = trapDoor.leftAngle > 30; if (trapOpen) { landedPieces.forEach(lp => { if (lp.settled) { lp.settled = false; lp.vy = 50 + Math.random() * 80; lp.vx = (Math.random() - 0.5) * 60; lp.angularVel = (Math.random() - 0.5) * 300; } // Apply gravity for falling pieces lp.vy += 1800 * dt; lp.x += lp.vx * dt; lp.y += lp.vy * dt; lp.rotation += lp.angularVel * dt; }); } else { updateLandedPiecesPhysics(dt); } // Draw visible pieces landedPieces.forEach(lp => { if (lp.y < CANVAS_HEIGHT + 100) { drawSingleZombiePart(lp.x, lp.y, lp.scale, lp.rotation, lp.alpha, lp.type); } }); }); // Close the trap door trapDoor.phase = 'closing'; playSound('crush_sound', 0.3); // Wait for close await new Promise(resolve => { const checkClosed = () => { if (trapDoor.phase === 'closed') resolve(); else requestAnimationFrame(checkClosed); }; checkClosed(); }); // Small delay then spawn new zombie await new Promise(resolve => setTimeout(resolve, 133)); // Reset zombie state and spawn new one zombie = null; particles = []; slicedPieces = []; isAnimating = false; highlightMethod(null); bgDarkenTarget = 0; spawnZombieWithDoorAnimation(); // Cancel the default auto-reset since we handled it cancelAutoReset(); }, // 39. LAWNMOWER - Drives across and flattens zombie lawnmower: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Mower starts off-screen left, drives across to the right const mowerY = zombie.baseY + 130; // Moved down by 50px // Aligned with zombie's midsection const startX = -1000; const endX = CANVAS_WIDTH + 1000; // Phase 1: Engine starts (off-screen rumble) playSound('lawnmower_sound', 0.8); await animate(600 / speed, (t, dt) => { // Screen vibrates slightly as engine revs const rumble = Math.sin(t * 40) * (2 + t * 3); zombie.baseX = savedBaseX + rumble * 0.3; // Zombie looks left nervously if (t > 0.3 && zombie.parts.head.attached) { zombie.parts.head.rotation = -10 + Math.sin(t * 8) * 3; } }); zombie.baseX = savedBaseX; zombie.isRagdolling = true; // Phase 2: Mower drives across the screen (left to right) let hitZombie = false; await animate(1800 / speed, (t, dt) => { const mowerX = startX + t * (endX - startX); // Draw the cartoon lawnmower drawCartoonLawnmower(ctx, mowerX, mowerY, t); // Check if mower has reached the zombie const zombieHitZone = savedBaseX; if (!hitZombie && mowerX > zombieHitZone - 320 && mowerX < zombieHitZone + 320) { hitZombie = true; // Destroy everything EXCEPT the feet (lower legs stay visible as stumps) // Hide all parts above the feet const partsToHide = ['head', 'torso', 'leftUpperArm', 'rightUpperArm', 'leftForearm', 'rightForearm', 'leftThigh', 'rightThigh']; partsToHide.forEach(partName => { const part = zombie.parts[partName]; if (part) { part.visible = false; part.attached = false; } }); // Keep lower legs visible and attached so they stay in place zombie.customPose = true; zombie.isRagdolling = false; // Snap them to upright rest positions zombie.parts.leftLowerLeg.x = -22; zombie.parts.leftLowerLeg.y = 160; zombie.parts.leftLowerLeg.rotation = 0; zombie.parts.rightLowerLeg.x = 22; zombie.parts.rightLowerLeg.y = 160; zombie.parts.rightLowerLeg.rotation = 0; // Don't use continuousBleeding - we handle fountains manually below // to ensure exactly one geyser per foot // Screen shake playSound('crush_sound', 0.7); // Massive gore burst at impact for (let i = 0; i < 50; i++) { const angle = Math.random() * Math.PI * 2; const spd = 100 + Math.random() * 350; spawnParticles(savedBaseX + (Math.random() - 0.5) * 60, savedBaseY, 1, { color: Math.random() > 0.2 ? '#3dcc10' : '#22ee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 100, size: 6 + Math.random() * 14, life: 1.0 + Math.random() * 0.8, gravity: 400, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } // Bone fragments for (let i = 0; i < 15; i++) { const angle = Math.random() * Math.PI * 2; const spd = 80 + Math.random() * 200; spawnParticles(savedBaseX + (Math.random() - 0.5) * 40, savedBaseY - 50, 1, { color: Math.random() > 0.5 ? '#e8d8b0' : '#f0e8d8', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 80, size: 4 + Math.random() * 8, life: 1.2 + Math.random() * 0.6, gravity: 500, type: 'square' }); } } // Screen shake on impact if (hitZombie) { const timeSinceHit = t - ((zombieHitZone - 80 - startX) / (endX - startX)); if (timeSinceHit > 0 && timeSinceHit < 0.08) { const shakeAmt = (1 - timeSinceHit / 0.08) * 15; zombie.baseX = savedBaseX + Math.sin(timeSinceHit * 200) * shakeAmt; zombie.baseY = savedBaseY + Math.cos(timeSinceHit * 180) * shakeAmt * 0.5; } // One geyser per foot - exactly at the visible top of each stump const scale = zombie.scale * zombie.globalScale; const leftStumpX = zombie.baseX + (-22) * scale; const rightStumpX = zombie.baseX + (22) * scale; // The lower leg part is at y=160 in zombie-local, visible top at ~4px in part-local const stumpTopY = zombie.baseY + (160 + 4) * scale; // Left foot geyser - one particle per frame, no X spread spawnParticles(leftStumpX, stumpTopY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 15, vy: -200 - Math.random() * 100, size: 6 + Math.random() * 8, life: 0.8 + Math.random() * 0.3, gravity: 600, type: 'circle' }); // Right foot geyser - one particle per frame, no X spread spawnParticles(rightStumpX, stumpTopY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 15, vy: -200 - Math.random() * 100, size: 6 + Math.random() * 8, life: 0.8 + Math.random() * 0.3, gravity: 600, type: 'circle' }); } // Particles behind the mower (grass, goo, scraps) after hitting zombie if (hitZombie && mowerX > zombieHitZone && mowerX < endX - 100) { // Green goo spray if (Math.random() < 0.6) { spawnParticles(mowerX - 60, mowerY + (Math.random() - 0.5) * 40, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: -80 - Math.random() * 120, vy: -40 - Math.random() * 80, size: 5 + Math.random() * 10, life: 0.8 + Math.random() * 0.5, gravity: 350, type: 'circle' }); } // Grass clippings if (Math.random() < 0.5) { spawnParticles(mowerX - 50, mowerY - 20 + Math.random() * 40, 1, { color: Math.random() > 0.5 ? '#5aaa40' : '#7acc60', vx: -60 - Math.random() * 100, vy: -50 - Math.random() * 70, size: 3 + Math.random() * 6, life: 0.6 + Math.random() * 0.4, gravity: 250, type: 'square' }); } // Clothing scraps if (Math.random() < 0.25) { spawnParticles(mowerX - 40, mowerY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.5 ? '#2a1f5e' : '#3a2a6e', vx: -50 - Math.random() * 80, vy: -60 - Math.random() * 60, size: 5 + Math.random() * 8, life: 1.0 + Math.random() * 0.5, gravity: 300, type: 'square' }); } } // Grass clippings even before hitting zombie (mowing the ground) if (!hitZombie && Math.random() < 0.3) { spawnParticles(mowerX - 40, mowerY + 50, 1, { color: Math.random() > 0.5 ? '#5aaa40' : '#7acc60', vx: -30 - Math.random() * 50, vy: -30 - Math.random() * 40, size: 2 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: 200, type: 'square' }); } }); // Reset position after shake zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Phase 3: Brief pause showing feet stumps with goo fountains await animate(2000 / speed, (t, dt) => { const scale = zombie.scale * zombie.globalScale; const leftStumpX = zombie.baseX + (-22) * scale; const rightStumpX = zombie.baseX + (22) * scale; const stumpTopY = zombie.baseY + (160 + 4) * scale; // Fountain intensity decreases over time const fountainIntensity = Math.max(0, 1 - t * 0.6); // Exactly one geyser per foot - particles spurt up then arc down if (Math.random() < 0.7 * fountainIntensity) { // Left foot geyser - single stream, no X spread spawnParticles(leftStumpX, stumpTopY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 15, vy: -180 - Math.random() * 80 * fountainIntensity, size: 5 + Math.random() * 8, life: 0.9 + Math.random() * 0.3, gravity: 600, type: 'circle' }); } if (Math.random() < 0.7 * fountainIntensity) { // Right foot geyser - single stream, no X spread spawnParticles(rightStumpX, stumpTopY, 1, { color: Math.random() > 0.3 ? '#3dcc10' : '#22ee44', vx: (Math.random() - 0.5) * 15, vy: -180 - Math.random() * 80 * fountainIntensity, size: 5 + Math.random() * 8, life: 0.9 + Math.random() * 0.3, gravity: 600, type: 'circle' }); } }); }, // 40. CURE - Retractable mechanical tentacle arms drop from ceiling and jab zombie with needles cure: async function() { const speed = window.gameConfig.settings.animationSpeed; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; // Four arm positions - two on each side of the zombie // Arms drop from ceiling mounts and extend downward toward zombie const arms = [ { ceilingX: zombie.baseX - 150, targetX: zombie.baseX - 70, targetY: zombie.baseY - 80, side: 'left', label: 'LU' }, { ceilingX: zombie.baseX - 110, targetX: zombie.baseX - 55, targetY: zombie.baseY + 50, side: 'left', label: 'LL' }, { ceilingX: zombie.baseX + 150, targetX: zombie.baseX + 70, targetY: zombie.baseY - 80, side: 'right', label: 'RU' }, { ceilingX: zombie.baseX + 110, targetX: zombie.baseX + 55, targetY: zombie.baseY + 50, side: 'right', label: 'RL' } ]; // Initialize arm state with tentacle segment data const NUM_SEGMENTS = 5; // Number of articulated segments per arm arms.forEach((arm, armIdx) => { arm.extension = 0; // 0 = retracted at ceiling, 1 = fully extended to target arm.jabProgress = 0; // 0 = needle retracted, 1 = fully jabbed into zombie arm.phaseOffset = armIdx * 1.7; // Unique phase for organic motion // Each segment has its own angle offset for tentacle undulation arm.segments = []; for (let s = 0; s < NUM_SEGMENTS; s++) { arm.segments.push({ angleOffset: 0, // Current angular offset from straight line (radians) phaseOffset: s * 0.9 + armIdx * 2.3 // Unique phase per segment }); } }); // Global animation time for organic motion let animTime = 0; // Helper: Calculate tentacle segment positions with organic undulation function getSegmentPositions(arm) { const startX = arm.ceilingX; const startY = -10; // Base end position const baseEndX = startX + (arm.targetX - startX) * arm.extension; const baseEndY = startY + (arm.targetY - startY) * arm.extension; // Calculate total arm length for segment distribution const totalDX = baseEndX - startX; const totalDY = baseEndY - startY; const totalLen = Math.sqrt(totalDX * totalDX + totalDY * totalDY); const segLen = totalLen / NUM_SEGMENTS; // Build segment chain with forward kinematics + organic offsets const points = [{ x: startX, y: startY + 10 }]; let currentAngle = Math.atan2(totalDY, totalDX); // Base direction for (let s = 0; s < NUM_SEGMENTS; s++) { const seg = arm.segments[s]; const prev = points[s]; // Organic undulation: sinusoidal wave that travels down the arm // Amplitude increases toward the tip (more flexible at the end) const waveAmp = (s + 1) / NUM_SEGMENTS * 0.25; // 0.05 to 0.25 radians const waveFreq1 = 2.5; // Primary wave speed const waveFreq2 = 1.8; // Secondary slower wave // Combine multiple sine waves for organic feel const wave1 = Math.sin(animTime * waveFreq1 + seg.phaseOffset) * waveAmp; const wave2 = Math.sin(animTime * waveFreq2 * 0.7 + seg.phaseOffset * 1.3 + 2) * waveAmp * 0.4; // When jabbing, the arm straightens toward the target (reduce undulation) const jabStraighten = arm._jabbing ? 0.2 : 1.0; seg.angleOffset = (wave1 + wave2) * jabStraighten * arm.extension; // Apply angle offset to direction const segAngle = currentAngle + seg.angleOffset; const nextX = prev.x + Math.cos(segAngle) * segLen; const nextY = prev.y + Math.sin(segAngle) * segLen; points.push({ x: nextX, y: nextY }); // Gradually steer back toward target (prevents arm from drifting too far) const targetAngle = Math.atan2(baseEndY - nextY, baseEndX - nextX); currentAngle = segAngle + (targetAngle - segAngle) * 0.3; } return points; } // Helper: Draw a single mechanical tentacle arm with ball joints and needle function drawArm(arm) { if (arm.extension <= 0) return; const startX = arm.ceilingX; const startY = -10; const points = getSegmentPositions(arm); const endPoint = points[points.length - 1]; ctx.save(); // === CEILING MOUNT === ctx.fillStyle = '#3a3a4a'; ctx.beginPath(); ctx.roundRect(startX - 20, -12, 40, 24, 6); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(startX - 11, 0, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(startX + 11, 0, 4, 0, Math.PI * 2); ctx.fill(); // Status LED ctx.fillStyle = arm.jabProgress > 0 ? '#ff2222' : '#00cc44'; ctx.shadowColor = arm.jabProgress > 0 ? '#ff2222' : '#00cc44'; ctx.shadowBlur = 6; ctx.beginPath(); ctx.arc(startX, -6, 3, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // === IV TUBING (flexible, follows arm path loosely) === // Tubing curves alongside the arm segments with slight offset const tubeOffset = arm.side === 'left' ? -12 : 12; ctx.strokeStyle = '#2a7a5a'; ctx.lineWidth = 7; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); ctx.moveTo(points[0].x + tubeOffset * 0.5, points[0].y); for (let i = 1; i < points.length; i++) { // Tubing lags slightly behind arm segments for flexibility feel const lagT = 0.85; const tubeX = points[i].x + tubeOffset * (1 - i / points.length * 0.5); const tubeY = points[i].y + Math.sin(animTime * 1.5 + i * 0.8 + arm.phaseOffset) * 5; ctx.lineTo(tubeX, tubeY); } ctx.stroke(); // Tube inner (translucent) ctx.strokeStyle = 'rgba(80, 200, 150, 0.55)'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(points[0].x + tubeOffset * 0.5, points[0].y); for (let i = 1; i < points.length; i++) { const tubeX = points[i].x + tubeOffset * (1 - i / points.length * 0.5); const tubeY = points[i].y + Math.sin(animTime * 1.5 + i * 0.8 + arm.phaseOffset) * 5; ctx.lineTo(tubeX, tubeY); } ctx.stroke(); // Animated liquid flow inside tube ctx.strokeStyle = 'rgba(0, 255, 100, 0.45)'; ctx.lineWidth = 2.5; ctx.setLineDash([8, 12]); ctx.lineDashOffset = -Date.now() * 0.018; ctx.beginPath(); ctx.moveTo(points[0].x + tubeOffset * 0.5, points[0].y); for (let i = 1; i < points.length; i++) { const tubeX = points[i].x + tubeOffset * (1 - i / points.length * 0.5); const tubeY = points[i].y + Math.sin(animTime * 1.5 + i * 0.8 + arm.phaseOffset) * 5; ctx.lineTo(tubeX, tubeY); } ctx.stroke(); ctx.setLineDash([]); // === ARTICULATED ARM SEGMENTS (metal cylinders connected by ball joints) === for (let i = 0; i < points.length - 1; i++) { const p1 = points[i]; const p2 = points[i + 1]; const segAngle = Math.atan2(p2.y - p1.y, p2.x - p1.x); // Segment width tapers from thick (base) to thinner (tip) const segWidth = 12 - i * 1.2; // Segment body (metallic cylinder) const perpX = -Math.sin(segAngle); const perpY = Math.cos(segAngle); const segGrad = ctx.createLinearGradient( p1.x + perpX * segWidth, p1.y + perpY * segWidth, p1.x - perpX * segWidth, p1.y - perpY * segWidth ); segGrad.addColorStop(0, '#4a4a5a'); segGrad.addColorStop(0.2, '#7a7a8a'); segGrad.addColorStop(0.45, '#9a9aaa'); segGrad.addColorStop(0.55, '#8a8a9a'); segGrad.addColorStop(0.8, '#6a6a7a'); segGrad.addColorStop(1, '#4a4a5a'); ctx.strokeStyle = segGrad; ctx.lineWidth = segWidth * 2; ctx.lineCap = 'butt'; ctx.beginPath(); // Shorten segment slightly so ball joints are visible between const shortenFactor = 0.85; const midX = (p1.x + p2.x) / 2; const midY = (p1.y + p2.y) / 2; const halfDX = (p2.x - p1.x) * shortenFactor / 2; const halfDY = (p2.y - p1.y) * shortenFactor / 2; ctx.moveTo(midX - halfDX, midY - halfDY); ctx.lineTo(midX + halfDX, midY + halfDY); ctx.stroke(); // Segment outline for definition ctx.strokeStyle = 'rgba(30, 30, 40, 0.35)'; ctx.lineWidth = segWidth * 2 + 2; ctx.beginPath(); ctx.moveTo(midX - halfDX, midY - halfDY); ctx.lineTo(midX + halfDX, midY + halfDY); ctx.stroke(); } // === BALL JOINTS (at each segment connection point) === for (let i = 1; i < points.length - 1; i++) { const p = points[i]; const jointRadius = 10 - i * 0.8; // Ball joint outer shell (dark ring) ctx.fillStyle = '#3a3a4a'; ctx.beginPath(); ctx.arc(p.x, p.y, jointRadius + 2, 0, Math.PI * 2); ctx.fill(); // Ball joint sphere (shiny metallic) const ballGrad = ctx.createRadialGradient( p.x - jointRadius * 0.3, p.y - jointRadius * 0.3, 0, p.x, p.y, jointRadius ); ballGrad.addColorStop(0, '#aaaabc'); ballGrad.addColorStop(0.4, '#7a7a8a'); ballGrad.addColorStop(0.8, '#5a5a6a'); ballGrad.addColorStop(1, '#3a3a4a'); ctx.fillStyle = ballGrad; ctx.beginPath(); ctx.arc(p.x, p.y, jointRadius, 0, Math.PI * 2); ctx.fill(); // Specular highlight on ball ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'; ctx.beginPath(); ctx.arc(p.x - jointRadius * 0.3, p.y - jointRadius * 0.35, jointRadius * 0.35, 0, Math.PI * 2); ctx.fill(); } // === NEEDLE ASSEMBLY (at the end of the tentacle) === const endX = endPoint.x; const endY = endPoint.y; // End pivot joint (larger, where syringe mounts) ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(endX, endY, 13, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(endX, endY, 7, 0, Math.PI * 2); ctx.fill(); // Syringe rotated to point toward zombie center // Calculate angle from end point toward zombie const toZombieAngle = Math.atan2(zombie.baseY - endY, zombie.baseX - endX); const syringeAngle = toZombieAngle; ctx.save(); ctx.translate(endX, endY); ctx.rotate(syringeAngle); // Barrel ctx.fillStyle = 'rgba(200, 245, 220, 0.75)'; ctx.strokeStyle = '#777'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.roundRect(8, -7, 40, 14, 4); ctx.fill(); ctx.stroke(); // Green serum const serumFill = 1 - arm.jabProgress * 0.3; ctx.fillStyle = 'rgba(0, 220, 80, 0.6)'; ctx.beginPath(); ctx.roundRect(10, -5, 36 * serumFill, 10, 2); ctx.fill(); // Graduation marks ctx.strokeStyle = 'rgba(100, 100, 100, 0.4)'; ctx.lineWidth = 0.8; for (let m = 0; m < 4; m++) { ctx.beginPath(); ctx.moveTo(14 + m * 9, -7); ctx.lineTo(14 + m * 9, -4); ctx.stroke(); } // Plunger ctx.fillStyle = '#888'; ctx.beginPath(); ctx.roundRect(-6, -5, 16, 10, 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.fillRect(-10, -7, 5, 14); // Needle hub ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(48, -4); ctx.lineTo(54, -2); ctx.lineTo(54, 2); ctx.lineTo(48, 4); ctx.closePath(); ctx.fill(); // Needle - extends during jab const baseNeedleLen = 30; const jabExtension = arm.jabProgress * 45; const needleLen = baseNeedleLen + jabExtension; ctx.strokeStyle = '#d0d0d0'; ctx.lineWidth = 2.5; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(54, 0); ctx.lineTo(54 + needleLen, 0); ctx.stroke(); // Needle shine ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(56, -0.8); ctx.lineTo(54 + needleLen - 3, -0.8); ctx.stroke(); // Needle tip ctx.fillStyle = '#eee'; ctx.beginPath(); ctx.moveTo(54 + needleLen, 0); ctx.lineTo(54 + needleLen - 5, -2); ctx.lineTo(54 + needleLen - 5, 2); ctx.closePath(); ctx.fill(); // Green drip during jab if (arm.jabProgress > 0.6) { const dripAlpha = (arm.jabProgress - 0.6) / 0.4; ctx.fillStyle = `rgba(0, 200, 80, ${dripAlpha * 0.8})`; ctx.beginPath(); ctx.ellipse(54 + needleLen + 2, 3, 2.5, 4, 0.2, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // End syringe rotation ctx.restore(); // End arm save } // Helper: Draw all arms function drawAllArms() { arms.forEach(arm => drawArm(arm)); } // Phase 1: Arms descend from ceiling one at a time (2000ms) playSound('crusher_sound', 0.4); await animate(2000 / speed, (t, dt) => { animTime += dt; // Each arm deploys in sequence (staggered start times) arms.forEach((arm, i) => { const armDelay = i * 0.18; // Stagger: 0, 0.18, 0.36, 0.54 const armDuration = 0.35; // Each arm takes 35% of total time to extend const armT = Math.max(0, (t - armDelay) / armDuration); if (armT > 0) { // Ease-out cubic for smooth deceleration at end const ease = 1 - Math.pow(1 - Math.min(armT, 1), 3); arm.extension = ease; // Play mechanical sound when each arm starts deploying if (armT > 0 && armT < 0.03) { playSound('crusher_sound', 0.3); } } }); drawAllArms(); // Zombie notices the arms deploying and gets nervous if (t > 0.25) { zombie.applyImpulse((Math.random() - 0.5) * 12, -5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 8; } } // Zombie tries to back away if (t > 0.6) { if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - (t - 0.6) * 30; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + (t - 0.6) * 30; } } }); // Brief pause - arms are fully extended, needles poised and ready (600ms) await animate(600 / speed, (t, dt) => { animTime += dt; drawAllArms(); // Zombie looks around at all four needles surrounding it if (zombie.parts.head.attached) { // Quick darting glances left-right-left-right const lookPhase = Math.floor(t * 6) % 4; const lookAngles = [-12, 12, -8, 10]; const targetAngle = lookAngles[lookPhase]; zombie.parts.head.rotation += (targetAngle - zombie.parts.head.rotation) * 0.15; } zombie.applyImpulse((Math.random() - 0.5) * 6, -2); }); // Phase 2: Needles take turns jabbing the zombie (4500ms) zombie.isRagdolling = true; // Jab sequence: alternating pattern (left-right-left-right, upper then lower) const jabOrder = [0, 2, 1, 3, 2, 0, 3, 1, 0, 3, 1, 2]; let currentJab = 0; let jabPhase = 'wait'; // 'wait', 'extend', 'hold', 'retract' let jabTimer = 0.25; // Initial wait before first jab const jabExtendTime = 0.18; // How long the jab takes to extend const jabHoldTime = 0.12; // How long needle stays in const jabRetractTime = 0.14; // How long to pull back const jabPauseTime = 0.18; // Pause between jabs await animate(4500 / speed, (t, dt) => { animTime += dt; // Update jab state machine jabTimer -= dt; if (jabPhase === 'wait' && jabTimer <= 0) { // Start next jab jabPhase = 'extend'; jabTimer = jabExtendTime; const armIdx = jabOrder[currentJab % jabOrder.length]; arms[armIdx]._jabbing = true; playSound('beartrap_sound', 0.35); } else if (jabPhase === 'extend') { // Needle extends toward zombie const armIdx = jabOrder[currentJab % jabOrder.length]; arms[armIdx].jabProgress += dt / jabExtendTime; if (arms[armIdx].jabProgress >= 1) { arms[armIdx].jabProgress = 1; jabPhase = 'hold'; jabTimer = jabHoldTime; // === JAB HIT! === const arm = arms[armIdx]; const jabDir = arm.side === 'left' ? 1 : -1; // Zombie flinches from the injection zombie.applyImpulse( jabDir * (30 + Math.random() * 25), -10 + (Math.random() - 0.5) * 15 ); // Extra limb flailing on hit for (const limbName in zombie.parts) { const limb = zombie.parts[limbName]; if (limb && limb.attached && limbName !== 'torso') { limb.angularVelocity += (Math.random() - 0.5) * 80; } } // Green serum splash particles at injection point const injectX = arm.side === 'left' ? arm.targetX + 60 : arm.targetX - 60; const injectY = arm.targetY; for (let i = 0; i < 8; i++) { const angle = Math.random() * Math.PI * 2; const spd = 20 + Math.random() * 60; spawnParticles(injectX, injectY, 1, { color: Math.random() > 0.3 ? '#00cc44' : '#88ffaa', vx: Math.cos(angle) * spd + jabDir * 15, vy: Math.sin(angle) * spd - 10, size: 2 + Math.random() * 4, life: 0.4 + Math.random() * 0.3, gravity: 150, type: 'circle' }); } // Injection sound playSound('inflate_sound', 0.4); } } else if (jabPhase === 'hold' && jabTimer <= 0) { // Start retracting jabPhase = 'retract'; jabTimer = jabRetractTime; } else if (jabPhase === 'retract') { // Needle retracts const armIdx = jabOrder[currentJab % jabOrder.length]; arms[armIdx].jabProgress -= dt / jabRetractTime; if (arms[armIdx].jabProgress <= 0) { arms[armIdx].jabProgress = 0; arms[armIdx]._jabbing = false; jabPhase = 'wait'; jabTimer = jabPauseTime + Math.random() * 0.08; currentJab++; } } drawAllArms(); // Zombie reacts - head shakes, body flinches if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 14) * 10; } // Arms try to push away / shield (defensive pose) if (zombie.parts.leftUpperArm.attached) { zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - 25 + Math.sin(t * 12) * 15; } if (zombie.parts.rightUpperArm.attached) { zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + 25 - Math.sin(t * 12 + 1.5) * 15; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = 15 + Math.sin(t * 15) * 10; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -15 - Math.sin(t * 15 + 1) * 10; } }); // Phase 3: Arms retract back to ceiling (1000ms) playSound('crusher_sound', 0.3); await animate(1000 / speed, (t, dt) => { animTime += dt; // All arms retract simultaneously arms.forEach(arm => { arm.extension = Math.max(0, 1 - t * 1.3); // Slightly faster retraction arm.jabProgress = 0; }); drawAllArms(); // Zombie sways, disoriented from injections zombie.applyImpulse((Math.random() - 0.5) * 12, (Math.random() - 0.5) * 6); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 5) * (8 - t * 6); } zombie.parts.torso.rotation = Math.sin(t * 4) * (3 + t * 4); }); // === CONDITIONAL: Check specimen count to determine outcome === const specimenCount = window.gameConfig.stats.killCount; if (specimenCount < 39) { // ============================================================ // INSUFFICIENT SPECIMENS PATH: Zombie rejects the serum // ============================================================ // Phase 4a: Zombie smoothly turns yellow (2500ms) const originalBodyColor = zombie.bodyColor; const originalClothingColor = zombie.clothingColor; const yellowBody = '#d4c520'; // Sickly yellow-green const yellowClothing = '#8a7a10'; // Darker yellow for clothing zombie.isRagdolling = false; zombie.customPose = true; await animate(2500 / speed, (t, dt) => { // Smooth lerp from green to yellow zombie.bodyColor = zombie.lerpColor(originalBodyColor, yellowBody, t); zombie.clothingColor = zombie.lerpColor(originalClothingColor, yellowClothing, t); // Zombie stands still but trembles slightly zombie.parts.torso.rotation = Math.sin(t * 8) * (1 + t * 3); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 6) * (1 + t * 2); } // Yellow-green particles leak from injection sites if (Math.random() < 0.2 * t) { spawnParticles( zombie.baseX + (Math.random() - 0.5) * 70, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: Math.random() > 0.5 ? '#d4c520' : '#aaaa00', vx: (Math.random() - 0.5) * 15, vy: -10 - Math.random() * 15, size: 2 + Math.random() * 4, life: 0.6 + Math.random() * 0.3, gravity: -20, type: 'circle' } ); } }); // Zombie is now fully yellow zombie.bodyColor = yellowBody; zombie.clothingColor = yellowClothing; // Phase 4b: Eyes swell in pulses then burst (3000ms) // Save original eye parameters const origLeftEyeSize = zombie.faceParams.leftEyeSize; const origRightEyeSize = zombie.faceParams.rightEyeSize; let eyesBurst = false; await animate(3000 / speed, (t, dt) => { // Keep zombie still with slight tremor zombie.parts.torso.rotation = Math.sin(t * 10) * 2; if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 8) * 3; } if (!eyesBurst) { // Pulsing eye swell: 4 pulses, each bigger than the last // Each pulse: grow fast, shrink slightly, grow bigger const numPulses = 4; const pulsePhase = t * numPulses; const currentPulse = Math.floor(pulsePhase); const pulseT = pulsePhase - currentPulse; // 0-1 within current pulse // Base scale grows with each pulse (1.0, 1.5, 2.2, 3.0) const baseScales = [1.0, 1.5, 2.2, 3.0]; const targetScale = currentPulse < numPulses ? baseScales[Math.min(currentPulse, 3)] : 3.0; // Within each pulse: quick swell up (60%), slight retreat (40%) let pulseScale; if (pulseT < 0.6) { // Swell up quickly const swellT = pulseT / 0.6; const easeOut = 1 - Math.pow(1 - swellT, 2); pulseScale = targetScale * (0.8 + easeOut * 0.2); } else { // Slight retreat const retreatT = (pulseT - 0.6) / 0.4; pulseScale = targetScale * (1.0 - retreatT * 0.1); } // Apply eye size multiplier zombie.faceParams.leftEyeSize = origLeftEyeSize * pulseScale; zombie.faceParams.rightEyeSize = origRightEyeSize * pulseScale; // Recalculate eye X positions to prevent overlap with larger eyes const getEyeWidthMult = (shape) => { switch(shape) { case 0: return 1.0; case 1: return 1.2; case 2: return 1.3; default: return 1.0; } }; const leftW = zombie.faceParams.leftEyeSize * getEyeWidthMult(zombie.faceParams.leftEyeShape); const rightW = zombie.faceParams.rightEyeSize * getEyeWidthMult(zombie.faceParams.rightEyeShape); const minGap = 4; zombie.faceParams.leftEyeX = -(leftW + minGap / 2); zombie.faceParams.rightEyeX = rightW + minGap / 2; // Update pupil positions to match new eye positions zombie.faceParams.leftPupilX = zombie.faceParams.leftEyeX; zombie.faceParams.rightPupilX = zombie.faceParams.rightEyeX; // Yellow veiny glow around eyes during swelling if (pulseScale > 1.5) { const glowIntensity = (pulseScale - 1.5) / 1.5; const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; ctx.save(); ctx.translate(headWorldX, headWorldY); ctx.scale(scale, scale); ctx.fillStyle = `rgba(220, 200, 0, ${glowIntensity * 0.3})`; ctx.shadowColor = '#ffcc00'; ctx.shadowBlur = 10 * glowIntensity; ctx.beginPath(); ctx.ellipse(zombie.faceParams.leftEyeX, zombie.faceParams.leftEyeY, zombie.faceParams.leftEyeSize + 4, zombie.faceParams.leftEyeSize + 6, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(zombie.faceParams.rightEyeX, zombie.faceParams.rightEyeY, zombie.faceParams.rightEyeSize + 4, zombie.faceParams.rightEyeSize + 6, 0, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); } // Play sound on each pulse peak if (pulseT < 0.05 && currentPulse > 0 && currentPulse <= 3) { playSound('inflate_sound', 0.3 + currentPulse * 0.1); } // BURST at the very end (last 5%) if (t > 0.95 && !eyesBurst) { eyesBurst = true; playSound('explosion_sound', 0.5); // Yellow goo explosion from eye positions const scale = zombie.scale * zombie.globalScale; const headWorldX = zombie.baseX + zombie.parts.head.x * scale; const headWorldY = zombie.baseY + zombie.parts.head.y * scale; const leftEyeWorldX = headWorldX + zombie.faceParams.leftEyeX * scale; const leftEyeWorldY = headWorldY + zombie.faceParams.leftEyeY * scale; const rightEyeWorldX = headWorldX + zombie.faceParams.rightEyeX * scale; const rightEyeWorldY = headWorldY + zombie.faceParams.rightEyeY * scale; // Burst particles from both eyes [{ x: leftEyeWorldX, y: leftEyeWorldY }, { x: rightEyeWorldX, y: rightEyeWorldY }].forEach(eye => { for (let i = 0; i < 20; i++) { const angle = Math.random() * Math.PI * 2; const spd = 60 + Math.random() * 200; spawnParticles(eye.x, eye.y, 1, { color: Math.random() > 0.3 ? '#d4c520' : '#ffee44', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 30, size: 4 + Math.random() * 8, life: 0.8 + Math.random() * 0.5, gravity: 250, type: Math.random() > 0.7 ? 'chunk' : 'circle' }); } }); // Override eye color to black (empty sockets) zombie.faceParams.eyeColor = '#0a0a0a'; zombie.faceParams.leftEyeSize = origLeftEyeSize * 1.3; zombie.faceParams.rightEyeSize = origRightEyeSize * 1.3; zombie.faceParams.bloodshotLevel = 0; zombie.faceParams.pupilSize = 0; // No pupils - empty holes // Recalculate positions for burst eyes const lW = zombie.faceParams.leftEyeSize * getEyeWidthMult(zombie.faceParams.leftEyeShape); const rW = zombie.faceParams.rightEyeSize * getEyeWidthMult(zombie.faceParams.rightEyeShape); zombie.faceParams.leftEyeX = -(lW + minGap / 2); zombie.faceParams.rightEyeX = rW + minGap / 2; zombie.faceParams.leftPupilX = zombie.faceParams.leftEyeX; zombie.faceParams.rightPupilX = zombie.faceParams.rightEyeX; } } }); // Brief hold with empty eye sockets - eerie silence (600ms) await animate(600 / speed, (t, dt) => { zombie.parts.torso.rotation = Math.sin(t * 5) * (3 + t * 5); if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(t * 4) * 3; } }); // Phase 4c: Flash "INSUFFICIENT SPECIMENS" in red text // Text flashes 3 times then stays visible during disintegration let textFlashActive = true; const flashText = 'INSUFFICIENT SPECIMENS'; await animate(1500 / speed, (t, dt) => { // 3 flashes: on-off-on-off-on (stays on at end) const flashPhase = t * 5; // 5 half-periods = 2.5 flashes const flashOn = Math.sin(flashPhase * Math.PI) > 0 || t > 0.8; if (flashOn) { ctx.save(); ctx.fillStyle = `rgba(255, 20, 20, ${0.85 + Math.sin(t * 30) * 0.15})`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 20 + Math.sin(t * 20) * 8; ctx.font = 'bold 64px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Dark outline for readability ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 8; ctx.strokeText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.fillText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.shadowBlur = 0; ctx.restore(); } // Screen flash red on each toggle if (t < 0.7) { const flashIntensity = Math.abs(Math.sin(flashPhase * Math.PI)); if (flashIntensity > 0.9) { ctx.fillStyle = `rgba(255, 0, 0, 0.08)`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } } }); // Phase 4d: Sequential body part disintegration into yellow mist (similar to possession) zombie.noBlood = true; zombie.customPose = false; zombie.isRagdolling = true; const scale = zombie.scale * zombie.globalScale; // Body parts in sequence order (extremities first, torso last) const partBurstOrder = [ 'leftForearm', 'rightForearm', 'leftLowerLeg', 'rightLowerLeg', 'leftUpperArm', 'rightUpperArm', 'leftThigh', 'rightThigh', 'head', 'torso' ]; // World positions for each part const partWorldPositions = { head: { x: 0, y: -115 }, torso: { x: 0, y: 0 }, leftUpperArm: { x: -48, y: -30 }, rightUpperArm: { x: 48, y: -30 }, leftForearm: { x: -48, y: 60 }, rightForearm: { x: 48, y: 60 }, leftThigh: { x: -22, y: 120 }, rightThigh: { x: 22, y: 120 }, leftLowerLeg: { x: -22, y: 200 }, rightLowerLeg: { x: 22, y: 200 } }; // Explode each part one at a time with a short delay between for (let i = 0; i < partBurstOrder.length; i++) { const partName = partBurstOrder[i]; const part = zombie.parts[partName]; if (!part || !part.visible) continue; // Get world position of this part const partPos = partWorldPositions[partName] || { x: 0, y: 0 }; const partWorldX = zombie.baseX + partPos.x * scale; const partWorldY = zombie.baseY + partPos.y * scale; // Hide the part instantly part.visible = false; part.attached = false; // Play a sound for each burst if (i === partBurstOrder.length - 1) { playSound('explosion_sound', 0.6); } else { playSound('crush_sound', 0.25 + i * 0.02); } // Yellow mist particles from this part's position const mistCount = partName === 'torso' ? 45 : (partName === 'head' ? 30 : 20); for (let p = 0; p < mistCount; p++) { const angle = Math.random() * Math.PI * 2; const spd = 30 + Math.random() * 180; spawnParticles( partWorldX + (Math.random() - 0.5) * 30, partWorldY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.4 ? '#d4c520' : (Math.random() > 0.5 ? '#aaaa00' : '#ffee44'), vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 40, size: 4 + Math.random() * 8, life: 1.8 + Math.random() * 1.5, gravity: -40 + Math.random() * 60, type: 'circle', shrink: true } ); } // A few darker chunks per part for (let p = 0; p < 4; p++) { const angle = Math.random() * Math.PI * 2; const spd = 50 + Math.random() * 120; spawnParticles(partWorldX, partWorldY, 1, { color: Math.random() > 0.5 ? '#8a7a10' : '#665500', vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd - 30, size: 6 + Math.random() * 10, life: 1.0 + Math.random() * 0.8, gravity: 120, type: 'chunk' }); } // Brief pause between each part explosion (150ms) // Keep zombie vibrating during pause and show red text await animate(150 / speed, (t, dt) => { const vibIntensity = 10; zombie.baseX = savedBaseX + Math.sin(Date.now() * 0.04) * vibIntensity; zombie.baseY = savedBaseY + Math.cos(Date.now() * 0.03) * vibIntensity * 0.5; zombie.applyImpulse((Math.random() - 0.5) * 40, (Math.random() - 0.5) * 20); // Keep showing red text during disintegration ctx.save(); ctx.fillStyle = `rgba(255, 20, 20, ${0.7 + Math.sin(Date.now() * 0.008) * 0.2})`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 15; ctx.font = 'bold 64px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 8; ctx.strokeText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.fillText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.shadowBlur = 0; ctx.restore(); }); } // Reset position zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; // Brief yellow flash after all parts have disintegrated await animate(200 / speed, (t, dt) => { ctx.fillStyle = `rgba(212, 197, 32, ${(1 - t) * 0.3})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Red text fading out ctx.save(); ctx.fillStyle = `rgba(255, 20, 20, ${(1 - t) * 0.8})`; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 15 * (1 - t); ctx.font = 'bold 64px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = `rgba(0,0,0,${0.85 * (1 - t)})`; ctx.lineWidth = 8; ctx.strokeText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.fillText(flashText, CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.2); ctx.shadowBlur = 0; ctx.restore(); }); // Let the yellow mist settle await animate(1800 / speed, () => {}); // Zombie is already fully disintegrated - no need to open trap door zombie = null; } else { // ============================================================ // SUFFICIENT SPECIMENS PATH (39+): Cure succeeds! // Zombie smoothly morphs into a human // ============================================================ // Pick random human skin tone (realistic range from fair to deep) const humanSkinTones = [ '#ffe0bd', // Fair porcelain '#f7c9a0', // Light peach '#f0b687', // Warm peach '#e5a073', // Light golden '#d4956b', // Sandy tan '#c68642', // Warm caramel '#a67040', // Medium olive '#8d5524', // Rich brown '#764428', // Deep chestnut '#5c3317', // Dark brown '#3b1e0e', // Deep espresso '#6b4f3b', // Warm umber '#c49a6c', // Honey tan '#b8804e', // Toasted almond '#9e6b3a' // Bronze ]; const targetSkinColor = humanSkinTones[Math.floor(Math.random() * humanSkinTones.length)]; // Pick random human hair color const humanHairColors = [ '#2a1a0a', // Very dark brown / near black '#3d2314', // Dark brown '#5a3a1e', // Medium brown '#8b6914', // Light brown / auburn '#4a2a10', // Chestnut '#1a1a1a', // Black '#6b4c2a', // Warm brown '#3a2a18', // Dark brown '#7a5030', // Auburn '#c8a050' // Dirty blonde ]; // Pick a hair color that's visually distinct from the chosen skin tone // Keep trying until we get one with enough contrast let targetHairColor; const hexToLum = (hex) => { const r = parseInt(hex.slice(1,3), 16); const g = parseInt(hex.slice(3,5), 16); const b = parseInt(hex.slice(5,7), 16); return r * 0.299 + g * 0.587 + b * 0.114; }; const skinLum = hexToLum(targetSkinColor); let attempts = 0; do { targetHairColor = humanHairColors[Math.floor(Math.random() * humanHairColors.length)]; attempts++; } while (Math.abs(hexToLum(targetHairColor) - skinLum) < 40 && attempts < 20); // Save original zombie values for lerping const origBodyColor = zombie.bodyColor; const origHairColor = zombie.faceParams.hairColor; const origEyeColor = zombie.faceParams.eyeColor; const origBloodshotLevel = zombie.faceParams.bloodshotLevel; const origDecayPatches = JSON.parse(JSON.stringify(zombie.faceParams.decayPatches)); const origMouthHeight = zombie.faceParams.mouthHeight; const origMouthWidth = zombie.faceParams.mouthWidth; const origLeftEyeSize = zombie.faceParams.leftEyeSize; const origRightEyeSize = zombie.faceParams.rightEyeSize; const origPupilSize = zombie.faceParams.pupilSize; const origLeftEyeTilt = zombie.faceParams.leftEyeTilt; const origRightEyeTilt = zombie.faceParams.rightEyeTilt; const origNoseSize = zombie.faceParams.noseSize; const origNoseSkew = zombie.faceParams.noseSkew; const origLipThickness = zombie.faceParams.lipThickness; const origMouthSkew = zombie.faceParams.mouthSkew; const origHasGash = zombie.faceParams.hasGash; const origVeinCount = zombie.faceParams.veinCount; const origWarts = zombie.faceParams.warts; const origBrowFurrow = zombie.faceParams.browFurrow; const origCheekSunken = zombie.faceParams.cheekSunken; const origTongueOut = zombie.faceParams.tongueOut; const origDrooling = zombie.faceParams.drooling; const origUpperTeeth = JSON.parse(JSON.stringify(zombie.faceParams.upperTeeth || [])); const origLowerTeeth = JSON.parse(JSON.stringify(zombie.faceParams.lowerTeeth || [])); // Target "normal" values for human features const targetEyeColor = '#f8f8f8'; // White/normal sclera const targetMouthHeight = 0.5; // Virtually closed - just a thin line const targetMouthWidth = 14; // Wider for a gentle smile curve const targetMouthShape = 0; // Oval (smooth) const targetMouthY = 33; // Natural smile position // Phase 4: Zombie stands still, begins morphing into human (5000ms) zombie.isRagdolling = false; zombie.customPose = true; // Stand zombie in calm upright pose zombie.parts.torso.rotation = 0; if (zombie.parts.head.attached) zombie.parts.head.rotation = 0; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = zombie.parts.leftForearm.restAngle; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = zombie.parts.rightForearm.restAngle; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 0; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = 0; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = zombie.parts.leftLowerLeg.restAngle; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = zombie.parts.rightLowerLeg.restAngle; await animate(5000 / speed, (t, dt) => { // Smooth easing for the transformation (slow start, smooth middle, slow end) const morphT = t < 0.1 ? t * t * 50 : // Slow start (ease in) t < 0.9 ? (t - 0.1) / 0.8 * 0.9 + 0.05 : // Linear middle 0.95 + (t - 0.9) / 0.1 * 0.05; // Slow end const smoothT = Math.min(1, Math.max(0, morphT)); // === SKIN COLOR: Green → Human skin tone === zombie.bodyColor = zombie.lerpColor(origBodyColor, targetSkinColor, smoothT); // === HAIR COLOR: Green → Human hair color === zombie.faceParams.hairColor = zombie.lerpColor(origHairColor, targetHairColor, smoothT); // Update all hair spike references to match (they read from hairColor) // === EYE COLOR: Yellow/bloodshot → Clean white === zombie.faceParams.eyeColor = zombie.lerpColor(origEyeColor, targetEyeColor, smoothT); // === BLOODSHOT: Reduce veins on eyes === zombie.faceParams.bloodshotLevel = origBloodshotLevel * (1 - smoothT); // === DECAY PATCHES: Fully fade out (skin becomes clean) === zombie.faceParams.decayPatches.forEach((patch, i) => { if (origDecayPatches[i]) { patch.depth = origDecayPatches[i].depth * (1 - smoothT); patch.w = origDecayPatches[i].w * (1 - smoothT); patch.h = origDecayPatches[i].h * (1 - smoothT); } }); // === TEETH: Scale down to 0 before mouth closes to avoid clipping === if (smoothT > 0) { zombie.faceParams.upperTeeth.forEach((t, i) => { if (origUpperTeeth && origUpperTeeth[i]) t.h = Math.max(0, origUpperTeeth[i].h * (1 - smoothT * 1.3)); }); zombie.faceParams.lowerTeeth.forEach((t, i) => { if (origLowerTeeth && origLowerTeeth[i]) t.h = Math.max(0, origLowerTeeth[i].h * (1 - smoothT * 1.3)); }); } // === EYES: Shrink to smaller, uniform human-sized eyes === // Target: both eyes same small size (7), no tilt, round shape const targetEyeSize = 7; zombie.faceParams.leftEyeSize = origLeftEyeSize + (targetEyeSize - origLeftEyeSize) * smoothT; zombie.faceParams.rightEyeSize = origRightEyeSize + (targetEyeSize - origRightEyeSize) * smoothT; // Normalize eye tilts to 0 (straight) zombie.faceParams.leftEyeTilt = origLeftEyeTilt * (1 - smoothT); zombie.faceParams.rightEyeTilt = origRightEyeTilt * (1 - smoothT); // Both eyes become round (shape 0) if (smoothT > 0.5) { zombie.faceParams.leftEyeShape = 0; zombie.faceParams.rightEyeShape = 0; } // Pupil size normalizes to proportional human size const targetPupilSize = 3; zombie.faceParams.pupilSize = origPupilSize + (targetPupilSize - origPupilSize) * smoothT; // Recalculate eye X positions for new smaller sizes const getEyeWidthMult = (shape) => { switch(shape) { case 0: return 1.0; case 1: return 1.2; case 2: return 1.3; default: return 1.0; } }; const newLeftW = zombie.faceParams.leftEyeSize * getEyeWidthMult(zombie.faceParams.leftEyeShape); const newRightW = zombie.faceParams.rightEyeSize * getEyeWidthMult(zombie.faceParams.rightEyeShape); const minGap = 4; zombie.faceParams.leftEyeX = -(newLeftW + minGap / 2); zombie.faceParams.rightEyeX = newRightW + minGap / 2; zombie.faceParams.leftPupilX = zombie.faceParams.leftEyeX; zombie.faceParams.rightPupilX = zombie.faceParams.rightEyeX; // === NOSE: Normalize to straight, normal size === zombie.faceParams.noseSize = origNoseSize + (1.0 - origNoseSize) * smoothT; zombie.faceParams.noseSkew = origNoseSkew * (1 - smoothT); // === MOUTH: Close into a natural smile === zombie.faceParams.mouthHeight = origMouthHeight + (targetMouthHeight - origMouthHeight) * smoothT; zombie.faceParams.mouthWidth = origMouthWidth + (targetMouthWidth - origMouthWidth) * smoothT; zombie.faceParams.mouthY = (zombie.faceParams.mouthY || 30) + (targetMouthY - (zombie.faceParams.mouthY || 30)) * smoothT; // Normalize mouth skew and lip thickness zombie.faceParams.mouthSkew = origMouthSkew * (1 - smoothT); zombie.faceParams.lipThickness = origLipThickness + (0.3 - origLipThickness) * smoothT; // Change mouth shape to oval (smooth closed smile) if (smoothT > 0.3) { zombie.faceParams.mouthShape = 0; // Oval (smooth) } // Hide tongue and drool for clean human mouth zombie.faceParams.tongueOut = false; zombie.faceParams.drooling = false; // === REMOVE GASH after 30% === if (smoothT > 0.3) { zombie.faceParams.hasGash = false; } // === REMOVE VEINS, WARTS & WRINKLES gradually === if (smoothT > 0.4) { zombie.faceParams.veinCount = 0; zombie.faceParams.warts = 0; zombie.faceParams.numWrinkles = 0; } // === NORMALIZE BROW (unfurrow) === if (smoothT > 0.5) { zombie.faceParams.browFurrow = false; } // === STOP TONGUE OUT & DROOLING === if (smoothT > 0.2) { zombie.faceParams.tongueOut = false; zombie.faceParams.drooling = false; } // === REDUCE CHEEK SUNKEN-NESS === zombie.faceParams.cheekSunken = origCheekSunken * (1 - smoothT); // === SCARS: Fade out === zombie.faceParams.scars.forEach(scar => { scar.width = (scar.width || 1.5) * (1 - smoothT); }); // === DRAMATIC HEALING SPARKLES during transformation === // Dense golden/white sparkle shower rising from zombie (3-5x more particles) const sparkleRate = 0.5 + smoothT * 0.5; // Increases as transformation progresses for (let sp = 0; sp < 3; sp++) { if (Math.random() < sparkleRate) { const sparkX = zombie.baseX + (Math.random() - 0.5) * 120; const sparkY = zombie.baseY + (Math.random() - 0.5) * 280; const sparkColors = ['#ffe488', '#ffffff', '#ffcc66', '#ffd700', '#fffacd', '#fff8dc']; spawnParticles(sparkX, sparkY, 1, { color: sparkColors[Math.floor(Math.random() * sparkColors.length)], vx: (Math.random() - 0.5) * 30, vy: -40 - Math.random() * 60, size: 2 + Math.random() * 6, life: 1.0 + Math.random() * 0.8, gravity: -50 - Math.random() * 30, type: 'circle' }); } } // Extra bright sparkle bursts at key moments (every ~20% of progress) const burstPhase = smoothT * 5; const burstFrac = burstPhase - Math.floor(burstPhase); if (burstFrac < 0.05 && smoothT > 0.1 && smoothT < 0.95) { for (let i = 0; i < 8; i++) { const angle = Math.random() * Math.PI * 2; const dist = 20 + Math.random() * 80; spawnParticles( zombie.baseX + Math.cos(angle) * dist, zombie.baseY + Math.sin(angle) * dist, 1, { color: '#ffffff', vx: Math.cos(angle) * 30, vy: Math.sin(angle) * 30 - 40, size: 4 + Math.random() * 6, life: 0.6 + Math.random() * 0.4, gravity: -60, type: 'circle' } ); } } // === GOD RAYS emanating from zombie center === const glowIntensity = Math.sin(smoothT * Math.PI) * 0.45; // Stronger peak if (glowIntensity > 0.02) { ctx.save(); // Large warm radial glow (base aura) const glowGrad = ctx.createRadialGradient( zombie.baseX, zombie.baseY, 20, zombie.baseX, zombie.baseY, 280 ); glowGrad.addColorStop(0, `rgba(255, 230, 140, ${glowIntensity * 0.7})`); glowGrad.addColorStop(0.3, `rgba(255, 210, 100, ${glowIntensity * 0.4})`); glowGrad.addColorStop(0.6, `rgba(255, 190, 60, ${glowIntensity * 0.15})`); glowGrad.addColorStop(1, 'rgba(255, 170, 40, 0)'); ctx.fillStyle = glowGrad; ctx.beginPath(); ctx.arc(zombie.baseX, zombie.baseY, 280, 0, Math.PI * 2); ctx.fill(); // God rays - thin bright beams radiating outward const numRays = 12; const rayTime = t * 2; // Slow rotation ctx.globalCompositeOperation = 'lighter'; for (let r = 0; r < numRays; r++) { const rayAngle = (r / numRays) * Math.PI * 2 + rayTime; const rayLength = 180 + Math.sin(rayTime * 3 + r * 1.5) * 60; const rayWidth = 3 + Math.sin(rayTime * 2 + r * 2.3) * 2; const rayAlpha = glowIntensity * (0.3 + Math.sin(rayTime * 4 + r * 1.7) * 0.15); if (rayAlpha > 0.01) { ctx.save(); ctx.translate(zombie.baseX, zombie.baseY); ctx.rotate(rayAngle); // Ray gradient (bright at center, fades outward) const rayGrad = ctx.createLinearGradient(0, 0, rayLength, 0); rayGrad.addColorStop(0, `rgba(255, 240, 180, ${rayAlpha})`); rayGrad.addColorStop(0.3, `rgba(255, 220, 120, ${rayAlpha * 0.7})`); rayGrad.addColorStop(0.7, `rgba(255, 200, 80, ${rayAlpha * 0.3})`); rayGrad.addColorStop(1, 'rgba(255, 180, 50, 0)'); ctx.fillStyle = rayGrad; // Tapered ray shape (wider at base, narrows to point) ctx.beginPath(); ctx.moveTo(20, -rayWidth); ctx.lineTo(rayLength, -0.5); ctx.lineTo(rayLength, 0.5); ctx.lineTo(20, rayWidth); ctx.closePath(); ctx.fill(); ctx.restore(); } } ctx.globalCompositeOperation = 'source-over'; // Inner bright core pulse const coreAlpha = glowIntensity * (0.5 + Math.sin(t * 8) * 0.2); const coreGrad = ctx.createRadialGradient( zombie.baseX, zombie.baseY, 0, zombie.baseX, zombie.baseY, 60 ); coreGrad.addColorStop(0, `rgba(255, 255, 240, ${coreAlpha * 0.6})`); coreGrad.addColorStop(0.4, `rgba(255, 240, 200, ${coreAlpha * 0.3})`); coreGrad.addColorStop(1, 'rgba(255, 220, 150, 0)'); ctx.fillStyle = coreGrad; ctx.beginPath(); ctx.arc(zombie.baseX, zombie.baseY, 60, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Zombie stands calmly - slight gentle breathing as it transforms const breathe = Math.sin(t * 4) * 1.5; zombie.parts.torso.rotation = breathe * 0.3; if (zombie.parts.head.attached) { // Head slowly tilts slightly downward as if looking at own hands in wonder zombie.parts.head.rotation = smoothT * 5; } }); // Transformation complete! Zombie is now fully human-looking. // Final state: human skin, normal hair, clean eyes, no decay zombie._humanSkinMode = true; // Reduces limb shading contrast for natural look zombie.bodyColor = targetSkinColor; zombie.faceParams.hairColor = targetHairColor; zombie.faceParams.eyeColor = targetEyeColor; zombie.faceParams.bloodshotLevel = 0; zombie.faceParams.hasGash = false; zombie.faceParams.veinCount = 0; zombie.faceParams.warts = 0; zombie.faceParams.browFurrow = false; zombie.faceParams.tongueOut = false; zombie.faceParams.drooling = false; zombie.faceParams.cheekSunken = 0; zombie.faceParams.mouthHeight = targetMouthHeight; zombie.faceParams.mouthWidth = targetMouthWidth; zombie.faceParams.mouthY = targetMouthY; zombie.faceParams.lipThickness = 0.3; zombie.faceParams.mouthSkew = 0; zombie.faceParams.mouthShape = 0; zombie.faceParams.decayPatches.forEach(p => { p.depth = 0; p.w = 0; p.h = 0; }); zombie.faceParams.scars.forEach(s => { s.width = 0; }); zombie.faceParams.upperTeeth = []; zombie.faceParams.lowerTeeth = []; // Brief hold - human realizes what happened (1000ms) await animate(1000 / speed, (t, dt) => { const breathe = Math.sin(t * 3) * 1.5; zombie.parts.torso.rotation = breathe * 0.3; if (zombie.parts.head.attached) { zombie.parts.head.rotation = 5 + Math.sin(t * 2) * 1; } }); // === "CURE FOUND" + Human dances off screen to the right (4000ms) === zombie.customPose = true; zombie.isRagdolling = false; let danceTime = 0; const danceStartX = zombie.baseX; const exitTargetX = CANVAS_WIDTH + 150; // Off screen right await animate(4000 / speed, (t, dt) => { danceTime += dt; // === "CURE FOUND" text pulsing in yellow === const textPulse = 0.7 + Math.sin(danceTime * 6) * 0.3; ctx.save(); ctx.fillStyle = `rgba(255, 220, 40, ${textPulse})`; ctx.shadowColor = '#ffdd00'; ctx.shadowBlur = 20 + Math.sin(danceTime * 8) * 10; ctx.font = 'bold 72px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 10; ctx.strokeText('CURE FOUND', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.fillText('CURE FOUND', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.shadowBlur = 0; ctx.restore(); // === Human dances to the right === // Move rightward with slight acceleration const moveEase = t * t * 0.3 + t * 0.7; // Starts slow, picks up zombie.baseX = danceStartX + moveEase * (exitTargetX - danceStartX); // Dance animation - bouncy, joyful movements const danceFreq = 10; // beats per second (fast, celebratory) const danceBeat = danceTime * danceFreq; // Body bob (bouncy up-down) const bobAmount = 15 + Math.sin(danceTime * 4) * 3; zombie.baseY = savedBaseY + Math.sin(danceBeat * Math.PI) * bobAmount; // Torso groove zombie.parts.torso.rotation = Math.sin(danceBeat * Math.PI * 0.5) * 8; // Head bobs with joy if (zombie.parts.head.attached) { zombie.parts.head.rotation = Math.sin(danceBeat * Math.PI * 0.7 + 0.5) * 12; } // Arms pump up in celebration! (50% slower arm movement) if (zombie.parts.leftUpperArm.attached) { const armPump = Math.abs(Math.sin(danceBeat * Math.PI * 0.5)); zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle - armPump * 70; } if (zombie.parts.rightUpperArm.attached) { const armPump = Math.abs(Math.sin(danceBeat * Math.PI * 0.5 + Math.PI * 0.3)); zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle + armPump * 70; } if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = Math.abs(Math.sin(danceBeat * Math.PI * 0.5 + 0.2)) * 50; } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -Math.abs(Math.sin(danceBeat * Math.PI * 0.5 + 0.2 + Math.PI * 0.3)) * 50; } // Legs step/bounce (walking dance) if (zombie.parts.leftThigh.attached) { zombie.parts.leftThigh.rotation = Math.sin(danceBeat * Math.PI) * 20; } if (zombie.parts.rightThigh.attached) { zombie.parts.rightThigh.rotation = Math.sin(danceBeat * Math.PI + Math.PI) * 20; } if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = Math.sin(danceBeat * Math.PI - 0.3) * 12; } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = -Math.sin(danceBeat * Math.PI + Math.PI - 0.3) * 12; } // Celebration sparkle particles trailing behind if (Math.random() < 0.4) { spawnParticles( zombie.baseX - 30 + (Math.random() - 0.5) * 40, zombie.baseY + (Math.random() - 0.5) * 150, 1, { color: Math.random() > 0.5 ? '#ffe488' : (Math.random() > 0.5 ? '#22ff44' : '#ffffff'), vx: -20 - Math.random() * 30, vy: -20 - Math.random() * 25, size: 2 + Math.random() * 4, life: 0.7 + Math.random() * 0.4, gravity: -20, type: 'circle' } ); } }); // Human is now off screen - hide zombie zombie.globalAlpha = 0; // === "APPLYING CURE" phase with door effects (5000ms) === // Text transitions from "CURE FOUND" fading to "APPLYING CURE" appearing let cureFoundFade = 1; // Fades out let applyingCureAlpha = 0; // Fades in await animate(5000 / speed, (t, dt) => { // === TEXT TRANSITIONS === // "CURE FOUND" fades out over first 15% (yellow) if (t < 0.15) { cureFoundFade = 1 - t / 0.15; const textPulse = 0.7 + Math.sin(t * 30) * 0.3; ctx.save(); ctx.fillStyle = `rgba(255, 220, 40, ${textPulse * cureFoundFade})`; ctx.shadowColor = '#ffdd00'; ctx.shadowBlur = 20 * cureFoundFade; ctx.font = 'bold 72px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = `rgba(0,0,0,${0.85 * cureFoundFade})`; ctx.lineWidth = 10; ctx.strokeText('CURE FOUND', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.fillText('CURE FOUND', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.shadowBlur = 0; ctx.restore(); } // "APPLYING CURE" fades in after 20%, pulses in yellow if (t > 0.2) { applyingCureAlpha = Math.min((t - 0.2) / 0.15, 1); const yellowPulse = 0.6 + Math.sin(t * 8) * 0.4; ctx.save(); ctx.fillStyle = `rgba(255, 220, 40, ${yellowPulse * applyingCureAlpha})`; ctx.shadowColor = '#ffdd00'; ctx.shadowBlur = 18 + Math.sin(t * 10) * 8; ctx.font = 'bold 68px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = `rgba(0,0,0,${0.85 * applyingCureAlpha})`; ctx.lineWidth = 10; ctx.strokeText('APPLYING CURE', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.fillText('APPLYING CURE', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.shadowBlur = 0; ctx.restore(); } // === DOOR EFFECTS (start at 25%) === if (t > 0.25) { const effectT = (t - 0.25) / 0.75; // 0-1 over the remaining time const effectIntensity = Math.min(effectT / 0.3, 1); // Ramps up over first 30% of effect time // --- DOOR SHAKING --- // Both entrance door panels vibrate/shake const shakeFreq = 30 + effectIntensity * 20; const shakeAmt = 3 + effectIntensity * 5; const doorShakeX = Math.sin(t * shakeFreq) * shakeAmt; const doorShakeY = Math.cos(t * shakeFreq * 0.7) * shakeAmt * 0.4; // Temporarily offset the entrance doors for shake effect // (They're drawn by the game loop, so we nudge the global positions) entranceDoors.leftX = doorShakeX * 0.5; entranceDoors.rightX = -doorShakeX * 0.5; // --- SMOKE IN WINDOWS --- // The entrance doors have observation windows - spawn smoke particles there const doorWidth = entranceDoors.width; const doorHeight = entranceDoors.height; // Window positions (approximated from drawLabDoorPanel) // Left door window: center at ~(doorWidth/2, panelMargin + panelHeight + panelGap + panelHeight/2) // Simplified: windows are roughly at 25% height of each door, centered const leftWinX = doorWidth * 0.5; const rightWinX = CANVAS_WIDTH - doorWidth * 0.5; const winY = doorHeight * 0.22; // Approximate window Y from top // Smoke billowing from behind the windows (dark, thick) if (Math.random() < 0.4 * effectIntensity) { // Left door window smoke spawnParticles(leftWinX + (Math.random() - 0.5) * 60, winY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.5 ? '#555' : '#777', vx: (Math.random() - 0.5) * 30, vy: -20 - Math.random() * 40, size: 12 + Math.random() * 18, life: 1.2 + Math.random() * 0.8, gravity: -25, type: 'circle' }); } if (Math.random() < 0.4 * effectIntensity) { // Right door window smoke spawnParticles(rightWinX + (Math.random() - 0.5) * 60, winY + (Math.random() - 0.5) * 30, 1, { color: Math.random() > 0.5 ? '#555' : '#777', vx: (Math.random() - 0.5) * 30, vy: -20 - Math.random() * 40, size: 12 + Math.random() * 18, life: 1.2 + Math.random() * 0.8, gravity: -25, type: 'circle' }); } // --- STEAM FROM UNDER DOORS --- // Steam/pressure escaping from the bottom edge of the entrance doors const doorBottomY = entranceDoors.y; // Bottom of entrance doors = top of trap door if (Math.random() < 0.5 * effectIntensity) { // Steam jets from under the doors (spread across full width) const steamX = Math.random() * CANVAS_WIDTH; spawnParticles(steamX, doorBottomY + 5, 1, { color: Math.random() > 0.3 ? 'rgba(220, 220, 220, 0.7)' : 'rgba(180, 255, 180, 0.5)', vx: (Math.random() - 0.5) * 40, vy: 15 + Math.random() * 30, size: 8 + Math.random() * 14, life: 0.6 + Math.random() * 0.4, gravity: 20, type: 'circle' }); } // --- STEAM FROM CENTER SEAM --- // Pressurized steam escaping from the vertical seam between the two doors const seamX = CANVAS_WIDTH / 2; if (Math.random() < 0.5 * effectIntensity) { const seamY = Math.random() * doorHeight; // Jets shoot outward from the seam (left and right) const jetDir = Math.random() > 0.5 ? 1 : -1; spawnParticles(seamX + jetDir * 3, seamY, 1, { color: Math.random() > 0.4 ? 'rgba(240, 240, 240, 0.8)' : 'rgba(200, 255, 200, 0.6)', vx: jetDir * (30 + Math.random() * 60), vy: (Math.random() - 0.5) * 20, size: 6 + Math.random() * 10, life: 0.5 + Math.random() * 0.4, gravity: -15, type: 'circle' }); } // Occasional larger pressure burst from seam (dramatic hiss) if (Math.random() < 0.08 * effectIntensity) { const burstY = 100 + Math.random() * (doorHeight - 200); for (let i = 0; i < 6; i++) { const dir = Math.random() > 0.5 ? 1 : -1; spawnParticles(seamX + dir * 5, burstY + (Math.random() - 0.5) * 20, 1, { color: '#ffffff', vx: dir * (50 + Math.random() * 80), vy: (Math.random() - 0.5) * 30, size: 5 + Math.random() * 8, life: 0.3 + Math.random() * 0.2, gravity: -20, type: 'circle' }); } } // --- Green/yellow glow seeping through door seam --- if (effectIntensity > 0.3) { const glowAlpha = (effectIntensity - 0.3) * 0.4; ctx.save(); ctx.fillStyle = `rgba(100, 255, 80, ${glowAlpha * (0.5 + Math.sin(t * 6) * 0.3)})`; ctx.shadowColor = '#44ff44'; ctx.shadowBlur = 15; ctx.fillRect(seamX - 4, 0, 8, doorHeight); ctx.shadowBlur = 0; ctx.restore(); // Glow from under doors ctx.save(); const underGlowAlpha = glowAlpha * (0.4 + Math.sin(t * 5) * 0.2); const underGlow = ctx.createLinearGradient(0, doorBottomY, 0, doorBottomY + 30); underGlow.addColorStop(0, `rgba(100, 255, 80, ${underGlowAlpha})`); underGlow.addColorStop(1, 'rgba(100, 255, 80, 0)'); ctx.fillStyle = underGlow; ctx.fillRect(0, doorBottomY, CANVAS_WIDTH, 30); ctx.restore(); } } }); // Reset door positions after shaking entranceDoors.leftX = 0; entranceDoors.rightX = 0; // Brief hold on "APPLYING CURE" (1000ms) await animate(1000 / speed, (t, dt) => { // Text fades out const fadeAlpha = 1 - t; const yellowPulse = 0.6 + Math.sin(t * 8) * 0.4; ctx.save(); ctx.fillStyle = `rgba(255, 220, 40, ${yellowPulse * fadeAlpha})`; ctx.shadowColor = '#ffdd00'; ctx.shadowBlur = 15 * fadeAlpha; ctx.font = 'bold 68px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = `rgba(0,0,0,${0.85 * fadeAlpha})`; ctx.lineWidth = 10; ctx.strokeText('APPLYING CURE', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.fillText('APPLYING CURE', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.shadowBlur = 0; ctx.restore(); // Last wisps of steam settling if (Math.random() < 0.15 * (1 - t)) { const steamX = Math.random() * CANVAS_WIDTH; spawnParticles(steamX, entranceDoors.y + 5, 1, { color: 'rgba(200, 200, 200, 0.4)', vx: (Math.random() - 0.5) * 20, vy: 10 + Math.random() * 15, size: 8 + Math.random() * 10, life: 0.5, gravity: 10, type: 'circle' }); } }); // === PHASE: Doors open to reveal cured human crowd cheering === // Generate the human crowd canvas (cached - only rendered once ever) generateHumanCrowdBackground(); // Temporarily swap the horde canvas so drawEntranceDoors shows humans const savedHordeCanvas = zombieHordeCanvas; zombieHordeCanvas = humanCrowdCanvas; // Open doors to reveal the cured humans await openEntranceDoors(); // Hold with doors open - crowd cheers with confetti and sparkles (5000ms) let cheerTime = 0; await animate(5000 / speed, (t, dt) => { cheerTime += dt; // The game loop draws humanCrowdCanvas behind open doors automatically. // We add lightweight animated overlays here for the cheering effect. // Subtle vertical bob overlay (simulates crowd jumping/cheering) const cheerBob = Math.abs(Math.sin(cheerTime * 5)) * 5; if (cheerBob > 1.5) { ctx.save(); ctx.globalAlpha = 0.12; ctx.drawImage(humanCrowdCanvas, 0, -cheerBob, CANVAS_WIDTH, trapDoor.y); ctx.restore(); } // Confetti particles falling from the top if (Math.random() < 0.5) { const confettiColors = ['#ff4444','#44ff44','#4444ff','#ffff44','#ff44ff','#44ffff','#ff8800','#ffffff']; spawnParticles(Math.random() * CANVAS_WIDTH, -10, 1, { color: confettiColors[Math.floor(Math.random() * confettiColors.length)], vx: (Math.random() - 0.5) * 60, vy: 30 + Math.random() * 60, size: 4 + Math.random() * 6, life: 2.5 + Math.random() * 1.5, gravity: 40, type: 'square', shrink: false }); } // Golden sparkle particles rising from the crowd if (Math.random() < 0.25) { spawnParticles( Math.random() * CANVAS_WIDTH, trapDoor.y * (0.3 + Math.random() * 0.6), 1, { color: Math.random() > 0.5 ? '#ffe488' : '#ffffff', vx: (Math.random() - 0.5) * 20, vy: -25 - Math.random() * 35, size: 2 + Math.random() * 4, life: 0.8 + Math.random() * 0.5, gravity: -25, type: 'circle' } ); } // Warm golden pulse overlay (celebratory atmosphere) const pulseAlpha = 0.025 + Math.sin(cheerTime * 3) * 0.015; ctx.fillStyle = `rgba(255, 220, 100, ${pulseAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, trapDoor.y); // "EPIC WIN" flashing inside the specimens counter display box labEpicWinMode = Math.sin(cheerTime * 8) > 0; // Drive the canvas counter display // "HUMANITY RESTORED" text fades in after 1 second if (t > 0.2) { const textAlpha = Math.min((t - 0.2) / 0.15, 1); const textPulse = 0.7 + Math.sin(cheerTime * 4) * 0.3; ctx.save(); ctx.fillStyle = `rgba(255, 255, 255, ${textPulse * textAlpha})`; ctx.shadowColor = '#ffe488'; ctx.shadowBlur = 18 + Math.sin(cheerTime * 5) * 8; ctx.font = 'bold 66px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = `rgba(0,0,0,${0.85 * textAlpha})`; ctx.lineWidth = 10; ctx.strokeText('HUMANITY RESTORED', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.fillText('HUMANITY RESTORED', CANVAS_WIDTH / 2, CANVAS_HEIGHT * 0.18); ctx.shadowBlur = 0; ctx.restore(); } }); // Don't close doors - leave them open showing the celebrating crowd // Restore horde canvas later after cinematic // === CINEMATIC ENDING: Zoom out to night building + fireworks + credits === // Brief pause before cinematic (500ms) await animate(500 / speed, () => {}); // Take a stamp of the lab scene (doors closed, empty room) const endStampCanvas = document.createElement('canvas'); endStampCanvas.width = CANVAS_WIDTH; endStampCanvas.height = CANVAS_HEIGHT; const endStampCtx = endStampCanvas.getContext('2d'); endStampCtx.drawImage(canvas, 0, 0); // Building parameters (same as wrecking ball/traffic) const endBuildingW = 200; const endBuildingH = 850; const endBuildingCenterX = CANVAS_WIDTH / 2; const endBuildingTopY = 80; const endBuildingBottomY = endBuildingTopY + endBuildingH; const endWinCols = 3; const endWinRows = 9; const endWinW = 46; const endWinH = 62; const endWinGapX = 14; const endWinGapY = 18; const endWinMarginX = (endBuildingW - endWinCols * endWinW - (endWinCols - 1) * endWinGapX) / 2; const endWinMarginY = 40; const endZombieWinRow = 4; const endZombieWinCol = 1; function getEndWinPos(row, col) { const bLeft = endBuildingCenterX - endBuildingW / 2; return { x: bLeft + endWinMarginX + col * (endWinW + endWinGapX), y: endBuildingTopY + endWinMarginY + row * (endWinH + endWinGapY) }; } // Helper: Draw the night building scene // Caches the building to an offscreen canvas for performance. // Fireworks are drawn BEHIND the building (in the sky area). let _nightBuildingCache = null; function drawNightBuildingScene(fireworkBursts) { const bLeft = endBuildingCenterX - endBuildingW / 2; // Cache building + ground to offscreen canvas (rendered once) if (!_nightBuildingCache) { _nightBuildingCache = document.createElement('canvas'); _nightBuildingCache.width = CANVAS_WIDTH; _nightBuildingCache.height = CANVAS_HEIGHT; const cCtx = _nightBuildingCache.getContext('2d'); // Transparent background - sky area stays clear so fireworks show through // Ground (opaque - occludes fireworks below building) cCtx.fillStyle = '#1a1a2a'; cCtx.fillRect(0, endBuildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - endBuildingBottomY); cCtx.fillStyle = '#222233'; cCtx.fillRect(0, endBuildingBottomY, CANVAS_WIDTH, 4); cCtx.fillStyle = '#2a2a3a'; cCtx.fillRect(0, endBuildingBottomY, CANVAS_WIDTH, 20); // Building body const bGrad = cCtx.createLinearGradient(bLeft, 0, bLeft + endBuildingW, 0); bGrad.addColorStop(0, '#2a2a3a'); bGrad.addColorStop(0.15, '#333344'); bGrad.addColorStop(0.5, '#3a3a4a'); bGrad.addColorStop(0.85, '#333344'); bGrad.addColorStop(1, '#2a2a3a'); cCtx.fillStyle = bGrad; cCtx.fillRect(bLeft, endBuildingTopY, endBuildingW, endBuildingH); cCtx.strokeStyle = '#1a1a2a'; cCtx.lineWidth = 3; cCtx.strokeRect(bLeft, endBuildingTopY, endBuildingW, endBuildingH); // Roof cap cCtx.fillStyle = '#222233'; cCtx.fillRect(bLeft - 5, endBuildingTopY - 12, endBuildingW + 10, 16); // Floor separator lines cCtx.strokeStyle = '#2a2a3a'; cCtx.lineWidth = 1; for (let row = 0; row <= endWinRows; row++) { const lineY = endBuildingTopY + endWinMarginY + row * (endWinH + endWinGapY) - endWinGapY / 2; cCtx.beginPath(); cCtx.moveTo(bLeft + 5, lineY); cCtx.lineTo(bLeft + endBuildingW - 5, lineY); cCtx.stroke(); } // Windows for (let row = 0; row < endWinRows; row++) { for (let col = 0; col < endWinCols; col++) { const wp = getEndWinPos(row, col); if (row === endZombieWinRow && col === endZombieWinCol) { cCtx.fillStyle = '#1a1a2a'; cCtx.fillRect(wp.x - 2, wp.y - 2, endWinW + 4, endWinH + 4); cCtx.fillStyle = '#ffdd66'; cCtx.fillRect(wp.x, wp.y, endWinW, endWinH); cCtx.shadowColor = '#ffcc44'; cCtx.shadowBlur = 15; cCtx.fillRect(wp.x, wp.y, endWinW, endWinH); cCtx.shadowBlur = 0; continue; } cCtx.fillStyle = '#1a1a2a'; cCtx.fillRect(wp.x - 2, wp.y - 2, endWinW + 4, endWinH + 4); if ((row * 3 + col * 7) % 5 === 0) { cCtx.fillStyle = 'rgba(255, 200, 100, 0.15)'; } else { cCtx.fillStyle = '#0a0a15'; } cCtx.fillRect(wp.x, wp.y, endWinW, endWinH); } } } // --- RENDER ORDER: Sky → Fireworks (behind) → Cached Building (on top) --- // Night sky gradient const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#050510'); skyGrad.addColorStop(0.3, '#0a0a20'); skyGrad.addColorStop(0.7, '#0f0f2a'); skyGrad.addColorStop(1, '#141428'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Stars ctx.fillStyle = '#ffffff'; const starSeeds = [0.12, 0.27, 0.41, 0.56, 0.68, 0.79, 0.88, 0.95, 0.04, 0.33, 0.52, 0.71, 0.15, 0.44, 0.63, 0.82, 0.08, 0.23, 0.37, 0.91, 0.19, 0.48, 0.66, 0.77, 0.03, 0.29, 0.55, 0.84]; for (let i = 0; i < starSeeds.length; i++) { const sx = starSeeds[i] * CANVAS_WIDTH; const sy = (starSeeds[(i + 7) % starSeeds.length]) * CANVAS_HEIGHT * 0.5; const ss = 1 + (i % 3) * 0.5; const sa = 0.4 + (i % 5) * 0.12; ctx.globalAlpha = sa; ctx.beginPath(); ctx.arc(sx, sy, ss, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; // Draw firework bursts BEHIND the building if (fireworkBursts) { fireworkBursts.forEach(fw => { if (fw.age > 0 && fw.age < fw.lifetime) { const fwT = fw.age / fw.lifetime; const expandT = Math.min(fwT / 0.25, 1); // Expand in first 25% const currentRadius = fw.radius * expandT; // Smooth power-curve fade for gentle disappearance const alpha = Math.pow(Math.max(0, 1 - fwT), 1.8) * 0.9; if (alpha > 0.01) { const numTrails = fw.numParticles; // Gravity: quadratic droop increases over lifetime const gravity = fwT * fwT * 120; for (let i = 0; i < numTrails; i++) { const angle = (i / numTrails) * Math.PI * 2 + fw.rotOffset; // Slight individual variation per particle const particleSpread = 1 + Math.sin(i * 2.3 + fw.rotOffset) * 0.15; const px = fw.x + Math.cos(angle) * currentRadius * particleSpread; const py = fw.y + Math.sin(angle) * currentRadius * particleSpread + gravity; // Particle size shrinks as it fades const particleSize = Math.max(0.3, (3.2 - fwT * 2.8) * (0.5 + alpha * 0.5)); ctx.fillStyle = `rgba(${fw.color[0]}, ${fw.color[1]}, ${fw.color[2]}, ${alpha})`; ctx.beginPath(); ctx.arc(px, py, particleSize, 0, Math.PI * 2); ctx.fill(); // Fading trail behind each particle const trailLen = currentRadius * (0.25 - fwT * 0.15) * particleSpread; if (trailLen > 3 && alpha > 0.05) { const trailStartX = px - Math.cos(angle) * trailLen; const trailStartY = py - Math.sin(angle) * trailLen - gravity * 0.4; ctx.strokeStyle = `rgba(${fw.color[0]}, ${fw.color[1]}, ${fw.color[2]}, ${alpha * 0.4})`; ctx.lineWidth = 1.5 * alpha; ctx.beginPath(); ctx.moveTo(trailStartX, trailStartY); ctx.lineTo(px, py); ctx.stroke(); } } // Center flash (brief, at start) if (fwT < 0.12) { const flashAlpha = (1 - fwT / 0.12) * 0.5; ctx.fillStyle = `rgba(255, 255, 255, ${flashAlpha})`; ctx.beginPath(); ctx.arc(fw.x, fw.y, 12 * (1 - fwT / 0.12), 0, Math.PI * 2); ctx.fill(); } } } }); } // Draw cached building ON TOP of fireworks (occludes fireworks behind building body) ctx.drawImage(_nightBuildingCache, 0, 0); } // Zoom out from lab window to building exterior at night (2500ms) const endZwp = getEndWinPos(endZombieWinRow, endZombieWinCol); const endWinCenterX = endZwp.x + endWinW / 2; const endWinCenterY = endZwp.y + endWinH / 2; await animate(2500 / speed, (t, dt) => { const easeOut = 1 - Math.pow(1 - t, 3); const scaleForWidth = CANVAS_WIDTH / endWinW; const scaleForHeight = CANVAS_HEIGHT / endWinH; const startScale = Math.max(scaleForWidth, scaleForHeight); const endScale = 1.0; const currentScale = startScale - (startScale - endScale) * easeOut; // Draw night sky (background always visible) const skyGrad = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT); skyGrad.addColorStop(0, '#050510'); skyGrad.addColorStop(0.5, '#0a0a20'); skyGrad.addColorStop(1, '#141428'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Zoom-to-point transform const screenX = (CANVAS_WIDTH / 2) + (endWinCenterX - CANVAS_WIDTH / 2) * easeOut; const screenY = (CANVAS_HEIGHT / 2) + (endWinCenterY - CANVAS_HEIGHT / 2) * easeOut; const tx = screenX - endWinCenterX * currentScale; const ty = screenY - endWinCenterY * currentScale; ctx.save(); ctx.translate(tx, ty); ctx.scale(currentScale, currentScale); // Draw night building (inline) drawNightBuildingScene(null); // Draw warm lab light in zombie's window (stamp fades to warm glow) const zwp = getEndWinPos(endZombieWinRow, endZombieWinCol); ctx.save(); ctx.beginPath(); ctx.rect(zwp.x, zwp.y, endWinW, endWinH); ctx.clip(); // Interpolate from stamp to warm glow const coverH = endWinW / (CANVAS_WIDTH / CANVAS_HEIGHT); const stampDrawH = coverH + (endWinH - coverH) * easeOut; const stampOffsetY = (endWinH - stampDrawH) / 2; ctx.globalAlpha = 1 - easeOut * 0.7; // Lab image fades ctx.drawImage(endStampCanvas, zwp.x, zwp.y + stampOffsetY, endWinW, stampDrawH); ctx.globalAlpha = easeOut * 0.8; // Warm glow fades in ctx.fillStyle = '#ffdd66'; ctx.fillRect(zwp.x, zwp.y, endWinW, endWinH); ctx.restore(); ctx.restore(); }); // Hold on night building (800ms) await animate(800 / speed, (t, dt) => { drawNightBuildingScene(null); }); // === FIREWORKS SEQUENCE (3000ms) then darken + credits === // Pre-generate firework burst data const fireworkColors = [ [255, 100, 100], // Red [100, 255, 100], // Green [100, 150, 255], // Blue [255, 255, 100], // Yellow [255, 100, 255], // Magenta [100, 255, 255], // Cyan [255, 180, 80], // Orange [200, 100, 255] // Purple ]; const fireworkBursts = []; // Track time since last firework launch for pacing let _fwTimeSinceLast = 0; const _fwInterval = 1.8; // seconds between each firework (one at a time with moments between) let _fwColorIdx = 0; // Helper: spawn a single new firework burst function spawnSingleFirework() { fireworkBursts.push({ x: 80 + Math.random() * (CANVAS_WIDTH - 160), y: 60 + Math.random() * 350, radius: 80 + Math.random() * 60, startTime: 0, lifetime: 3.5 + Math.random() * 1.5, age: 0, color: fireworkColors[_fwColorIdx % fireworkColors.length], numParticles: 20 + Math.floor(Math.random() * 15), rotOffset: Math.random() * Math.PI * 2 }); _fwColorIdx++; playSound('explosion_sound', 0.3 + Math.random() * 0.2); } // Fireworks play for 3 seconds before credits start - one at a time await animate(3000 / speed, (t, dt) => { _fwTimeSinceLast += dt; // Launch one firework at a time with pauses between if (_fwTimeSinceLast >= _fwInterval || fireworkBursts.length === 0) { _fwTimeSinceLast = 0; spawnSingleFirework(); } // Update firework ages (slower aging for dramatic bursts) fireworkBursts.forEach(fw => { if (fw.age >= 0) { fw.age += dt * 0.6; } }); // Draw night building with active fireworks drawNightBuildingScene(fireworkBursts); }); // === CREDITS SCROLL (12000ms) - building + fireworks continue as background === const creditsLines = [ '', '', '40 WAYS TO', 'KILL', 'A ZOMBIE', '', '', '- - - - - - - - - - - - -', '', 'CURE FOUND', 'THE WORLD IS SAVED!', '', '- - - - - - - - - - - - -', '', 'STARRING:', '', 'the zombies as themselves', '', '- - - - - - - - - - - - -', '', 'WEAPONS PROVIDED BY:', 'ASTRA', '', '- - - - - - - - - - - - -', '', 'SPECIAL THANKS TO:', 'chilly', 'peets', 'beanz', 'calvin', '', '- - - - - - - - - - - - -', '', 'A GAME BY', 'STURMJAGER', '', '- - - - - - - - - - - - -', '', 'thanks for playing!', '', '', '', ]; const lineHeight = 66; const totalCreditsHeight = creditsLines.length * lineHeight; const scrollDistance = CANVAS_HEIGHT + totalCreditsHeight; await animate(39000 / speed, (t, dt) => { // Continue updating firework ages during credits (slow aging) fireworkBursts.forEach(fw => { if (fw.age >= 0) fw.age += dt * 0.6; }); // Spawn new fireworks during credits - one at a time with pauses _fwTimeSinceLast += dt; if (_fwTimeSinceLast >= _fwInterval) { _fwTimeSinceLast = 0; spawnSingleFirework(); } // Draw night building scene with fireworks as background drawNightBuildingScene(fireworkBursts); // Semi-transparent dark overlay for text readability — fades in over first 4 seconds const overlayDarkness = Math.min(t / (4000 / 39000), 1) * 0.62; ctx.fillStyle = `rgba(0, 0, 0, ${overlayDarkness})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Scroll credits from bottom to top const scrollY = CANVAS_HEIGHT - t * scrollDistance; ctx.save(); ctx.fillStyle = '#ffffff'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; creditsLines.forEach((line, i) => { const lineY = scrollY + i * lineHeight; // Only draw if on screen if (lineY > -50 && lineY < CANVAS_HEIGHT + 50) { // Title line if (line === '40 WAYS TO') { ctx.fillStyle = '#ffffff'; ctx.font = 'bold 56px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'KILL') { ctx.fillStyle = '#ff3333'; ctx.font = 'bold 72px Luckiest Guy'; ctx.shadowColor = '#cc0000'; ctx.shadowBlur = 16; } else if (line === 'A ZOMBIE') { ctx.fillStyle = '#44dd44'; ctx.font = 'bold 56px Luckiest Guy'; ctx.shadowColor = '#22aa22'; ctx.shadowBlur = 12; } else if (line === 'CURE FOUND') { ctx.fillStyle = '#ffdd28'; ctx.font = 'bold 48px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'THE WORLD IS SAVED!') { ctx.fillStyle = '#44ff44'; ctx.font = 'bold 38px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'STARRING:') { ctx.fillStyle = '#ffffff'; ctx.font = 'bold 38px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'WEAPONS PROVIDED BY:' || line === 'SPECIAL THANKS TO:') { ctx.fillStyle = '#ffffff'; ctx.font = 'bold 36px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'ASTRA') { ctx.fillStyle = '#cc99ff'; ctx.font = 'bold 42px Luckiest Guy'; ctx.shadowBlur = 0; ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 4; ctx.lineJoin = 'round'; ctx.strokeText(line, CANVAS_WIDTH / 2, lineY); } else if (line === 'A GAME BY') { ctx.fillStyle = '#ffffff'; ctx.font = 'bold 38px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'STURMJAGER') { ctx.fillStyle = '#4466ff'; ctx.font = 'bold 48px Luckiest Guy'; ctx.shadowBlur = 0; ctx.strokeStyle = '#88ccff'; ctx.lineWidth = 4; ctx.lineJoin = 'round'; ctx.strokeText(line, CANVAS_WIDTH / 2, lineY); } else if (line === 'thanks for playing!') { ctx.fillStyle = '#ffffff'; ctx.font = '34px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'the zombies as themselves') { ctx.fillStyle = '#88cc88'; ctx.font = '32px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line === 'chilly' || line === 'peets' || line === 'beanz' || line === 'calvin') { ctx.fillStyle = '#ccccdd'; ctx.font = '32px Luckiest Guy'; ctx.shadowBlur = 0; } else if (line.startsWith('- - -')) { ctx.fillStyle = '#556677'; ctx.font = '26px Luckiest Guy'; ctx.shadowBlur = 0; } else { ctx.fillStyle = '#ccccdd'; ctx.font = '32px Luckiest Guy'; ctx.shadowBlur = 0; } ctx.fillText(line, CANVAS_WIDTH / 2, lineY); } }); ctx.shadowBlur = 0; ctx.restore(); }); // === RESET: Fade to black then restart on loading screen === // Restore original zombie horde canvas for future door openings zombieHordeCanvas = savedHordeCanvas; // Fade the building/fireworks scene to full black (2000ms) await animate(2000 / speed, (t, dt) => { fireworkBursts.forEach(fw => { if (fw.age >= 0) fw.age += dt; }); drawNightBuildingScene(fireworkBursts); ctx.fillStyle = `rgba(0, 0, 0, ${0.5 + t * 0.5})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // Hold on pure black for a beat await animate(600 / speed, () => { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // ── Full state reset ────────────────────────────────────────── zombie = null; particles = []; slicedPieces = []; usedMethods.clear(); window.gameConfig.stats.killCount = 0; lib.deleteUserGameState().catch(e => lib.log('Failed to delete progress: ' + e.message)); bgDarkenTarget = 0; bgDarkenOpacity = 0; labEpicWinMode = false; labCureReadyMode = false; isAnimating = false; lastMethod = null; // Reset entrance doors to closed entranceDoors.leftX = 0; entranceDoors.rightX = 0; entranceDoors.phase = 'closed'; entranceDoors.isAnimating = false; // Reset cached canvases so they regenerate fresh zombieHordeCanvas = null; humanCrowdCanvas = null; // Update counter display back to 0 updateKillCounter(); updateButtonCheckmarks(); setButtonsEnabled(false); highlightMethod(null); cancelAutoReset(); // ── Restart loading screen (assets are already loaded) ──────── const alreadyLoaded = Promise.resolve(); await playLoadingScreen(alreadyLoaded); // Loading screen complete — fade in and spawn first zombie loadingFadeIn = 1; await spawnZombieWithDoorAnimation(); setButtonsEnabled(true); } } }; // Helper: Draw vaporize beams BEHIND the zombie (called from gameLoop before zombie.draw) function drawVaporizeBeams(ctx) { const state = vaporizeBeamState; if (!state.active || state.alpha <= 0) return; const { targetX, targetY, beamProgress, alpha, flicker, corners } = state; ctx.save(); ctx.lineCap = 'round'; corners.forEach((corner) => { const dx = targetX - corner.x; const dy = targetY - corner.y; const endX = corner.x + dx * beamProgress; const endY = corner.y + dy * beamProgress; // Outer glow ctx.strokeStyle = `rgba(255, 100, 200, ${0.35 * flicker * alpha})`; ctx.lineWidth = 12 + Math.sin(Date.now() * 0.04) * 2; ctx.shadowColor = '#ff66cc'; ctx.shadowBlur = 15; ctx.beginPath(); ctx.moveTo(corner.x, corner.y); ctx.lineTo(endX, endY); ctx.stroke(); // Core beam ctx.strokeStyle = `rgba(255, 50, 180, ${0.8 * flicker * alpha})`; ctx.lineWidth = 5; ctx.shadowBlur = 8; ctx.beginPath(); ctx.moveTo(corner.x, corner.y); ctx.lineTo(endX, endY); ctx.stroke(); // Bright center ctx.strokeStyle = `rgba(255, 200, 240, ${0.5 * flicker * alpha})`; ctx.lineWidth = 2; ctx.shadowBlur = 0; ctx.beginPath(); ctx.moveTo(corner.x, corner.y); ctx.lineTo(endX, endY); ctx.stroke(); }); ctx.shadowBlur = 0; ctx.restore(); } // Helper: Draw freeze wind visuals OVER the zombie (called from gameLoop after zombie.draw) function drawFreezeWind(ctx, t, windIntensity) { // Horizontal wind streaks (cold air rushing across) ctx.save(); for (let i = 0; i < 25; i++) { const streakY = Math.random() * CANVAS_HEIGHT; const streakX = -50 + t * (CANVAS_WIDTH + 100) * (0.5 + Math.random() * 0.5); const streakLen = 80 + Math.random() * 150; const alpha = windIntensity * (0.15 + Math.random() * 0.25); ctx.strokeStyle = `rgba(200, 230, 255, ${alpha})`; ctx.lineWidth = 1.5 + Math.random() * 3; ctx.beginPath(); ctx.moveTo(streakX, streakY); ctx.lineTo(streakX + streakLen, streakY + (Math.random() - 0.5) * 10); ctx.stroke(); } ctx.restore(); // Thick cold fog/mist rolling in from left ctx.save(); const fogProgress = t * 1.3; for (let i = 0; i < 8; i++) { const fogX = -200 + fogProgress * (CANVAS_WIDTH + 400) * (0.3 + i * 0.08); const fogY = 100 + i * (CANVAS_HEIGHT / 8) + Math.sin(t * 10 + i) * 30; const fogSize = 120 + Math.random() * 80; const fogAlpha = windIntensity * 0.2 * (1 - i * 0.08); const fogGrad = ctx.createRadialGradient(fogX, fogY, 0, fogX, fogY, fogSize); fogGrad.addColorStop(0, `rgba(180, 220, 255, ${fogAlpha})`); fogGrad.addColorStop(0.5, `rgba(150, 200, 240, ${fogAlpha * 0.5})`); fogGrad.addColorStop(1, 'rgba(120, 180, 220, 0)'); ctx.fillStyle = fogGrad; ctx.beginPath(); ctx.arc(fogX, fogY, fogSize, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } // Helper: Draw the guillotine scene (frame + lever) persistently in the game loop function drawGuillotineScene(ctx) { const state = guillotineSceneState; ctx.save(); ctx.globalAlpha = state.alpha; ctx.save(); ctx.translate(state.frameX, state.frameY); ctx.scale(2, 2); // Frame posts (thick wooden beams) ctx.fillStyle = '#7a5030'; ctx.fillRect(-60, 0, 15, 300); ctx.fillRect(45, 0, 15, 300); // Top crossbar ctx.fillRect(-60, 0, 120, 20); // Wood grain detail ctx.strokeStyle = '#5a3820'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-55, 20); ctx.lineTo(-55, 290); ctx.moveTo(-50, 30); ctx.lineTo(-50, 280); ctx.moveTo(50, 20); ctx.lineTo(50, 290); ctx.moveTo(55, 30); ctx.lineTo(55, 280); ctx.stroke(); // Blade track (metal grooves) ctx.fillStyle = '#444'; ctx.fillRect(-50, 10, 5, 150); ctx.fillRect(45, 10, 5, 150); // Track shine ctx.fillStyle = '#666'; ctx.fillRect(-49, 10, 2, 150); ctx.fillRect(46, 10, 2, 150); ctx.restore(); // === BLADE AT TOP (waiting to drop) === if (state.showBladeAtTop) { ctx.save(); ctx.translate(state.frameX, state.bladeTopY); ctx.scale(2, 2); ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(-40, 0); ctx.lineTo(40, 0); ctx.lineTo(40, 20); ctx.lineTo(0, 50); ctx.lineTo(-40, 20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); // Blade edge shine ctx.strokeStyle = '#eee'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-35, 18); ctx.lineTo(0, 46); ctx.lineTo(35, 18); ctx.stroke(); ctx.restore(); } // === BLADE AT REST (after drop, at neck level) === if (state.showBladeAtRest) { ctx.save(); ctx.translate(state.frameX, state.bladeRestY); ctx.scale(2, 2); ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(-40, 0); ctx.lineTo(40, 0); ctx.lineTo(40, 20); ctx.lineTo(0, 50); ctx.lineTo(-40, 20); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); // Blood on blade ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.moveTo(-10, 15); ctx.lineTo(0, 45); ctx.lineTo(10, 15); ctx.closePath(); ctx.fill(); ctx.restore(); } // === LEVER (on the left side, at floor level) === ctx.save(); ctx.translate(state.leverX, state.leverY); // Base plate (bolted to floor) ctx.fillStyle = '#4a4a4a'; ctx.beginPath(); ctx.roundRect(-25, -8, 50, 16, 4); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Metal mounting bolts ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(-14, 0, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(14, 0, 4, 0, Math.PI * 2); ctx.fill(); // Bolt centers ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-14, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(14, 0, 2, 0, Math.PI * 2); ctx.fill(); // Lever arm (pivots from center of base plate) // -60 degrees (up/ready) to +60 degrees (down/pulled) const leverAngle = -60 + state.leverPull * 120; ctx.save(); ctx.rotate(leverAngle * Math.PI / 180); // Lever shaft (metal rod) ctx.fillStyle = '#666'; ctx.beginPath(); ctx.roundRect(-6, -90, 12, 90, 3); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); // Shaft detail lines ctx.strokeStyle = '#555'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-2, -20); ctx.lineTo(-2, -75); ctx.moveTo(2, -20); ctx.lineTo(2, -75); ctx.stroke(); // Lever handle (large red ball on top) const handleGlow = state.leverPull < 0.1; // Glow when ready to pull if (handleGlow) { ctx.shadowColor = '#ff4444'; ctx.shadowBlur = 12 + Math.sin(Date.now() * 0.006) * 5; } ctx.fillStyle = state.leverPull < 0.5 ? '#cc2222' : '#772222'; ctx.beginPath(); ctx.arc(0, -95, 18, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#661111'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.shadowBlur = 0; // Handle shine highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'; ctx.beginPath(); ctx.arc(-5, -100, 6, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // End lever arm rotation // Pivot bolt (center) ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 2; ctx.stroke(); // Label text (flashing when ready) if (state.leverPull < 0.1) { const flashAlpha = 0.7 + Math.sin(Date.now() * 0.005) * 0.3; ctx.fillStyle = `rgba(255, 200, 0, ${flashAlpha})`; ctx.font = 'bold 14px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('▼ PULL ▼', 0, 40); } ctx.restore(); // End lever save ctx.restore(); // End outer alpha save } // Helper: Draw the crusher eyeball (reusable across crusher animation phases) function drawCrusherEyeball(ctx, x, y, size, eyeColor, pupilSize, bloodshot, alpha) { ctx.save(); ctx.translate(x, y); ctx.globalAlpha = alpha; // Eyeball ctx.fillStyle = eyeColor; ctx.beginPath(); ctx.ellipse(0, 0, size, size * 1.1, 0, 0, Math.PI * 2); ctx.fill(); // Bloodshot veins ctx.strokeStyle = `rgba(180, 40, 40, ${0.5 + bloodshot * 0.3})`; ctx.lineWidth = 2.5; for (let v = 0; v < 12; v++) { const vAngle = (v / 12) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(Math.cos(vAngle) * size * 0.3, Math.sin(vAngle) * size * 0.35); ctx.quadraticCurveTo( Math.cos(vAngle + 0.1) * size * 0.6, Math.sin(vAngle + 0.1) * size * 0.7, Math.cos(vAngle) * size * 0.9, Math.sin(vAngle) * size * 1.0 ); ctx.stroke(); } // Pupil (dilated, staring) ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.arc(0, 0, pupilSize, 0, Math.PI * 2); ctx.fill(); // Pupil highlight ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(-pupilSize * 0.3, -pupilSize * 0.4, pupilSize * 0.35, 0, Math.PI * 2); ctx.fill(); // Eye outline ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.ellipse(0, 0, size, size * 1.1, 0, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } // Helper: Draw a woodchipper (2x scale, detailed industrial look) function drawWoodchipper(ctx, x, y, wheelsSpinning) { ctx.save(); ctx.translate(x, y); // === WHEELS === const wheelRot = wheelsSpinning ? Date.now() * 0.01 : 0; // Rear wheel (larger) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-60, 90, 36, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 4; ctx.stroke(); // Tire tread ctx.strokeStyle = '#333'; ctx.lineWidth = 3; for (let i = 0; i < 8; i++) { const a = wheelRot + (i / 8) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(-60 + Math.cos(a) * 28, 90 + Math.sin(a) * 28); ctx.lineTo(-60 + Math.cos(a) * 35, 90 + Math.sin(a) * 35); ctx.stroke(); } // Hub ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(-60, 90, 10, 0, Math.PI * 2); ctx.fill(); // Front wheel (smaller) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(80, 95, 28, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 3; ctx.stroke(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2.5; for (let i = 0; i < 6; i++) { const a = wheelRot + (i / 6) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(80 + Math.cos(a) * 20, 95 + Math.sin(a) * 20); ctx.lineTo(80 + Math.cos(a) * 27, 95 + Math.sin(a) * 27); ctx.stroke(); } ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(80, 95, 8, 0, Math.PI * 2); ctx.fill(); // === FRAME / CHASSIS === ctx.fillStyle = '#2a4a2a'; ctx.beginPath(); ctx.moveTo(-90, 50); ctx.lineTo(110, 50); ctx.lineTo(115, 70); ctx.lineTo(-95, 70); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#1a3a1a'; ctx.lineWidth = 2; ctx.stroke(); // === MAIN BODY (engine housing) === ctx.fillStyle = '#ff8800'; ctx.beginPath(); ctx.roundRect(-80, -50, 180, 100, 8); ctx.fill(); ctx.strokeStyle = '#cc6600'; ctx.lineWidth = 3; ctx.stroke(); // Engine details - vents ctx.fillStyle = '#222'; for (let i = 0; i < 5; i++) { ctx.fillRect(-70 + i * 25, -40, 15, 5); } // Engine warning label ctx.fillStyle = '#ffcc00'; ctx.font = 'bold 12px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('DANGER', -10, 10); ctx.font = 'bold 9px Luckiest Guy'; ctx.fillText('KEEP AWAY', -10, 25); // === HOPPER (feed opening - where zombie gets dropped in) === ctx.fillStyle = '#cc6600'; ctx.beginPath(); ctx.moveTo(-100, -50); ctx.lineTo(-80, -50); ctx.lineTo(-60, -130); ctx.lineTo(-140, -130); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#993300'; ctx.lineWidth = 3; ctx.stroke(); // Hopper inner darkness ctx.fillStyle = '#1a0a00'; ctx.beginPath(); ctx.moveTo(-95, -55); ctx.lineTo(-82, -55); ctx.lineTo(-65, -120); ctx.lineTo(-132, -120); ctx.closePath(); ctx.fill(); // Hopper rim reinforcement ctx.strokeStyle = '#888'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(-62, -128); ctx.lineTo(-138, -128); ctx.stroke(); // Safety stripes on hopper ctx.fillStyle = '#222'; for (let i = 0; i < 4; i++) { ctx.save(); ctx.translate(-118 + i * 18, -130); ctx.rotate(0.2); ctx.fillRect(0, 0, 8, 16); ctx.restore(); } // === DISCHARGE CHUTE (angled upward on right side) === ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(90, -50); ctx.lineTo(100, -50); ctx.lineTo(140, -130); ctx.lineTo(120, -135); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 2; ctx.stroke(); // Chute opening (flared end) ctx.fillStyle = '#999'; ctx.beginPath(); ctx.ellipse(130, -132, 16, 8, -0.4, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#666'; ctx.lineWidth = 2; ctx.stroke(); // Chute inner dark ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(130, -132, 10, 5, -0.4, 0, Math.PI * 2); ctx.fill(); // === ENGINE CAP (top) === ctx.fillStyle = '#333'; ctx.beginPath(); ctx.roundRect(20, -65, 60, 18, 5); ctx.fill(); // Exhaust pipe ctx.fillStyle = '#444'; ctx.fillRect(60, -80, 14, 20); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(67, -82, 8, 0, Math.PI * 2); ctx.fill(); // Smoke puff from exhaust ctx.fillStyle = 'rgba(100, 100, 100, 0.4)'; ctx.beginPath(); ctx.arc(67, -92 + Math.sin(Date.now() * 0.005) * 3, 7, 0, Math.PI * 2); ctx.fill(); // === TOWING HITCH (back/left) === ctx.fillStyle = '#555'; ctx.beginPath(); ctx.moveTo(-95, 55); ctx.lineTo(-120, 55); ctx.lineTo(-120, 65); ctx.lineTo(-95, 65); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(-120, 60, 8, 0, Math.PI * 2); ctx.fill(); // === CONTROL PANEL (side) === ctx.fillStyle = '#444'; ctx.fillRect(0, -45, 40, 25); // Buttons/lights ctx.fillStyle = '#00ff00'; ctx.beginPath(); ctx.arc(10, -35, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff0000'; ctx.beginPath(); ctx.arc(25, -35, 4, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Helper: Draw a mechanical claw descending from ceiling // x, y: claw jaw center position // openAngle: 0 = closed, 45+ = open // cableOpacity: 0-1 for fade in/out function drawMechanicalClaw(ctx, x, y, openAngle, cableOpacity) { ctx.save(); ctx.globalAlpha = cableOpacity; // === CABLE from ceiling to claw === ctx.strokeStyle = '#555'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(x, 0); // Top of screen (ceiling) ctx.lineTo(x, y - 30); ctx.stroke(); // Cable sheathing marks ctx.strokeStyle = '#666'; ctx.lineWidth = 8; for (let i = 0; i < Math.floor((y - 30) / 30); i++) { const cy = 10 + i * 30; if (cy < y - 40) { ctx.beginPath(); ctx.moveTo(x, cy); ctx.lineTo(x, cy + 8); ctx.stroke(); } } // === MOTOR HOUSING (top of claw mechanism) === ctx.fillStyle = '#4a4a4a'; ctx.beginPath(); ctx.roundRect(x - 25, y - 45, 50, 30, 5); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Motor detail ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(x, y - 30, 12, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(x, y - 30, 6, 0, Math.PI * 2); ctx.fill(); // Hydraulic pistons on sides ctx.fillStyle = '#888'; ctx.fillRect(x - 30, y - 35, 6, 25); ctx.fillRect(x + 24, y - 35, 6, 25); ctx.fillStyle = '#aaa'; ctx.fillRect(x - 28, y - 20, 4, 15); ctx.fillRect(x + 24, y - 20, 4, 15); // === CLAW JAWS (2 prongs, symmetric) === const jawLength = 60; const jawWidth = 12; // Left jaw ctx.save(); ctx.translate(x - 12, y - 10); ctx.rotate(-openAngle * Math.PI / 180); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.moveTo(-jawWidth / 2, 0); ctx.lineTo(jawWidth / 2, 0); ctx.lineTo(jawWidth / 2 - 2, jawLength); ctx.lineTo(-jawWidth / 2 + 2, jawLength); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); // Jaw teeth (gripping ridges) ctx.fillStyle = '#555'; for (let i = 0; i < 4; i++) { const ty = 15 + i * 12; ctx.fillRect(jawWidth / 2 - 4, ty, 6, 4); } // Jaw tip (pointed) ctx.fillStyle = '#777'; ctx.beginPath(); ctx.moveTo(-3, jawLength - 2); ctx.lineTo(0, jawLength + 10); ctx.lineTo(3, jawLength - 2); ctx.closePath(); ctx.fill(); ctx.restore(); // Right jaw ctx.save(); ctx.translate(x + 12, y - 10); ctx.rotate(openAngle * Math.PI / 180); ctx.fillStyle = '#666'; ctx.beginPath(); ctx.moveTo(-jawWidth / 2, 0); ctx.lineTo(jawWidth / 2, 0); ctx.lineTo(jawWidth / 2 - 2, jawLength); ctx.lineTo(-jawWidth / 2 + 2, jawLength); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); // Jaw teeth ctx.fillStyle = '#555'; for (let i = 0; i < 4; i++) { const ty = 15 + i * 12; ctx.fillRect(-jawWidth / 2 - 2, ty, 6, 4); } // Jaw tip ctx.fillStyle = '#777'; ctx.beginPath(); ctx.moveTo(-3, jawLength - 2); ctx.lineTo(0, jawLength + 10); ctx.lineTo(3, jawLength - 2); ctx.closePath(); ctx.fill(); ctx.restore(); // === PIVOT BOLTS (where jaws connect to housing) === ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(x - 12, y - 10, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + 12, y - 10, 5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(x - 12, y - 10, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + 12, y - 10, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Helper: Draw the inflate pump at position // strokeT: 0 = handle up, 1 = handle fully down (mid-stroke peak) // scaleY: 0-1 for pop-up animation function drawInflatePump(ctx, x, y, strokeT, scaleY) { ctx.save(); ctx.translate(x, y); ctx.scale(1, Math.min(scaleY, 1)); drawInflatePumpBody(ctx, strokeT); ctx.restore(); } // Helper: Draw just the pump body (used for falling animation too) function drawInflatePumpBody(ctx, strokeT) { // Base plate ctx.fillStyle = '#4a4a4a'; ctx.beginPath(); ctx.roundRect(-30, -5, 60, 14, 4); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Cylinder body (red) ctx.fillStyle = '#cc2200'; ctx.beginPath(); ctx.roundRect(-18, -75, 36, 70, 4); ctx.fill(); ctx.strokeStyle = '#991a00'; ctx.lineWidth = 2; ctx.stroke(); // Cylinder bands ctx.fillStyle = '#aa1a00'; ctx.fillRect(-20, -65, 40, 5); ctx.fillRect(-20, -35, 40, 5); // Piston shaft const handleY = -75 - 50 + strokeT * 50; // Moves down 50px on stroke ctx.fillStyle = '#aaa'; const shaftGrad = ctx.createLinearGradient(-4, 0, 4, 0); shaftGrad.addColorStop(0, '#888'); shaftGrad.addColorStop(0.5, '#ccc'); shaftGrad.addColorStop(1, '#888'); ctx.fillStyle = shaftGrad; ctx.fillRect(-4, handleY, 8, -75 - handleY); // Handle bar (T-grip) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.roundRect(-28, handleY - 10, 56, 12, 4); ctx.fill(); ctx.strokeStyle = '#111'; ctx.lineWidth = 1.5; ctx.stroke(); // Handle grip highlights ctx.fillStyle = '#444'; ctx.fillRect(-24, handleY - 8, 8, 8); ctx.fillRect(16, handleY - 8, 8, 8); // Pressure gauge (small circle on front) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(0, -50, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#334433'; ctx.beginPath(); ctx.arc(0, -50, 7, 0, Math.PI * 2); ctx.fill(); // Gauge needle (rotates with pump count) ctx.strokeStyle = '#ff4444'; ctx.lineWidth = 1.5; const needleAngle = -Math.PI * 0.7 + strokeT * Math.PI * 0.4; ctx.beginPath(); ctx.moveTo(0, -50); ctx.lineTo(Math.cos(needleAngle) * 5, -50 + Math.sin(needleAngle) * 5); ctx.stroke(); // Nozzle (where hose connects) - right side ctx.fillStyle = '#666'; ctx.fillRect(16, -48, 14, 8); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(30, -44, 5, 0, Math.PI * 2); ctx.fill(); } // Helper: Draw the zombie's teeth splattered on camera (used by inflate POP sequence) // Draws a big set of scattered, uneven zombie teeth - gross and comical function drawInflateTeeth(ctx, x, y, teethColor, upperTeeth, lowerTeeth, alpha) { ctx.save(); ctx.translate(x, y); ctx.globalAlpha = alpha; // Draw a big gum/mouth backdrop (pink fleshy oval) ctx.fillStyle = '#5a2535'; ctx.beginPath(); ctx.ellipse(0, 0, 90, 60, 0, 0, Math.PI * 2); ctx.fill(); // Inner mouth darkness ctx.fillStyle = '#3a1020'; ctx.beginPath(); ctx.ellipse(0, 5, 70, 40, 0, 0, Math.PI * 2); ctx.fill(); // Upper gum line ctx.fillStyle = '#6a3040'; ctx.beginPath(); ctx.ellipse(0, -25, 75, 18, 0, 0, Math.PI); ctx.fill(); // Lower gum line ctx.fillStyle = '#6a3040'; ctx.beginPath(); ctx.ellipse(0, 30, 70, 16, 0, Math.PI, 0); ctx.fill(); // Draw upper teeth (scaled up 4x from face size, scattered) const scale = 4; if (upperTeeth.length > 0) { upperTeeth.forEach((t, i) => { ctx.save(); ctx.translate(t.x * scale, -20); ctx.rotate((t.angle || 0) + (Math.random() - 0.5) * 0.1); ctx.fillStyle = teethColor; ctx.beginPath(); if (t.broken) { // Broken jagged tooth ctx.moveTo(-t.w * scale / 2, 0); ctx.lineTo(-t.w * scale / 4, t.h * scale * 0.6); ctx.lineTo(0, t.h * scale * 0.4); ctx.lineTo(t.w * scale / 4, t.h * scale * 0.7); ctx.lineTo(t.w * scale / 2, 0); } else { ctx.moveTo(-t.w * scale / 2, 0); ctx.lineTo(-t.w * scale / 2 + 2, t.h * scale); ctx.lineTo(t.w * scale / 2 - 2, t.h * scale); ctx.lineTo(t.w * scale / 2, 0); } ctx.closePath(); ctx.fill(); // Tooth outline ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 1.5; ctx.stroke(); // Slight yellow stain ctx.fillStyle = 'rgba(180, 160, 80, 0.2)'; ctx.fill(); ctx.restore(); }); } else { // Fallback: draw generic teeth if no face params for (let i = 0; i < 5; i++) { const tx = -40 + i * 20; ctx.fillStyle = teethColor; ctx.beginPath(); ctx.moveTo(tx - 8, -18); ctx.lineTo(tx - 6, 8); ctx.lineTo(tx + 6, 8); ctx.lineTo(tx + 8, -18); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 1.5; ctx.stroke(); } } // Draw lower teeth (fewer, smaller, pointing up) if (lowerTeeth.length > 0) { lowerTeeth.forEach((t, i) => { ctx.save(); ctx.translate(t.x * scale, 25); ctx.fillStyle = teethColor; ctx.beginPath(); if (t.broken) { ctx.moveTo(-t.w * scale / 2, 0); ctx.lineTo(0, -t.h * scale * 0.5); ctx.lineTo(t.w * scale / 2, 0); } else { ctx.moveTo(-t.w * scale / 2, 0); ctx.lineTo(-t.w * scale / 2 + 2, -t.h * scale); ctx.lineTo(t.w * scale / 2 - 2, -t.h * scale); ctx.lineTo(t.w * scale / 2, 0); } ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.restore(); }); } else { // Fallback lower teeth for (let i = 0; i < 3; i++) { const tx = -20 + i * 20; ctx.fillStyle = teethColor; ctx.beginPath(); ctx.moveTo(tx - 6, 28); ctx.lineTo(tx - 4, 12); ctx.lineTo(tx + 4, 12); ctx.lineTo(tx + 6, 28); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#a0a090'; ctx.lineWidth = 1.5; ctx.stroke(); } } // Outer gum/lip outline ctx.strokeStyle = '#3a1020'; ctx.lineWidth = 4; ctx.beginPath(); ctx.ellipse(0, 0, 90, 60, 0, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } // Helper: Draw the hose connecting pump to zombie's belly button function drawInflateHose(ctx, pumpX, pumpY, targetX, targetY, progress) { if (progress <= 0) return; // Hose starts from pump nozzle (right side) const startX = pumpX + 30; const startY = pumpY - 44; // End at target (belly button) scaled by progress const endX = startX + (targetX - startX) * progress; const endY = startY + (targetY - startY) * progress; // Control point for a nice curve (loops downward then up to belly) const cpX = (startX + targetX) / 2; const cpY = Math.max(startY, targetY) + 60; // Sags below both endpoints // Draw hose shadow ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(startX, startY + 3); ctx.quadraticCurveTo(cpX, cpY + 3, endX, endY + 3); ctx.stroke(); // Draw hose body (dark rubber) ctx.strokeStyle = '#333'; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(startX, startY); ctx.quadraticCurveTo(cpX, cpY, endX, endY); ctx.stroke(); // Hose highlight (rubber shine) ctx.strokeStyle = '#555'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(startX, startY - 2); ctx.quadraticCurveTo(cpX, cpY - 3, endX, endY - 2); ctx.stroke(); // Connection nub at belly button end (if fully connected) if (progress >= 1) { ctx.fillStyle = '#666'; ctx.beginPath(); ctx.arc(targetX, targetY, 6, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); } } // Helper: Draw a cartoon chicken function drawCartoonChicken(ctx, x, y, dir, size, color, pecking, animT) { ctx.save(); ctx.translate(x, y); ctx.scale(dir * size, size); // Body ctx.fillStyle = color; ctx.beginPath(); ctx.ellipse(0, 0, 18, 14, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5 / size; ctx.stroke(); // Wing (flapping) const wingFlap = Math.sin(animT * 30 + x * 0.1) * 15; ctx.fillStyle = color === '#f5f5f0' ? '#ddd' : darkenColorSimple(color, 0.15); ctx.beginPath(); ctx.ellipse(-3, -2 + wingFlap * 0.1, 10, 7, wingFlap * 0.02, 0, Math.PI * 2); ctx.fill(); // Head const headOffsetX = pecking ? 14 : 10; const headOffsetY = pecking ? 4 : -8; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(headOffsetX, headOffsetY, 9, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 1.2 / size; ctx.stroke(); // Comb (red) ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.arc(headOffsetX, headOffsetY - 9, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(headOffsetX + 3, headOffsetY - 8, 3, 0, Math.PI * 2); ctx.fill(); // Angry eye ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(headOffsetX + 4, headOffsetY - 1, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#111'; ctx.beginPath(); ctx.arc(headOffsetX + 5, headOffsetY - 1, 2, 0, Math.PI * 2); ctx.fill(); // Angry eyebrow ctx.strokeStyle = '#333'; ctx.lineWidth = 2 / size; ctx.beginPath(); ctx.moveTo(headOffsetX + 1, headOffsetY - 4); ctx.lineTo(headOffsetX + 7, headOffsetY - 6); ctx.stroke(); // Beak ctx.fillStyle = '#ff8800'; ctx.beginPath(); if (pecking) { // Open beak (pecking) ctx.moveTo(headOffsetX + 9, headOffsetY - 1); ctx.lineTo(headOffsetX + 20, headOffsetY + 1); ctx.lineTo(headOffsetX + 9, headOffsetY + 3); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#cc6600'; ctx.beginPath(); ctx.moveTo(headOffsetX + 9, headOffsetY + 1); ctx.lineTo(headOffsetX + 18, headOffsetY + 4); ctx.lineTo(headOffsetX + 9, headOffsetY + 3); ctx.closePath(); ctx.fill(); } else { ctx.moveTo(headOffsetX + 9, headOffsetY); ctx.lineTo(headOffsetX + 17, headOffsetY + 2); ctx.lineTo(headOffsetX + 9, headOffsetY + 4); ctx.closePath(); ctx.fill(); } // Wattle (under beak) ctx.fillStyle = '#cc2222'; ctx.beginPath(); ctx.ellipse(headOffsetX + 7, headOffsetY + 5, 3, 4, 0, 0, Math.PI * 2); ctx.fill(); // Legs ctx.strokeStyle = '#cc8800'; ctx.lineWidth = 2 / size; ctx.beginPath(); ctx.moveTo(-3, 12); ctx.lineTo(-5, 20); ctx.moveTo(-5, 20); ctx.lineTo(-9, 22); ctx.moveTo(-5, 20); ctx.lineTo(-3, 22); ctx.stroke(); ctx.beginPath(); ctx.moveTo(5, 12); ctx.lineTo(3, 20); ctx.moveTo(3, 20); ctx.lineTo(-1, 22); ctx.moveTo(3, 20); ctx.lineTo(5, 22); ctx.stroke(); // Tail feathers ctx.fillStyle = color === '#f5f5f0' ? '#ccc' : darkenColorSimple(color, 0.2); ctx.beginPath(); ctx.moveTo(-15, -2); ctx.lineTo(-22, -8); ctx.lineTo(-18, -2); ctx.lineTo(-24, -4); ctx.lineTo(-19, 2); ctx.lineTo(-22, 4); ctx.lineTo(-15, 3); ctx.closePath(); ctx.fill(); ctx.restore(); } // Simple darken helper for chicken colors function darkenColorSimple(hex, amount) { if (hex.startsWith('rgb')) return hex; const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); if (!result) return hex; const r = Math.max(0, Math.round(parseInt(result[1], 16) * (1 - amount))); const g = Math.max(0, Math.round(parseInt(result[2], 16) * (1 - amount))); const b = Math.max(0, Math.round(parseInt(result[3], 16) * (1 - amount))); return `rgb(${r},${g},${b})`; } // Helper: Draw a cartoon lawnmower function drawCartoonLawnmower(ctx, x, y, animT) { ctx.save(); ctx.translate(x, y); ctx.scale(4, 4); // Vibration effect (running engine) const vib = Math.sin(animT * 200) * 2; ctx.translate(0, vib); // === BODY === // Main housing (red) ctx.fillStyle = '#e02828'; ctx.beginPath(); ctx.roundRect(-70, -45, 140, 55, 8); ctx.fill(); ctx.strokeStyle = '#a01818'; ctx.lineWidth = 3; ctx.stroke(); // Engine top (darker, raised) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.roundRect(-40, -60, 80, 20, 5); ctx.fill(); // Exhaust pipe ctx.fillStyle = '#555'; ctx.fillRect(30, -75, 12, 20); // Smoke puffs from exhaust ctx.fillStyle = `rgba(150, 150, 150, ${0.4 + Math.sin(animT * 30) * 0.2})`; ctx.beginPath(); ctx.arc(36, -80 - Math.sin(animT * 15) * 5, 8 + Math.sin(animT * 20) * 3, 0, Math.PI * 2); ctx.fill(); // Handle bar (extends up and back) ctx.strokeStyle = '#444'; ctx.lineWidth = 6; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(-50, -40); ctx.lineTo(-70, -90); ctx.lineTo(-60, -95); ctx.stroke(); // Handle grip ctx.fillStyle = '#222'; ctx.beginPath(); ctx.roundRect(-75, -100, 20, 12, 4); ctx.fill(); // Front guard/bumper ctx.fillStyle = '#999'; ctx.fillRect(60, -30, 15, 40); // Blade housing underneath (visible from side) ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(0, 15, 65, 12, 0, 0, Math.PI * 2); ctx.fill(); // Spinning blade hint (motion lines underneath) ctx.strokeStyle = 'rgba(200, 200, 200, 0.5)'; ctx.lineWidth = 2; for (let i = 0; i < 4; i++) { const bladeAngle = animT * 2000 + i * 90; const bx = Math.cos(bladeAngle * Math.PI / 180) * 40; const by = Math.sin(bladeAngle * Math.PI / 180) * 6 + 15; ctx.beginPath(); ctx.moveTo(bx - 15, by); ctx.lineTo(bx + 15, by); ctx.stroke(); } // === WHEELS === // Front wheels (smaller) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(50, 20, 16, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(50, 20, 6, 0, Math.PI * 2); ctx.fill(); // Rear wheels (larger) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-50, 20, 20, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(-50, 20, 7, 0, Math.PI * 2); ctx.fill(); // Wheel tread marks (rotation visual) ctx.strokeStyle = '#333'; ctx.lineWidth = 2; const wheelRot = animT * 800; for (let i = 0; i < 4; i++) { const a = (wheelRot + i * 90) * Math.PI / 180; ctx.beginPath(); ctx.moveTo(-50 + Math.cos(a) * 12, 20 + Math.sin(a) * 12); ctx.lineTo(-50 + Math.cos(a) * 18, 20 + Math.sin(a) * 18); ctx.stroke(); } // === DECAL / BRANDING === ctx.fillStyle = '#ffcc00'; ctx.font = 'bold 14px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('ZOMBO', 0, -22); ctx.font = 'bold 10px Luckiest Guy'; ctx.fillText('3000', 0, -10); // Grass discharge chute (left side, back) ctx.fillStyle = '#aa1111'; ctx.beginPath(); ctx.moveTo(-70, -10); ctx.lineTo(-90, -20); ctx.lineTo(-90, 10); ctx.lineTo(-70, 5); ctx.closePath(); ctx.fill(); ctx.restore(); } // Helper: Draw a glowing portal // color: 'purple' or 'blue' // intensity: 0-1 for extra glow/energy function drawPortal(ctx, x, y, scale, spinAngle, color, intensity) { if (scale <= 0) return; intensity = intensity || 0; ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale); const isPurple = color === 'purple'; const baseColor = isPurple ? [160, 60, 255] : [60, 130, 255]; const glowColor = isPurple ? '#aa44ff' : '#4488ff'; const coreColor = isPurple ? '#dd88ff' : '#88ccff'; // Outer glow const glowSize = 75 + intensity * 15; const outerGrad = ctx.createRadialGradient(0, 0, 20, 0, 0, glowSize); outerGrad.addColorStop(0, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${0.4 + intensity * 0.2})`); outerGrad.addColorStop(0.5, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${0.15 + intensity * 0.1})`); outerGrad.addColorStop(1, `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, 0)`); ctx.fillStyle = outerGrad; ctx.beginPath(); ctx.arc(0, 0, glowSize, 0, Math.PI * 2); ctx.fill(); // Portal ring (oval, spinning) ctx.save(); ctx.rotate(spinAngle * Math.PI / 180); // Main ring ctx.strokeStyle = glowColor; ctx.lineWidth = 8 + intensity * 4; ctx.shadowColor = glowColor; ctx.shadowBlur = 20 + intensity * 15; ctx.beginPath(); ctx.ellipse(0, 0, 55, 70, 0, 0, Math.PI * 2); ctx.stroke(); // Inner ring ctx.strokeStyle = coreColor; ctx.lineWidth = 4; ctx.shadowBlur = 10; ctx.beginPath(); ctx.ellipse(0, 0, 42, 56, 0, 0, Math.PI * 2); ctx.stroke(); // Swirling energy inside const numArcs = 4; for (let i = 0; i < numArcs; i++) { const arcAngle = (i / numArcs) * Math.PI * 2 + spinAngle * 0.03; const arcR = 30 + Math.sin(spinAngle * 0.05 + i) * 10; ctx.strokeStyle = `rgba(${baseColor[0] + 60}, ${baseColor[1] + 60}, ${baseColor[2]}, ${0.4 + intensity * 0.3})`; ctx.lineWidth = 2.5; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(0, 0, arcR, arcAngle, arcAngle + Math.PI * 0.6); ctx.stroke(); } ctx.restore(); // End spin rotation // Dark center (void) const centerGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, 35); centerGrad.addColorStop(0, 'rgba(10, 5, 20, 0.8)'); centerGrad.addColorStop(0.7, `rgba(${baseColor[0] * 0.3}, ${baseColor[1] * 0.3}, ${baseColor[2] * 0.3}, 0.4)`); centerGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = centerGrad; ctx.beginPath(); ctx.arc(0, 0, 35, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); } // Helper: Draw a cartoon bear trap // openAngle: 0 = closed, 75 = fully open (jaw angle) // bloody: whether to show green goo on the teeth function drawBearTrap(ctx, x, y, openAngle, bloody) { ctx.save(); ctx.translate(x, y); // Base plate ctx.fillStyle = '#5a5a5a'; ctx.beginPath(); ctx.ellipse(0, 10, 65, 12, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 2; ctx.stroke(); // Chain (attached to base) ctx.strokeStyle = '#666'; ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(0, 15); ctx.lineTo(0, 35); ctx.lineTo(-15, 45); ctx.lineTo(15, 55); ctx.lineTo(-10, 65); ctx.stroke(); // Stake at end of chain ctx.fillStyle = '#555'; ctx.beginPath(); ctx.moveTo(-5, 62); ctx.lineTo(5, 62); ctx.lineTo(2, 80); ctx.lineTo(-2, 80); ctx.closePath(); ctx.fill(); // Spring mechanism (center) ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(0, 5, 14, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.stroke(); // Inner spring detail ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(0, 5, 7, 0, Math.PI * 2); ctx.fill(); // === TOP JAW (opens upward) === ctx.save(); ctx.translate(0, 0); ctx.rotate(-openAngle * Math.PI / 180); // Jaw bar ctx.fillStyle = '#6a6a6a'; ctx.beginPath(); ctx.moveTo(-55, -3); ctx.lineTo(55, -3); ctx.lineTo(55, 3); ctx.lineTo(-55, 3); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 1.5; ctx.stroke(); // Teeth (top jaw - point downward) const numTeeth = 7; for (let i = 0; i < numTeeth; i++) { const tx = -42 + i * 14; ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(tx - 4, -3); ctx.lineTo(tx, -22); ctx.lineTo(tx + 4, -3); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 1; ctx.stroke(); // Blood/goo on teeth when closed and bloody if (bloody && Math.random() > 0.4) { ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.arc(tx, -12, 2 + Math.random() * 2, 0, Math.PI * 2); ctx.fill(); } } ctx.restore(); // === BOTTOM JAW (opens downward) === ctx.save(); ctx.translate(0, 10); ctx.rotate(openAngle * Math.PI / 180); // Jaw bar ctx.fillStyle = '#6a6a6a'; ctx.beginPath(); ctx.moveTo(-55, -3); ctx.lineTo(55, -3); ctx.lineTo(55, 3); ctx.lineTo(-55, 3); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#444'; ctx.lineWidth = 1.5; ctx.stroke(); // Teeth (bottom jaw - point upward) for (let i = 0; i < numTeeth; i++) { const tx = -35 + i * 14; // Offset so teeth interleave ctx.fillStyle = '#888'; ctx.beginPath(); ctx.moveTo(tx - 4, 3); ctx.lineTo(tx, 22); ctx.lineTo(tx + 4, 3); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 1; ctx.stroke(); if (bloody && Math.random() > 0.4) { ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.arc(tx, 12, 2 + Math.random() * 2, 0, Math.PI * 2); ctx.fill(); } } ctx.restore(); // Rust patches on base ctx.fillStyle = 'rgba(139, 90, 43, 0.3)'; ctx.beginPath(); ctx.ellipse(-25, 8, 10, 5, 0.3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(30, 12, 8, 4, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Helper: Draw a giant industrial fan (used by fan kill animation) // bladeAngle: current rotation of blades in degrees // speedFactor: 0-1 how fast the fan appears to be spinning (controls blur/glow effects) function drawIndustrialFan(ctx, x, y, bladeAngle, speedFactor) { ctx.save(); ctx.translate(x, y); // === STAND / WHEELS === // Base frame ctx.fillStyle = '#2a3a55'; ctx.beginPath(); ctx.moveTo(-50, 110); ctx.lineTo(50, 110); ctx.lineTo(55, 125); ctx.lineTo(-55, 125); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); // Wheels ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(-35, 130, 14, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(35, 130, 14, 0, Math.PI * 2); ctx.fill(); // Wheel hubs ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(-35, 130, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(35, 130, 5, 0, Math.PI * 2); ctx.fill(); // Vertical support post ctx.fillStyle = '#354a65'; ctx.fillRect(-12, 30, 24, 85); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.strokeRect(-12, 30, 24, 85); // Support reinforcement plates ctx.fillStyle = '#555'; ctx.fillRect(-16, 45, 32, 8); ctx.fillRect(-16, 90, 32, 8); // === FAN HOUSING (circular cage) === const cageRadius = 85; // Back plate (dark circle behind blades) ctx.fillStyle = '#2a2a2a'; ctx.beginPath(); ctx.arc(0, 0, cageRadius - 5, 0, Math.PI * 2); ctx.fill(); // Spinning blur effect when at speed (shows motion) if (speedFactor > 0.3) { const blurAlpha = (speedFactor - 0.3) * 0.4; const blurGrad = ctx.createRadialGradient(0, 0, 10, 0, 0, cageRadius - 10); blurGrad.addColorStop(0, `rgba(80, 80, 90, ${blurAlpha})`); blurGrad.addColorStop(0.5, `rgba(60, 60, 70, ${blurAlpha * 0.7})`); blurGrad.addColorStop(1, `rgba(40, 40, 50, ${blurAlpha * 0.3})`); ctx.fillStyle = blurGrad; ctx.beginPath(); ctx.arc(0, 0, cageRadius - 8, 0, Math.PI * 2); ctx.fill(); } // === FAN BLADES === ctx.save(); ctx.rotate(bladeAngle * Math.PI / 180); const numBlades = 5; const bladeLength = cageRadius - 18; for (let i = 0; i < numBlades; i++) { const angle = (i / numBlades) * Math.PI * 2; ctx.save(); ctx.rotate(angle); // Blade shape - slightly curved, wider at base ctx.fillStyle = '#6a6a70'; ctx.beginPath(); ctx.moveTo(0, -8); ctx.quadraticCurveTo(bladeLength * 0.4, -12, bladeLength, -5); ctx.lineTo(bladeLength, 3); ctx.quadraticCurveTo(bladeLength * 0.4, 8, 0, 6); ctx.closePath(); ctx.fill(); // Blade highlight (makes it look 3D/metallic) ctx.fillStyle = 'rgba(200, 200, 210, 0.25)'; ctx.beginPath(); ctx.moveTo(5, -7); ctx.quadraticCurveTo(bladeLength * 0.4, -10, bladeLength * 0.8, -4); ctx.lineTo(bladeLength * 0.8, -1); ctx.quadraticCurveTo(bladeLength * 0.3, -5, 5, -3); ctx.closePath(); ctx.fill(); // Blade outline ctx.strokeStyle = '#444'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(0, -8); ctx.quadraticCurveTo(bladeLength * 0.4, -12, bladeLength, -5); ctx.lineTo(bladeLength, 3); ctx.quadraticCurveTo(bladeLength * 0.4, 8, 0, 6); ctx.closePath(); ctx.stroke(); ctx.restore(); } ctx.restore(); // End blade rotation // === MOTOR HUB (center) === ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(0, 0, 18, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); // Hub cap ctx.fillStyle = '#777'; ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2); ctx.fill(); // Center bolt ctx.fillStyle = '#444'; ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); ctx.fill(); // === PROTECTIVE CAGE (wire grid) === // Outer ring ctx.strokeStyle = '#666'; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(0, 0, cageRadius, 0, Math.PI * 2); ctx.stroke(); // Second ring (inner) ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 0, cageRadius - 15, 0, Math.PI * 2); ctx.stroke(); // Cage wire spokes (radial) ctx.strokeStyle = '#555'; ctx.lineWidth = 2.5; const numSpokes = 12; for (let i = 0; i < numSpokes; i++) { const a = (i / numSpokes) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(Math.cos(a) * 20, Math.sin(a) * 20); ctx.lineTo(Math.cos(a) * cageRadius, Math.sin(a) * cageRadius); ctx.stroke(); } // Outer cage trim ring (thick, industrial) ctx.strokeStyle = '#3a2a6e'; ctx.lineWidth = 8; ctx.beginPath(); ctx.arc(0, 0, cageRadius + 3, 0, Math.PI * 2); ctx.stroke(); // === HAZARD MARKINGS === // Yellow/black stripe on outer ring (top and bottom) ctx.fillStyle = '#cc9900'; ctx.beginPath(); ctx.arc(0, 0, cageRadius + 6, -Math.PI * 0.15, Math.PI * 0.15); ctx.lineTo(Math.cos(Math.PI * 0.15) * (cageRadius + 1), Math.sin(Math.PI * 0.15) * (cageRadius + 1)); ctx.arc(0, 0, cageRadius + 1, Math.PI * 0.15, -Math.PI * 0.15, true); ctx.closePath(); ctx.fill(); // "DANGER" label area at top ctx.fillStyle = '#cc0000'; ctx.beginPath(); ctx.roundRect(-28, -(cageRadius + 18), 56, 16, 3); ctx.fill(); ctx.fillStyle = '#fff'; ctx.font = 'bold 10px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('DANGER', 0, -(cageRadius + 6)); // === POWER GLOW when at speed === if (speedFactor > 0.5) { const glowAlpha = (speedFactor - 0.5) * 0.3; ctx.fillStyle = `rgba(150, 200, 255, ${glowAlpha})`; ctx.shadowColor = '#88bbff'; ctx.shadowBlur = 20 * speedFactor; ctx.beginPath(); ctx.arc(0, 0, cageRadius * 0.4, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } // === MOTOR HOUSING (side) === ctx.fillStyle = '#3a3a3a'; ctx.beginPath(); ctx.moveTo(-20, cageRadius - 15); ctx.lineTo(20, cageRadius - 15); ctx.lineTo(25, cageRadius + 15); ctx.lineTo(-25, cageRadius + 15); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); // Vent slits on motor housing ctx.fillStyle = '#222'; for (let i = 0; i < 4; i++) { ctx.fillRect(-15 + i * 9, cageRadius - 10, 5, 20); } ctx.restore(); } // Helper: Draw a cartoon zombie-themed vending machine // tiltAngle: rotation in degrees (0 = upright, negative = tipping left) function drawCartoonVendingMachine(ctx, x, y, tiltAngle) { ctx.save(); // Pivot from bottom-right corner when tipping left const pivotX = x + 55; const pivotY = y + 130; ctx.translate(pivotX, pivotY); ctx.rotate(tiltAngle * Math.PI / 180); ctx.translate(-pivotX, -pivotY); ctx.translate(x, y); const w = 110; // Half-width const h = 260; // Full height // Main body - dark red/maroon ctx.fillStyle = '#6a1520'; ctx.beginPath(); ctx.roundRect(-w/2, -h + 30, w, h, 6); ctx.fill(); ctx.strokeStyle = '#3a0810'; ctx.lineWidth = 3; ctx.stroke(); // Front panel - slightly lighter ctx.fillStyle = '#7a2028'; ctx.fillRect(-w/2 + 8, -h + 40, w - 16, h - 50); // Glass display window (top half) ctx.fillStyle = '#1a2a3a'; ctx.fillRect(-w/2 + 12, -h + 45, w - 24, 110); ctx.strokeStyle = '#888'; ctx.lineWidth = 2; ctx.strokeRect(-w/2 + 12, -h + 45, w - 24, 110); // Window reflection ctx.fillStyle = 'rgba(150, 200, 255, 0.12)'; ctx.beginPath(); ctx.moveTo(-w/2 + 15, -h + 48); ctx.lineTo(-w/2 + 45, -h + 48); ctx.lineTo(-w/2 + 15, -h + 100); ctx.closePath(); ctx.fill(); // Soda cans visible inside (3 rows, 3 cols) const canColors = ['#ff0000', '#0066ff', '#00aa00', '#ff6600', '#cc00cc', '#ffcc00', '#00cccc', '#ff3399', '#66ff00']; for (let row = 0; row < 3; row++) { for (let col = 0; col < 3; col++) { const cx = -w/2 + 22 + col * 28; const cy = -h + 55 + row * 34; ctx.fillStyle = canColors[row * 3 + col]; ctx.beginPath(); ctx.roundRect(cx, cy, 18, 26, 3); ctx.fill(); // Can top ctx.fillStyle = '#ccc'; ctx.fillRect(cx + 3, cy, 12, 4); } } // "BRAINZ COLA" branding ctx.fillStyle = '#00ff44'; ctx.font = 'bold 12px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('BRAINZ', 0, -h + 168); ctx.fillStyle = '#ff4444'; ctx.font = 'bold 10px Luckiest Guy'; ctx.fillText('COLA', 0, -h + 182); // Selection buttons panel ctx.fillStyle = '#222'; ctx.fillRect(-w/2 + 12, -h + 190, w - 24, 40); // Buttons (glowing) const btnColors = ['#ff4444', '#44ff44', '#4444ff', '#ffff44']; for (let i = 0; i < 4; i++) { const bx = -w/2 + 22 + i * 22; ctx.fillStyle = btnColors[i]; ctx.shadowColor = btnColors[i]; ctx.shadowBlur = 5; ctx.beginPath(); ctx.arc(bx + 8, -h + 210, 6, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; // Coin slot area ctx.fillStyle = '#333'; ctx.fillRect(w/2 - 35, -h + 195, 20, 30); ctx.fillStyle = '#111'; ctx.fillRect(w/2 - 30, -h + 205, 10, 4); // Slot // Dispensing slot (bottom) ctx.fillStyle = '#111'; ctx.fillRect(-w/2 + 15, -h + 235, w - 30, 25); // Flap ctx.fillStyle = '#333'; ctx.fillRect(-w/2 + 18, -h + 235, w - 36, 6); // Zombie sticker/decoration ctx.fillStyle = '#44aa44'; ctx.font = 'bold 18px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('☠', 0, -h + 140); // Side panels (metallic edges) ctx.fillStyle = '#3a1515'; ctx.fillRect(-w/2, -h + 30, 8, h); ctx.fillRect(w/2 - 8, -h + 30, 8, h); // Top cap ctx.fillStyle = '#2a0a0a'; ctx.fillRect(-w/2 - 3, -h + 25, w + 6, 10); // Base/feet ctx.fillStyle = '#222'; ctx.fillRect(-w/2 + 5, h - 25, 20, 8); ctx.fillRect(w/2 - 25, h - 25, 20, 8); ctx.restore(); } // Helper: Draw the LEFT jaw of the dinosaur (tall vertical slab, teeth point RIGHT) // rightEdgeX: the X coordinate of the right edge (where teeth are) // offsetY: vertical offset for descent animation (0 = on screen) // bloody: whether to show green goo on the teeth function drawDinoLeftJaw(ctx, rightEdgeX, offsetY, bloody) { ctx.save(); ctx.translate(0, offsetY); const jawW = 500; // Width of jaw const leftX = rightEdgeX - jawW; const h = CANVAS_HEIGHT + 20; // === JAW BODY (rounded, organic shape) === // Use a large rounded shape instead of a rectangle const jawGrad = ctx.createLinearGradient(leftX, 0, rightEdgeX, 0); jawGrad.addColorStop(0, '#1a4a18'); jawGrad.addColorStop(0.4, '#2a6a25'); jawGrad.addColorStop(0.7, '#3a7a35'); jawGrad.addColorStop(0.9, '#2d5d28'); jawGrad.addColorStop(1, '#4a3028'); ctx.fillStyle = jawGrad; // Define jaw body path (used for fill and clipping) function jawBodyPath() { ctx.beginPath(); ctx.moveTo(rightEdgeX + 5, -50); ctx.bezierCurveTo(rightEdgeX + 15, h * 0.15, rightEdgeX + 20, h * 0.35, rightEdgeX + 10, h * 0.5); ctx.bezierCurveTo(rightEdgeX + 20, h * 0.65, rightEdgeX + 15, h * 0.85, rightEdgeX + 5, h + 50); ctx.lineTo(leftX - 50, h + 50); ctx.lineTo(leftX - 50, -50); ctx.closePath(); } // Draw jaw body fill jawBodyPath(); ctx.fill(); // Clip all interior details (scales, gums) to jaw body shape ctx.save(); jawBodyPath(); ctx.clip(); // Scale texture (bumpy dinosaur skin) ctx.fillStyle = '#2d6d28'; for (let row = 0; row < 22; row++) { for (let col = 0; col < 8; col++) { const sx = leftX + 40 + col * 55 + (row % 2) * 27; const sy = row * 60 + 20; if (sx < rightEdgeX - 60) { ctx.beginPath(); ctx.arc(sx, sy, 12 + (col * 3 + row * 7) % 6, 0, Math.PI * 2); ctx.fill(); } } } // Darker ridges/wrinkles ctx.strokeStyle = '#1a4a18'; ctx.lineWidth = 3; for (let i = 0; i < 5; i++) { const ridgeX = leftX + 60 + i * 80; if (ridgeX < rightEdgeX - 100) { ctx.beginPath(); ctx.moveTo(ridgeX, 50 + i * 30); ctx.quadraticCurveTo(ridgeX + 15, CANVAS_HEIGHT / 2, ridgeX + 5, CANVAS_HEIGHT - 50 - i * 30); ctx.stroke(); } } // === GUM LINE (thick, fleshy, rounded along biting edge) === ctx.fillStyle = '#6a2838'; for (let i = 0; i < 24; i++) { const t = i / 23; const gy = -20 + t * (h + 20); const gx = rightEdgeX - 35 + Math.sin(t * Math.PI * 3) * 5; ctx.beginPath(); ctx.ellipse(gx, gy, 25, 28, 0, 0, Math.PI * 2); ctx.fill(); } // Gum inner detail ctx.fillStyle = '#5a2030'; for (let i = 0; i < 18; i++) { const gy = i * 72 + 20; const gx = rightEdgeX - 30 + Math.sin(i * 0.8) * 4; ctx.beginPath(); ctx.ellipse(gx, gy, 12, 18, 0.1, 0, Math.PI * 2); ctx.fill(); } // Gum highlight (wet/shiny) ctx.fillStyle = 'rgba(255, 150, 150, 0.15)'; for (let i = 0; i < 15; i++) { const gy = i * 90 + 30; ctx.beginPath(); ctx.ellipse(rightEdgeX - 25, gy, 5, 20, 0, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // End clipping for jaw interior // === TEETH (large triangular, pointing RIGHT from gum line) === // Teeth intentionally extend PAST the jaw edge (they stick out) const numTeeth = 10; const toothSpacing = CANVAS_HEIGHT / (numTeeth - 1); for (let i = 0; i < numTeeth; i++) { const ty = i * toothSpacing + toothSpacing * 0.1; const toothW = 80 + (i % 3 === 0 ? 25 : (i % 2 === 0 ? 15 : 0)); const toothH = 28 + (i % 3 === 1 ? 6 : 0); // Tooth base starts inside the jaw (not past the edge) const toothBaseX = rightEdgeX - 15; // Tooth shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(toothBaseX + 3, ty - toothH / 2 + 3); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6 + 3, ty - toothH * 0.15 + 3, toothBaseX + toothW + 3, ty + 3); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6 + 3, ty + toothH * 0.15 + 3, toothBaseX + 3, ty + toothH / 2 + 3); ctx.closePath(); ctx.fill(); // Main tooth body (curved, pointing RIGHT) ctx.fillStyle = '#f0e8d0'; ctx.beginPath(); ctx.moveTo(toothBaseX, ty - toothH / 2); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6, ty - toothH * 0.2, toothBaseX + toothW, ty); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6, ty + toothH * 0.2, toothBaseX, ty + toothH / 2); ctx.closePath(); ctx.fill(); // Tooth edge highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.beginPath(); ctx.moveTo(toothBaseX + 5, ty - toothH / 2 + 3); ctx.quadraticCurveTo(toothBaseX + toothW * 0.5, ty - toothH * 0.15, toothBaseX + toothW - 5, ty - 2); ctx.lineTo(toothBaseX + toothW - 5, ty + 2); ctx.quadraticCurveTo(toothBaseX + toothW * 0.4, ty - toothH * 0.05, toothBaseX + 5, ty - toothH / 4); ctx.closePath(); ctx.fill(); // Tooth outline ctx.strokeStyle = '#a09880'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(toothBaseX, ty - toothH / 2); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6, ty - toothH * 0.2, toothBaseX + toothW, ty); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6, ty + toothH * 0.2, toothBaseX, ty + toothH / 2); ctx.closePath(); ctx.stroke(); // Serration marks on larger teeth if (toothW > 90) { ctx.strokeStyle = '#d8d0b8'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(toothBaseX + toothW * 0.3, ty - toothH / 4); ctx.lineTo(toothBaseX + toothW - 3, ty); ctx.stroke(); } // Blood on teeth when chomped if (bloody && i % 2 === 0) { ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.ellipse(toothBaseX + toothW * 0.5, ty, 10, 5, 0.1 * i, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(toothBaseX + toothW * 0.6, ty + 3); ctx.quadraticCurveTo(toothBaseX + toothW * 0.6 + 5, ty + 12, toothBaseX + toothW * 0.6, ty + 18); ctx.lineTo(toothBaseX + toothW * 0.6 - 2, ty + 3); ctx.fill(); } } // Rounded edge line (organic curved dark line) ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(rightEdgeX + 5, -50); ctx.bezierCurveTo(rightEdgeX + 15, h * 0.15, rightEdgeX + 20, h * 0.35, rightEdgeX + 10, h * 0.5); ctx.bezierCurveTo(rightEdgeX + 20, h * 0.65, rightEdgeX + 15, h * 0.85, rightEdgeX + 5, h + 50); ctx.stroke(); ctx.restore(); } // Helper: Draw the RIGHT jaw of the dinosaur (tall vertical slab, teeth point LEFT) // leftEdgeX: the X coordinate of the left edge (where teeth are) // offsetY: vertical offset for descent animation (0 = on screen) // bloody: whether to show green goo on the teeth function drawDinoRightJaw(ctx, leftEdgeX, offsetY, bloody) { ctx.save(); ctx.translate(0, offsetY); const jawW = 500; // Width of jaw const rightX = leftEdgeX + jawW; const h = CANVAS_HEIGHT + 20; // === JAW BODY (rounded, organic shape) === const jawGrad = ctx.createLinearGradient(leftEdgeX, 0, rightX, 0); jawGrad.addColorStop(0, '#4a3028'); jawGrad.addColorStop(0.1, '#2d5d28'); jawGrad.addColorStop(0.3, '#3a7a35'); jawGrad.addColorStop(0.6, '#2a6a25'); jawGrad.addColorStop(1, '#1a4a18'); ctx.fillStyle = jawGrad; // Define jaw body path (used for fill and clipping) function jawBodyPath() { ctx.beginPath(); ctx.moveTo(leftEdgeX - 5, -50); ctx.bezierCurveTo(leftEdgeX - 15, h * 0.15, leftEdgeX - 20, h * 0.35, leftEdgeX - 10, h * 0.5); ctx.bezierCurveTo(leftEdgeX - 20, h * 0.65, leftEdgeX - 15, h * 0.85, leftEdgeX - 5, h + 50); ctx.lineTo(rightX + 50, h + 50); ctx.lineTo(rightX + 50, -50); ctx.closePath(); } // Draw jaw body fill jawBodyPath(); ctx.fill(); // Clip all interior details to jaw body shape ctx.save(); jawBodyPath(); ctx.clip(); // Scale texture ctx.fillStyle = '#2d6d28'; for (let row = 0; row < 22; row++) { for (let col = 0; col < 8; col++) { const sx = leftEdgeX + 100 + col * 55 + (row % 2) * 27; const sy = row * 60 + 20; if (sx > leftEdgeX + 80) { ctx.beginPath(); ctx.arc(sx, sy, 12 + (col * 5 + row * 3) % 6, 0, Math.PI * 2); ctx.fill(); } } } // Darker ridges ctx.strokeStyle = '#1a4a18'; ctx.lineWidth = 3; for (let i = 0; i < 4; i++) { const ridgeX = leftEdgeX + 120 + i * 90; if (ridgeX > leftEdgeX + 100) { ctx.beginPath(); ctx.moveTo(ridgeX, 60 + i * 40); ctx.quadraticCurveTo(ridgeX - 10, CANVAS_HEIGHT / 2, ridgeX + 8, CANVAS_HEIGHT - 60 - i * 40); ctx.stroke(); } } // Chin/throat folds (distinctive jaw feature) ctx.fillStyle = '#255a22'; for (let i = 0; i < 3; i++) { const foldX = leftEdgeX + 200 + i * 70; ctx.beginPath(); ctx.ellipse(foldX, CANVAS_HEIGHT / 2, 25, CANVAS_HEIGHT * 0.35, 0, 0, Math.PI * 2); ctx.fill(); } // === GUM LINE (thick, fleshy, rounded along biting edge) === ctx.fillStyle = '#6a2838'; for (let i = 0; i < 24; i++) { const t = i / 23; const gy = -20 + t * (h + 20); const gx = leftEdgeX + 35 + Math.sin(t * Math.PI * 3 + 1) * 5; ctx.beginPath(); ctx.ellipse(gx, gy, 25, 28, 0, 0, Math.PI * 2); ctx.fill(); } // Gum inner detail ctx.fillStyle = '#5a2030'; for (let i = 0; i < 18; i++) { const gy = i * 72 + 40; const gx = leftEdgeX + 30 + Math.sin(i * 0.8 + 1) * 4; ctx.beginPath(); ctx.ellipse(gx, gy, 12, 18, -0.1, 0, Math.PI * 2); ctx.fill(); } // Gum highlight ctx.fillStyle = 'rgba(255, 150, 150, 0.15)'; for (let i = 0; i < 15; i++) { const gy = i * 90 + 40; ctx.beginPath(); ctx.ellipse(leftEdgeX + 25, gy, 5, 20, 0, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // End clipping for jaw interior // === TEETH (large, curved, pointing LEFT from gum line) === // Teeth intentionally extend past the jaw edge const numTeeth = 9; const toothSpacing = CANVAS_HEIGHT / numTeeth; for (let i = 0; i < numTeeth; i++) { const ty = i * toothSpacing + toothSpacing * 0.55; const toothW = 70 + (i % 3 === 1 ? 20 : (i % 2 === 0 ? 10 : 0)); const toothH = 26 + (i % 3 === 0 ? 5 : 0); // Tooth base starts inside the jaw const toothBaseX = leftEdgeX + 15; // Tooth shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(toothBaseX - 3, ty - toothH / 2 + 3); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6 - 3, ty - toothH * 0.15 + 3, toothBaseX - toothW - 3, ty + 3); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6 - 3, ty + toothH * 0.15 + 3, toothBaseX - 3, ty + toothH / 2 + 3); ctx.closePath(); ctx.fill(); // Main tooth body (curved, pointing LEFT) ctx.fillStyle = '#f0e8d0'; ctx.beginPath(); ctx.moveTo(toothBaseX, ty - toothH / 2); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6, ty - toothH * 0.2, toothBaseX - toothW, ty); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6, ty + toothH * 0.2, toothBaseX, ty + toothH / 2); ctx.closePath(); ctx.fill(); // Tooth edge highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.beginPath(); ctx.moveTo(toothBaseX - 5, ty - toothH / 2 + 3); ctx.quadraticCurveTo(toothBaseX - toothW * 0.5, ty - toothH * 0.15, toothBaseX - toothW + 5, ty - 2); ctx.lineTo(toothBaseX - toothW + 5, ty + 2); ctx.quadraticCurveTo(toothBaseX - toothW * 0.4, ty - toothH * 0.05, toothBaseX - 5, ty - toothH / 4); ctx.closePath(); ctx.fill(); // Tooth outline ctx.strokeStyle = '#a09880'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(toothBaseX, ty - toothH / 2); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6, ty - toothH * 0.2, toothBaseX - toothW, ty); ctx.quadraticCurveTo(toothBaseX - toothW * 0.6, ty + toothH * 0.2, toothBaseX, ty + toothH / 2); ctx.closePath(); ctx.stroke(); // Serration marks on larger teeth if (toothW > 80) { ctx.strokeStyle = '#d8d0b8'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(toothBaseX - toothW * 0.3, ty - toothH / 4); ctx.lineTo(toothBaseX - toothW + 3, ty); ctx.stroke(); } // Blood on teeth when chomped if (bloody && i % 2 === 1) { ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.ellipse(toothBaseX - toothW * 0.4, ty, 8, 5, -0.1 * i, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(toothBaseX - toothW * 0.3, ty + 3); ctx.quadraticCurveTo(toothBaseX - toothW * 0.3 - 4, ty + 12, toothBaseX - toothW * 0.3, ty + 18); ctx.lineTo(toothBaseX - toothW * 0.3 + 2, ty + 3); ctx.fill(); } } // Rounded edge line (organic curved dark line) ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(leftEdgeX - 5, -50); ctx.bezierCurveTo(leftEdgeX - 15, h * 0.15, leftEdgeX - 20, h * 0.35, leftEdgeX - 10, h * 0.5); ctx.bezierCurveTo(leftEdgeX - 20, h * 0.65, leftEdgeX - 15, h * 0.85, leftEdgeX - 5, h + 50); ctx.stroke(); ctx.restore(); } // Helper: Draw a cartoon grand piano (used by piano kill animation) function drawCartoonPiano(ctx, x, y, broken) { ctx.save(); ctx.translate(x, y); if (broken) { // BROKEN PIANO - cracked, tilted slightly // Main body (slightly askew) ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.moveTo(-130, -75); ctx.lineTo(125, -80); ctx.lineTo(135, -65); ctx.lineTo(138, 65); ctx.lineTo(-135, 70); ctx.lineTo(-138, -65); ctx.closePath(); ctx.fill(); // Lid piece 1 (cracked open, tilted) ctx.fillStyle = '#2a2a2a'; ctx.beginPath(); ctx.moveTo(-125, -75); ctx.lineTo(30, -78); ctx.lineTo(25, -118); ctx.lineTo(-118, -112); ctx.closePath(); ctx.fill(); // Lid piece 2 (other half at different angle) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.moveTo(35, -78); ctx.lineTo(125, -80); ctx.lineTo(128, -128); ctx.lineTo(33, -122); ctx.closePath(); ctx.fill(); // Legs (one broken off, one bent) ctx.fillStyle = '#111'; ctx.fillRect(-115, 65, 16, 38); // Left leg intact ctx.fillRect(100, 65, 16, 28); // Right leg short/broken // Middle leg broken off at angle ctx.save(); ctx.translate(0, 68); ctx.rotate(0.35); ctx.fillRect(0, 0, 14, 32); ctx.restore(); // Keyboard area (split in half) ctx.fillStyle = '#f5f5f0'; ctx.fillRect(-105, 30, 100, 28); ctx.fillRect(8, 33, 95, 25); // Black keys (some fallen out) ctx.fillStyle = '#111'; for (let i = 0; i < 14; i++) { if (i % 7 !== 2 && i % 7 !== 6) { if (Math.random() > 0.2) { // Some keys missing const jitter = (i > 7 ? 2 : 0); ctx.fillRect(-100 + i * 14 + jitter, 30 + jitter, 9, 16); } } } // Gold trim (bent/warped) ctx.strokeStyle = '#c5a030'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(-130, -72); ctx.lineTo(125, -76); ctx.lineTo(133, 62); ctx.lineTo(-132, 67); ctx.closePath(); ctx.stroke(); // Crack lines across the body ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(-10, -78); ctx.lineTo(5, -20); ctx.lineTo(-5, 40); ctx.lineTo(10, 68); ctx.stroke(); ctx.beginPath(); ctx.moveTo(60, -79); ctx.lineTo(70, -30); ctx.stroke(); // Music note decoration (broken loose) ctx.fillStyle = '#c5a030'; ctx.font = 'bold 28px Luckiest Guy'; ctx.save(); ctx.translate(-80, -40); ctx.rotate(-0.2); ctx.fillText('♪', 0, 0); ctx.restore(); } else { // INTACT PIANO (falling) // Main body ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.moveTo(-125, -80); ctx.lineTo(125, -80); ctx.lineTo(135, -68); ctx.lineTo(135, 65); ctx.lineTo(-135, 65); ctx.lineTo(-135, -68); ctx.closePath(); ctx.fill(); // Piano lid (closed, shiny) ctx.fillStyle = '#2a2a2a'; ctx.beginPath(); ctx.moveTo(-120, -80); ctx.lineTo(120, -80); ctx.lineTo(115, -125); ctx.lineTo(-115, -125); ctx.closePath(); ctx.fill(); // Lid shine ctx.fillStyle = 'rgba(255, 255, 255, 0.08)'; ctx.beginPath(); ctx.moveTo(-100, -120); ctx.lineTo(-20, -120); ctx.lineTo(-30, -85); ctx.lineTo(-95, -85); ctx.closePath(); ctx.fill(); // Piano legs ctx.fillStyle = '#111'; ctx.fillRect(-115, 65, 16, 42); ctx.fillRect(100, 65, 16, 42); ctx.fillRect(-8, 65, 16, 42); // Leg decorative curves (carved) ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(-107, 95, 6, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(108, 95, 6, 0, Math.PI * 2); ctx.stroke(); // Keyboard area ctx.fillStyle = '#f5f5f0'; ctx.fillRect(-105, 32, 210, 28); // White key dividers ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1; for (let i = 0; i <= 15; i++) { ctx.beginPath(); ctx.moveTo(-105 + i * 14, 32); ctx.lineTo(-105 + i * 14, 60); ctx.stroke(); } // Black keys ctx.fillStyle = '#111'; for (let i = 0; i < 14; i++) { if (i % 7 !== 2 && i % 7 !== 6) { ctx.fillRect(-100 + i * 14, 32, 9, 17); } } // Gold trim ctx.strokeStyle = '#c5a030'; ctx.lineWidth = 3; ctx.strokeRect(-130, -75, 260, 135); // Music rest (top center) ctx.fillStyle = '#2a2a2a'; ctx.fillRect(-30, -78, 60, 5); // Pedals at bottom ctx.fillStyle = '#c5a030'; ctx.beginPath(); ctx.ellipse(-12, 105, 5, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(0, 105, 5, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(12, 105, 5, 4, 0, 0, Math.PI * 2); ctx.fill(); // Brand name area ctx.fillStyle = '#c5a030'; ctx.font = 'bold 14px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('STEINZOMB', 0, -5); } ctx.restore(); } // Helper: Draw a red lightsaber (zombie's saber) at given position function drawRedLightsaber(ctx, sx, sy, angle, bladeAlpha, bladeLen, bladeW, handleLen) { ctx.save(); ctx.translate(sx, sy); ctx.rotate(angle); // Red blade - extends proportional to bladeAlpha if (bladeAlpha > 0) { ctx.save(); ctx.globalAlpha = Math.min(bladeAlpha * 2, 1); // Opacity reaches full at 50% extension const currentLen = bladeLen * bladeAlpha; // Blade extends over time ctx.shadowColor = '#ff0000'; ctx.shadowBlur = 30; ctx.strokeStyle = '#ff2200'; ctx.lineWidth = bladeW * 3; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentLen); ctx.stroke(); ctx.shadowBlur = 15; ctx.strokeStyle = '#ff4444'; ctx.lineWidth = bladeW; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentLen); ctx.stroke(); ctx.shadowBlur = 5; ctx.strokeStyle = '#ffffff'; ctx.lineWidth = bladeW * 0.35; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -currentLen + 5); ctx.stroke(); ctx.fillStyle = '#ff0000'; ctx.shadowBlur = 20; ctx.beginPath(); ctx.arc(0, -currentLen + 3, bladeW * 0.8, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Handle const hGrad = ctx.createLinearGradient(-10, 0, 10, 0); hGrad.addColorStop(0, '#2a2a3a'); hGrad.addColorStop(0.5, '#555566'); hGrad.addColorStop(1, '#1a1a28'); ctx.fillStyle = hGrad; ctx.beginPath(); ctx.roundRect(-10, 0, 20, handleLen, 4); ctx.fill(); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#1a1a28'; for (let i = 0; i < 5; i++) { ctx.fillRect(-10, 12 + i * 10, 20, 4); } ctx.fillStyle = '#888899'; ctx.beginPath(); ctx.roundRect(-12, -8, 24, 12, 3); ctx.fill(); // Red button ctx.fillStyle = bladeAlpha > 0.3 ? '#ff0000' : '#440000'; ctx.shadowColor = '#ff0000'; ctx.shadowBlur = bladeAlpha > 0.3 ? 8 : 0; ctx.beginPath(); ctx.arc(0, 45, 5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.fillStyle = '#666677'; ctx.beginPath(); ctx.roundRect(-8, 72, 16, 8, 2); ctx.fill(); ctx.restore(); } // Helper: Draw Darth Vader helmet at position function drawVaderHelmet(ctx, hx, hy, scale) { ctx.save(); ctx.translate(hx, hy); ctx.scale(scale || 1, scale || 1); // Main dome (glossy black) ctx.fillStyle = '#111'; ctx.beginPath(); ctx.moveTo(0, -42); ctx.bezierCurveTo(-32, -42, -38, -20, -36, 0); ctx.bezierCurveTo(-34, 15, -30, 30, -24, 38); ctx.lineTo(24, 38); ctx.bezierCurveTo(30, 30, 34, 15, 36, 0); ctx.bezierCurveTo(38, -20, 32, -42, 0, -42); ctx.closePath(); ctx.fill(); // Dome highlight (glossy) ctx.fillStyle = 'rgba(80, 80, 90, 0.4)'; ctx.beginPath(); ctx.ellipse(-8, -28, 14, 10, -0.3, 0, Math.PI * 2); ctx.fill(); // Face plate (darker triangular area) ctx.fillStyle = '#0a0a0a'; ctx.beginPath(); ctx.moveTo(-22, -5); ctx.lineTo(22, -5); ctx.lineTo(18, 32); ctx.lineTo(-18, 32); ctx.closePath(); ctx.fill(); // Eye lenses (trapezoidal, dark red tint) ctx.fillStyle = '#1a0808'; ctx.beginPath(); ctx.moveTo(-18, -2); ctx.lineTo(-5, -2); ctx.lineTo(-6, 8); ctx.lineTo(-16, 8); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(18, -2); ctx.lineTo(5, -2); ctx.lineTo(6, 8); ctx.lineTo(16, 8); ctx.closePath(); ctx.fill(); // Eye lens red glow ctx.fillStyle = 'rgba(180, 0, 0, 0.25)'; ctx.beginPath(); ctx.moveTo(-18, -2); ctx.lineTo(-5, -2); ctx.lineTo(-6, 8); ctx.lineTo(-16, 8); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(18, -2); ctx.lineTo(5, -2); ctx.lineTo(6, 8); ctx.lineTo(16, 8); ctx.closePath(); ctx.fill(); // Nose/mouth vent (triangular grille) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.moveTo(-8, 12); ctx.lineTo(8, 12); ctx.lineTo(6, 28); ctx.lineTo(-6, 28); ctx.closePath(); ctx.fill(); // Mouth grille lines ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5; for (let i = 0; i < 5; i++) { const gy = 14 + i * 3; ctx.beginPath(); ctx.moveTo(-6 + i * 0.3, gy); ctx.lineTo(6 - i * 0.3, gy); ctx.stroke(); } // Side panels / cheek guards ctx.fillStyle = '#1a1a1a'; ctx.beginPath(); ctx.moveTo(-22, -5); ctx.lineTo(-36, 0); ctx.lineTo(-30, 30); ctx.lineTo(-18, 32); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(22, -5); ctx.lineTo(36, 0); ctx.lineTo(30, 30); ctx.lineTo(18, 32); ctx.closePath(); ctx.fill(); // Brow ridge ctx.fillStyle = '#222'; ctx.beginPath(); ctx.moveTo(-28, -8); ctx.quadraticCurveTo(0, -14, 28, -8); ctx.quadraticCurveTo(0, -10, -28, -8); ctx.closePath(); ctx.fill(); // Outline ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -42); ctx.bezierCurveTo(-32, -42, -38, -20, -36, 0); ctx.bezierCurveTo(-34, 15, -30, 30, -24, 38); ctx.lineTo(24, 38); ctx.bezierCurveTo(30, 30, 34, 15, 36, 0); ctx.bezierCurveTo(38, -20, 32, -42, 0, -42); ctx.stroke(); ctx.restore(); } // Helper: Draw a cartoon UFO (used by ufo kill animation) function drawCartoonUFO(ctx, x, y, beamIntensity) { ctx.save(); ctx.translate(x, y); // Glow underneath when beam is active if (beamIntensity > 0) { ctx.fillStyle = `rgba(100, 255, 150, ${beamIntensity * 0.3})`; ctx.beginPath(); ctx.ellipse(0, 18, 45 + beamIntensity * 10, 12, 0, 0, Math.PI * 2); ctx.fill(); } // Bottom disc (saucer) - metallic silver gradient const discGrad = ctx.createLinearGradient(-55, 0, 55, 0); discGrad.addColorStop(0, '#777'); discGrad.addColorStop(0.3, '#bbb'); discGrad.addColorStop(0.5, '#ddd'); discGrad.addColorStop(0.7, '#bbb'); discGrad.addColorStop(1, '#777'); ctx.fillStyle = discGrad; ctx.beginPath(); ctx.ellipse(0, 8, 55, 14, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#555'; ctx.lineWidth = 2; ctx.stroke(); // Bottom ring detail ctx.strokeStyle = '#666'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.ellipse(0, 12, 48, 10, 0, 0, Math.PI * 2); ctx.stroke(); // Glass dome (top) - greenish tint const domeGrad = ctx.createRadialGradient(-5, -12, 0, 0, -8, 26); domeGrad.addColorStop(0, 'rgba(210, 255, 230, 0.9)'); domeGrad.addColorStop(0.5, 'rgba(120, 230, 160, 0.7)'); domeGrad.addColorStop(1, 'rgba(60, 180, 100, 0.5)'); ctx.fillStyle = domeGrad; ctx.beginPath(); ctx.ellipse(0, -5, 24, 22, 0, Math.PI, 0); ctx.fill(); ctx.strokeStyle = '#4a9a6a'; ctx.lineWidth = 1.5; ctx.stroke(); // Dome highlight (specular reflection) ctx.fillStyle = 'rgba(255, 255, 255, 0.45)'; ctx.beginPath(); ctx.ellipse(-8, -18, 8, 5, -0.3, 0, Math.PI * 2); ctx.fill(); // Blinking lights around saucer rim const numLights = 8; for (let i = 0; i < numLights; i++) { const angle = (i / numLights) * Math.PI * 2 + Date.now() * 0.003; const lx = Math.cos(angle) * 44; const ly = Math.sin(angle) * 10 + 8; const lightOn = Math.sin(Date.now() * 0.01 + i * 1.5) > 0; ctx.fillStyle = lightOn ? '#ffff00' : '#ff4400'; ctx.shadowColor = lightOn ? '#ffff00' : '#ff4400'; ctx.shadowBlur = lightOn ? 8 : 4; ctx.beginPath(); ctx.arc(lx, ly, 3.5, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; // Bottom center emitter (beam origin) ctx.fillStyle = beamIntensity > 0 ? `rgba(100, 255, 150, ${0.5 + beamIntensity * 0.5})` : '#555'; ctx.beginPath(); ctx.arc(0, 18, 7, 0, Math.PI * 2); ctx.fill(); if (beamIntensity > 0) { ctx.shadowColor = '#44ff88'; ctx.shadowBlur = 15 * beamIntensity; ctx.fill(); ctx.shadowBlur = 0; } // Antenna on top ctx.strokeStyle = '#aaa'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -26); ctx.lineTo(0, -36); ctx.stroke(); // Antenna tip ball (blinking red) const antennaBlink = Math.sin(Date.now() * 0.008) > 0; ctx.fillStyle = antennaBlink ? '#ff3333' : '#aa1111'; ctx.beginPath(); ctx.arc(0, -38, 4, 0, Math.PI * 2); ctx.fill(); if (antennaBlink) { ctx.shadowColor = '#ff3333'; ctx.shadowBlur = 8; ctx.fill(); ctx.shadowBlur = 0; } ctx.restore(); } // Helper: Draw a tractor beam from UFO to target (used by ufo kill animation) function drawTractorBeam(ctx, fromX, fromY, toX, toY, intensity) { if (intensity <= 0) return; ctx.save(); // Beam widens from UFO (narrow) to zombie (wide) const topWidth = 18 * intensity; const bottomWidth = 75 * intensity; // Outer beam - translucent green cone const beamGrad = ctx.createLinearGradient(fromX, fromY, toX, toY); beamGrad.addColorStop(0, `rgba(100, 255, 150, ${intensity * 0.55})`); beamGrad.addColorStop(0.5, `rgba(80, 230, 130, ${intensity * 0.35})`); beamGrad.addColorStop(1, `rgba(60, 200, 110, ${intensity * 0.15})`); ctx.fillStyle = beamGrad; ctx.beginPath(); ctx.moveTo(fromX - topWidth, fromY); ctx.lineTo(fromX + topWidth, fromY); ctx.lineTo(toX + bottomWidth, toY); ctx.lineTo(toX - bottomWidth, toY); ctx.closePath(); ctx.fill(); // Inner brighter core beam const innerGrad = ctx.createLinearGradient(fromX, fromY, toX, toY); innerGrad.addColorStop(0, `rgba(180, 255, 210, ${intensity * 0.5})`); innerGrad.addColorStop(0.5, `rgba(150, 255, 190, ${intensity * 0.3})`); innerGrad.addColorStop(1, `rgba(120, 255, 160, ${intensity * 0.1})`); ctx.fillStyle = innerGrad; ctx.beginPath(); ctx.moveTo(fromX - topWidth * 0.4, fromY); ctx.lineTo(fromX + topWidth * 0.4, fromY); ctx.lineTo(toX + bottomWidth * 0.4, toY); ctx.lineTo(toX - bottomWidth * 0.4, toY); ctx.closePath(); ctx.fill(); // Glowing beam edges ctx.strokeStyle = `rgba(100, 255, 150, ${intensity * 0.4})`; ctx.lineWidth = 2.5; ctx.shadowColor = '#44ff88'; ctx.shadowBlur = 10 * intensity; ctx.beginPath(); ctx.moveTo(fromX - topWidth, fromY); ctx.lineTo(toX - bottomWidth, toY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(fromX + topWidth, fromY); ctx.lineTo(toX + bottomWidth, toY); ctx.stroke(); ctx.shadowBlur = 0; // Horizontal scan lines moving upward (abduction effect) const numLines = 6; for (let i = 0; i < numLines; i++) { const lineT = ((Date.now() * 0.002 + i / numLines) % 1); const lineY = fromY + (toY - fromY) * lineT; const lineWidth = topWidth + (bottomWidth - topWidth) * lineT; const lineX = fromX + (toX - fromX) * lineT; ctx.strokeStyle = `rgba(180, 255, 220, ${intensity * 0.45 * (1 - lineT)})`; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(lineX - lineWidth * 0.8, lineY); ctx.lineTo(lineX + lineWidth * 0.8, lineY); ctx.stroke(); } ctx.restore(); } // Helper: Draw a cartoon toilet (used by toilet kill animation) // lidAngle: 0 = closed, 110 = fully open // flushing: whether to show water swirl inside // vortexIntensity: 0-1 for the swirling water effect function drawCartoonToilet(ctx, x, y, lidAngle, flushing, vortexIntensity) { ctx.save(); ctx.translate(x, y); ctx.scale(2, 2); // === TANK (back part) === ctx.fillStyle = '#f0efe8'; ctx.beginPath(); ctx.moveTo(-55, -80); ctx.lineTo(55, -80); ctx.lineTo(58, -180); ctx.lineTo(-58, -180); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#bbb'; ctx.lineWidth = 3; ctx.stroke(); // Tank cap (top lid) ctx.fillStyle = '#f8f7f2'; ctx.beginPath(); ctx.moveTo(-62, -180); ctx.lineTo(62, -180); ctx.lineTo(60, -195); ctx.lineTo(-60, -195); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke(); // Flush handle (right side of tank) ctx.strokeStyle = '#c0c0c0'; ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(58, -140); ctx.lineTo(78, -140); ctx.lineTo(78, -130); ctx.stroke(); // Handle knob ctx.fillStyle = '#d0d0d0'; ctx.beginPath(); ctx.arc(78, -128, 6, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#aaa'; ctx.lineWidth = 1.5; ctx.stroke(); // Tank decorative line ctx.strokeStyle = '#ddd'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-48, -130); ctx.lineTo(48, -130); ctx.stroke(); // === BOWL (main body) === // Outer bowl shape ctx.fillStyle = '#f0efe8'; ctx.beginPath(); ctx.moveTo(-65, -80); ctx.bezierCurveTo(-75, -40, -80, 20, -70, 60); ctx.bezierCurveTo(-60, 90, -40, 105, 0, 110); ctx.bezierCurveTo(40, 105, 60, 90, 70, 60); ctx.bezierCurveTo(80, 20, 75, -40, 65, -80); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#bbb'; ctx.lineWidth = 3; ctx.stroke(); // Inner bowl (darker) ctx.fillStyle = '#e8e7e0'; ctx.beginPath(); ctx.ellipse(0, 10, 50, 55, 0, 0, Math.PI * 2); ctx.fill(); // Water inside bowl if (flushing && vortexIntensity > 0) { // Swirling blue water ctx.save(); ctx.beginPath(); ctx.ellipse(0, 10, 48, 53, 0, 0, Math.PI * 2); ctx.clip(); // Base water color ctx.fillStyle = `rgba(80, 160, 240, ${0.6 + vortexIntensity * 0.3})`; ctx.fillRect(-50, -45, 100, 110); // Swirl lines const numSwirls = 4; for (let i = 0; i < numSwirls; i++) { const swirlAngle = Date.now() * 0.006 + i * (Math.PI * 2 / numSwirls); const swirlRadius = 25 + i * 5; ctx.strokeStyle = `rgba(150, 220, 255, ${vortexIntensity * 0.5})`; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(0, 10, swirlRadius - i * 6, swirlAngle, swirlAngle + Math.PI * 1.2); ctx.stroke(); } // Center drain vortex const drainGrad = ctx.createRadialGradient(0, 15, 0, 0, 15, 20); drainGrad.addColorStop(0, `rgba(20, 40, 80, ${vortexIntensity * 0.8})`); drainGrad.addColorStop(0.5, `rgba(60, 120, 200, ${vortexIntensity * 0.4})`); drainGrad.addColorStop(1, 'rgba(80, 160, 240, 0)'); ctx.fillStyle = drainGrad; ctx.beginPath(); ctx.arc(0, 15, 20, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } else { // Static water (calm) ctx.fillStyle = 'rgba(160, 210, 240, 0.5)'; ctx.beginPath(); ctx.ellipse(0, -15, 40, 35, 0, 0, Math.PI * 2); ctx.fill(); } // Bowl rim (front) ctx.fillStyle = '#f8f7f2'; ctx.beginPath(); ctx.ellipse(0, -15, 60, 18, 0, 0, Math.PI); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(0, -15, 60, 18, 0, 0, Math.PI * 2); ctx.stroke(); // === SEAT (opens with lid) === // The seat is visible as a ring when lid is open if (lidAngle > 5) { ctx.fillStyle = '#f5f4ee'; ctx.strokeStyle = '#bbb'; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(0, -15, 55, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // Seat hole (inner) ctx.fillStyle = '#e0dfd8'; ctx.beginPath(); ctx.ellipse(0, -15, 42, 12, 0, 0, Math.PI * 2); ctx.fill(); } // === LID (hinged at back, rotates up) === if (lidAngle < 110) { ctx.save(); // Hinge point is at the back of the bowl (top-center) ctx.translate(0, -12); ctx.rotate(-lidAngle * Math.PI / 180); // Lid shape - oval, flat ctx.fillStyle = '#f8f7f2'; ctx.beginPath(); ctx.ellipse(0, 22, 55, 50, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2.5; ctx.stroke(); // Lid top highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.beginPath(); ctx.ellipse(-10, 15, 25, 20, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // === SEAT (opens with lid) === // The seat is visible as a ring when lid is open if (lidAngle > 5) { ctx.fillStyle = '#f5f4ee'; ctx.strokeStyle = '#bbb'; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(0, -15, 55, 16, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // Seat hole (inner) ctx.fillStyle = '#e0dfd8'; ctx.beginPath(); ctx.ellipse(0, -15, 42, 12, 0, 0, Math.PI * 2); ctx.fill(); } // === BASE (bottom part connecting to floor) === ctx.fillStyle = '#e8e7e0'; ctx.beginPath(); ctx.moveTo(-40, 100); ctx.bezierCurveTo(-45, 115, -45, 125, -38, 135); ctx.lineTo(38, 135); ctx.bezierCurveTo(45, 125, 45, 115, 40, 100); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#bbb'; ctx.lineWidth = 2; ctx.stroke(); // Floor mounting bolts ctx.fillStyle = '#888'; ctx.beginPath(); ctx.arc(-25, 130, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(25, 130, 4, 0, Math.PI * 2); ctx.fill(); // Porcelain shine/highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'; ctx.beginPath(); ctx.ellipse(-30, -10, 20, 50, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Helper: Draw the magic sword box BODY (back panel, sides, slits, top, bottom, wheels) // Drawn behind zombie by game loop function drawMagicBoxBody(ctx, x, y) { const st = magicBoxRenderState; const boxW = st.boxW; const boxH = st.boxH; ctx.save(); ctx.translate(x, y); // Back panel (dark brown wood) const backGrad = ctx.createLinearGradient(-boxW/2, 0, boxW/2, 0); backGrad.addColorStop(0, '#3a2210'); backGrad.addColorStop(0.2, '#5a3a1a'); backGrad.addColorStop(0.5, '#6a4422'); backGrad.addColorStop(0.8, '#5a3a1a'); backGrad.addColorStop(1, '#3a2210'); ctx.fillStyle = backGrad; ctx.beginPath(); ctx.roundRect(-boxW/2, -boxH/2, boxW, boxH, 6); ctx.fill(); ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 3; ctx.stroke(); // Wood grain lines (vertical, subtle) ctx.strokeStyle = 'rgba(80, 50, 20, 0.3)'; ctx.lineWidth = 1.5; for (let i = 0; i < 8; i++) { const lx = -boxW/2 + 12 + i * (boxW - 24) / 7; ctx.beginPath(); ctx.moveTo(lx, -boxH/2 + 10); ctx.bezierCurveTo(lx + 2, -boxH/4, lx - 2, boxH/4, lx + 1, boxH/2 - 10); ctx.stroke(); } // Left side panel (perspective - narrower trapezoid) ctx.fillStyle = '#4a2a12'; ctx.beginPath(); ctx.moveTo(-boxW/2, -boxH/2); ctx.lineTo(-boxW/2 - 20, -boxH/2 + 15); ctx.lineTo(-boxW/2 - 20, boxH/2 - 15); ctx.lineTo(-boxW/2, boxH/2); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 2; ctx.stroke(); // Right side panel ctx.fillStyle = '#4a2a12'; ctx.beginPath(); ctx.moveTo(boxW/2, -boxH/2); ctx.lineTo(boxW/2 + 20, -boxH/2 + 15); ctx.lineTo(boxW/2 + 20, boxH/2 - 15); ctx.lineTo(boxW/2, boxH/2); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 2; ctx.stroke(); // Gray metal slit plates (horizontal slots where swords go through) // Slits go all the way through both sides const numSlits = 7; ctx.fillStyle = '#7a7a7a'; ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 1.5; for (let i = 0; i < numSlits; i++) { const slitY = -boxH/2 + 55 + i * (boxH - 110) / (numSlits - 1); // Left side slit plate ctx.fillStyle = '#6a6a6a'; ctx.fillRect(-boxW/2 - 22, slitY - 6, 26, 12); ctx.strokeRect(-boxW/2 - 22, slitY - 6, 26, 12); // Slit opening (dark) ctx.fillStyle = '#1a1a1a'; ctx.fillRect(-boxW/2 - 18, slitY - 2, 18, 4); // Right side slit plate ctx.fillStyle = '#6a6a6a'; ctx.fillRect(boxW/2 - 4, slitY - 6, 26, 12); ctx.strokeRect(boxW/2 - 4, slitY - 6, 26, 12); // Slit opening (dark) ctx.fillStyle = '#1a1a1a'; ctx.fillRect(boxW/2, slitY - 2, 18, 4); } // Top of box (lid/crown piece) ctx.fillStyle = '#6a4422'; ctx.beginPath(); ctx.moveTo(-boxW/2 - 20, -boxH/2 + 15); ctx.lineTo(-boxW/2 - 8, -boxH/2 - 12); ctx.lineTo(boxW/2 + 8, -boxH/2 - 12); ctx.lineTo(boxW/2 + 20, -boxH/2 + 15); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 2; ctx.stroke(); // Gold decorative trim on top ctx.fillStyle = '#c5a030'; ctx.fillRect(-boxW/2 + 10, -boxH/2 - 14, boxW - 20, 5); // Bottom base piece ctx.fillStyle = '#4a2a12'; ctx.fillRect(-boxW/2 - 12, boxH/2 - 5, boxW + 24, 18); ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 2; ctx.strokeRect(-boxW/2 - 12, boxH/2 - 5, boxW + 24, 18); // Gold trim on bottom ctx.fillStyle = '#c5a030'; ctx.fillRect(-boxW/2, boxH/2 - 7, boxW, 4); // Wheels (small wooden wheels on base) ctx.fillStyle = '#3a2a18'; ctx.strokeStyle = '#1a1008'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(-boxW/2 + 20, boxH/2 + 16, 12, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(boxW/2 - 20, boxH/2 + 16, 12, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // Wheel hubs ctx.fillStyle = '#c5a030'; ctx.beginPath(); ctx.arc(-boxW/2 + 20, boxH/2 + 16, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(boxW/2 - 20, boxH/2 + 16, 4, 0, Math.PI * 2); ctx.fill(); // Decorative stars/diamonds on the back (magician's flair) ctx.fillStyle = '#c5a030'; ctx.font = 'bold 22px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('★', 0, -boxH/2 + 30); ctx.fillText('★', 0, boxH/2 - 25); ctx.font = 'bold 16px Luckiest Guy'; ctx.fillText('✦', -30, 0); ctx.fillText('✦', 30, 0); ctx.restore(); } // Helper: Draw the magic sword box DOORS (front panels that slide open horizontally) // doorOpenAmount: 0 = fully closed, 1 = fully open (slid apart) function drawMagicBoxDoors(ctx, x, y, doorOpenAmount) { const st = magicBoxRenderState; const boxW = st.boxW; const boxH = st.boxH; const doorW = boxW / 2 + 5; // Each door slightly wider than half for overlap const slideDistance = boxW / 2 + 15; // How far each door slides outward ctx.save(); ctx.translate(x, y); // === LEFT DOOR (slides left) === const leftSlide = -doorOpenAmount * slideDistance; ctx.save(); ctx.translate(leftSlide, 0); // Door panel const leftDoorGrad = ctx.createLinearGradient(-doorW, 0, 0, 0); leftDoorGrad.addColorStop(0, '#5a3818'); leftDoorGrad.addColorStop(0.3, '#7a5028'); leftDoorGrad.addColorStop(0.7, '#8a5a30'); leftDoorGrad.addColorStop(1, '#6a4420'); ctx.fillStyle = leftDoorGrad; ctx.beginPath(); ctx.roundRect(-doorW, -boxH/2 + 5, doorW, boxH - 10, 3); ctx.fill(); ctx.strokeStyle = '#3a2010'; ctx.lineWidth = 2.5; ctx.stroke(); // Door panel inset ctx.strokeStyle = '#4a2a12'; ctx.lineWidth = 2; ctx.strokeRect(-doorW + 10, -boxH/2 + 30, doorW - 22, boxH - 60); // Inner panel fill ctx.fillStyle = 'rgba(120, 80, 40, 0.2)'; ctx.fillRect(-doorW + 12, -boxH/2 + 32, doorW - 26, boxH - 64); // Gold trim ctx.fillStyle = '#c5a030'; ctx.fillRect(-doorW + 8, -boxH/2 + 25, doorW - 18, 4); ctx.fillRect(-doorW + 8, boxH/2 - 29, doorW - 18, 4); // Door handle (right edge of left door) ctx.fillStyle = '#c5a030'; ctx.beginPath(); ctx.arc(-8, 0, 8, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#8a6020'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#8a6020'; ctx.beginPath(); ctx.arc(-8, 0, 4, 0, Math.PI * 2); ctx.fill(); // Decorative star ctx.fillStyle = '#c5a030'; ctx.font = 'bold 28px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('★', -doorW/2, -boxH/6); ctx.restore(); // End left door // === RIGHT DOOR (slides right) === const rightSlide = doorOpenAmount * slideDistance; ctx.save(); ctx.translate(rightSlide, 0); // Door panel const rightDoorGrad = ctx.createLinearGradient(0, 0, doorW, 0); rightDoorGrad.addColorStop(0, '#6a4420'); rightDoorGrad.addColorStop(0.3, '#8a5a30'); rightDoorGrad.addColorStop(0.7, '#7a5028'); rightDoorGrad.addColorStop(1, '#5a3818'); ctx.fillStyle = rightDoorGrad; ctx.beginPath(); ctx.roundRect(0, -boxH/2 + 5, doorW, boxH - 10, 3); ctx.fill(); ctx.strokeStyle = '#3a2010'; ctx.lineWidth = 2.5; ctx.stroke(); // Door panel inset ctx.strokeStyle = '#4a2a12'; ctx.lineWidth = 2; ctx.strokeRect(12, -boxH/2 + 30, doorW - 22, boxH - 60); // Inner panel fill ctx.fillStyle = 'rgba(120, 80, 40, 0.2)'; ctx.fillRect(14, -boxH/2 + 32, doorW - 26, boxH - 64); // Gold trim ctx.fillStyle = '#c5a030'; ctx.fillRect(10, -boxH/2 + 25, doorW - 18, 4); ctx.fillRect(10, boxH/2 - 29, doorW - 18, 4); // Door handle (left edge of right door) ctx.fillStyle = '#c5a030'; ctx.beginPath(); ctx.arc(8, 0, 8, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#8a6020'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#8a6020'; ctx.beginPath(); ctx.arc(8, 0, 4, 0, Math.PI * 2); ctx.fill(); // Decorative star ctx.fillStyle = '#c5a030'; ctx.font = 'bold 28px Luckiest Guy'; ctx.textAlign = 'center'; ctx.fillText('★', doorW/2, -boxH/6); ctx.restore(); // End right door // Center seam line when doors are closed if (doorOpenAmount < 0.05) { ctx.strokeStyle = '#2a1808'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -boxH/2 + 8); ctx.lineTo(0, boxH/2 - 8); ctx.stroke(); } ctx.restore(); } // Helper: Draw the interior of the magic box (visible when doors are open) function drawMagicBoxInterior(ctx, offsetX, offsetY) { const st = magicBoxRenderState; const boxW = st.boxW; const boxH = st.boxH; ctx.save(); ctx.translate(offsetX, offsetY); // Interior back wall (dark brown wood, matching box body) const interiorGrad = ctx.createLinearGradient(-boxW/2 + 5, 0, boxW/2 - 5, 0); interiorGrad.addColorStop(0, '#2a1808'); interiorGrad.addColorStop(0.3, '#3a2210'); interiorGrad.addColorStop(0.5, '#402818'); interiorGrad.addColorStop(0.7, '#3a2210'); interiorGrad.addColorStop(1, '#2a1808'); ctx.fillStyle = interiorGrad; ctx.beginPath(); ctx.roundRect(-boxW/2 + 5, -boxH/2 + 8, boxW - 10, boxH - 16, 2); ctx.fill(); if (st.showPieces) { // Draw the ACTUAL zombie in a transfixed pose using zombie.draw() const numSlits = 7; if (zombie) { // Save zombie state const savedAlpha = zombie.globalAlpha; const savedBaseX = zombie.baseX; const savedBaseY = zombie.baseY; const savedScale = zombie.scale; const savedGlobalScale = zombie.globalScale; const savedCustomPose = zombie.customPose; const savedRagdoll = zombie.isRagdolling; const savedTorsoRot = zombie.parts.torso.rotation; const savedHeadRot = zombie.parts.head.attached ? zombie.parts.head.rotation : 0; const savedLUA = zombie.parts.leftUpperArm.attached ? zombie.parts.leftUpperArm.rotation : 0; const savedRUA = zombie.parts.rightUpperArm.attached ? zombie.parts.rightUpperArm.rotation : 0; const savedLFA = zombie.parts.leftForearm.attached ? zombie.parts.leftForearm.rotation : 0; const savedRFA = zombie.parts.rightForearm.attached ? zombie.parts.rightForearm.rotation : 0; const savedLT = zombie.parts.leftThigh.attached ? zombie.parts.leftThigh.rotation : 0; const savedRT = zombie.parts.rightThigh.attached ? zombie.parts.rightThigh.rotation : 0; const savedLLL = zombie.parts.leftLowerLeg.attached ? zombie.parts.leftLowerLeg.rotation : 0; const savedRLL = zombie.parts.rightLowerLeg.attached ? zombie.parts.rightLowerLeg.rotation : 0; // Set transfixed wacky pose zombie.globalAlpha = 1; zombie.globalScale = 1; zombie.isRagdolling = false; zombie.customPose = true; // Position zombie at origin (we're already translated to box center) // Need to undo the current ctx translation and draw at box world position const boxWorldX = magicBoxRenderState.x; const boxWorldY = magicBoxRenderState.y; zombie.baseX = boxWorldX; zombie.baseY = boxWorldY; // Wacky transfixed pose - limbs splayed outward zombie.parts.torso.rotation = 3; if (zombie.parts.head.attached) zombie.parts.head.rotation = 15; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = 70; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = -80; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = 40; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = -30; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 20; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = -15; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = -10; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = 10; // Clip to interior area and draw zombie ctx.save(); ctx.beginPath(); ctx.roundRect(-boxW/2 + 5, -boxH/2 + 8, boxW - 10, boxH - 16, 2); ctx.clip(); // Undo our local translation so zombie.draw() works in world space ctx.translate(-offsetX, -offsetY); zombie.draw(ctx); // Restore transform ctx.restore(); // Restore zombie state zombie.globalAlpha = savedAlpha; zombie.baseX = savedBaseX; zombie.baseY = savedBaseY; zombie.scale = savedScale; zombie.globalScale = savedGlobalScale; zombie.customPose = savedCustomPose; zombie.isRagdolling = savedRagdoll; zombie.parts.torso.rotation = savedTorsoRot; if (zombie.parts.head.attached) zombie.parts.head.rotation = savedHeadRot; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = savedLUA; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = savedRUA; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = savedLFA; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = savedRFA; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = savedLT; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = savedRT; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = savedLLL; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = savedRLL; } // Draw sword blades passing through the body at each slit st.swords.forEach((sword, i) => { if (sword.progress < 0.8) return; const slitY = -boxH/2 + 55 + sword.slitIndex * (boxH - 110) / (numSlits - 1); // Blade line through the body ctx.strokeStyle = '#c0c8d0'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(-boxW/2 + 20, slitY); ctx.lineTo(boxW/2 - 20, slitY); ctx.stroke(); // Blade shine ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-boxW/2 + 25, slitY - 1); ctx.lineTo(boxW/2 - 25, slitY - 1); ctx.stroke(); // Green blood dripping from each sword entry point ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.ellipse(-15 + i * 5, slitY + 8, 3, 6 + i * 2, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(10 - i * 3, slitY + 12, 2, 5 + i, 0.1, 0, Math.PI * 2); ctx.fill(); }); // Blood pool at bottom ctx.fillStyle = '#3dcc10'; ctx.beginPath(); ctx.ellipse(0, boxH/2 - 40, 55, 18, 0, 0, Math.PI * 2); ctx.fill(); } else if (st.showEmpty) { // Empty interior - zombie vanished! Swords still visible through the box, sparkle particles const numSlits = 7; // Draw sword blades still passing through (but no zombie on them) st.swords.forEach((sword, i) => { if (sword.progress < 0.8) return; const slitY = -boxH/2 + 55 + sword.slitIndex * (boxH - 110) / (numSlits - 1); // Blade line through the empty box ctx.strokeStyle = '#c0c8d0'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(-boxW/2 + 20, slitY); ctx.lineTo(boxW/2 - 20, slitY); ctx.stroke(); ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-boxW/2 + 25, slitY - 1); ctx.lineTo(boxW/2 - 25, slitY - 1); ctx.stroke(); }); } ctx.restore(); } // Helper: Draw swords inserted through the box slits function drawMagicBoxSwords(ctx, x, y) { const st = magicBoxRenderState; if (st.swords.length === 0) return; const boxW = st.boxW; const boxH = st.boxH; const numSlits = 7; ctx.save(); ctx.translate(x, y); st.swords.forEach(sword => { const slitY = -boxH/2 + 55 + sword.slitIndex * (boxH - 110) / (numSlits - 1); const swordLength = boxW + 80; // Total sword length (handle + blade through box + tip out other side) const insertProgress = sword.progress; // 0 = not inserted, 1 = fully through // Sword enters from one side, tip emerges from the other const isLeft = sword.side === 'left'; const dir = isLeft ? 1 : -1; // Calculate positions based on insert progress const handleX = isLeft ? (-boxW/2 - 45 - (1 - insertProgress) * swordLength * 0.5) : (boxW/2 + 45 + (1 - insertProgress) * swordLength * 0.5); const tipX = isLeft ? (handleX + swordLength * insertProgress) : (handleX - swordLength * insertProgress); // Only draw if sword is at least partially visible if (insertProgress <= 0) return; // === BLADE (thin steel line going through the box) === ctx.strokeStyle = '#c0c8d0'; ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(handleX + dir * 30, slitY); ctx.lineTo(tipX, slitY); ctx.stroke(); // Blade shine ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(handleX + dir * 35, slitY - 1); ctx.lineTo(tipX - dir * 5, slitY - 1); ctx.stroke(); // Blade outline ctx.strokeStyle = '#6a7080'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(handleX + dir * 30, slitY - 2.5); ctx.lineTo(tipX, slitY); ctx.moveTo(handleX + dir * 30, slitY + 2.5); ctx.lineTo(tipX, slitY); ctx.stroke(); // === HANDLE (ornate, on entry side) === // Guard (crosspiece) ctx.fillStyle = '#c5a030'; ctx.fillRect(handleX - 3, slitY - 12, 6, 24); ctx.strokeStyle = '#8a6020'; ctx.lineWidth = 1.5; ctx.strokeRect(handleX - 3, slitY - 12, 6, 24); // Guard orbs ctx.fillStyle = '#e8c040'; ctx.beginPath(); ctx.arc(handleX, slitY - 13, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(handleX, slitY + 13, 4, 0, Math.PI * 2); ctx.fill(); // Grip ctx.fillStyle = '#4a2a10'; const gripStartX = handleX - dir * 5; ctx.fillRect(gripStartX - dir * 20, slitY - 5, 20, 10); // Pommel ctx.fillStyle = '#c5a030'; ctx.beginPath(); ctx.arc(gripStartX - dir * 22, slitY, 7, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff4444'; ctx.beginPath(); ctx.arc(gripStartX - dir * 22, slitY, 3, 0, Math.PI * 2); ctx.fill(); }); ctx.restore(); } // Helper: Draw a cartoon cannon (used by cannon kill animation) // angle: barrel angle in degrees (negative = angled up) // fuseProgress: 0-1 how much of the fuse has burned // firing: whether the cannon just fired (shows smoke/glow at muzzle) function drawCartoonCannon(ctx, x, y, angle, fuseProgress, firing) { ctx.save(); ctx.translate(x, y); // === WHEELS (behind cannon body) === // Left wheel ctx.save(); ctx.translate(-35, 40); ctx.fillStyle = '#7a4520'; ctx.beginPath(); ctx.arc(0, 0, 28, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#4a2810'; ctx.lineWidth = 4; ctx.stroke(); // Wheel spokes ctx.strokeStyle = '#5a3218'; ctx.lineWidth = 4; for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.cos(a) * 22, Math.sin(a) * 22); ctx.stroke(); } // Wheel hub ctx.fillStyle = '#8a8a8a'; ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Right wheel ctx.save(); ctx.translate(35, 40); ctx.fillStyle = '#7a4520'; ctx.beginPath(); ctx.arc(0, 0, 28, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#4a2810'; ctx.lineWidth = 4; ctx.stroke(); ctx.strokeStyle = '#5a3218'; ctx.lineWidth = 4; for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.cos(a) * 22, Math.sin(a) * 22); ctx.stroke(); } ctx.fillStyle = '#8a8a8a'; ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // === CARRIAGE (wooden base) === ctx.fillStyle = '#6b4226'; ctx.beginPath(); ctx.moveTo(-50, 10); ctx.lineTo(70, 10); ctx.lineTo(75, 30); ctx.lineTo(-55, 30); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#4a2a15'; ctx.lineWidth = 2; ctx.stroke(); // Carriage reinforcement bands ctx.fillStyle = '#666'; ctx.fillRect(-45, 12, 8, 16); ctx.fillRect(15, 12, 8, 16); ctx.fillRect(60, 12, 8, 16); // === BARREL (rotated by angle) === ctx.save(); ctx.translate(10, -5); // Pivot point ctx.rotate(angle * Math.PI / 180); // Barrel body - dark iron const barrelGrad = ctx.createLinearGradient(0, -22, 0, 22); barrelGrad.addColorStop(0, '#3a2a6e'); barrelGrad.addColorStop(0.3, '#5a5a5a'); barrelGrad.addColorStop(0.5, '#666'); barrelGrad.addColorStop(0.7, '#5a5a5a'); barrelGrad.addColorStop(1, '#3a3a3a'); ctx.fillStyle = barrelGrad; ctx.beginPath(); ctx.moveTo(-30, -18); ctx.lineTo(115, -14); ctx.quadraticCurveTo(125, 0, 115, 14); ctx.lineTo(-30, 18); ctx.quadraticCurveTo(-40, 0, -30, -18); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2a2a2a'; ctx.lineWidth = 2.5; ctx.stroke(); // Barrel rings (reinforcement bands) ctx.fillStyle = '#555'; ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5; const ringPositions = [-15, 20, 55, 90]; ringPositions.forEach(rx => { const widthAtPos = 16 - (rx + 30) * 0.02; ctx.beginPath(); ctx.moveTo(rx, -widthAtPos - 1); ctx.lineTo(rx + 8, -widthAtPos - 1); ctx.lineTo(rx + 8, widthAtPos + 1); ctx.lineTo(rx, widthAtPos + 1); ctx.closePath(); ctx.fill(); ctx.stroke(); }); // Muzzle (flared end) ctx.fillStyle = '#3a2a6e'; ctx.beginPath(); ctx.moveTo(110, -16); ctx.lineTo(125, -18); ctx.quadraticCurveTo(130, 0, 125, 18); ctx.lineTo(110, 16); ctx.closePath(); ctx.fill(); ctx.strokeStyle = '#2a2a2a'; ctx.lineWidth = 2; ctx.stroke(); // Bore (dark hole at muzzle end) ctx.fillStyle = '#111'; ctx.beginPath(); ctx.ellipse(126, 0, 3, 14, 0, 0, Math.PI * 2); ctx.fill(); // Barrel shine highlight ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; ctx.beginPath(); ctx.moveTo(-20, -15); ctx.lineTo(100, -12); ctx.lineTo(100, -6); ctx.lineTo(-20, -8); ctx.closePath(); ctx.fill(); // Firing glow at muzzle if (firing) { ctx.fillStyle = 'rgba(255, 200, 50, 0.6)'; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 30; ctx.beginPath(); ctx.arc(125, 0, 20, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } ctx.restore(); // End barrel rotation // === FUSE (on top/back of cannon) === const fuseBaseX = -25; const fuseBaseY = -20; // Fuse string (gets shorter as it burns) const fuseLength = 30 * (1 - fuseProgress); if (fuseLength > 1) { ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(fuseBaseX, fuseBaseY); ctx.quadraticCurveTo( fuseBaseX - fuseLength * 0.5, fuseBaseY - fuseLength * 0.7, fuseBaseX - fuseLength * 0.3, fuseBaseY - fuseLength ); ctx.stroke(); // Spark at fuse tip if (fuseProgress > 0 && fuseProgress < 1) { const sparkX = fuseBaseX - fuseLength * 0.3; const sparkY = fuseBaseY - fuseLength; ctx.fillStyle = '#ffcc00'; ctx.shadowColor = '#ff6600'; ctx.shadowBlur = 12 + Math.sin(Date.now() * 0.03) * 5; ctx.beginPath(); ctx.arc(sparkX, sparkY, 5 + Math.sin(Date.now() * 0.05) * 2, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Glowing ember ctx.fillStyle = '#ff4400'; ctx.beginPath(); ctx.arc(sparkX, sparkY, 3, 0, Math.PI * 2); ctx.fill(); } } // Fuse hole (touch hole on top of barrel) ctx.fillStyle = '#222'; ctx.beginPath(); ctx.arc(fuseBaseX, fuseBaseY, 4, 0, Math.PI * 2); ctx.fill(); // === DECORATIVE DETAILS === // Crown/crest emblem on barrel side ctx.fillStyle = '#8a7030'; ctx.font = 'bold 16px Luckiest Guy'; ctx.textAlign = 'center'; ctx.save(); ctx.translate(40, 0); ctx.rotate(angle * Math.PI / 180); ctx.fillText('☠', 0, 6); ctx.restore(); ctx.restore(); } // Helper: Check if a point (in zombie-local coordinates) is inside the zombie silhouette // Returns the body region name or null. Uses ellipse approximations for each body part. // Only used once when generating laser squares - no per-frame performance cost. function getZombieSilhouetteRegion(lx, ly) { // Head: drawn at part position (0, -115), ellipse center offset +3, so center at (0, -112) { const dx = lx / 34; const dy = (ly - (-112)) / 42; if (dx * dx + dy * dy <= 1) return 'head'; } // Hair spikes above head if (ly >= -158 && ly < -148 && Math.abs(lx) < 24) return 'head'; // Neck connecting head to torso if (ly >= -76 && ly < -70 && Math.abs(lx) < 15) return 'torso'; // Torso: tapered shape from shoulders (-70) to hips (80) if (ly >= -70 && ly <= 80) { let halfWidth; if (ly < -50) halfWidth = 43; // Shoulders (wide) else if (ly < -20) halfWidth = 40; // Upper chest else if (ly < 20) halfWidth = 36; // Waist (narrower) else if (ly < 50) halfWidth = 34; // Abdomen else halfWidth = 33; // Hips if (Math.abs(lx) <= halfWidth) return 'torso'; } // Left Upper Arm: part at (-48, -65), length ~70px, width ~14px each side // Center in zombie-local: (-48, -30) { const dx = (lx - (-48)) / 16; const dy = (ly - (-30)) / 40; if (dx * dx + dy * dy <= 1) return 'leftArm'; } // Right Upper Arm: center at (48, -30) { const dx = (lx - 48) / 16; const dy = (ly - (-30)) / 40; if (dx * dx + dy * dy <= 1) return 'rightArm'; } // Left Forearm + hand: part at (-48, 5), extends ~115px down // Center in zombie-local: (-48, 62) { const dx = (lx - (-48)) / 14; const dy = (ly - 62) / 60; if (dx * dx + dy * dy <= 1) return 'leftArm'; } // Right Forearm + hand: center at (48, 62) { const dx = (lx - 48) / 14; const dy = (ly - 62) / 60; if (dx * dx + dy * dy <= 1) return 'rightArm'; } // Left Thigh: part at (-22, 80), length ~82px // Center in zombie-local: (-22, 121) { const dx = (lx - (-22)) / 20; const dy = (ly - 121) / 44; if (dx * dx + dy * dy <= 1) return 'leftLeg'; } // Right Thigh: center at (22, 121) { const dx = (lx - 22) / 20; const dy = (ly - 121) / 44; if (dx * dx + dy * dy <= 1) return 'rightLeg'; } // Left Lower Leg: part at (-22, 160), calf to ankle ~75px // Center in zombie-local: (-22, 200) { const dx = (lx - (-22)) / 15; const dy = (ly - 200) / 42; if (dx * dx + dy * dy <= 1) return 'leftLeg'; } // Right Lower Leg: center at (22, 200) { const dx = (lx - 22) / 15; const dy = (ly - 200) / 42; if (dx * dx + dy * dy <= 1) return 'rightLeg'; } // Left Foot: part-local y=78 to y=102, wider and flatter // Zombie-local center: (-18, 252) - shifted slightly outward { const dx = (lx - (-18)) / 20; const dy = (ly - 252) / 14; if (dx * dx + dy * dy <= 1) return 'leftLeg'; } // Right Foot: center at (18, 252) { const dx = (lx - 18) / 20; const dy = (ly - 252) / 14; if (dx * dx + dy * dy <= 1) return 'rightLeg'; } return null; } // Optimized batch drawing for laser squares - reduces draw calls dramatically function drawLaserSquaresBatched(ctx, squares) { if (squares.length === 0) return; // Group squares by color for batched fills const colorGroups = {}; for (let i = 0; i < squares.length; i++) { const sq = squares[i]; if (!colorGroups[sq.color]) colorGroups[sq.color] = []; colorGroups[sq.color].push(sq); } // Draw filled squares batched by color (single path per color) for (const color in colorGroups) { const group = colorGroups[color]; ctx.fillStyle = color; ctx.beginPath(); for (let i = 0; i < group.length; i++) { const sq = group[i]; const cx = sq.x + sq.size / 2; const cy = sq.y + sq.size / 2; const hs = sq.size / 2; if (sq.grounded || Math.abs(sq.angularVel) < 5) { // No rotation needed - simple rect (fast path) ctx.rect(sq.x, sq.y, sq.size, sq.size); } else { // Rotated square - manual corners const rad = sq.rotation * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); ctx.moveTo(cx + (-hs * cos - -hs * sin), cy + (-hs * sin + -hs * cos)); ctx.lineTo(cx + (hs * cos - -hs * sin), cy + (hs * sin + -hs * cos)); ctx.lineTo(cx + (hs * cos - hs * sin), cy + (hs * sin + hs * cos)); ctx.lineTo(cx + (-hs * cos - hs * sin), cy + (-hs * sin + hs * cos)); ctx.closePath(); } } ctx.fill(); } // Single outline pass for all squares (dark border) ctx.strokeStyle = '#1a1a1a'; ctx.lineWidth = 1; ctx.beginPath(); for (let i = 0; i < squares.length; i++) { const sq = squares[i]; const cx = sq.x + sq.size / 2; const cy = sq.y + sq.size / 2; const hs = sq.size / 2; if (sq.grounded || Math.abs(sq.angularVel) < 5) { ctx.rect(sq.x, sq.y, sq.size, sq.size); } else { const rad = sq.rotation * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); ctx.moveTo(cx + (-hs * cos - -hs * sin), cy + (-hs * sin + -hs * cos)); ctx.lineTo(cx + (hs * cos - -hs * sin), cy + (hs * sin + -hs * cos)); ctx.lineTo(cx + (hs * cos - hs * sin), cy + (hs * sin + hs * cos)); ctx.lineTo(cx + (-hs * cos - hs * sin), cy + (-hs * sin + hs * cos)); ctx.closePath(); } } ctx.stroke(); } // Animation helper function animate(duration, callback) { return new Promise(resolve => { const startTime = performance.now(); let lastTime = startTime; function step(currentTime) { const elapsed = currentTime - startTime; const t = Math.max(0, Math.min(elapsed / duration, 1)); const dt = Math.min((currentTime - lastTime) / 1000, 0.1); lastTime = currentTime; callback(t, dt); if (t < 1) { requestAnimationFrame(step); } else { resolve(); } } requestAnimationFrame(step); }); } // ============================================================================ // GAME LOOP // ============================================================================ let lastTime = 0; function gameLoop(timestamp) { const dt = Math.min((timestamp - lastTime) / 1000, 0.1); lastTime = timestamp; // Clear canvas ctx.fillStyle = window.gameConfig.settings.backgroundColor || '#1a1a2e'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update trap door animation updateTrapDoor(dt); // Update entrance doors animation updateEntranceDoors(dt); // Apply trap door gravity to falling objects if (trapDoor.isAnimating && trapDoor.phase === 'open') { applyTrapDoorGravity(dt); } // Draw entrance doors (behind zombie) drawEntranceDoors(ctx); // Draw trap door (behind zombie) drawTrapDoor(ctx); // Smoothly animate background darkening overlay if (bgDarkenOpacity !== bgDarkenTarget) { const darkenSpeed = 0.4 * dt; // Slow smooth transition if (bgDarkenOpacity < bgDarkenTarget) { bgDarkenOpacity = Math.min(bgDarkenOpacity + darkenSpeed, bgDarkenTarget); } else { bgDarkenOpacity = Math.max(bgDarkenOpacity - darkenSpeed, bgDarkenTarget); } } // Draw darkening overlay (covers background/doors only, drawn before zombie/effects) if (bgDarkenOpacity > 0) { ctx.fillStyle = `rgba(0, 0, 0, ${bgDarkenOpacity})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Update and draw zombie if (zombie) { // Draw banana peel BEHIND zombie if (bananaPeelRenderState.active) { const peelAlpha = bananaPeelRenderState.alpha !== undefined ? bananaPeelRenderState.alpha : 1; if (peelAlpha > 0) { ctx.save(); ctx.globalAlpha = peelAlpha; drawBananaPeel(ctx, bananaPeelRenderState.x, bananaPeelRenderState.y, bananaPeelRenderState.scale); ctx.restore(); } } // Draw possession ritual scene (pentagram + candles) BEHIND zombie drawPossessionScene(ctx); // Draw bass speakers BEHIND zombie if (bassRenderState.active && bassRenderState.speakers.length > 0) { bassRenderState.speakers.forEach(s => { if (s.x !== undefined) { drawSpeaker(ctx, s.x, s.y, s.scale, s.pulse || 0, s.power || 0); } }); } // Draw toilet BEHIND zombie if (toiletRenderState.active) { drawCartoonToilet(ctx, toiletRenderState.x, toiletRenderState.y, toiletRenderState.lidAngle, toiletRenderState.flushing, toiletRenderState.vortexIntensity); if (toiletRenderState.flushing && toiletRenderState.vortexIntensity > 0) { const vi = toiletRenderState.vortexIntensity; const vortexX = toiletRenderState.x; const vortexY = toiletRenderState.y - 20; const vortexRadius = 60 + vi * 30; ctx.save(); ctx.translate(vortexX, vortexY); const timeBase = Date.now() * 0.001; for (let i = 0; i < 5; i++) { const ringT = (timeBase * 3 + i / 5) % 1; const ringRadius = vortexRadius * (1 - ringT); const alpha = (1 - ringT) * vi * 0.5; ctx.strokeStyle = `rgba(100, 180, 255, ${alpha})`; ctx.lineWidth = 3 - ringT * 2; ctx.beginPath(); ctx.ellipse(0, 0, ringRadius, ringRadius, 0, 0, Math.PI * 2); ctx.stroke(); } for (let i = 0; i < 8; i++) { const angle = Date.now() * 0.008 + i * (Math.PI * 2 / 8); const dist = vortexRadius * (0.3 + (1 - vi) * 0.5) - i * 3; ctx.fillStyle = `rgba(100, 200, 255, ${0.6 * vi})`; ctx.beginPath(); ctx.arc(Math.cos(angle) * dist, Math.sin(angle) * dist, 3, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } } // Draw vaporize beams BEHIND zombie if (vaporizeBeamState.active) { drawVaporizeBeams(ctx); } // Draw anvil shadow BEHIND zombie if (anvilShadow.active) { ctx.save(); ctx.fillStyle = `rgba(0, 0, 0, ${anvilShadow.opacity})`; ctx.beginPath(); ctx.ellipse(anvilShadow.x, anvilShadow.y, anvilShadow.radiusX, anvilShadow.radiusY, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // Draw magic box BEHIND zombie if (magicBoxRenderState.active) { drawMagicBoxBody(ctx, magicBoxRenderState.x, magicBoxRenderState.y); drawMagicBoxSwords(ctx, magicBoxRenderState.x, magicBoxRenderState.y); if (magicBoxRenderState.doorOpenAmount > 0) { drawMagicBoxInterior(ctx, magicBoxRenderState.x, magicBoxRenderState.y); } if (!magicBoxRenderState.doorsInFront) { drawMagicBoxDoors(ctx, magicBoxRenderState.x, magicBoxRenderState.y, magicBoxRenderState.doorOpenAmount); } } // Draw woodchipper BEHIND zombie (unless drawInFront is set) if (woodchipperRenderState.active && !woodchipperRenderState.drawInFront) { drawWoodchipper(ctx, woodchipperRenderState.x + woodchipperRenderState.vibX, woodchipperRenderState.y + woodchipperRenderState.vibY, woodchipperRenderState.wheelsSpinning); } // Draw rocket BEHIND zombie if (rocketRenderState.active) { drawRocketScene(ctx); } zombie.update(dt); // Apply hopper clipping if zombie is inside the woodchipper if (zombie._hopperClipY !== undefined) { ctx.save(); ctx.beginPath(); ctx.rect(0, 0, CANVAS_WIDTH, zombie._hopperClipY); ctx.clip(); } zombie.draw(ctx); if (zombie._hopperClipY !== undefined) { ctx.restore(); } } // Draw magic box doors IN FRONT of zombie when flagged if (magicBoxRenderState.active && magicBoxRenderState.doorsInFront) { drawMagicBoxDoors(ctx, magicBoxRenderState.x, magicBoxRenderState.y, magicBoxRenderState.doorOpenAmount); } // Draw woodchipper IN FRONT of zombie when flagged if (woodchipperRenderState.active && woodchipperRenderState.drawInFront) { drawWoodchipper(ctx, woodchipperRenderState.x + woodchipperRenderState.vibX, woodchipperRenderState.y + woodchipperRenderState.vibY, woodchipperRenderState.wheelsSpinning); } // Draw guillotine scene (frame + lever) when active if (guillotineSceneState.active) { drawGuillotineScene(ctx); } // Update and draw sliced pieces (dynamically cut body parts) slicedPieces = slicedPieces.filter(piece => { const alive = piece.update(dt); if (alive) piece.draw(ctx); return alive; }); // Update and draw particles particles = particles.filter(p => { const alive = p.update(dt); if (alive) p.draw(ctx); return alive; }); // Draw interactive sword if active drawSword(ctx); // Update sword drop physics if dropping if (sword.active && sword.dropping) { const groundY = CANVAS_HEIGHT - 250; // Ground level // Apply gravity sword.dropVelocityY += 1500 * dt; sword.y += sword.dropVelocityY * dt; // Apply angular velocity (spinning as it falls) sword.angle += sword.dropAngularVel * dt; sword.dropAngularVel *= 0.99; // Slight damping // Ground collision if (sword.y > groundY) { sword.y = groundY; sword.dropVelocityY = -sword.dropVelocityY * 0.3; // Bounce sword.dropAngularVel *= 0.5; // Reduce spin on impact // Play impact sound on first bounce if (sword.dropVelocityY < -50) { playSound('crush_sound', 0.3); } // Stop bouncing if velocity is low if (Math.abs(sword.dropVelocityY) < 30) { sword.dropVelocityY = 0; // Settle to a resting angle (laying on ground) const restAngle = -75 + (Math.random() - 0.5) * 20; sword.angle += (restAngle - sword.angle) * 0.1; sword.dropAngularVel = 0; } } } // Draw interactive chainsaw if active drawChainsaw(ctx); // Draw interactive flamethrower if active drawFlamethrower(ctx); // Check flamethrower damage each frame if (flamethrower.active && flamethrower.firing) { checkFlamethrowerDamage(); } // Check chainsaw delayed collapse timer (zombie stands for 3 seconds before falling) if (chainsaw.active && chainsaw.collapseStartTime !== null) { const timeSinceFirstDamage = Date.now() - chainsaw.collapseStartTime; if (timeSinceFirstDamage >= chainsaw.collapseDelay) { // Time to collapse! Detach all marked parts at once triggerChainsawCollapse(); } else if (Object.keys(chainsaw.partsReadyToDetach).length > 0 && zombie) { // Still standing - zombie wobbles/shudders while waiting to collapse if (Math.random() < 0.1) { zombie.applyImpulse((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10); } } } // Check sword delayed collapse timer (zombie stands for 3 seconds before falling) if (sword.active && sword.collapseStartTime !== null) { const timeSinceFirstDamage = Date.now() - sword.collapseStartTime; if (timeSinceFirstDamage >= sword.collapseDelay) { // Time to collapse! Detach all marked parts at once triggerSwordCollapse(); } else if (Object.keys(sword.partsReadyToDetach).length > 0 && zombie) { // Still standing - zombie wobbles/shudders while waiting to collapse if (Math.random() < 0.1) { zombie.applyImpulse((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10); } } } // Draw freeze wind visuals ON TOP of zombie and all other elements if (freezeWindRenderState.active) { drawFreezeWind(ctx, freezeWindRenderState.t, freezeWindRenderState.windIntensity); } // Decay pulse if (labCounterPulse > 0) { labCounterPulse = Math.max(0, labCounterPulse - dt * 4); } // Decay outline flash if (labCounterOutlineFlash > 0) { labCounterOutlineFlash = Math.max(0, labCounterOutlineFlash - dt * 2.5); } // Loading fade-in overlay (smooth transition from loading screen to gameplay) if (loadingFadeIn > 0) { loadingFadeIn = Math.max(0, loadingFadeIn - dt * 1.25); // Fades out over ~800ms ctx.fillStyle = `rgba(12, 18, 37, ${loadingFadeIn})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } // Draw the lab counter last (always on top) drawLabCounter(ctx); requestAnimationFrame(gameLoop); } // ============================================================================ // UI FUNCTIONS // ============================================================================ function createMethodButtons() { const container = document.getElementById('method-buttons'); container.innerHTML = ''; KILL_METHODS.forEach((method, index) => { if (!window.gameConfig.methods[method.id]) return; const button = document.createElement('button'); button.className = 'method-button'; button.dataset.method = method.id; // Icon const asset = lib.getAsset(method.icon); if (asset) { const img = document.createElement('img'); img.src = asset.url; img.alt = method.name; button.appendChild(img); } // Label const label = document.createElement('span'); label.className = 'label'; label.textContent = method.name; button.appendChild(label); // Keyboard shortcut (desktop only) if (!lib.shouldUseTouchControls()) { const shortcut = document.createElement('span'); shortcut.className = 'shortcut'; shortcut.textContent = method.key; button.appendChild(shortcut); } button.addEventListener('click', () => executeMethod(method.id)); container.appendChild(button); }); } // ============================================================================ // CANVAS-DRAWN LAB SPECIMENS COUNTER // ============================================================================ // Counter panel position (top-right corner) const LAB_COUNTER_X = CANVAS_WIDTH - 20; // right anchor const LAB_COUNTER_Y = 18; const LAB_COUNTER_W = 200; const LAB_COUNTER_H = 110; // Pulse animation state let labCounterPulse = 0; // 0-1, springs back to 0 let labCounterOutlineFlash = 0; // 0-1, flashes on increment then decays let labEpicWinMode = false; // When true, counter shows "EPIC WIN" instead of count let labCureReadyMode = false; // When true, counter shows flashing "CURE READY" in yellow function drawLabCounter(ctx) { const x = LAB_COUNTER_X - LAB_COUNTER_W; // left edge of panel const y = LAB_COUNTER_Y; const w = LAB_COUNTER_W; const h = LAB_COUNTER_H; const pulse = labCounterPulse; ctx.save(); // ── PIPES ──────────────────────────────────────────────────────────────── // Pipes run from the bottom-right of the panel downward and to the right // off screen. They are drawn FIRST so the panel sits on top. const pipeX1 = x + w - 28; // vertical pipe center X const pipeX2 = x + w - 12; // second vertical pipe center X const pipeBendY = y + h + 55; // where vertical pipes bend horizontal const pipeColor = '#5a6a7a'; const pipeDark = '#2a3a48'; const pipeShine = '#8aacbc'; // Helper: draw a horizontal+vertical pipe with banded appearance function drawPipe(cx, fromY, toY, bendY, towardsRight) { const r = 8; // pipe radius // Vertical segment ctx.fillStyle = pipeColor; ctx.fillRect(cx - r, fromY, r * 2, bendY - fromY + r); // Shine ctx.fillStyle = pipeShine; ctx.fillRect(cx - r + 2, fromY, 4, bendY - fromY + r); // Shadow ctx.fillStyle = pipeDark; ctx.fillRect(cx + r - 3, fromY, 3, bendY - fromY + r); // Outline ctx.strokeStyle = pipeDark; ctx.lineWidth = 1.5; ctx.strokeRect(cx - r, fromY, r * 2, bendY - fromY + r); // Elbow cap ctx.fillStyle = pipeColor; ctx.beginPath(); ctx.arc(cx, bendY, r + 2, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = pipeDark; ctx.lineWidth = 1.5; ctx.stroke(); // Horizontal segment going off screen to the right const hFromX = towardsRight ? cx + r + 2 : cx - r - 2; const hToX = CANVAS_WIDTH + 20; if (towardsRight) { ctx.fillStyle = pipeColor; ctx.fillRect(hFromX, bendY - r, hToX - hFromX, r * 2); ctx.fillStyle = pipeShine; ctx.fillRect(hFromX, bendY - r, hToX - hFromX, 4); ctx.fillStyle = pipeDark; ctx.fillRect(hFromX, bendY + r - 3, hToX - hFromX, 3); ctx.strokeStyle = pipeDark; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(hFromX, bendY - r); ctx.lineTo(hToX, bendY - r); ctx.moveTo(hFromX, bendY + r); ctx.lineTo(hToX, bendY + r); ctx.stroke(); } // Pipe bands (every 30px) ctx.fillStyle = pipeDark; for (let by = fromY + 20; by < bendY - 4; by += 28) { ctx.fillRect(cx - r - 2, by, r * 2 + 4, 5); } } // Draw two pipes, slightly different heights drawPipe(pipeX1, y + h - 6, 0, pipeBendY, true); drawPipe(pipeX2, y + h - 6, 0, pipeBendY + 30, true); // Tiny pressure gauge on first pipe vertical section const gaugeY = y + h + 22; ctx.fillStyle = '#3a4a58'; ctx.beginPath(); ctx.arc(pipeX1, gaugeY, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#e8e0c8'; ctx.beginPath(); ctx.arc(pipeX1, gaugeY, 7, 0, Math.PI * 2); ctx.fill(); // Needle const needleAngle = -Math.PI * 0.7 + (window.gameConfig.stats.killCount / 39) * Math.PI * 1.4; ctx.strokeStyle = '#cc2222'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(pipeX1, gaugeY); ctx.lineTo(pipeX1 + Math.cos(needleAngle) * 5, gaugeY + Math.sin(needleAngle) * 5); ctx.stroke(); ctx.fillStyle = '#555'; ctx.beginPath(); ctx.arc(pipeX1, gaugeY, 2, 0, Math.PI * 2); ctx.fill(); // ── PANEL ──────────────────────────────────────────────────────────────── // Outer metal frame (inset shadow) ctx.shadowColor = 'rgba(0,0,0,0.7)'; ctx.shadowBlur = 12; ctx.shadowOffsetY = 4; ctx.fillStyle = '#2a3440'; ctx.beginPath(); ctx.roundRect(x - 4, y - 4, w + 8, h + 8, 10); ctx.fill(); ctx.shadowBlur = 0; ctx.shadowOffsetY = 0; // Rivets (corner bolts) const boltPositions = [ [x + 10, y + 10], [x + w - 10, y + 10], [x + 10, y + h - 10], [x + w - 10, y + h - 10] ]; boltPositions.forEach(([bx, by]) => { ctx.fillStyle = '#4a5a68'; ctx.beginPath(); ctx.arc(bx, by, 6, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#8aacbc'; ctx.beginPath(); ctx.arc(bx - 1.5, by - 1.5, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#1a2a38'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(bx, by, 6, 0, Math.PI * 2); ctx.stroke(); }); // Panel face – brushed metal gradient const panelGrad = ctx.createLinearGradient(x, y, x, y + h); panelGrad.addColorStop(0, '#3e5060'); panelGrad.addColorStop(0.2, '#4a5e70'); panelGrad.addColorStop(0.5, '#3a4e5e'); panelGrad.addColorStop(0.8, '#2e4050'); panelGrad.addColorStop(1, '#253545'); ctx.fillStyle = panelGrad; ctx.beginPath(); ctx.roundRect(x, y, w, h, 7); ctx.fill(); // Horizontal brush-lines for "machined metal" look ctx.save(); ctx.beginPath(); ctx.roundRect(x, y, w, h, 7); ctx.clip(); ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1; for (let ly = y + 3; ly < y + h; ly += 4) { ctx.beginPath(); ctx.moveTo(x, ly); ctx.lineTo(x + w, ly); ctx.stroke(); } ctx.restore(); // Panel border ctx.strokeStyle = '#6a8a9a'; ctx.lineWidth = 2; ctx.beginPath(); ctx.roundRect(x, y, w, h, 7); ctx.stroke(); // Flashing outline on increment (red if below quota, green if quota met) if (labCounterOutlineFlash > 0) { const quotaMetFlash = window.gameConfig.stats.killCount >= 39; const flashColor = quotaMetFlash ? '68, 255, 68' : '255, 68, 68'; const flashAlpha = labCounterOutlineFlash * (0.6 + Math.sin(labCounterOutlineFlash * 12) * 0.4); ctx.strokeStyle = `rgba(${flashColor}, ${flashAlpha})`; ctx.lineWidth = 4 + labCounterOutlineFlash * 3; ctx.shadowColor = quotaMetFlash ? '#44ff44' : '#ff4444'; ctx.shadowBlur = 20 * labCounterOutlineFlash; ctx.beginPath(); ctx.roundRect(x - 3, y - 3, w + 6, h + 6, 9); ctx.stroke(); ctx.shadowBlur = 0; } // Top edge highlight (chamfered) ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x + 8, y + 1); ctx.lineTo(x + w - 8, y + 1); ctx.stroke(); // ── DISPLAY WINDOW ─────────────────────────────────────────────────────── const dispX = x + 16; const dispY = y + 36; const dispW = w - 32; const dispH = 52; // LCD recess / dark inset ctx.fillStyle = '#0a1018'; ctx.beginPath(); ctx.roundRect(dispX - 3, dispY - 3, dispW + 6, dispH + 6, 5); ctx.fill(); ctx.strokeStyle = '#1a2a3a'; ctx.lineWidth = 2; ctx.beginPath(); ctx.roundRect(dispX - 3, dispY - 3, dispW + 6, dispH + 6, 5); ctx.stroke(); // LCD screen const lcdGrad = ctx.createLinearGradient(dispX, dispY, dispX, dispY + dispH); lcdGrad.addColorStop(0, '#0f1f0f'); lcdGrad.addColorStop(0.4, '#102010'); lcdGrad.addColorStop(1, '#0a1a0a'); ctx.fillStyle = lcdGrad; ctx.beginPath(); ctx.roundRect(dispX, dispY, dispW, dispH, 3); ctx.fill(); // Scan-line overlay ctx.save(); ctx.beginPath(); ctx.roundRect(dispX, dispY, dispW, dispH, 3); ctx.clip(); ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 1; for (let sl = dispY + 1; sl < dispY + dispH; sl += 3) { ctx.beginPath(); ctx.moveTo(dispX, sl); ctx.lineTo(dispX + dispW, sl); ctx.stroke(); } ctx.restore(); // ── NUMBER DISPLAY ─────────────────────────────────────────────────────── const count = window.gameConfig.stats.killCount; const dispScale = 1 + pulse * 0.3; const displayCenterX = dispX + dispW / 2; const displayCenterY = dispY + dispH / 2 + 7; ctx.save(); ctx.translate(displayCenterX, displayCenterY); ctx.scale(dispScale, dispScale); if (labEpicWinMode) { // "EPIC WIN" flashing in yellow/gold ctx.shadowColor = '#ffff00'; ctx.shadowBlur = 18 + pulse * 20; ctx.fillStyle = '#ffe844'; ctx.font = 'bold 20px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('EPIC WIN', 0, 0); ctx.shadowBlur = 0; } else if (labCureReadyMode) { // "CURE READY" flashing in yellow when all weapons used const flashT = Date.now() * 0.005; const flashAlpha = 0.75 + Math.sin(flashT) * 0.25; ctx.shadowBlur = 0; ctx.fillStyle = `rgba(255, 238, 68, ${flashAlpha})`; ctx.font = 'bold 24px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Strong dark stroke outline for maximum visibility without glow ctx.strokeStyle = 'rgba(80, 60, 0, 0.9)'; ctx.lineWidth = 4; ctx.lineJoin = 'round'; ctx.strokeText('CURE READY', 0, 0); ctx.fillText('CURE READY', 0, 0); } else { // Normal count display - RED until quota (39) is met, then GREEN // Flashes white-hot on increment then settles back to base color const quotaMet = count >= 39; const flashWhite = Math.max(0, labCounterOutlineFlash - 0.3) / 0.7; // white flash decays const baseColor = quotaMet ? '#22ff66' : '#ff3333'; const flashedColor = flashWhite > 0 ? `rgba(255, 255, 255, ${flashWhite})` : null; ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.fillStyle = baseColor; ctx.font = 'bold 46px Luckiest Guy'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(count).padStart(2, '0'), 0, 0); // White flash overlay on number if (flashedColor) { ctx.fillStyle = flashedColor; ctx.fillText(String(count).padStart(2, '0'), 0, 0); } ctx.shadowBlur = 0; } ctx.restore(); // ── LABEL ──────────────────────────────────────────────────────────────── ctx.fillStyle = '#88aacc'; ctx.font = 'bold 19px Luckiest Guy'; ctx.textAlign = 'center'; ctx.letterSpacing = '2px'; ctx.fillText('SPECIMENS', x + w / 2, y + 22); ctx.letterSpacing = ''; // Status indicator light (top-left of panel) - matches counter color const litColor = count >= 39 ? '#44ff88' : '#ff4444'; ctx.fillStyle = litColor; ctx.shadowColor = litColor; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(x + 24, y + h - 15, 5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // ── PIPE CONNECTORS on panel bottom ────────────────────────────────────── [pipeX1, pipeX2].forEach(px => { ctx.fillStyle = '#3a4a58'; ctx.fillRect(px - 10, y + h - 2, 20, 10); ctx.fillStyle = '#4a6070'; ctx.fillRect(px - 8, y + h, 16, 5); ctx.strokeStyle = '#1a2a38'; ctx.lineWidth = 1; ctx.strokeRect(px - 10, y + h - 2, 20, 10); }); ctx.restore(); } function updateKillCounter() { const el = document.getElementById('kill-count'); el.textContent = window.gameConfig.stats.killCount; // Trigger intense pulse animation on canvas counter number labCounterPulse = 1.5; // Trigger outline flash around the box labCounterOutlineFlash = 1; } // Update green checkmarks on weapon buttons based on usedMethods set function updateButtonCheckmarks() { const quotaMet = window.gameConfig.stats.killCount >= 39; let allUsed = true; document.querySelectorAll('.method-button').forEach(btn => { const methodId = btn.dataset.method; const alreadyHasCheck = btn.querySelector('.used-check'); if (usedMethods.has(methodId) && !alreadyHasCheck) { const check = document.createElement('span'); check.className = 'used-check'; check.textContent = '✓'; btn.appendChild(check); } else if (!usedMethods.has(methodId) && alreadyHasCheck) { alreadyHasCheck.remove(); } // Track if all methods have been used if (!usedMethods.has(methodId)) { allUsed = false; } // Flash cure button yellow when quota is met if (methodId === 'cure') { if (quotaMet && !labEpicWinMode) { btn.classList.add('cure-ready-flash'); } else { btn.classList.remove('cure-ready-flash'); } } }); // Show "CURE READY" in specimen counter when quota is met (and not in epic win mode) labCureReadyMode = quotaMet && !labEpicWinMode; } // Increment specimens counter only if this method hasn't been used before function incrementSpecimens() { if (lastMethod && !usedMethods.has(lastMethod)) { usedMethods.add(lastMethod); window.gameConfig.stats.killCount++; updateKillCounter(); updateButtonCheckmarks(); lib.saveUserGameState({ killCount: window.gameConfig.stats.killCount, usedMethods: Array.from(usedMethods) }).catch(e => lib.log('Failed to save progress: ' + e.message)); } } function setButtonsEnabled(enabled) { document.querySelectorAll('.method-button').forEach(btn => { btn.disabled = !enabled; }); document.getElementById('reset-button').disabled = !enabled; } function highlightMethod(methodId) { document.querySelectorAll('.method-button').forEach(btn => { btn.classList.toggle('selected', btn.dataset.method === methodId); }); } function showAnimationIndicator(text) { const indicator = document.getElementById('animation-indicator'); indicator.textContent = text; indicator.classList.add('visible'); } function hideAnimationIndicator() { document.getElementById('animation-indicator').classList.remove('visible'); } // ============================================================================ // GAME ACTIONS // ============================================================================ async function executeMethod(methodId) { if (isAnimating || gameMode === 'edit') return; const method = KILL_METHODS.find(m => m.id === methodId); if (!method || !window.gameConfig.methods[methodId]) return; // Cancel any pending auto-reset when starting new method cancelAutoReset(); isAnimating = true; lastMethod = methodId; setButtonsEnabled(false); // Darken background for emphasis bgDarkenTarget = window.gameConfig.settings.bgDarkenAmount || 0.3; highlightMethod(methodId); // Play button click sound playSound('button_click_sound', 0.5); // Interactive methods handle their own auto-reset timing const interactiveMethods = ['sword', 'chainsaw', 'flamethrower', 'laser', 'blackhole', 'wreckingball', 'ufo', 'swat', 'traffic', 'portal']; const isInteractive = interactiveMethods.includes(methodId); try { // Execute the kill animation if (killAnimations[methodId]) { await killAnimations[methodId](); } // Increment specimens counter (only for non-interactive - interactive methods count their own) if (!isInteractive) { incrementSpecimens(); // Schedule auto-reset for non-interactive methods scheduleAutoReset(); } } finally { isAnimating = false; // Only re-enable the reset button after a kill. // Weapon buttons stay disabled until a new zombie spawns. document.getElementById('reset-button').disabled = false; } } // Schedule auto-reset after 2 seconds function scheduleAutoReset() { // Cancel any existing auto-reset timeout cancelAutoReset(); // Schedule new reset after 2 seconds autoResetTimeout = setTimeout(() => { autoResetTimeout = null; // Only reset if not already resetting and game is in play mode if (!trapDoor.isAnimating && gameMode === 'play') { resetZombie(); } }, 2000); } // Cancel any pending auto-reset function cancelAutoReset() { if (autoResetTimeout) { clearTimeout(autoResetTimeout); autoResetTimeout = null; } } function resetZombie() { if (isAnimating && !sword.active && !flamethrower.active && !chainsaw.active && !guillotineSceneState.active && !rocketRenderState.active) return; // Allow reset during interactive modes if (trapDoor.isAnimating) return; // Don't reset while trap door is animating // Cancel any pending auto-reset since we're resetting now cancelAutoReset(); playSound('button_click_sound', 0.3); // Deactivate sword if active deactivateSword(); // Deactivate chainsaw if active deactivateChainsaw(); // Deactivate flamethrower if active deactivateFlamethrower(); // Deactivate guillotine scene if active guillotineSceneState.active = false; guillotineBladeState.active = false; // Deactivate rocket if active rocketRenderState.active = false; // Check if there are remains to dump (zombie exists or there are pieces/particles) let hasDetachedParts = false; if (zombie) { for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && !part.attached && part.visible) { hasDetachedParts = true; break; } } } const hasRemains = zombie && ( zombie.globalAlpha > 0 || hasDetachedParts || slicedPieces.length > 0 || particles.length > 5 ); if (hasRemains) { // Animate trap door to dump remains resetWithTrapDoor(); } else { // Just reset immediately performReset(); } } async function resetWithTrapDoor() { // Disable buttons during animation setButtonsEnabled(false); // Open trap door await openTrapDoor(); // Wait for things to fall through the pit - close as soon as they hit bottom await new Promise(resolve => { const bottomThreshold = CANVAS_HEIGHT + 300; // Well past the bottom of the screen so parts are fully gone const maxWaitTime = 5000; // Maximum wait time as fallback const startTime = Date.now(); function checkFallen() { const elapsed = Date.now() - startTime; // Check if zombie has fallen to bottom let zombieFallen = true; if (zombie && zombie.globalAlpha > 0) { const zombieBottomY = zombie.baseY + 280 * zombie.scale; // Bottom of zombie feet zombieFallen = zombieBottomY > bottomThreshold; } // Check if all sliced pieces have fallen to bottom let piecesFallen = true; for (const piece of slicedPieces) { if (piece.visible && piece.y < bottomThreshold) { piecesFallen = false; break; } } // Check if all detached body parts have fallen let partsFallen = true; if (zombie) { for (const partName in zombie.parts) { const part = zombie.parts[partName]; if (part && !part.attached && part.visible) { const partWorldY = zombie.baseY + part.y * zombie.scale; if (partWorldY < bottomThreshold) { partsFallen = false; break; } } } } // Close doors when everything has fallen OR max time reached if ((zombieFallen && piecesFallen && partsFallen) || elapsed > maxWaitTime) { resolve(); } else { requestAnimationFrame(checkFallen); } } // Start checking after a brief moment to let gravity kick in setTimeout(checkFallen, 100); }); // Clear everything while off-screen zombie = null; particles = []; slicedPieces = []; // Close trap door await closeTrapDoor(); // Small delay before spawning new zombie await new Promise(resolve => setTimeout(resolve, 133)); // Create fresh zombie performReset(); // Re-enable buttons setButtonsEnabled(true); } function performReset() { // Clear particles and sliced pieces particles = []; slicedPieces = []; // Reset banana peel render state bananaPeelRenderState.active = false; // Reset EPIC WIN counter mode labEpicWinMode = false; // Reset bass render state bassRenderState.active = false; bassRenderState.speakers = []; // Reset possession render state possessionRenderState.active = false; possessionRenderState.pentagramProgress = 0; possessionRenderState.candles = []; possessionRenderState.floorShadowActive = false; possessionRenderState.floorShadowProgress = 0; // Reset toilet render state toiletRenderState.active = false; toiletRenderState.flushing = false; toiletRenderState.vortexIntensity = 0; // Reset door damage doorDamageLevel = 0; // Clear magic box render state magicBoxRenderState.active = false; magicBoxRenderState.doorsInFront = false; magicBoxRenderState.doorOpenAmount = 0; magicBoxRenderState.swords = []; magicBoxRenderState.showPieces = false; magicBoxRenderState.showEmpty = false; // Clear woodchipper render state woodchipperRenderState.active = false; woodchipperRenderState.drawInFront = false; // Clear vaporize beam render state vaporizeBeamState.active = false; // Clear guillotine blade state guillotineBladeState.active = false; guillotineSceneState.active = false; // Clear rocket render state rocketRenderState.active = false; // Reset animation state if sword was active if (isAnimating) { isAnimating = false; } highlightMethod(null); // Spawn zombie with door animation spawnZombieWithDoorAnimation(); } async function spawnZombieWithDoorAnimation() { setButtonsEnabled(false); const targetX = CANVAS_WIDTH / 2; const targetY = CANVAS_HEIGHT * window.gameConfig.zombie.positionY; const targetScale = window.gameConfig.zombie.scale; // Create zombie positioned at doors (will emerge from between them) zombie = new Zombie( targetX, targetY, targetScale ); zombie.globalAlpha = 0; // Hidden initially - will fade in zombie.globalScale = 0.3; // Start small - will scale up // Open the sliding doors await openEntranceDoors(); // Small pause with doors open - dramatic reveal moment await new Promise(resolve => setTimeout(resolve, 200)); // Start closing doors immediately as zombie appears closeEntranceDoors(); // Don't await - let it close while zombie walks // Brighten background back up as new zombie appears bgDarkenTarget = 0; // Zombie emerges - fade in, scale up, and walk forward const walkDuration = 800; // ms (50% faster) const walkStartTime = performance.now(); await new Promise(resolve => { function walkStep(currentTime) { const elapsed = currentTime - walkStartTime; const t = Math.min(elapsed / walkDuration, 1); // Easing functions for smooth animation const easeOutCubic = 1 - Math.pow(1 - t, 3); const easeInOutQuad = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // FADE IN: Gradual fade from transparent to fully visible // Starts slow, then accelerates (first 60% of animation) if (t < 0.6) { zombie.globalAlpha = Math.pow(t / 0.6, 1.5); // Slow start fade } else { zombie.globalAlpha = 1; } // SCALE UP: Grow from 0.3 to 1.0 scale (gives depth illusion - walking toward camera) // Most scaling happens in first 70% of animation const scaleProgress = Math.min(t / 0.7, 1); const scaleEase = 1 - Math.pow(1 - scaleProgress, 2.5); zombie.globalScale = 0.3 + scaleEase * 0.7; // WALK ANIMATION: Zombie shambles forward const walkCycle = t * 8; // Number of steps (more steps = zombie shuffle) const walkProgress = easeOutCubic; // Position: Start further back, walk to final position // Subtle Y movement to simulate walking toward viewer const startY = targetY + 30; zombie.baseY = startY - walkProgress * 30; // Body bob (up and down with each step) const bobAmount = Math.sin(walkCycle * Math.PI) * 4 * (1 - t * 0.5); // Decreases as zombie settles zombie.baseY += bobAmount; // Torso sway (side to side shuffling) const swayAmount = Math.sin(walkCycle * Math.PI * 0.5) * 3 * (1 - t * 0.3); zombie.parts.torso.rotation = swayAmount; // Head slight lag/wobble if (zombie.parts.head.attached) { zombie.parts.head.rotation = -swayAmount * 0.4 + Math.sin(walkCycle * Math.PI * 0.7) * 2; } // Arm swing (opposite to leg movement, zombie shuffle style) if (zombie.parts.leftUpperArm.attached) { const armSwing = Math.sin(walkCycle * Math.PI) * 20 * (1 - t * 0.3); zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle + armSwing; } if (zombie.parts.rightUpperArm.attached) { const armSwing = Math.sin(walkCycle * Math.PI) * 20 * (1 - t * 0.3); zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle - armSwing; } // Forearm dangle if (zombie.parts.leftForearm.attached) { zombie.parts.leftForearm.rotation = Math.sin(walkCycle * Math.PI + 0.5) * 10 * (1 - t * 0.5); } if (zombie.parts.rightForearm.attached) { zombie.parts.rightForearm.rotation = -Math.sin(walkCycle * Math.PI + 0.5) * 10 * (1 - t * 0.5); } // Leg movement (alternating steps) if (zombie.parts.leftThigh.attached) { const legSwing = Math.sin(walkCycle * Math.PI) * 12 * (1 - t * 0.4); zombie.parts.leftThigh.rotation = legSwing; } if (zombie.parts.rightThigh.attached) { const legSwing = Math.sin(walkCycle * Math.PI) * 12 * (1 - t * 0.4); zombie.parts.rightThigh.rotation = -legSwing; } // Lower legs follow thighs with slight delay if (zombie.parts.leftLowerLeg.attached) { zombie.parts.leftLowerLeg.rotation = Math.sin(walkCycle * Math.PI - 0.3) * 8 * (1 - t * 0.5); } if (zombie.parts.rightLowerLeg.attached) { zombie.parts.rightLowerLeg.rotation = -Math.sin(walkCycle * Math.PI - 0.3) * 8 * (1 - t * 0.5); } if (t < 1) { requestAnimationFrame(walkStep); } else { // Reset to idle pose smoothly zombie.baseY = targetY; zombie.globalAlpha = 1; zombie.globalScale = 1; zombie.parts.torso.rotation = 0; zombie.parts.head.rotation = 0; if (zombie.parts.leftUpperArm.attached) zombie.parts.leftUpperArm.rotation = zombie.parts.leftUpperArm.restAngle; if (zombie.parts.rightUpperArm.attached) zombie.parts.rightUpperArm.rotation = zombie.parts.rightUpperArm.restAngle; if (zombie.parts.leftForearm.attached) zombie.parts.leftForearm.rotation = zombie.parts.leftForearm.restAngle; if (zombie.parts.rightForearm.attached) zombie.parts.rightForearm.rotation = zombie.parts.rightForearm.restAngle; if (zombie.parts.leftThigh.attached) zombie.parts.leftThigh.rotation = 0; if (zombie.parts.rightThigh.attached) zombie.parts.rightThigh.rotation = 0; if (zombie.parts.leftLowerLeg.attached) zombie.parts.leftLowerLeg.rotation = zombie.parts.leftLowerLeg.restAngle; if (zombie.parts.rightLowerLeg.attached) zombie.parts.rightLowerLeg.rotation = zombie.parts.rightLowerLeg.restAngle; resolve(); } } requestAnimationFrame(walkStep); }); // Wait for doors to finish closing (they started closing when zombie appeared) while (entranceDoors.isAnimating) { await new Promise(resolve => setTimeout(resolve, 50)); } // Enable buttons setButtonsEnabled(true); } // ============================================================================ // INPUT HANDLING // ============================================================================ function setupInputHandlers() { // Reset button document.getElementById('reset-button').addEventListener('click', resetZombie); // Keyboard shortcuts (desktop) if (!lib.shouldUseTouchControls()) { document.addEventListener('keydown', (e) => { if (gameMode === 'edit') return; // Number keys 1-0 for methods const keyIndex = '1234567890'.indexOf(e.key); if (keyIndex !== -1 && keyIndex < KILL_METHODS.length) { const method = KILL_METHODS[keyIndex]; if (window.gameConfig.methods[method.id]) { executeMethod(method.id); } } // R to reset if (e.key.toLowerCase() === 'r') { resetZombie(); } // Space to repeat last method if (e.key === ' ' && lastMethod) { e.preventDefault(); executeMethod(lastMethod); } }); } } // ============================================================================ // ASSET LOADING // ============================================================================ async function preloadAssets() { const imageIds = KILL_METHODS.map(m => m.icon); const audioIds = [ 'button_click_sound', 'sword_slash_sound', 'explosion_sound', 'fire_sound', 'freeze_sound', 'shatter_sound', 'chainsaw_sound', 'lightning_sound', 'crush_sound', 'laser_sound', // New sounds 'guillotine_sound', 'piranha_sound', 'vaporize_sound', 'crusher_sound', 'tornado_sound', 'psychic_sound', 'wrecking_ball_sound', 'blackhole_sound', 'lava_sound', 'bees_sound', // Newer sounds 'piano_sound', 'ufo_sound', 'toilet_sound', 'meteor_sound', 'banana_sound', 'rocket_sound', 'shrinkray_sound', 'catapult_sound', 'boxing_sound', 'spikes_sound', 'bass_sound', 'possession_sound', 'inflate_sound', 'cannon_sound', 'beartrap_sound', 'fan_sound', 'vendingmachine_sound', 'portal_sound', 'lawnmower_sound', 'chickens_sound', 'truck_horn_sound' ]; // Load images const imagePromises = imageIds.map(id => { return new Promise((resolve) => { const asset = lib.getAsset(id); if (asset) { const img = new Image(); img.onload = () => { imageCache[id] = img; resolve(); }; img.onerror = () => resolve(); img.src = asset.url; } else { resolve(); } }); }); // Load audio const audioPromises = audioIds.map(id => loadAudio(id)); await Promise.all([...imagePromises, ...audioPromises]); } // ============================================================================ // MAIN RUN FUNCTION // ============================================================================ // Apply reset button visibility based on setting function applyResetButtonVisibility() { const btn = document.getElementById('reset-button'); if (btn) { btn.style.display = window.gameConfig.settings.showResetButton === false ? 'none' : ''; } } // ============================================================================ // LOADING SCREEN - Building fills with zombies, then zooms into lab // ============================================================================ async function playLoadingScreen(assetsPromise) { // Building parameters (same as wrecking ball/traffic for visual consistency) const buildingW = 200; const buildingH = 850; const buildingCenterX = CANVAS_WIDTH / 2; const buildingTopY = 80; const buildingBottomY = buildingTopY + buildingH; const bLeft = buildingCenterX - buildingW / 2; // Window grid const winCols = 3; const winRows = 9; const winW = 46; const winH = 62; const winGapX = 14; const winGapY = 18; const winMarginX = (buildingW - winCols * winW - (winCols - 1) * winGapX) / 2; const winMarginY = 40; const zombieWinRow = 4; const zombieWinCol = 1; function getWinPos(row, col) { return { x: bLeft + winMarginX + col * (winW + winGapX), y: buildingTopY + winMarginY + row * (winH + winGapY) }; } // Helper: Draw sky + ground background function drawBackground() { // Rich sky gradient: deep blue-violet at top, bright sky blue mid, warm horizon haze at bottom const skyGrad = ctx.createLinearGradient(0, 0, 0, buildingBottomY); skyGrad.addColorStop(0, '#2a5f9e'); // deep cerulean at zenith skyGrad.addColorStop(0.25, '#4a8fcc'); // mid sky blue skyGrad.addColorStop(0.6, '#87CEEB'); // classic sky blue skyGrad.addColorStop(0.82, '#b8d8f0'); // pale blue approaching horizon skyGrad.addColorStop(1, '#d6e8f5'); // creamy white-blue horizon haze ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, buildingBottomY); // Soft atmospheric haze glow near horizon (warm orange-white) const hazeGrad = ctx.createLinearGradient(0, buildingBottomY - 120, 0, buildingBottomY); hazeGrad.addColorStop(0, 'rgba(255, 220, 160, 0)'); hazeGrad.addColorStop(1, 'rgba(255, 200, 120, 0.18)'); ctx.fillStyle = hazeGrad; ctx.fillRect(0, buildingBottomY - 120, CANVAS_WIDTH, 120); // Clouds (layered for depth) ctx.fillStyle = 'rgba(255, 255, 255, 0.82)'; ctx.beginPath(); ctx.ellipse(120, 110, 78, 28, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(165, 118, 55, 22, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'rgba(255, 255, 255, 0.72)'; ctx.beginPath(); ctx.ellipse(580, 90, 62, 24, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(615, 100, 40, 18, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'rgba(255, 255, 255, 0.60)'; ctx.beginPath(); ctx.ellipse(350, 185, 50, 18, 0, 0, Math.PI * 2); ctx.fill(); // Ground: rich asphalt gradient with slight warm/cool tones const groundGrad = ctx.createLinearGradient(0, buildingBottomY, 0, CANVAS_HEIGHT); groundGrad.addColorStop(0, '#686868'); // lighter near building base (sky reflection) groundGrad.addColorStop(0.08, '#5a5a5a'); // standard asphalt groundGrad.addColorStop(0.35, '#4e4e4e'); // mid-distance darker groundGrad.addColorStop(1, '#3a3a3a'); // deepest in foreground ctx.fillStyle = groundGrad; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); // Projected building shadow on the ground // Shadow is a perspective trapezoid extending to the right (sun from upper-left) const shadowOffsetX = buildingW * 0.8; // how far the shadow tip extends right const shadowTaper = 0.5; // tip narrows relative to building base const shadowLen = CANVAS_HEIGHT - buildingBottomY + 10; ctx.save(); const shadowGrad = ctx.createLinearGradient(bLeft, buildingBottomY, bLeft + shadowOffsetX + buildingW, buildingBottomY + 80); shadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.28)'); shadowGrad.addColorStop(0.4, 'rgba(0, 0, 0, 0.14)'); shadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = shadowGrad; ctx.beginPath(); ctx.moveTo(bLeft, buildingBottomY); // bottom-left of building base ctx.lineTo(bLeft + buildingW, buildingBottomY); // bottom-right of building base ctx.lineTo(bLeft + buildingW + shadowOffsetX, buildingBottomY + shadowLen); // far right tip ctx.lineTo(bLeft + shadowOffsetX * shadowTaper, buildingBottomY + shadowLen); // far left tip ctx.closePath(); ctx.fill(); ctx.restore(); // Sidewalk strip with subtle gradient const sidewalkGrad = ctx.createLinearGradient(0, buildingBottomY, 0, buildingBottomY + 24); sidewalkGrad.addColorStop(0, '#a0a0a0'); sidewalkGrad.addColorStop(1, '#888888'); ctx.fillStyle = sidewalkGrad; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 24); // Sidewalk edge highlight line ctx.fillStyle = 'rgba(255, 255, 255, 0.18)'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 2); // Faint ground fog at the very bottom (atmospheric depth) const fogGrad = ctx.createLinearGradient(0, CANVAS_HEIGHT - 60, 0, CANVAS_HEIGHT); fogGrad.addColorStop(0, 'rgba(180, 190, 200, 0)'); fogGrad.addColorStop(1, 'rgba(180, 190, 200, 0.12)'); ctx.fillStyle = fogGrad; ctx.fillRect(0, CANVAS_HEIGHT - 60, CANVAS_WIDTH, 60); } // Helper: Draw the FULL building (opaque panels + windows) function drawBuildingFull(alpha) { ctx.save(); ctx.globalAlpha = alpha; // Building body const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.15, '#7a7a7a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(0.85, '#7a7a7a'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); // Building outline ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof cap ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 2; ctx.strokeRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor separator lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } if ((row + col) % 3 === 1) { ctx.fillStyle = 'rgba(135, 206, 235, 0.15)'; ctx.beginPath(); ctx.moveTo(wp.x + 3, wp.y + 3); ctx.lineTo(wp.x + winW * 0.4, wp.y + 3); ctx.lineTo(wp.x + 3, wp.y + winH * 0.4); ctx.closePath(); ctx.fill(); } } } ctx.restore(); } // Helper: Draw ONLY the gray back wall (solid fill) — drawn BEFORE zombies so they appear in front function drawBuildingBackWall() { ctx.save(); ctx.fillStyle = '#4a4a4a'; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); ctx.restore(); } // Helper: Draw ONLY the outer structural border of the building — drawn AFTER zombies // No interior grid lines so the zombie crowd is clearly visible function drawBuildingFrame() { ctx.save(); // Outer frame (thick gray border) ctx.strokeStyle = '#7a7a7a'; ctx.lineWidth = 6; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); // Roof cap frame ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.strokeStyle = '#3a3a3a'; ctx.lineWidth = 2; ctx.strokeRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); ctx.restore(); } // Mini zombie data for the fill phase const miniZombies = []; // { x, y, vy, landed, rotation } const zombieBodyColor = '#3da854'; const containerLeft = bLeft + 6; const containerRight = bLeft + buildingW - 6; const containerBottom = buildingBottomY - 6; const containerTop = buildingTopY + 6; const miniZombieSize = 18; // Height of each mini zombie // Create pre-rendered mini zombie canvas for optimization const miniZombieCanvas = document.createElement('canvas'); miniZombieCanvas.width = 40; miniZombieCanvas.height = 40; const mCtx = miniZombieCanvas.getContext('2d'); mCtx.translate(20, 20); mCtx.scale(0.5, 0.5); mCtx.fillStyle = zombieBodyColor; mCtx.beginPath(); mCtx.ellipse(0, -18, 7, 8, 0, 0, Math.PI * 2); mCtx.fill(); mCtx.beginPath(); mCtx.moveTo(-8, -10); mCtx.lineTo(8, -10); mCtx.lineTo(6, 12); mCtx.lineTo(-6, 12); mCtx.closePath(); mCtx.fill(); mCtx.fillRect(-14, -8, 6, 16); mCtx.fillRect(8, -8, 6, 16); mCtx.fillRect(-6, 12, 5, 14); mCtx.fillRect(2, 12, 5, 14); mCtx.fillStyle = '#e8e4c8'; mCtx.beginPath(); mCtx.arc(-3, -19, 3, 0, Math.PI * 2); mCtx.fill(); mCtx.beginPath(); mCtx.arc(3, -19, 3, 0, Math.PI * 2); mCtx.fill(); mCtx.fillStyle = '#0a0a0a'; mCtx.beginPath(); mCtx.arc(-2, -19, 1.2, 0, Math.PI * 2); mCtx.fill(); mCtx.beginPath(); mCtx.arc(4, -19, 1.2, 0, Math.PI * 2); mCtx.fill(); mCtx.fillStyle = '#1a3520'; mCtx.beginPath(); mCtx.moveTo(-4, -26); mCtx.lineTo(-2, -33); mCtx.lineTo(0, -26); mCtx.fill(); mCtx.beginPath(); mCtx.moveTo(1, -26); mCtx.lineTo(3, -34); mCtx.lineTo(5, -26); mCtx.fill(); mCtx.strokeStyle = '#1a1a1a'; mCtx.lineWidth = 1.5; mCtx.beginPath(); mCtx.ellipse(0, -18, 7, 8, 0, 0, Math.PI * 2); mCtx.stroke(); // Helper: Draw a tiny zombie silhouette function drawMiniZombie(mx, my, rot) { ctx.save(); ctx.translate(mx, my); ctx.rotate(rot); ctx.drawImage(miniZombieCanvas, -20, -20); ctx.restore(); } // Track whether assets have finished loading let assetsLoaded = false; assetsPromise.then(() => { assetsLoaded = true; }); // ──────────────────────────────────────────────────────────────────────── // PHASE 1: Show full building (1200ms) // ──────────────────────────────────────────────────────────────────────── await animate(1200, (t, dt) => { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); drawBackground(); drawBuildingFull(1); }); // ──────────────────────────────────────────────────────────────────────── // PHASE 2: Front panels fade away, leaving only frame (1000ms) // ──────────────────────────────────────────────────────────────────────── await animate(1000, (t, dt) => { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); drawBackground(); drawBuildingBackWall(); // Gray back wall first (no grid) drawBuildingFrame(); // Outer border only drawBuildingFull(1 - t); // Panels fade out }); // ──────────────────────────────────────────────────────────────────────── // PHASE 3: Zombies fill building as loading bar (min 5s, tied to asset loading) // ──────────────────────────────────────────────────────────────────────── // Zombies drop continuously. The fill level acts as a loading bar: // - Fill level is proportional to loading progress (0 = empty, 1 = full) // - Minimum 5 seconds to fill completely (won't fill faster even if assets load quickly) // - If assets take longer than 5s, fill stalls at ~92% until done const fillStartTime = performance.now(); const minFillDuration = 5000; // Minimum 5 seconds to fill const totalFillHeight = containerBottom - containerTop; let fillProgress = 0; // 0 = empty, 1 = full (driven by loading progress) let actualFillLevel = containerBottom; // Current true level of the pile let lastSpawnTime = 0; const spawnInterval = 16; // ms between spawn batches // Offscreen canvas to stamp landed zombies (performance optimization) const stampedCanvas = document.createElement('canvas'); stampedCanvas.width = CANVAS_WIDTH; stampedCanvas.height = CANVAS_HEIGHT; const stampedCtx = stampedCanvas.getContext('2d'); await new Promise((resolve) => { let lastFrameTime = performance.now(); function fillLoop(now) { const elapsed = now - fillStartTime; const dt = Math.min((now - lastFrameTime) / 1000, 0.05); lastFrameTime = now; // === LOADING PROGRESS CALCULATION === // Time-based progress ensures minimum 5 seconds fill time const timeProgress = Math.min(elapsed / minFillDuration, 1.0); // Fill progress tracks time, but stalls at 92% if assets not yet loaded if (assetsLoaded) { fillProgress = timeProgress; } else { fillProgress = Math.min(timeProgress, 0.92); } // Calculate max allowed level based on progress const maxAllowedLevel = containerBottom - fillProgress * totalFillHeight; // Stop spawning if the zombies currently in the air are enough to reach the max allowed level const projectedFillLevel = actualFillLevel - (miniZombies.length * 0.8); const shouldSpawn = projectedFillLevel > maxAllowedLevel; // Spawn new mini zombies continuously from the top if (now - lastSpawnTime > spawnInterval && shouldSpawn) { lastSpawnTime = now; const spawnCount = 4 + Math.floor(Math.random() * 4); for (let i = 0; i < spawnCount; i++) { miniZombies.push({ x: containerLeft + Math.random() * (containerRight - containerLeft), y: containerTop - 20 - Math.random() * 80, vy: 60 + Math.random() * 40, rotation: (Math.random() - 0.5) * 0.4, landedY: 0 }); } } // Update zombie physics - stamp landed ones to offscreen canvas for (let i = miniZombies.length - 1; i >= 0; i--) { const mz = miniZombies[i]; if (!mz.landed) { mz.vy += 400 * dt; // Gravity mz.y += mz.vy * dt; // Land when reaching fill level (with slight random variation for natural pile look) const insideBuilding = mz.x > containerLeft && mz.x < containerRight; const landingVariation = (Math.random() - 0.5) * 8; const feetOffset = 13; // distance from origin to feet if (insideBuilding && mz.y + feetOffset >= actualFillLevel + landingVariation) { mz.y = actualFillLevel + landingVariation - feetOffset; mz.landed = true; mz.landedY = mz.y; // Build up the pile actualFillLevel -= 0.8; if (actualFillLevel < maxAllowedLevel) { actualFillLevel = maxAllowedLevel; } // Stamp this zombie to the offscreen canvas stampedCtx.save(); stampedCtx.beginPath(); stampedCtx.rect(containerLeft, containerTop, containerRight - containerLeft, containerBottom - containerTop); stampedCtx.clip(); stampedCtx.translate(mz.x, mz.y); stampedCtx.rotate(mz.rotation); stampedCtx.drawImage(miniZombieCanvas, -20, -20); stampedCtx.restore(); // Remove from active array - it's now baked into the stamp miniZombies.splice(i, 1); } else if (!insideBuilding && mz.y > CANVAS_HEIGHT + 50) { // If outside building, let them fall off screen then remove miniZombies.splice(i, 1); } } } // Draw frame ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); drawBackground(); // Draw gray back wall BEFORE zombies so they appear in front of it drawBuildingBackWall(); // Draw stamped (landed) zombies from offscreen canvas ctx.drawImage(stampedCanvas, 0, 0); // Draw only falling (active) zombies (no longer clipped so they fall from the sky) miniZombies.forEach(mz => { drawMiniZombie(mz.x, mz.y, mz.rotation); }); // Draw outer frame border on top (no interior grid lines) drawBuildingFrame(); // "GATHERING ZOMBIES" text with scale pulse below the building { const textPulse = 1 + Math.sin(elapsed * 0.006) * 0.08; const textY = buildingBottomY + 90; ctx.save(); ctx.translate(CANVAS_WIDTH / 2, textY); ctx.scale(textPulse, textPulse); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = 'bold 58px Luckiest Guy'; // White stroke outline for visibility against any background ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 8; ctx.lineJoin = 'round'; ctx.strokeText('GATHERING ZOMBIES', 0, 0); ctx.fillStyle = '#111111'; ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.fillText('GATHERING ZOMBIES', 0, 0); ctx.restore(); } // Complete when progress reaches 1.0 (assets loaded AND min 5s passed AND pile reached top AND no more falling zombies) if (fillProgress >= 1 && assetsLoaded && actualFillLevel <= maxAllowedLevel + 2 && miniZombies.length === 0) { resolve(); } else { requestAnimationFrame(fillLoop); } } requestAnimationFrame(fillLoop); }); // ──────────────────────────────────────────────────────────────────────── // PHASE 4: Front panels fade back in over the filled building (1000ms) // ──────────────────────────────────────────────────────────────────────── await animate(1000, (t, dt) => { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); drawBackground(); // Gray back wall behind zombies drawBuildingBackWall(); // Draw zombies inside (clipped, behind panels) ctx.save(); ctx.beginPath(); ctx.rect(containerLeft, containerTop, containerRight - containerLeft, containerBottom - containerTop); ctx.clip(); ctx.drawImage(stampedCanvas, 0, 0); miniZombies.forEach(mz => { drawMiniZombie(mz.x, mz.y, mz.rotation); }); ctx.restore(); // Outer frame border (no grid) drawBuildingFrame(); // Panels fade back in on top drawBuildingFull(t); // "GATHERING ZOMBIES" text fades out as panels close { const fadeAlpha = Math.max(0, 1 - t * 1.5); if (fadeAlpha > 0.01) { const elapsed = t * 1000; const textPulse = 1 + Math.sin(elapsed * 0.006) * 0.08; const textY = buildingBottomY + 90; ctx.save(); ctx.globalAlpha = fadeAlpha; ctx.translate(CANVAS_WIDTH / 2, textY); ctx.scale(textPulse, textPulse); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = 'bold 58px Luckiest Guy'; ctx.strokeStyle = `rgba(255, 255, 255, ${fadeAlpha})`; ctx.lineWidth = 8; ctx.lineJoin = 'round'; ctx.strokeText('GATHERING ZOMBIES', 0, 0); ctx.fillStyle = `rgba(17, 17, 17, ${fadeAlpha})`; ctx.shadowBlur = 0; ctx.fillText('GATHERING ZOMBIES', 0, 0); ctx.restore(); } } }); // ──────────────────────────────────────────────────────────────────────── // PHASE 5: Zoom into the middle window (2000ms) - same technique as wrecking ball // ──────────────────────────────────────────────────────────────────────── const zwp = getWinPos(zombieWinRow, zombieWinCol); const winCenterX = zwp.x + winW / 2; const winCenterY = zwp.y + winH / 2; await animate(2000, (t, dt) => { const easeIn = t * t * (3 - 2 * t); // smoothstep const scaleForWidth = CANVAS_WIDTH / winW; const scaleForHeight = CANVAS_HEIGHT / winH; const endScale = Math.max(scaleForWidth, scaleForHeight); const startScale = 1.0; const currentScale = startScale + (endScale - startScale) * easeIn; // Sky background (always visible) — matches drawBackground() const skyGrad = ctx.createLinearGradient(0, 0, 0, buildingBottomY); skyGrad.addColorStop(0, '#2a5f9e'); skyGrad.addColorStop(0.25, '#4a8fcc'); skyGrad.addColorStop(0.6, '#87CEEB'); skyGrad.addColorStop(0.82, '#b8d8f0'); skyGrad.addColorStop(1, '#d6e8f5'); ctx.fillStyle = skyGrad; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Ground const gGrad = ctx.createLinearGradient(0, buildingBottomY, 0, CANVAS_HEIGHT); gGrad.addColorStop(0, '#686868'); gGrad.addColorStop(1, '#3a3a3a'); ctx.fillStyle = gGrad; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); // Zoom-to-point transform const screenX = winCenterX + (CANVAS_WIDTH / 2 - winCenterX) * easeIn; const screenY = winCenterY + (CANVAS_HEIGHT / 2 - winCenterY) * easeIn; const tx = screenX - winCenterX * currentScale; const ty = screenY - winCenterY * currentScale; ctx.save(); ctx.translate(tx, ty); ctx.scale(currentScale, currentScale); // Draw full building scene at scale // Clouds if (currentScale < 3) { const cloudAlpha = Math.min(1, (3 - currentScale) / 2); ctx.fillStyle = `rgba(255, 255, 255, ${cloudAlpha * 0.7})`; ctx.beginPath(); ctx.ellipse(120, 130, 70, 30, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(580, 100, 55, 25, 0, 0, Math.PI * 2); ctx.fill(); } // Ground: rich asphalt gradient with slight warm/cool tones const innerGroundGrad = ctx.createLinearGradient(0, buildingBottomY, 0, CANVAS_HEIGHT); innerGroundGrad.addColorStop(0, '#686868'); innerGroundGrad.addColorStop(0.08, '#5a5a5a'); innerGroundGrad.addColorStop(0.35, '#4e4e4e'); innerGroundGrad.addColorStop(1, '#3a3a3a'); ctx.fillStyle = innerGroundGrad; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, CANVAS_HEIGHT - buildingBottomY); // Projected building shadow on the ground const shadowOffsetX = buildingW * 0.8; const shadowTaper = 0.5; const shadowLen = CANVAS_HEIGHT - buildingBottomY + 10; ctx.save(); const shadowGrad = ctx.createLinearGradient(bLeft, buildingBottomY, bLeft + shadowOffsetX + buildingW, buildingBottomY + 80); shadowGrad.addColorStop(0, 'rgba(0, 0, 0, 0.28)'); shadowGrad.addColorStop(0.4, 'rgba(0, 0, 0, 0.14)'); shadowGrad.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = shadowGrad; ctx.beginPath(); ctx.moveTo(bLeft, buildingBottomY); ctx.lineTo(bLeft + buildingW, buildingBottomY); ctx.lineTo(bLeft + buildingW + shadowOffsetX, buildingBottomY + shadowLen); ctx.lineTo(bLeft + shadowOffsetX * shadowTaper, buildingBottomY + shadowLen); ctx.closePath(); ctx.fill(); ctx.restore(); // Sidewalk strip with subtle gradient const sidewalkGrad = ctx.createLinearGradient(0, buildingBottomY, 0, buildingBottomY + 24); sidewalkGrad.addColorStop(0, '#a0a0a0'); sidewalkGrad.addColorStop(1, '#888888'); ctx.fillStyle = sidewalkGrad; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 24); // Sidewalk edge highlight line ctx.fillStyle = 'rgba(255, 255, 255, 0.18)'; ctx.fillRect(0, buildingBottomY, CANVAS_WIDTH, 2); // Building body const bGrad = ctx.createLinearGradient(bLeft, 0, bLeft + buildingW, 0); bGrad.addColorStop(0, '#6a6a6a'); bGrad.addColorStop(0.5, '#888'); bGrad.addColorStop(1, '#6a6a6a'); ctx.fillStyle = bGrad; ctx.fillRect(bLeft, buildingTopY, buildingW, buildingH); ctx.strokeStyle = '#4a4a4a'; ctx.lineWidth = 3; ctx.strokeRect(bLeft, buildingTopY, buildingW, buildingH); ctx.fillStyle = '#5a5a5a'; ctx.fillRect(bLeft - 5, buildingTopY - 12, buildingW + 10, 16); // Floor lines ctx.strokeStyle = '#666'; ctx.lineWidth = 1; for (let row = 0; row <= winRows; row++) { const lineY = buildingTopY + winMarginY + row * (winH + winGapY) - winGapY / 2; ctx.beginPath(); ctx.moveTo(bLeft + 5, lineY); ctx.lineTo(bLeft + buildingW - 5, lineY); ctx.stroke(); } // Windows for (let row = 0; row < winRows; row++) { for (let col = 0; col < winCols; col++) { const wp = getWinPos(row, col); if (row === zombieWinRow && col === zombieWinCol) { // Target window - shows game background (dark lab) ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = window.gameConfig.settings.backgroundColor || '#0c1225'; ctx.fillRect(wp.x, wp.y, winW, winH); continue; } ctx.fillStyle = '#4a4a4a'; ctx.fillRect(wp.x - 2, wp.y - 2, winW + 4, winH + 4); ctx.fillStyle = '#1a2a45'; ctx.fillRect(wp.x, wp.y, winW, winH); if ((row * 3 + col * 7) % 4 === 0) { ctx.fillStyle = 'rgba(255, 220, 100, 0.25)'; ctx.fillRect(wp.x + 2, wp.y + 2, winW - 4, winH - 4); } } } ctx.restore(); }); // ──────────────────────────────────────────────────────────────────────── // PHASE 6: Fade from window color to game scene (800ms) // ──────────────────────────────────────────────────────────────────────── await animate(800, (t, dt) => { // The game loop hasn't started yet, so draw game background manually ctx.fillStyle = window.gameConfig.settings.backgroundColor || '#0c1225'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Overlay the window glass color fading out (simulates the window becoming transparent) const overlayAlpha = Math.pow(1 - t, 1.5); if (overlayAlpha > 0.005) { ctx.fillStyle = `rgba(12, 18, 37, ${overlayAlpha})`; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); } }); } async function run(mode) { applyResetButtonVisibility(); lib.log('run() called. Mode: ' + mode); gameMode = mode; // Setup canvas canvas = document.getElementById('game-canvas'); ctx = canvas.getContext('2d'); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; if (mode === 'play') { try { const response = await lib.getUserGameState(); if (response && response.state) { window.gameConfig.stats.killCount = response.state.killCount || 0; if (response.state.usedMethods) { usedMethods = new Set(response.state.usedMethods); } lib.log('Progress loaded successfully'); } } catch (err) { lib.log('Failed to load progress: ' + err.message); } } // In play mode, run loading screen while assets preload in parallel if (mode === 'play') { // Start asset preloading (runs in background) const assetsPromise = preloadAssets(); // Play loading screen animation (waits for assets to finish too) await playLoadingScreen(assetsPromise); // Assets are guaranteed loaded at this point } // Show game parameters UI lib.showGameParameters({ name: 'Game Settings', params: { 'Zombie Color': { key: 'zombie.bodyColor', type: 'color', onChange: (value) => { window.gameConfig.zombie.bodyColor = value; if (zombie) zombie.bodyColor = value; } }, 'Clothing Color': { key: 'zombie.clothingColor', type: 'color', onChange: (value) => { window.gameConfig.zombie.clothingColor = value; if (zombie) zombie.clothingColor = value; } }, 'Zombie Scale': { key: 'zombie.scale', type: 'slider', min: 0.5, max: 2, step: 0.1, onChange: (value) => { window.gameConfig.zombie.scale = value; if (zombie) zombie.scale = value; } }, 'Min Eye Size': { key: 'zombie.minEyeSize', type: 'slider', min: 6, max: 16, step: 1, onChange: (value) => { window.gameConfig.zombie.minEyeSize = value; // Ensure min doesn't exceed max if (value > window.gameConfig.zombie.maxEyeSize) { window.gameConfig.zombie.maxEyeSize = value; } if (zombie && gameMode === 'edit') { zombie.generateRandomFace(); } } }, 'Max Eye Size': { key: 'zombie.maxEyeSize', type: 'slider', min: 8, max: 24, step: 1, onChange: (value) => { window.gameConfig.zombie.maxEyeSize = value; // Ensure max doesn't go below min if (value < window.gameConfig.zombie.minEyeSize) { window.gameConfig.zombie.minEyeSize = value; } if (zombie && gameMode === 'edit') { zombie.generateRandomFace(); } } }, 'Animation Speed': { key: 'settings.animationSpeed', type: 'slider', min: 0.5, max: 2, step: 0.1, onChange: (value) => { window.gameConfig.settings.animationSpeed = value; } }, 'Background Darkening': { key: 'settings.bgDarkenAmount', type: 'slider', min: 0, max: 0.8, step: 0.05, onChange: (value) => { window.gameConfig.settings.bgDarkenAmount = value; } }, 'Background': { key: 'settings.backgroundColor', type: 'dropdown', options: [ { label: 'Deep Navy', value: '#0c1225' }, { label: 'Dark Emerald', value: '#0a1e14' }, { label: 'Dark Crimson', value: '#1e0a10' }, { label: 'Abyss', value: '#050810' }, { label: 'Midnight', value: '#0a1040' } ], onChange: (value) => { window.gameConfig.settings.backgroundColor = value; } }, 'Show Reset Button': { key: 'settings.showResetButton', type: 'checkbox', onChange: (value) => { window.gameConfig.settings.showResetButton = value; applyResetButtonVisibility(); } }, '🧪 Set Specimens to 40 (Test Cure)': { key: 'settings.testCureUnlock', type: 'checkbox', onChange: (value) => { window.gameConfig.settings.testCureUnlock = value; if (value) { window.gameConfig.stats.killCount = 40; // Sync usedMethods so the counter reflects reality // (fill with dummy entries up to 40) while (usedMethods.size < 40) { usedMethods.add('__test_' + usedMethods.size); } updateKillCounter(); updateButtonCheckmarks(); } else { // Reset counter back to 0 when toggled off window.gameConfig.stats.killCount = 0; usedMethods.clear(); updateKillCounter(); updateButtonCheckmarks(); } } } } }); // Preload assets (skip in play mode since loading screen already handled it) if (mode !== 'play') { await preloadAssets(); } // Setup UI createMethodButtons(); if (window.gameConfig.settings.testCureUnlock) { window.gameConfig.stats.killCount = 40; while (usedMethods.size < 40) { usedMethods.add('__test_' + usedMethods.size); } } document.getElementById('kill-count').textContent = window.gameConfig.stats.killCount; updateButtonCheckmarks(); setupInputHandlers(); setupSwordInput(); setupChainsawInput(); setupFlamethrowerInput(); // Apply edit mode styling if (mode === 'edit') { document.getElementById('game-world').classList.add('edit-mode'); setButtonsEnabled(false); // In edit mode, just create zombie immediately (no animation) zombie = new Zombie( CANVAS_WIDTH / 2, CANVAS_HEIGHT * window.gameConfig.zombie.positionY, window.gameConfig.zombie.scale ); } requestAnimationFrame(gameLoop); // In play mode, spawn zombie with door animation after game loop starts if (mode === 'play') { loadingFadeIn = 1; // Start with full dark overlay that fades out setTimeout(() => { spawnZombieWithDoorAnimation(); }, 100); } } // Expose run function to window for iframe runtime if (typeof window !== 'undefined') { window.run = run; }

40 Ways to Kill a Zombie - Free Online Game on Astrocade