diff options
Diffstat (limited to 'html/side-scrolling-rogue-thing/js/world.js')
| -rw-r--r-- | html/side-scrolling-rogue-thing/js/world.js | 1054 |
1 files changed, 1054 insertions, 0 deletions
diff --git a/html/side-scrolling-rogue-thing/js/world.js b/html/side-scrolling-rogue-thing/js/world.js new file mode 100644 index 0000000..2b2529a --- /dev/null +++ b/html/side-scrolling-rogue-thing/js/world.js @@ -0,0 +1,1054 @@ +// Color palettes and configurations +const NATURE_COLORS = { + GREENS: [ + '#11aa33', // Darker forest green + '#22bb44', // Medium forest green + '#33cc55', // Bright forest green + '#118844', // Deep sea green + '#22aa66', // Sage green + '#11bb55', // Deep pine + '#229955', // Ocean green + '#33bb66', // Fresh spring green + '#117744', // Dark emerald + ], + TRUNK_COLORS: { + LIGHT: '#664422', + MEDIUM: '#553311', + DARK: '#442200' + } +}; + +const GRASS_CONFIG = { + MIN_BLADES: 4, + MAX_BLADES: 8, + SPREAD_FACTOR: 0.7, + RUSTLE_SPEED: 300, + WAVE_SPEED: 1000, + GLOW_SPEED: 500, + BASE_BLADE_WIDTH: 5 +}; + +const FIR_CONFIG = { + ROW_COUNT: 40, + FEATHERS_PER_ROW: 24, + EDGE_FEATHER_COUNT: 40, + FEATHER_WIDTH: 2, + TAPER_POWER: 0.8, + CENTER_NEEDLES: 5, // Number of needles in center column + NEEDLE_SPACING: 1.5, // Spacing between center needles + UPWARD_TILT: 0.1, // Amount of upward tilt (in radians) + ANGLE_VARIATION: 0.05, // Variation in needle angles + LENGTH_MULTIPLIER: 0.8 // Base length multiplier for needles +}; + +// Define world object types +const WORLD_OBJECTS = { + PLATFORM: 'platform', + FIR_BACKGROUND: 'fir_background', + FIR_FOREGROUND: 'fir_foreground', + MAPLE_BACKGROUND: 'maple_background', + MAPLE_FOREGROUND: 'maple_foreground', + ROCK_BACKGROUND: 'rock_background', + ROCK_FOREGROUND: 'rock_foreground', + GRASS_BACKGROUND: 'grass_background', + GRASS_FOREGROUND: 'grass_foreground' +}; + +// Separate configurations for different tree types +const FIR_TYPES = { + SMALL: { + type: 'fir', + width: 100, + height: 230, + canopyOffset: 45, + canopyColor: '#22aa44', + trunkColor: '#553311' + }, + LARGE: { + type: 'fir', + width: 150, + height: 320, + canopyOffset: 65, + canopyColor: '#11aa44', + trunkColor: '#442200' + } +}; + +const MAPLE_TYPES = { + SMALL: { + type: 'maple', + width: 100, + height: 330, + trunkHeight: 60, + canopyRadius: 35, + leafClusters: 5, + canopyColor: '#33aa22', // Bright green + trunkColor: '#664422' + }, + MEDIUM: { + type: 'maple', + width: 130, + height: 360, + trunkHeight: 70, + canopyRadius: 45, + leafClusters: 6, + canopyColor: '#228833', // Deep forest green + trunkColor: '#553311' + }, + LARGE: { + type: 'maple', + width: 160, + height: 400, + trunkHeight: 85, + canopyRadius: 55, + leafClusters: 7, + canopyColor: '#115522', // Dark green + trunkColor: '#553311' + }, + BRIGHT: { + type: 'maple', + width: 140, + height: 380, + trunkHeight: 75, + canopyRadius: 50, + leafClusters: 6, + canopyColor: '#44bb33', // Vibrant green + trunkColor: '#664422' + }, + SAGE: { + type: 'maple', + width: 150, + height: 490, + trunkHeight: 80, + canopyRadius: 52, + leafClusters: 6, + canopyColor: '#225544', // Sage green + trunkColor: '#553311' + } +}; + +// Rock configurations +const ROCK_TYPES = { + SMALL: { + width: 40, + height: 30, + color: '#666', + highlights: '#888' + }, + MEDIUM: { + width: 70, + height: 45, + color: '#555', + highlights: '#777' + }, + LARGE: { + width: 100, + height: 60, + color: '#444', + highlights: '#666' + } +}; + +// Add grass configurations +const GRASS_TYPES = { + TALL: { + type: 'grass', + width: 30, + height: 40, + color: '#33aa55', + shadowColor: '#229944' + }, + SHORT: { + type: 'grass', + width: 20, + height: 25, + color: '#33bb66', + shadowColor: '#22aa55' + }, + GOLDEN_TALL: { + type: 'grass', + width: 30, + height: 40, + color: '#eebb33', + shadowColor: '#cc9922' + }, + GOLDEN_SHORT: { + type: 'grass', + width: 20, + height: 25, + color: '#ffcc44', + shadowColor: '#ddaa33' + }, + BLUE_TALL: { + type: 'grass', + width: 30, + height: 40, + color: '#44aaff', + shadowColor: '#2299ff', + glowing: true + }, + BLUE_SHORT: { + type: 'grass', + width: 20, + height: 25, + color: '#55bbff', + shadowColor: '#33aaff', + glowing: true + } +}; + +// Utility functions +const utils = { + getRandomColorFromPalette: (palette, seed1, seed2) => { + const colorIndex = Math.floor(seededRandom(seed1, seed2) * palette.length); + return palette[colorIndex]; + }, + + getBladeCount: (x, height) => { + const randomValue = Math.abs(seededRandom(x, height)); + return GRASS_CONFIG.MIN_BLADES + + Math.round(randomValue * (GRASS_CONFIG.MAX_BLADES - GRASS_CONFIG.MIN_BLADES)); + }, + + calculateTaper: (t) => Math.pow(1 - t, FIR_CONFIG.TAPER_POWER) +}; + +// Create a world with platforms, trees, and rocks +const createWorld = () => { + const world = { + groundHeight: 12, + // Separate arrays for different layers + backgroundTrees: [ + // Far left trees + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: -1500, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: -1200, + config: MAPLE_TYPES.SAGE + }, + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: -900, + config: FIR_TYPES.SMALL + }, + // Existing trees + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: -400, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: -250, + config: MAPLE_TYPES.BRIGHT + }, + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: 50, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: 250, + config: MAPLE_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: 500, + config: FIR_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: 650, + config: MAPLE_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: 900, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: 1100, + config: MAPLE_TYPES.LARGE + }, + // Far right trees + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: 1400, + config: MAPLE_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.FIR_BACKGROUND, + x: 1700, + config: FIR_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.MAPLE_BACKGROUND, + x: 2000, + config: MAPLE_TYPES.LARGE + } + ], + backgroundRocks: [ + // Far left rocks + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: -1300, + config: ROCK_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: -1000, + config: ROCK_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: -300, + config: ROCK_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: -100, + config: ROCK_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 150, + config: ROCK_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 400, + config: ROCK_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 750, + config: ROCK_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 1000, + config: ROCK_TYPES.SMALL + }, + // Far right rocks + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 1600, + config: ROCK_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.ROCK_BACKGROUND, + x: 1900, + config: ROCK_TYPES.SMALL + } + ], + platforms: [ + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: 300, + // y: 300, + // width: 200, + // height: 20, + // color: '#484' + // }, + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: 600, + // y: 200, + // width: 200, + // height: 20, + // color: '#484' + // }, + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: -200, + // y: 250, + // width: 200, + // height: 20, + // color: '#484' + // } + ], + foregroundTrees: [ + // Far left trees + { + type: WORLD_OBJECTS.FIR_FOREGROUND, + x: -1400, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_FOREGROUND, + x: -1100, + config: MAPLE_TYPES.SMALL + }, + // Existing trees + { + type: WORLD_OBJECTS.MAPLE_FOREGROUND, + x: -150, + config: MAPLE_TYPES.BRIGHT + }, + { + type: WORLD_OBJECTS.FIR_FOREGROUND, + x: 200, + config: FIR_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.MAPLE_FOREGROUND, + x: 450, + config: MAPLE_TYPES.SAGE + }, + { + type: WORLD_OBJECTS.FIR_FOREGROUND, + x: 800, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_FOREGROUND, + x: 1200, + config: MAPLE_TYPES.SMALL + }, + // Far right trees + { + type: WORLD_OBJECTS.FIR_FOREGROUND, + x: 1500, + config: FIR_TYPES.LARGE + }, + { + type: WORLD_OBJECTS.MAPLE_FOREGROUND, + x: 1800, + config: MAPLE_TYPES.SMALL + } + ], + foregroundRocks: [ + // Far left rocks + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: -1000, + config: ROCK_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: 0, + config: ROCK_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: 300, + config: ROCK_TYPES.MEDIUM + }, + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: 700, + config: ROCK_TYPES.SMALL + }, + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: 950, + config: ROCK_TYPES.LARGE + }, + // Far right rocks + { + type: WORLD_OBJECTS.ROCK_FOREGROUND, + x: 1500, + config: ROCK_TYPES.LARGE + } + ], + backgroundGrass: [ + // Far left grass + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -1400, config: GRASS_TYPES.BLUE_TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -1100, config: GRASS_TYPES.GOLDEN_SHORT }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -950, config: GRASS_TYPES.TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -350, config: GRASS_TYPES.SHORT }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: -180, config: GRASS_TYPES.GOLDEN_TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 100, config: GRASS_TYPES.TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 320, config: GRASS_TYPES.BLUE_SHORT }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 580, config: GRASS_TYPES.GOLDEN_SHORT }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 750, config: GRASS_TYPES.BLUE_TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 950, config: GRASS_TYPES.TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1050, config: GRASS_TYPES.GOLDEN_TALL }, + // Far right grass + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1500, config: GRASS_TYPES.BLUE_SHORT }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1750, config: GRASS_TYPES.GOLDEN_TALL }, + { type: WORLD_OBJECTS.GRASS_BACKGROUND, x: 1850, config: GRASS_TYPES.SHORT } + ], + foregroundGrass: [ + // Far left grass + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -1250, config: GRASS_TYPES.TALL }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -1050, config: GRASS_TYPES.BLUE_SHORT }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -280, config: GRASS_TYPES.BLUE_TALL }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: -50, config: GRASS_TYPES.GOLDEN_SHORT }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 150, config: GRASS_TYPES.TALL }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 420, config: GRASS_TYPES.BLUE_SHORT }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 680, config: GRASS_TYPES.GOLDEN_TALL }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 880, config: GRASS_TYPES.SHORT }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1150, config: GRASS_TYPES.BLUE_TALL }, + // Far right grass + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1650, config: GRASS_TYPES.GOLDEN_TALL }, + { type: WORLD_OBJECTS.GRASS_FOREGROUND, x: 1850, config: GRASS_TYPES.BLUE_SHORT } + ], + // Track grass animation states + grassStates: {}, + // Add methods for quick spatial lookups + getObjectsInView: function(bounds) { + return { + backgroundTrees: this.backgroundTrees.filter(tree => + tree.x > bounds.left && tree.x < bounds.right + ), + // ... similar for other object types + }; + } + }; + + return world; +}; + +// Add seededRandom function +const seededRandom = (x, y) => { + const dot = x * 12.9898 + y * 78.233; + return (Math.sin(dot) * 43758.5453123) % 1; +}; + +// Add hatching helper function +const addHatchingPattern = (ctx, x, y, width, height, color) => { + const spacing = 4; // Space between hatch lines + const length = 10; // Length of each hatch line + const margin = 4; // Increased margin from edges + const baseAngle = Math.PI * 1.5; // Vertical angle (pointing down) + const angleVariation = Math.PI / 12; // Reduced angle variation + + // Define darker brown shades + const brownShades = [ + '#442211', // Dark brown + '#553322', // Medium dark brown + '#443311', // Reddish dark brown + '#332211', // Very dark brown + '#554422', // Warm dark brown + ]; + + // Create clipping path for trunk + ctx.save(); + ctx.beginPath(); + ctx.rect( + x - width/2, + y - height, + width, + height + ); + ctx.clip(); + + // Calculate bounds with increased safety margin + const bounds = { + minX: x - width/2 + margin, + maxX: x + width/2 - margin, + minY: y - height + margin, + maxY: y - margin + }; + + // Draw hatching + ctx.lineWidth = 1; + for (let hatchX = bounds.minX; hatchX < bounds.maxX; hatchX += spacing) { + for (let hatchY = bounds.minY; hatchY < bounds.maxY; hatchY += spacing) { + // Use position for random variation + const seed1 = hatchX * 13.37; + const seed2 = hatchY * 7.89; + + // Random variations with reduced range + const variation = { + x: (seededRandom(seed1, seed2) - 0.5) * 1.5, // Reduced variation + y: (seededRandom(seed2, seed1) - 0.5) * 1.5, // Reduced variation + angle: baseAngle + (seededRandom(seed1 + seed2, seed2 - seed1) - 0.5) * angleVariation + }; + + // Pick a random brown shade + const colorIndex = Math.floor(seededRandom(seed1 * seed2, seed2 * seed1) * brownShades.length); + ctx.strokeStyle = brownShades[colorIndex]; + + // Draw hatch line + ctx.beginPath(); + ctx.moveTo( + hatchX + variation.x, + hatchY + variation.y + ); + ctx.lineTo( + hatchX + Math.cos(variation.angle) * length + variation.x, + hatchY + Math.sin(variation.angle) * length + variation.y + ); + ctx.stroke(); + } + } + + ctx.restore(); +}; + +class FirTreeRenderer { + static renderTrunk(ctx, x, width, height, groundY, trunkColor) { + const trunkWidth = width/4; + const trunkHeight = height; + + ctx.fillStyle = trunkColor; + ctx.fillRect( + x - trunkWidth/2, + groundY - trunkHeight, + trunkWidth, + trunkHeight + ); + + addHatchingPattern(ctx, x, groundY, trunkWidth, trunkHeight, trunkColor); + } + + static renderCenterNeedles(ctx, x, rowY, taper, featherLength, greenColors) { + for (let i = -FIR_CONFIG.CENTER_NEEDLES; i <= FIR_CONFIG.CENTER_NEEDLES; i++) { + const offset = i * (FIR_CONFIG.NEEDLE_SPACING * 1.5); + + // Left needle + FirTreeRenderer.renderSingleNeedle( + ctx, x + offset, rowY, Math.PI, taper, featherLength, greenColors + ); + + // Right needle + FirTreeRenderer.renderSingleNeedle( + ctx, x + offset, rowY, 0, taper, featherLength, greenColors + ); + } + } + + static renderSingleNeedle(ctx, x, y, baseAngle, taper, length, colors) { + const angleVar = Math.PI * 0.02; + const angle = baseAngle + (angleVar * seededRandom(x, y) - angleVar/2); + + ctx.strokeStyle = utils.getRandomColorFromPalette(colors, x, y); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo( + x + Math.cos(angle) * length * taper, + y + Math.sin(angle) * length * taper + ); + ctx.stroke(); + } + + static renderRowNeedles(ctx, x, rowY, rowWidth, featherCount, t, taper, featherLength, greenColors) { + for (let i = 0; i < featherCount; i++) { + const featherT = i / (featherCount - 1); + const startX = x - rowWidth/2 + rowWidth * featherT; + + if (Math.abs(startX - x) < 1) continue; + + const relativeX = (startX - x) / (rowWidth/2); + const baseAngle = relativeX < 0 ? Math.PI : 0; + const upwardTilt = Math.PI * FIR_CONFIG.UPWARD_TILT * t; + const angle = baseAngle + + (FIR_CONFIG.ANGLE_VARIATION * seededRandom(startX, rowY) - FIR_CONFIG.ANGLE_VARIATION/2) - + upwardTilt; + + const lengthMultiplier = FIR_CONFIG.LENGTH_MULTIPLIER + (1 - t) * 0.3; + const finalLength = featherLength * lengthMultiplier * taper * + (0.9 + seededRandom(startX * rowY, rowY) * 0.2); + + ctx.strokeStyle = utils.getRandomColorFromPalette(greenColors, startX, rowY); + ctx.beginPath(); + ctx.moveTo(startX, rowY); + ctx.lineTo( + startX + Math.cos(angle) * finalLength, + rowY + Math.sin(angle) * finalLength + ); + ctx.stroke(); + } + } + + static renderEdgeNeedles(ctx, x, baseWidth, baseY, tipY, featherLength, greenColors) { + for (let i = 0; i < FIR_CONFIG.EDGE_FEATHER_COUNT; i++) { + const t = i / (FIR_CONFIG.EDGE_FEATHER_COUNT - 1); + const taper = utils.calculateTaper(t); + + if (taper <= 0.1) continue; + + // Left edge + FirTreeRenderer.renderEdgeNeedle( + ctx, x, baseWidth, baseY, tipY, t, taper, + featherLength, Math.PI, greenColors, true + ); + + // Right edge + FirTreeRenderer.renderEdgeNeedle( + ctx, x, baseWidth, baseY, tipY, t, taper, + featherLength, 0, greenColors, false + ); + } + } + + static renderEdgeNeedle(ctx, x, baseWidth, baseY, tipY, t, taper, length, baseAngle, colors, isLeft) { + const sign = isLeft ? -1 : 1; + const needleX = x + sign * (baseWidth/2 * taper - (baseWidth/2 * taper) * t); + const needleY = baseY - (baseY - tipY) * t; + + const upwardTilt = Math.PI * 0.1 * t; + const angle = baseAngle + + (Math.PI * 0.05 * seededRandom(needleX, needleY) - Math.PI * 0.025) - + upwardTilt; + + ctx.strokeStyle = utils.getRandomColorFromPalette(colors, needleX, needleY); + ctx.beginPath(); + ctx.moveTo(needleX, needleY); + ctx.lineTo( + needleX + Math.cos(angle) * length * taper * 1.2, + needleY + Math.sin(angle) * length * taper * 1.2 + ); + ctx.stroke(); + } +} + +// Helper function to darken/lighten colors +const shadeColor = (color, percent) => { + const num = parseInt(color.replace('#', ''), 16); + const amt = Math.round(2.55 * percent); + const R = (num >> 16) + amt; + const G = (num >> 8 & 0x00FF) + amt; + const B = (num & 0x0000FF) + amt; + return '#' + (0x1000000 + + (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 + + (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 + + (B < 255 ? (B < 1 ? 0 : B) : 255) + ).toString(16).slice(1); +}; + +// Add new maple tree render function +const renderMapleTree = (ctx, tree, groundY) => { + const { x, config } = tree; + const { + width, height, trunkHeight, canopyRadius, + leafClusters, trunkColor, canopyColor + } = config; + + // Draw trunk base with narrower width (changed from width/4 to width/5) + const trunkWidth = width/5.5; + ctx.fillStyle = trunkColor; + ctx.fillRect( + x - trunkWidth/2, + groundY - trunkHeight, + trunkWidth, + trunkHeight + ); + + // Add trunk hatching with updated width + addHatchingPattern( + ctx, + x, + groundY, + trunkWidth, + trunkHeight, + trunkColor + ); + + // Function to create an irregular polygon + const createIrregularPolygon = (centerX, centerY, radius, sides, seed1, seed2) => { + ctx.beginPath(); + + // Create points array first to allow smoothing + const points = []; + for (let i = 0; i < sides; i++) { + const angle = (i / sides) * Math.PI * 2; + + // Even more subtle variation range (0.95-1.05) + const radiusVariation = 0.95 + seededRandom(seed1 * i, seed2 * i) * 0.10; + const pointRadius = radius * radiusVariation; + + points.push({ + x: centerX + Math.cos(angle) * pointRadius, + y: centerY + Math.sin(angle) * pointRadius + }); + } + + // Start the path + ctx.moveTo(points[0].x, points[0].y); + + // Draw smooth curves through all points + for (let i = 0; i < points.length; i++) { + const current = points[i]; + const next = points[(i + 1) % points.length]; + const nextNext = points[(i + 2) % points.length]; + + // Calculate control points for bezier curve with more smoothing + const cp1x = current.x + (next.x - points[(i - 1 + points.length) % points.length].x) / 4; + const cp1y = current.y + (next.y - points[(i - 1 + points.length) % points.length].y) / 4; + const cp2x = next.x - (nextNext.x - current.x) / 4; + const cp2y = next.y - (nextNext.y - current.y) / 4; + + // Draw bezier curve + ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, next.x, next.y); + } + + ctx.closePath(); + }; + + // Draw single canopy as irregular polygon + const sides = Math.floor(48 + seededRandom(x, groundY) * 16); // 48-64 sides + const mainY = groundY - trunkHeight - canopyRadius; + + ctx.fillStyle = canopyColor; + createIrregularPolygon( + x, + mainY, + canopyRadius * 1.4, // Increased size + sides, + x, + groundY + ); + ctx.fill(); +}; + +// Main tree render function that handles both types +const renderTree = (ctx, tree, groundY) => { + if (tree.config.type === 'fir') { + renderFirTree(ctx, tree, groundY); + } else if (tree.config.type === 'maple') { + renderMapleTree(ctx, tree, groundY); + } +}; + +const renderRock = (ctx, rock, groundY) => { + const { x, config } = rock; + const { width, height, color, highlights } = config; + + // Draw main rock shape (slightly irregular pentagon) + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(x - width/2, groundY); + ctx.lineTo(x - width/2 + width/6, groundY - height); + ctx.lineTo(x + width/3, groundY - height); + ctx.lineTo(x + width/2, groundY - height/2); + ctx.lineTo(x + width/2, groundY); + ctx.closePath(); + ctx.fill(); + + // Add highlights + ctx.fillStyle = highlights; + ctx.beginPath(); + ctx.moveTo(x - width/4, groundY - height); + ctx.lineTo(x, groundY - height); + ctx.lineTo(x + width/6, groundY - height/2); + ctx.lineTo(x - width/6, groundY - height/2); + ctx.closePath(); + ctx.fill(); +}; + +// Add grass rendering function +const renderGrass = (ctx, grass, groundY, time) => { + const { x, config } = grass; + const { width, height, color, shadowColor, glowing } = config; + + // Initialize or get grass state + const stateKey = `grass_${x}`; + if (!window.gameState.world.grassStates[stateKey]) { + window.gameState.world.grassStates[stateKey] = GrassState.create(x, height); + } + const state = GrassState.validate(window.gameState.world.grassStates[stateKey]); + + // Update interaction + const player = window.gameState.player; + const distanceToPlayer = Math.abs(player.x + player.width / 2 - x); + GrassState.update(state, distanceToPlayer, width); + + // Handle rendering + setupGlowEffect(ctx, glowing, color, time); + renderGrassBlades(ctx, state, x, width, height, groundY, time, color, shadowColor); + resetGlowEffect(ctx, glowing); +}; + +const setupGlowEffect = (ctx, glowing, color, time) => { + if (glowing) { + ctx.save(); + ctx.shadowColor = color; + ctx.shadowBlur = 10 + Math.sin(time/GRASS_CONFIG.GLOW_SPEED) * 3; + } +}; + +const resetGlowEffect = (ctx, glowing) => { + if (glowing) { + ctx.restore(); + } +}; + +const renderGrassBlades = (ctx, state, x, width, height, groundY, time, color, shadowColor) => { + const bladeWidth = width / GRASS_CONFIG.BASE_BLADE_WIDTH * 0.7; + + for (let i = 0; i < state.bladeCount; i++) { + renderSingleBlade( + ctx, i, state, x, width, height, groundY, time, + bladeWidth, color, shadowColor + ); + } +}; + +const renderSingleBlade = ( + ctx, index, state, x, width, height, groundY, time, + bladeWidth, color, shadowColor +) => { + const centerOffset = (index - (state.bladeCount - 1) / 2) * + (width * GRASS_CONFIG.SPREAD_FACTOR / state.bladeCount); + const bladeX = x + centerOffset; + + const rustleOffset = Math.sin(time / GRASS_CONFIG.RUSTLE_SPEED + index) * 5 * state.rustleAmount; + const baseWave = Math.sin(time / GRASS_CONFIG.WAVE_SPEED + index) * 2; + + drawBladeCurve( + ctx, bladeX, groundY, height, rustleOffset, baseWave, + bladeWidth, index % 2 === 0 ? color : shadowColor + ); +}; + +const drawBladeCurve = ( + ctx, bladeX, groundY, height, rustleOffset, baseWave, + bladeWidth, color +) => { + const cp1x = bladeX + rustleOffset + baseWave; + const cp1y = groundY - height / 2; + const cp2x = bladeX + rustleOffset * 1.5 + baseWave; + const cp2y = groundY - height; + + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(bladeX, groundY); + ctx.quadraticCurveTo(cp1x, cp1y, cp2x, cp2y); + ctx.quadraticCurveTo(cp1x + bladeWidth, cp1y, bladeX + bladeWidth, groundY); + ctx.fill(); +}; + +// Collision detection helper +const checkCollision = (player, platform) => { + return player.x < platform.x + platform.width && + player.x + player.width > platform.x && + player.y < platform.y + platform.height && + player.y + player.height > platform.y; +}; + +// World physics helper +const handleWorldCollisions = (player, world) => { + let onGround = false; + + // Check ground collision first + const groundY = window.innerHeight - world.groundHeight; + if (player.y + player.height > groundY) { + player.y = groundY - player.height; + player.velocityY = 0; + onGround = true; + } + + // Then check platform collisions + for (const platform of world.platforms) { + if (checkCollision(player, platform)) { + // Calculate overlap on each axis + const overlapX = Math.min( + player.x + player.width - platform.x, + platform.x + platform.width - player.x + ); + const overlapY = Math.min( + player.y + player.height - platform.y, + platform.y + platform.height - player.y + ); + + // Resolve collision on the axis with smallest overlap + if (overlapX < overlapY) { + // Horizontal collision + if (player.x < platform.x) { + player.x = platform.x - player.width; + } else { + player.x = platform.x + platform.width; + } + player.velocityX = 0; + } else { + // Vertical collision + if (player.y < platform.y) { + player.y = platform.y - player.height; + player.velocityY = 0; + onGround = true; + } else { + player.y = platform.y + platform.height; + player.velocityY = 0; + } + } + } + } + + return { ...player, jumping: !onGround }; +}; + +class GrassState { + static create(x, height) { + return { + rustleAmount: 0, + rustleDecay: 0.95, + bladeCount: utils.getBladeCount(x, height) + }; + } + + static validate(state) { + if (!state.bladeCount || state.bladeCount < GRASS_CONFIG.MIN_BLADES) { + state.bladeCount = GRASS_CONFIG.MIN_BLADES; + } + return state; + } + + static update(state, distanceToPlayer, interactionDistance) { + if (distanceToPlayer < interactionDistance) { + state.rustleAmount = Math.min(1, state.rustleAmount + 0.3); + } else { + state.rustleAmount *= state.rustleDecay; + } + } +} + +const renderFirTree = (ctx, tree, groundY) => { + const { x, config } = tree; + const { width, height, canopyOffset, trunkColor, canopyColor } = config; + + // Setup + const greenColors = NATURE_COLORS.GREENS.filter(color => color !== canopyColor); + ctx.lineWidth = FIR_CONFIG.FEATHER_WIDTH; + + // Render trunk + FirTreeRenderer.renderTrunk( + ctx, x, width, height - (height - canopyOffset)/2, + groundY, trunkColor + ); + + const drawFeatheredTree = (baseWidth, baseY, tipY) => { + const featherLength = baseWidth * 0.3; + + for (let row = 0; row < FIR_CONFIG.ROW_COUNT; row++) { + const t = row / (FIR_CONFIG.ROW_COUNT - 1); + const rowY = baseY - (baseY - tipY) * t; + + const taper = utils.calculateTaper(t); + const rowWidth = baseWidth * taper; + + if (rowWidth < 2) continue; + + const featherCount = Math.max(2, Math.floor(FIR_CONFIG.FEATHERS_PER_ROW * taper)); + + // Render center column of needles + FirTreeRenderer.renderCenterNeedles(ctx, x, rowY, taper, featherLength, greenColors); + + // Render row needles + FirTreeRenderer.renderRowNeedles( + ctx, x, rowY, rowWidth, featherCount, t, + taper, featherLength, greenColors + ); + } + + // Render edge needles + FirTreeRenderer.renderEdgeNeedles( + ctx, x, baseWidth, baseY, tipY, featherLength, greenColors + ); + }; + + // Draw complete tree + drawFeatheredTree( + width * 1.2, + groundY - canopyOffset, + groundY - height * 1.1 + ); +}; |