diff options
Diffstat (limited to 'html/tower/js/renderer.js')
-rw-r--r-- | html/tower/js/renderer.js | 40 |
1 files changed, 37 insertions, 3 deletions
diff --git a/html/tower/js/renderer.js b/html/tower/js/renderer.js index ddae51d..cd2d11d 100644 --- a/html/tower/js/renderer.js +++ b/html/tower/js/renderer.js @@ -146,9 +146,43 @@ function renderParticles(ctx, particles) { const lifePercent = age / particle.lifetime; if (lifePercent <= 1) { - ctx.globalAlpha = 1 - lifePercent; - - if (particle.type === 'AOE_EXPLOSION') { + if (particle.type === 'SLIME_TRAIL') { + // Calculate opacity based on lifetime and fade start + let opacity = 1; + if (lifePercent > particle.fadeStart) { + opacity = 1 - ((lifePercent - particle.fadeStart) / (1 - particle.fadeStart)); + } + opacity *= 0.3; // Make it translucent + + ctx.globalAlpha = opacity; + ctx.fillStyle = particle.color; + + // Draw a circular slime splat + ctx.beginPath(); + ctx.arc( + particle.position.x, + particle.position.y, + particle.size * (1 - lifePercent * 0.3), // Slightly shrink over time + 0, + Math.PI * 2 + ); + ctx.fill(); + + // Add some variation to the splat + for (let i = 0; i < 3; i++) { + const angle = (Math.PI * 2 * i) / 3; + const distance = particle.size * 0.4; + ctx.beginPath(); + ctx.arc( + particle.position.x + Math.cos(angle) * distance, + particle.position.y + Math.sin(angle) * distance, + particle.size * 0.4 * (1 - lifePercent * 0.3), + 0, + Math.PI * 2 + ); + ctx.fill(); + } + } else if (particle.type === 'AOE_EXPLOSION') { // Draw expanding circle const radius = particle.initialRadius + (particle.finalRadius - particle.initialRadius) * lifePercent; |