diff options
Diffstat (limited to 'html/plains')
| -rw-r--r-- | html/plains/game.js | 1046 | ||||
| -rw-r--r-- | html/plains/index.html | 8 |
2 files changed, 794 insertions, 260 deletions
diff --git a/html/plains/game.js b/html/plains/game.js index 9a9fe4c..68a31ed 100644 --- a/html/plains/game.js +++ b/html/plains/game.js @@ -1,9 +1,27 @@ +// ============= Utility Functions ============= +const lerp = (start, end, t) => { + return start * (1 - t) + end * t; +}; + +const seededRandom = (x, y) => { + const a = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453123; + return a - Math.floor(a); +}; + +const worldToGrid = (x, y) => ({ + x: Math.floor(x / CONFIG.display.grid.size), + y: Math.floor(y / CONFIG.display.grid.size) +}); + +// ============= Configuration ============= const CONFIG = { display: { fps: 60, grid: { size: 100, - color: '#ddd' + color: 'rgba(221, 221, 221, 0.5)', + worldSize: 100, + voidColor: '#e6f3ff' }, camera: { deadzoneMultiplierX: 0.6, @@ -16,7 +34,7 @@ const CONFIG = { primary: '#4169E1', secondary: '#1E90FF', tertiary: '#0000CD', - glow: 'rgba(30, 144, 255, 0.25)', + glow: 'rgba(0, 128, 255, 0.5)', inner: '#0000CD' } }, @@ -36,9 +54,9 @@ const CONFIG = { exhaustedAt: 0 // Track when dash was exhausted }, idle: { - startDelay: 2000, // Start idle animation after 2 seconds + startDelay: 1500, // Start idle animation after 1.5 seconds lookSpeed: 0.001, // Speed of the looking animation - lookRadius: 0.3 // How far to look around (in radians) + lookRadius: 0.4 // How far to look around (in radians) } }, sword: { @@ -73,27 +91,105 @@ const CONFIG = { lifetime: 1000, spacing: 300, size: 5 + }, + world: { + village: { + size: 25, + groundColor: '#f2f2f2' + }, + wilderness: { + groundColor: '#e6ffe6', + vegetation: { + tree: { + frequency: 0.1, // Chance per grid cell + colors: [ + 'rgba(100, 144, 79, 1)', + 'rgba(85, 128, 64, 1)', + 'rgba(128, 164, 98, 1)', + 'rgba(110, 139, 61, 1)', + 'rgba(95, 133, 73, 1)', + 'rgba(248, 239, 58, 1)' + ], + size: { min: 20, max: 30 } + }, + mushroom: { + frequency: 0.03, + colors: [ + 'rgba(242, 63, 63, 0.25)', + 'rgba(245, 131, 148, 0.25)', + 'rgba(255, 119, 65, 0.25)', + 'rgba(193, 97, 1, 0.5)' + ], + pattern: { + size: 3, + spacing: 10, + margin: 10, + variation: 0.5, + offset: 0.5, + singleColor: 0.7 // % chance that all dots in a cell will be the same color + } + }, + flower: { + frequency: 0.05, + colors: [ + 'rgba(255, 105, 180, 0.3)', + 'rgba(221, 160, 221, 0.3)', + 'rgba(147, 112, 219, 0.3)' + ], + pattern: { + size: 12, + spacing: 16, + rotation: Math.PI / 6, // Base rotation of pattern + margin: 10, + variation: 0.2 + } + }, + grass: { + frequency: 0.12, + colors: ['rgba(28, 48, 32, 0.25)'], + hatch: { + spacing: 8, + length: 6, + angle: Math.PI / 4, + variation: 0.4, // Slight randomness in angle + margin: 4 + }, + spreadFactor: 0.6 // Add this for grass spreading + } + } + } + }, + collision: { + enabled: true, + vegetation: { + tree: { + enabled: true, + sizeMultiplier: 1.0 + } + } } }; -// Set references to shared colors + CONFIG.sword.colors = CONFIG.effects.colors; CONFIG.bubble.colors = CONFIG.effects.colors; + +// ============= Global State ============= let GAME_WIDTH = window.innerWidth; let GAME_HEIGHT = window.innerHeight; - let lastFrameTime = 0; let animationTime = 0; - const FRAME_TIME = 1000 / CONFIG.display.fps; const CAMERA_DEADZONE_X = GAME_WIDTH * CONFIG.display.camera.deadzoneMultiplierX; const CAMERA_DEADZONE_Y = GAME_HEIGHT * CONFIG.display.camera.deadzoneMultiplierY; + +// ============= State Management ============= const createInitialState = () => ({ player: { - x: window.innerWidth / 2, - y: window.innerHeight / 2, + x: CONFIG.player.size, // A bit offset from the edge + y: CONFIG.player.size, // A bit offset from the edge isDefending: false, direction: { x: 0, y: -1 }, swordAngle: 0, @@ -102,12 +198,12 @@ const createInitialState = () => ({ bubbles: [], bubbleParticles: [], lastBubbleTime: 0, - dashStartTime: 0, // When the current dash started - isDashing: false, // Currently dashing? - dashExhausted: false, // Is dash on cooldown? - lastDashEnd: 0, // When the last dash ended - lastInputTime: 0, // Track when the last input occurred - baseDirection: { x: 0, y: -1 } // Store the actual facing direction + dashStartTime: 0, // When the current dash started + isDashing: false, // Currently dashing? + dashExhausted: false, // Is dash on cooldown? + lastInputTime: 0, // Track when the last input occurred + baseDirection: { x: 0, y: -1 }, + lastDashEnd: 0 }, particles: [], footprints: [], @@ -117,16 +213,71 @@ const createInitialState = () => ({ y: 0, targetX: 0, targetY: 0 - } + }, + collisionMap: new Map() }); let state = createInitialState(); -const canvas = document.getElementById('gameCanvas'); -const ctx = canvas.getContext('2d'); +// ============= Input Handling ============= const keys = new Set(); +const handleKeyDown = (e) => { + keys.add(e.key); + + if (e.key === 'z' && !state.player.isDefending) { + Object.assign(state, inputHandlers.handleAttack(state, animationTime)); + } + + if (e.key === 'e') { + Object.assign(state, inputHandlers.handleEquipmentSwitch(state)); + } + + if (e.key === 'x') { + Object.assign(state, { + ...state, + player: { + ...state.player, + isDefending: true + } + }); + } + + if (e.key === 'c') { + const cellInfo = getCellInfo(state.player.x, state.player.y); + console.group('Current Cell Information:'); + console.log(`Position: (${cellInfo.position.cellX}, ${cellInfo.position.cellY})`); + console.log(`Biome: ${cellInfo.biome}`); + console.log('Vegetation:'); + const presentVegetation = Object.entries(cellInfo.vegetation) + .filter(([type, present]) => present) + .map(([type]) => type); + + if (presentVegetation.length === 0) { + console.log('none'); + } else { + presentVegetation.forEach(type => console.log(type)); + } + console.groupEnd(); + } + + state.player.lastInputTime = animationTime; +}; + +const handleKeyUp = (e) => { + keys.delete(e.key); + if (e.key === 'x') { + Object.assign(state, { + ...state, + player: { + ...state.player, + isDefending: false + } + }); + } +}; + const inputHandlers = { handleAttack: (state, animationTime) => { if (state.player.isDefending) return state; @@ -159,6 +310,185 @@ const inputHandlers = { } }; + +// ============= Movement System ============= +const calculateMovement = (keys) => { + let dx = 0; + let dy = 0; + + if (keys.has('ArrowLeft')) dx -= 1; + if (keys.has('ArrowRight')) dx += 1; + if (keys.has('ArrowUp')) dy -= 1; + if (keys.has('ArrowDown')) dy += 1; + + if (dx === 0 && dy === 0) { + return { moving: false }; + } + + // Update last input time when moving + state.player.lastInputTime = animationTime; + + const length = Math.sqrt(dx * dx + dy * dy); + const normalizedDx = dx / length; + const normalizedDy = dy / length; + + const isStrafing = keys.has(CONFIG.player.strafeKey); + + const newDirection = isStrafing ? + { ...state.player.direction } : // strafe + { x: normalizedDx, y: normalizedDy }; // normal movement + + // Update base direction when not strafing + if (!isStrafing) { + state.player.baseDirection = { ...newDirection }; + } + + return { + moving: true, + dx: normalizedDx, + dy: normalizedDy, + direction: newDirection + }; +}; + +const isPositionBlocked = (x, y) => { + const cell = worldToGrid(x, y); + const key = `${cell.x},${cell.y}`; + if (!state.collisionMap.has(key)) return false; + + const obstacle = state.collisionMap.get(key); + const obstacleRadius = CONFIG.player.size / 2; // Use player size for all collision + + // Distance check from center of grid cell + const dx = x - obstacle.x; + const dy = y - obstacle.y; + const distanceSquared = dx * dx + dy * dy; + + return distanceSquared < obstacleRadius * obstacleRadius; +}; + +const addToCollisionMap = (cellX, cellY, type) => { + const key = `${cellX},${cellY}`; + state.collisionMap.set(key, { + type, + x: (cellX * CONFIG.display.grid.size) + (CONFIG.display.grid.size / 2), + y: (cellY * CONFIG.display.grid.size) + (CONFIG.display.grid.size / 2) + }); +}; + +const movementSystem = { + updatePosition: (state, keys) => { + if (state.player.isDefending) return state; + + const movement = calculateMovement(keys); + if (!movement.moving) { + // Reset dash when not moving + return { + ...state, + player: { + ...state.player, + isDashing: false, + dashStartTime: 0 + } + }; + } + + const wantsToDash = keys.has('Shift'); + const canDash = !state.player.dashExhausted && + (animationTime - state.player.lastDashEnd) >= CONFIG.player.dash.cooldown; + + let isDashing = false; + let dashExhausted = state.player.dashExhausted; + let dashStartTime = state.player.dashStartTime; + let lastDashEnd = state.player.lastDashEnd; + + if (wantsToDash && canDash) { + if (!state.player.isDashing) { + dashStartTime = animationTime; + } + isDashing = true; + + // Check if dash duration is exhausted + if (animationTime - dashStartTime >= CONFIG.player.dash.duration) { + isDashing = false; + dashExhausted = true; + lastDashEnd = animationTime; + } + } else if (state.player.dashExhausted && + (animationTime - state.player.lastDashEnd >= CONFIG.player.dash.cooldown)) { + dashExhausted = false; + } + + const speed = isDashing ? + CONFIG.player.speed * CONFIG.player.sprintMultiplier : + CONFIG.player.speed; + + const timeSinceLastFootprint = animationTime - state.lastFootprintTime; + const currentSpacing = isDashing ? + CONFIG.footprints.spacing * CONFIG.player.sprintMultiplier : + CONFIG.footprints.spacing; + + let newFootprints = state.footprints; + if (timeSinceLastFootprint > currentSpacing / speed) { + const offset = (Math.random() - 0.5) * 6; + const perpX = -movement.direction.y * offset; + const perpY = movement.direction.x * offset; + + newFootprints = [...state.footprints, createFootprint( + state.player.x + perpX, + state.player.y + perpY, + Math.atan2(movement.dy, movement.dx) + )]; + } + + const worldBounds = { + min: 0, + max: CONFIG.display.grid.size * CONFIG.display.grid.worldSize + }; + + // After calculating new position, clamp it to world bounds + const newX = state.player.x + movement.dx * speed; + const newY = state.player.y + movement.dy * speed; + + const clampedX = Math.max(worldBounds.min, Math.min(worldBounds.max, newX)); + const clampedY = Math.max(worldBounds.min, Math.min(worldBounds.max, newY)); + + // Check for collisions at the new position + const playerRadius = CONFIG.player.size / 2; + const checkPoints = [ + { x: newX - playerRadius, y: newY - playerRadius }, // Top-left + { x: newX + playerRadius, y: newY - playerRadius }, // Top-right + { x: newX - playerRadius, y: newY + playerRadius }, // Bottom-left + { x: newX + playerRadius, y: newY + playerRadius } // Bottom-right + ]; + + const wouldCollide = checkCollision(newX, newY, playerRadius * 0.8); // Use 80% of player radius for better feel + + // Only update position if there's no collision + const finalX = wouldCollide ? state.player.x : clampedX; + const finalY = wouldCollide ? state.player.y : clampedY; + + return { + ...state, + player: { + ...state.player, + x: finalX, + y: finalY, + direction: movement.direction, + isDashing, + dashStartTime, + dashExhausted, + lastDashEnd + }, + footprints: newFootprints, + lastFootprintTime: timeSinceLastFootprint > currentSpacing / speed ? + animationTime : state.lastFootprintTime + }; + } +}; + + +// ============= Weapon Systems ============= const updateBubble = (bubble, animationTime) => { const age = animationTime - bubble.createdAt; const ageRatio = age / CONFIG.bubble.lifetime; @@ -275,164 +605,8 @@ const weaponSystems = { } }; -const movementSystem = { - updatePosition: (state, keys) => { - if (state.player.isDefending) return state; - - const movement = calculateMovement(keys); - if (!movement.moving) { - // Reset dash when not moving - return { - ...state, - player: { - ...state.player, - isDashing: false, - dashStartTime: 0 - } - }; - } - - const wantsToDash = keys.has('Shift'); - const canDash = !state.player.dashExhausted && - (animationTime - state.player.lastDashEnd) >= CONFIG.player.dash.cooldown; - - let isDashing = false; - let dashExhausted = state.player.dashExhausted; - let dashStartTime = state.player.dashStartTime; - let lastDashEnd = state.player.lastDashEnd; - - if (wantsToDash && canDash) { - if (!state.player.isDashing) { - dashStartTime = animationTime; - } - isDashing = true; - - // Check if dash duration exceeded - if (animationTime - dashStartTime >= CONFIG.player.dash.duration) { - isDashing = false; - dashExhausted = true; - lastDashEnd = animationTime; - } - } else if (state.player.dashExhausted && - (animationTime - state.player.lastDashEnd >= CONFIG.player.dash.cooldown)) { - dashExhausted = false; - } - - const speed = isDashing ? - CONFIG.player.speed * CONFIG.player.sprintMultiplier : - CONFIG.player.speed; - - // Handle footprint creation - const timeSinceLastFootprint = animationTime - state.lastFootprintTime; - const currentSpacing = isDashing ? - CONFIG.footprints.spacing * CONFIG.player.sprintMultiplier : - CONFIG.footprints.spacing; - - let newFootprints = state.footprints; - if (timeSinceLastFootprint > currentSpacing / speed) { - const offset = (Math.random() - 0.5) * 6; - const perpX = -movement.direction.y * offset; - const perpY = movement.direction.x * offset; - - newFootprints = [...state.footprints, createFootprint( - state.player.x + perpX, - state.player.y + perpY, - Math.atan2(movement.dy, movement.dx) - )]; - } - - return { - ...state, - player: { - ...state.player, - x: state.player.x + movement.dx * speed, - y: state.player.y + movement.dy * speed, - direction: movement.direction, - isDashing, - dashStartTime, - dashExhausted, - lastDashEnd - }, - footprints: newFootprints, - lastFootprintTime: timeSinceLastFootprint > currentSpacing / speed ? - animationTime : state.lastFootprintTime - }; - } -}; - -const handleKeyDown = (e) => { - keys.add(e.key); - - if (e.key === 'z' && !state.player.isDefending) { - Object.assign(state, inputHandlers.handleAttack(state, animationTime)); - } - - if (e.key === 'e') { - Object.assign(state, inputHandlers.handleEquipmentSwitch(state)); - } - - if (e.key === 'x') { - Object.assign(state, { - ...state, - player: { - ...state.player, - isDefending: true - } - }); - } - - // Update last input time for any key press - state.player.lastInputTime = animationTime; -}; - -const handleKeyUp = (e) => { - keys.delete(e.key); - if (e.key === 'x') { - Object.assign(state, { - ...state, - player: { - ...state.player, - isDefending: false - } - }); - } -}; - -const updatePlayer = () => { - Object.assign(state, weaponSystems.updateBubbles(state, animationTime)); - Object.assign(state, weaponSystems.updateSwordSwing(state, animationTime)); - Object.assign(state, movementSystem.updatePosition(state, keys)); - - state.footprints = state.footprints.filter(footprint => { - return (animationTime - footprint.createdAt) < CONFIG.footprints.lifetime; - }); - - // Update player direction for idle animation - if (!keys.size && !state.player.isSwinging && !state.player.isDefending) { - const idleTime = animationTime - state.player.lastInputTime; - - if (idleTime > CONFIG.player.idle.startDelay) { - // Calculate looking direction using sine waves - const lookAngle = Math.sin(animationTime * CONFIG.player.idle.lookSpeed) * CONFIG.player.idle.lookRadius; - const baseAngle = Math.atan2(state.player.baseDirection.y, state.player.baseDirection.x); - const newAngle = baseAngle + lookAngle; - - state.player.direction = { - x: Math.cos(newAngle), - y: Math.sin(newAngle) - }; - } else { - // Reset direction to base direction when not idle - state.player.direction = { ...state.player.baseDirection }; - } - } else { - // Update last input time when other actions occur - if (state.player.isSwinging || state.player.isDefending) { - state.player.lastInputTime = animationTime; - } - } -}; +// ============= Particle Systems ============= const createParticle = (x, y, angle) => ({ x, y, @@ -452,28 +626,26 @@ const createFootprint = (x, y, direction) => ({ offset: (Math.random() - 0.5) * 5 }); + +// ============= Rendering System ============= const renderPlayer = () => { ctx.save(); - // Render bubble particles state.player.bubbleParticles.forEach(particle => { const age = (animationTime - particle.createdAt) / CONFIG.bubbleParticle.lifetime; const alpha = (1 - age) * 0.8; - // Draw outer glow - ctx.fillStyle = `rgba(65, 105, 225, ${alpha * 0.3})`; // Royal Blue + ctx.fillStyle = CONFIG.effects.colors.glow.replace('0.25)', `${alpha * 0.3})`); // Outer glow ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.size * 2.5, 0, Math.PI * 2); ctx.fill(); - // Draw core - ctx.fillStyle = `rgba(30, 144, 255, ${alpha})`; // Dodger Blue + ctx.fillStyle = CONFIG.effects.colors.secondary.replace('rgb', 'rgba').replace(')', `, ${alpha})`); // Core ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.size * 1.5, 0, Math.PI * 2); ctx.fill(); }); - // Render bubbles with adjusted fade state.player.bubbles.forEach(bubble => { const age = (animationTime - bubble.createdAt) / CONFIG.bubble.lifetime; const alpha = Math.pow(1 - age, CONFIG.bubble.fadeExponent); @@ -483,7 +655,6 @@ const renderPlayer = () => { ctx.translate(bubble.x, bubble.y); ctx.rotate(bubble.angle); - // Draw outer glow with adjusted fade ctx.beginPath(); ctx.arc(0, 0, expandedSize * 1.5, -CONFIG.bubble.arcWidth * (1 + age * 0.5), @@ -495,14 +666,13 @@ const renderPlayer = () => { ctx.strokeStyle = CONFIG.bubble.colors.glow.replace(')', `, ${alpha * 0.5})`); ctx.stroke(); - // Draw main arc with gradient const gradient = ctx.createLinearGradient( -expandedSize, 0, expandedSize, 0 ); - gradient.addColorStop(0, `rgba(65, 105, 225, ${alpha})`); - gradient.addColorStop(0.6, `rgba(30, 144, 255, ${alpha})`); - gradient.addColorStop(1, `rgba(0, 0, 205, ${alpha})`); + gradient.addColorStop(0, CONFIG.bubble.colors.primary.replace('rgb', 'rgba').replace(')', `, ${alpha})`)); + gradient.addColorStop(0.6, CONFIG.bubble.colors.secondary.replace('rgb', 'rgba').replace(')', `, ${alpha})`)); + gradient.addColorStop(1, CONFIG.bubble.colors.tertiary.replace('rgb', 'rgba').replace(')', `, ${alpha})`)); ctx.beginPath(); ctx.arc(0, 0, expandedSize, @@ -514,7 +684,6 @@ const renderPlayer = () => { ctx.strokeStyle = gradient; ctx.stroke(); - // Draw inner bright line ctx.beginPath(); ctx.arc(0, 0, expandedSize * 0.9, -CONFIG.bubble.arcWidth * 0.6 * (1 + age * 0.5), @@ -628,7 +797,6 @@ const renderPlayer = () => { const numParticles = CONFIG.defense.particleCount; const baseOrbitRadius = CONFIG.player.size * CONFIG.defense.orbitRadiusMultiplier; - const rotationSpeed = CONFIG.defense.rotationSpeed; for (let i = 0; i < numParticles; i++) { @@ -666,14 +834,14 @@ const renderPlayer = () => { } } - // Add direction indicator square in the center + // Draw the eyeball...square const dotSize = CONFIG.player.directionIndicator.size; - // Calculate cooldown progress (0 to 1) + // Calculate cooldown progress const timeSinceLastBubble = animationTime - state.player.lastBubbleTime; - const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1); + // const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1); - // Set opacity based on cooldown (0.1 to 1) + // Set opacity based on cooldown's progress const dotOpacity = getDotOpacity(state, animationTime); ctx.fillStyle = CONFIG.player.directionIndicator.color.replace( @@ -703,11 +871,10 @@ const renderPlayer = () => { const dotX = state.player.x + state.player.direction.x * dotDistance; const dotY = state.player.y + state.player.direction.y * dotDistance; - // Calculate cooldown progress (0 to 1) const timeSinceLastBubble = animationTime - state.player.lastBubbleTime; - const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1); + // const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1); - // Set opacity based on cooldown (0.1 to 1) + // Set opacity based on cooldown's progress const dotOpacity = getDotOpacity(state, animationTime); ctx.fillStyle = CONFIG.player.directionIndicator.color.replace( @@ -726,10 +893,6 @@ const renderPlayer = () => { ctx.restore(); }; -const lerp = (start, end, t) => { - return start * (1 - t) + end * t; -}; - const render = () => { ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT); @@ -755,30 +918,273 @@ const render = () => { ctx.save(); ctx.translate(state.camera.x, state.camera.y); - + const gridSize = CONFIG.display.grid.size; - ctx.strokeStyle = CONFIG.display.grid.color; - ctx.lineWidth = 1; + const worldSize = gridSize * CONFIG.display.grid.worldSize; + const villageSize = CONFIG.world.village.size * gridSize; + // Calculate visible area const startX = Math.floor((-state.camera.x) / gridSize) * gridSize; const startY = Math.floor((-state.camera.y) / gridSize) * gridSize; const endX = startX + GAME_WIDTH + gridSize; const endY = startY + GAME_HEIGHT + gridSize; - for (let x = startX; x < endX; x += gridSize) { + // Draw void background + ctx.fillStyle = CONFIG.display.grid.voidColor; + ctx.fillRect( + startX, startY, + endX - startX, endY - startY + ); + + // First draw the wilderness ground for the whole world + ctx.fillStyle = CONFIG.world.wilderness.groundColor; + ctx.fillRect(0, 0, worldSize, worldSize); + + // Then draw the village ground in the top-left + ctx.fillStyle = CONFIG.world.village.groundColor; + ctx.fillRect(0, 0, villageSize, villageSize); + + // After drawing village and wilderness grounds, but before grid: + + // The shore gradient + const shoreWidth = 60; + const shoreColor = 'rgba(179, 220, 255, 0.3)'; + + + // FIXME: There is likely a way to do this all at once, but this was easy + // Top shore + const topShore = ctx.createLinearGradient(0, 0, 0, shoreWidth); + topShore.addColorStop(0, shoreColor); + topShore.addColorStop(1, 'rgba(255, 255, 255, 0)'); + ctx.fillStyle = topShore; + ctx.fillRect(0, 0, worldSize, shoreWidth); + + // Bottom shore + const bottomShore = ctx.createLinearGradient(0, worldSize - shoreWidth, 0, worldSize); + bottomShore.addColorStop(0, 'rgba(255, 255, 255, 0)'); + bottomShore.addColorStop(1, shoreColor); + ctx.fillStyle = bottomShore; + ctx.fillRect(0, worldSize - shoreWidth, worldSize, shoreWidth); + + // Left shore + const leftShore = ctx.createLinearGradient(0, 0, shoreWidth, 0); + leftShore.addColorStop(0, shoreColor); + leftShore.addColorStop(1, 'rgba(255, 255, 255, 0)'); + ctx.fillStyle = leftShore; + ctx.fillRect(0, 0, shoreWidth, worldSize); + + // Right shore + const rightShore = ctx.createLinearGradient(worldSize - shoreWidth, 0, worldSize, 0); + rightShore.addColorStop(0, 'rgba(255, 255, 255, 0)'); + rightShore.addColorStop(1, shoreColor); + ctx.fillStyle = rightShore; + ctx.fillRect(worldSize - shoreWidth, 0, shoreWidth, worldSize); + + // Draw grid inside of the world + ctx.strokeStyle = CONFIG.display.grid.color; + ctx.lineWidth = 1; + + // Draw vertical lines + for (let x = 0; x < worldSize; x += gridSize) { ctx.beginPath(); - ctx.moveTo(x, startY); - ctx.lineTo(x, endY); + ctx.moveTo(x, 0); + ctx.lineTo(x, worldSize); ctx.stroke(); } - - for (let y = startY; y < endY; y += gridSize) { + + // Draw horizontal lines + for (let y = 0; y < worldSize; y += gridSize) { ctx.beginPath(); - ctx.moveTo(startX, y); - ctx.lineTo(endX, y); + ctx.moveTo(0, y); + ctx.lineTo(worldSize, y); ctx.stroke(); } - + + // Draw vegetation in the wilderness + for (let x = startX; x < endX; x += gridSize) { + for (let y = startY; y < endY; y += gridSize) { + if (x >= worldSize || y >= worldSize) continue; + if (x < villageSize && y < villageSize) continue; + + const cellX = Math.floor(x / gridSize); + const cellY = Math.floor(y / gridSize); + + if (cellX < 0 || cellY < 0 || cellX >= CONFIG.display.grid.worldSize || cellY >= CONFIG.display.grid.worldSize) continue; + + const random = seededRandom(cellX, cellY); + + // Trees + if (random < CONFIG.world.wilderness.vegetation.tree.frequency) { + const size = CONFIG.world.wilderness.vegetation.tree.size; + const treeSize = size.min + seededRandom(cellX * 2, cellY * 2) * (size.max - size.min); + + // Add tree to collision map + if (CONFIG.collision.enabled && CONFIG.collision.vegetation.tree.enabled) { + addToCollisionMap(cellX, cellY, 'tree'); + } + + // Generate number of sides for this tree + const sides = Math.floor(10 + seededRandom(cellX * 3, cellY * 3) * 13); // 10 to 22 sides + + // Choose color for this tree + const colorIndex = Math.floor(seededRandom(cellX * 4, cellY * 4) * CONFIG.world.wilderness.vegetation.tree.colors.length); + ctx.fillStyle = CONFIG.world.wilderness.vegetation.tree.colors[colorIndex]; + + ctx.beginPath(); + + for (let i = 0; i < sides; i++) { + const angle = (i / sides) * Math.PI * 2; + + const radiusVariation = 0.8 + seededRandom(cellX * i, cellY * i) * 0.4; + const pointRadius = treeSize * radiusVariation; + + const px = x + gridSize/2 + Math.cos(angle) * pointRadius; + const py = y + gridSize/2 + Math.sin(angle) * pointRadius; + + if (i === 0) { + ctx.moveTo(px, py); + } else { + ctx.lineTo(px, py); + } + } + + ctx.closePath(); + ctx.fill(); + } + + // Mushrooms + else if (random < CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency) { + const config = CONFIG.world.wilderness.vegetation.mushroom; + + // Determine if cell uses single color + const useSingleColor = seededRandom(cellX * 31, cellY * 31) < config.pattern.singleColor; + const cellColorIndex = Math.floor(seededRandom(cellX * 13, cellY * 13) * config.colors.length); + + // Create regular grid of circles with slight variation + for (let i = config.pattern.margin; i < gridSize - config.pattern.margin; i += config.pattern.spacing) { + for (let j = config.pattern.margin; j < gridSize - config.pattern.margin; j += config.pattern.spacing) { + // Offset every other row for more natural pattern + const offsetX = (Math.floor(j / config.pattern.spacing) % 2) * + (config.pattern.spacing * config.pattern.offset); + const px = x + i + offsetX; + const py = y + j; + + // Add variation to position + const variation = { + x: (seededRandom(cellX * i, cellY * j) - 0.5) * config.pattern.variation * config.pattern.spacing, + y: (seededRandom(cellX * j, cellY * i) - 0.5) * config.pattern.variation * config.pattern.spacing + }; + + // Choose color for this dot + const colorIndex = useSingleColor ? cellColorIndex : + Math.floor(seededRandom(cellX * i * j, cellY * i * j) * config.colors.length); + ctx.fillStyle = config.colors[colorIndex]; + + ctx.beginPath(); + ctx.arc( + px + variation.x, + py + variation.y, + config.pattern.size, + 0, Math.PI * 2 + ); + ctx.fill(); + } + } + } + // Flowers + else if (random < CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency + + CONFIG.world.wilderness.vegetation.flower.frequency) { + const config = CONFIG.world.wilderness.vegetation.flower; + + // Determine base color for this cell + const colorIndex = Math.floor(seededRandom(cellX * 13, cellY * 13) * config.colors.length); + ctx.fillStyle = config.colors[colorIndex]; + + // Calculate base rotation for this cell + const baseRotation = config.pattern.rotation + + (seededRandom(cellX * 14, cellY * 14) - 0.5) * config.pattern.variation; + + // Draw tessellating triangle pattern + for (let i = config.pattern.margin; i < gridSize - config.pattern.margin; i += config.pattern.spacing) { + for (let j = config.pattern.margin; j < gridSize - config.pattern.margin; j += config.pattern.spacing) { + // Offset every other row + const offsetX = (Math.floor(j / config.pattern.spacing) % 2) * (config.pattern.spacing / 2); + const px = x + i + offsetX; + const py = y + j; + + // Add slight position variation + const variation = { + x: (seededRandom(cellX * i, cellY * j) - 0.5) * 4, + y: (seededRandom(cellX * j, cellY * i) - 0.5) * 4 + }; + + // Draw triangle + ctx.beginPath(); + ctx.save(); + ctx.translate(px + variation.x, py + variation.y); + ctx.rotate(baseRotation + (seededRandom(cellX * i, cellY * j) - 0.5) * 0.5); + + const size = config.pattern.size * (0.8 + seededRandom(cellX * i, cellY * j) * 0.4); + ctx.moveTo(-size/2, size/2); + ctx.lineTo(size/2, size/2); + ctx.lineTo(0, -size/2); + ctx.closePath(); + + ctx.fill(); + ctx.restore(); + } + } + } + // Grass + else if (random < CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency + + CONFIG.world.wilderness.vegetation.flower.frequency + + CONFIG.world.wilderness.vegetation.grass.frequency || + (seededRandom(cellX * 50, cellY * 50) < + CONFIG.world.wilderness.vegetation.grass.spreadFactor && + hasAdjacentGrass(cellX, cellY))) { + + const config = CONFIG.world.wilderness.vegetation.grass; + + // Draw hatching pattern + ctx.strokeStyle = config.colors[0]; + ctx.lineWidth = 1; + + // Calculate base angle with slight variation + const baseAngle = config.hatch.angle + + (seededRandom(cellX * 20, cellY * 20) - 0.5) * config.hatch.variation; + + // Create hatching pattern + for (let i = config.hatch.margin; i < gridSize - config.hatch.margin; i += config.hatch.spacing) { + for (let j = config.hatch.margin; j < gridSize - config.hatch.margin; j += config.hatch.spacing) { + const hatchX = x + i; + const hatchY = y + j; + + // Add slight position variation + const offsetX = (seededRandom(cellX * i, cellY * j) - 0.5) * 2; + const offsetY = (seededRandom(cellX * j, cellY * i) - 0.5) * 2; + + ctx.beginPath(); + ctx.moveTo( + hatchX + offsetX, + hatchY + offsetY + ); + ctx.lineTo( + hatchX + Math.cos(baseAngle) * config.hatch.length + offsetX, + hatchY + Math.sin(baseAngle) * config.hatch.length + offsetY + ); + ctx.stroke(); + } + } + } + } + } + + // Draw player + renderPlayer(); + state.footprints.forEach(footprint => { const age = (animationTime - footprint.createdAt) / CONFIG.footprints.lifetime; if (age >= 1) return; @@ -805,11 +1211,45 @@ const render = () => { ctx.restore(); }); - renderPlayer(); - ctx.restore(); }; + +// ============= Game Loop ============= +const updatePlayer = () => { + Object.assign(state, weaponSystems.updateBubbles(state, animationTime)); + Object.assign(state, weaponSystems.updateSwordSwing(state, animationTime)); + Object.assign(state, movementSystem.updatePosition(state, keys)); + + state.footprints = state.footprints.filter(footprint => { + return (animationTime - footprint.createdAt) < CONFIG.footprints.lifetime; + }); + + // Update player direction for idle animation + if (!keys.size && !state.player.isSwinging && !state.player.isDefending) { + const idleTime = animationTime - state.player.lastInputTime; + + if (idleTime > CONFIG.player.idle.startDelay) { + const lookAngle = Math.sin(animationTime * CONFIG.player.idle.lookSpeed) * CONFIG.player.idle.lookRadius; + const baseAngle = Math.atan2(state.player.baseDirection.y, state.player.baseDirection.x); + const newAngle = baseAngle + lookAngle; + + state.player.direction = { + x: Math.cos(newAngle), + y: Math.sin(newAngle) + }; + } else { + // Reset direction to base direction when not idle + state.player.direction = { ...state.player.baseDirection }; + } + } else { + // Update last input time when other actions occur + if (state.player.isSwinging || state.player.isDefending) { + state.player.lastInputTime = animationTime; + } + } +}; + const gameLoop = (currentTime) => { if (!lastFrameTime) { lastFrameTime = currentTime; @@ -830,8 +1270,10 @@ const gameLoop = (currentTime) => { requestAnimationFrame(gameLoop); }; -window.addEventListener('keydown', handleKeyDown); -window.addEventListener('keyup', handleKeyUp); + +// ============= Setup & Initialization ============= +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); const resizeCanvas = () => { GAME_WIDTH = window.innerWidth; @@ -844,51 +1286,13 @@ const resizeCanvas = () => { } }; +window.addEventListener('keydown', handleKeyDown); +window.addEventListener('keyup', handleKeyUp); window.addEventListener('resize', resizeCanvas); resizeCanvas(); - requestAnimationFrame(gameLoop); -const calculateMovement = (keys) => { - let dx = 0; - let dy = 0; - - if (keys.has('ArrowLeft')) dx -= 1; - if (keys.has('ArrowRight')) dx += 1; - if (keys.has('ArrowUp')) dy -= 1; - if (keys.has('ArrowDown')) dy += 1; - - if (dx === 0 && dy === 0) { - return { moving: false }; - } - - // Update last input time when moving - state.player.lastInputTime = animationTime; - - const length = Math.sqrt(dx * dx + dy * dy); - const normalizedDx = dx / length; - const normalizedDy = dy / length; - - const isStrafing = keys.has(CONFIG.player.strafeKey); - - const newDirection = isStrafing ? - { ...state.player.direction } : // Keep current direction while strafing - { x: normalizedDx, y: normalizedDy }; // Update direction normally - - // Update base direction when not strafing - if (!isStrafing) { - state.player.baseDirection = { ...newDirection }; - } - - return { - moving: true, - dx: normalizedDx, - dy: normalizedDy, - direction: newDirection - }; -}; - const getDotOpacity = (state, animationTime) => { // Get bubble cooldown opacity const timeSinceLastBubble = animationTime - state.player.lastBubbleTime; @@ -906,18 +1310,144 @@ const getDotOpacity = (state, animationTime) => { dashOpacity = 1 - (dashProgress * 0.7); // Fade to 0.3 during dash } - // Add blinking effect when moving or defending let blinkOpacity = 1; if (state.player.isDefending) { - // Create a slow pulse using sin wave (period of about 1.5 seconds) const blinkPhase = Math.sin(animationTime * 0.002); - // Only blink occasionally (when sin wave is above 0.7) if (blinkPhase > 0.7) { - // Quick fade out and in blinkOpacity = 0.3 + (blinkPhase - 0.7) * 2; } } // Return the lowest opacity of all systems return Math.min(bubbleOpacity, dashOpacity, blinkOpacity); +}; + +const checkCollision = (x, y, size) => { + // Check corners of player square + const halfSize = size / 2; + const corners = [ + { x: x - halfSize, y: y - halfSize }, // Top-left + { x: x + halfSize, y: y - halfSize }, // Top-right + { x: x - halfSize, y: y + halfSize }, // Bottom-left + { x: x + halfSize, y: y + halfSize } // Bottom-right + ]; + + return corners.some(corner => isPositionBlocked(corner.x, corner.y)); +}; + +const createNaturalCluster = (centerX, centerY, config, cellX, cellY, i) => { + // Base angle and distance + const angle = seededRandom(cellX * 8 + i, cellY * 8) * Math.PI * 2; + + // Make clusters denser in the middle and sparser on edges + const distanceFromCenter = seededRandom(cellX * 9 + i, cellY * 9); + // Use square root to bias towards center + const distance = Math.sqrt(distanceFromCenter) * config.size.max; + + // Add some variation + const variation = { + x: (seededRandom(cellX * 10 + i, cellY * 10) - 0.5) * config.size.max, + y: (seededRandom(cellX * 11 + i, cellY * 11) - 0.5) * config.size.max + }; + + return { + x: centerX + Math.cos(angle) * distance + variation.x, + y: centerY + Math.sin(angle) * distance + variation.y, + size: config.size.min + + seededRandom(cellX * 3 + i, cellY * 3) * + (config.size.max - config.size.min) * + // Make items on the edge slightly smaller + (1 - (distance / config.cluster.spread) * 0.3) + }; +}; + +const renderTree = (ctx, x, y, size, isTop = false) => { + ctx.fillStyle = CONFIG.world.wilderness.vegetation.tree.color; + if (isTop) { + // Draw only the top 2/3 of the tree + ctx.beginPath(); + ctx.arc( + x + CONFIG.display.grid.size/2, + y + CONFIG.display.grid.size/2, + size, + -Math.PI, 0 + ); + ctx.fill(); + } else { + // Draw only the bottom 2/3 of the tree + ctx.beginPath(); + ctx.arc( + x + CONFIG.display.grid.size/2, + y + CONFIG.display.grid.size/2, + size, + 0, Math.PI + ); + ctx.fill(); + } +}; + +const hasAdjacentGrass = (cellX, cellY) => { + const adjacentCells = [ + [-1, -1], [0, -1], [1, -1], + [-1, 0], [1, 0], + [-1, 1], [0, 1], [1, 1] + ]; + + return adjacentCells.some(([dx, dy]) => { + const adjX = cellX + dx; + const adjY = cellY + dy; + const adjRandom = seededRandom(adjX, adjY); + + return adjRandom < CONFIG.world.wilderness.vegetation.grass.frequency; + }); +}; + +const getCellInfo = (x, y) => { + const cellX = Math.floor(x / CONFIG.display.grid.size); + const cellY = Math.floor(y / CONFIG.display.grid.size); + const random = seededRandom(cellX, cellY); + + // Determine biome + const isInVillage = x < (CONFIG.world.village.size * CONFIG.display.grid.size) && + y < (CONFIG.world.village.size * CONFIG.display.grid.size); + + // If in village, return early with no vegetation + if (isInVillage) { + return { + position: { cellX, cellY }, + biome: 'Village', + vegetation: { + tree: false, + mushrooms: false, + flowers: false, + grass: false + } + }; + } + + // Check for vegetation only if in wilderness + const hasTree = random < CONFIG.world.wilderness.vegetation.tree.frequency; + const hasMushrooms = random < (CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency); + const hasFlowers = random < (CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency + + CONFIG.world.wilderness.vegetation.flower.frequency); + const hasGrass = random < (CONFIG.world.wilderness.vegetation.tree.frequency + + CONFIG.world.wilderness.vegetation.mushroom.frequency + + CONFIG.world.wilderness.vegetation.flower.frequency + + CONFIG.world.wilderness.vegetation.grass.frequency) || + (seededRandom(cellX * 50, cellY * 50) < + CONFIG.world.wilderness.vegetation.grass.spreadFactor && + hasAdjacentGrass(cellX, cellY)); + + return { + position: { cellX, cellY }, + biome: 'Wilderness', + vegetation: { + tree: hasTree, + mushrooms: !hasTree && hasMushrooms, + flowers: !hasTree && !hasMushrooms && hasFlowers, + grass: !hasTree && !hasMushrooms && !hasFlowers && hasGrass + } + }; }; \ No newline at end of file diff --git a/html/plains/index.html b/html/plains/index.html index 508e7e0..492e93f 100644 --- a/html/plains/index.html +++ b/html/plains/index.html @@ -1,7 +1,10 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>Top-down Adventure</title> + <title>Plains</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="Little black square wanted to be a fucking Jedi."> <style> * { margin: 0; @@ -23,4 +26,5 @@ <canvas id="gameCanvas"></canvas> <script src="game.js"></script> </body> -</html> \ No newline at end of file +</html> + |