diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/plains/enemies.js | 402 | ||||
| -rw-r--r-- | html/plains/game.js | 175 | ||||
| -rw-r--r-- | html/plains/index.html | 1 |
3 files changed, 568 insertions, 10 deletions
diff --git a/html/plains/enemies.js b/html/plains/enemies.js new file mode 100644 index 0000000..c0e3daa --- /dev/null +++ b/html/plains/enemies.js @@ -0,0 +1,402 @@ +// ============= Enemy System ============= +const blueShades = [ + 'rgb(0, 0, 255)', // Bright blue + 'rgb(0, 0, 200)', // Medium blue + 'rgb(0, 0, 150)', // Darker blue + 'rgb(0, 0, 100)', // Even darker blue + 'rgb(0, 0, 50)' // Very dark blue +]; + +const generateEnemies = (villagers, collisionMap) => { + const enemies = []; + const gridSize = CONFIG.display.grid.size; + const occupiedCells = new Set([...collisionMap.keys()]); + + villagers.forEach(villager => { + if (villager.status === 'rescued') return; + + // Generate 2-5 enemies per villager + const numEnemies = 2 + Math.floor(Math.random() * 4); + + for (let i = 0; i < numEnemies; i++) { + // Place within 2-3 cells of villager + const radius = 2 + Math.floor(Math.random()); + const angle = Math.random() * Math.PI * 2; + + const cellX = villager.cellX + Math.floor(Math.cos(angle) * radius); + const cellY = villager.cellY + Math.floor(Math.sin(angle) * radius); + const cellKey = `${cellX},${cellY}`; + + // Skip if cell is occupied + if (occupiedCells.has(cellKey)) { + continue; + } + + // Generate random color between orange and dark red + const red = 150 + Math.floor(Math.random() * 105); // 150-255 + const green = Math.floor(Math.random() * 100); // 0-100 + const blue = 0; + + enemies.push({ + x: (cellX * gridSize) + (gridSize / 2), + y: (cellY * gridSize) + (gridSize / 2), + color: `rgb(${red}, ${green}, ${blue})`, + size: CONFIG.enemies.size.min + Math.random() * (CONFIG.enemies.size.max - CONFIG.enemies.size.min), + targetVillager: villager, + patrolAngle: Math.random() * Math.PI * 2, + isChasing: false, + hp: 2 + Math.floor(Math.random() * 9), + stunned: false, + stunEndTime: 0, + attacking: false, + attackCooldown: false, + attackCooldownUntil: 0, + knockback: { + active: false, + startX: 0, + startY: 0, + targetX: 0, + targetY: 0, + startTime: 0, + duration: 300 + } + }); + + occupiedCells.add(cellKey); + } + }); + + return enemies; +}; + +const handleEnemyDamage = (enemy, damage, knockbackForce = 0, angle = 0) => { + const gridSize = CONFIG.display.grid.size; + enemy.hp -= damage; + + if (damage > 0 && enemy.hp <= 0) { + // Create death particles + const numParticles = 15 + Math.floor(Math.random() * 10); + for (let i = 0; i < numParticles; i++) { + const angle = (i / numParticles) * Math.PI * 2; + const speed = 2 + Math.random() * 3; + state.particles.push({ + x: enemy.x, + y: enemy.y, + dx: Math.cos(angle) * speed, + dy: Math.sin(angle) * speed, + size: enemy.size * (0.1 + Math.random() * 0.2), + color: enemy.color, + lifetime: 1000, + createdAt: animationTime + }); + } + } + + return damage > 0 && enemy.hp <= 0; +}; + +const updateEnemies = (enemies, deltaTime) => { + const gridSize = CONFIG.display.grid.size; + const aggroRange = gridSize * CONFIG.enemies.chase.range; + + // Check for weapon collisions + enemies.forEach(enemy => { + // Check bubble collisions + state.player.bubbles.forEach((bubble, bubbleIndex) => { + const dx = enemy.x - bubble.x; + const dy = enemy.y - bubble.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < enemy.size + CONFIG.bubble.size) { + // Remove the bubble + state.player.bubbles.splice(bubbleIndex, 1); + + // Normalize the direction vector + const length = Math.sqrt(dx * dx + dy * dy); + const dirX = dx / length; + const dirY = dy / length; + + // Set up knockback animation + enemy.knockback = { + active: true, + startX: enemy.x, + startY: enemy.y, + targetX: enemy.x + dirX * CONFIG.display.grid.size, + targetY: enemy.y + dirY * CONFIG.display.grid.size, + startTime: animationTime, + duration: 300 + }; + + // Stun the enemy + enemy.stunned = true; + enemy.stunEndTime = animationTime + 500; // Stun for 500ms + } + }); + + // Check sword collision + if (state.player.isSwinging && state.player.equipment === 'sword') { + const swordTip = { + x: state.player.x + Math.cos(state.player.swordAngle) * CONFIG.sword.length, + y: state.player.y + Math.sin(state.player.swordAngle) * CONFIG.sword.length + }; + + const dx = enemy.x - swordTip.x; + const dy = enemy.y - swordTip.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < enemy.size + 10) { // 10px sword hit tolerance + handleEnemyDamage(enemy, 1); + enemy.stunned = true; + enemy.stunEndTime = animationTime + 300; // Stun for 300ms + } + } + }); + + return enemies.filter(enemy => enemy.hp > 0).map(enemy => { + const baseSpeed = CONFIG.enemies.patrol.speed.base * deltaTime / 1000; // Convert to pixels per frame + + // Handle knockback animation + if (enemy.knockback.active) { + const progress = (animationTime - enemy.knockback.startTime) / enemy.knockback.duration; + + if (progress >= 1) { + enemy.knockback.active = false; + enemy.x = enemy.knockback.targetX; + enemy.y = enemy.knockback.targetY; + + // Calculate distance from villager after knockback + const dvx = enemy.x - enemy.targetVillager.x; + const dvy = enemy.y - enemy.targetVillager.y; + const distanceToVillager = Math.sqrt(dvx * dvx + dvy * dvy); + + // If too far from villager, set returning state + if (distanceToVillager > gridSize * 3) { + return { + ...enemy, + x: enemy.x, + y: enemy.y, + isChasing: false, + isReturning: true + }; + } + } else { + // Smooth easing function (ease-out) + const t = 1 - Math.pow(1 - progress, 3); + enemy.x = enemy.knockback.startX + (enemy.knockback.targetX - enemy.knockback.startX) * t; + enemy.y = enemy.knockback.startY + (enemy.knockback.targetY - enemy.knockback.startY) * t; + } + + return { + ...enemy, + x: enemy.x, + y: enemy.y, + isChasing: false + }; + } + + // If enemy is returning to villager + if (enemy.isReturning) { + const dvx = enemy.targetVillager.x - enemy.x; + const dvy = enemy.targetVillager.y - enemy.y; + const distanceToVillager = Math.sqrt(dvx * dvx + dvy * dvy); + + // If back within range, resume normal behavior + if (distanceToVillager <= gridSize * 2) { + enemy.isReturning = false; + } else { + // Move towards villager + const angle = Math.atan2(dvy, dvx); + const returnSpeed = baseSpeed * CONFIG.enemies.return.speedMultiplier; + + return { + ...enemy, + x: enemy.x + Math.cos(angle) * returnSpeed, + y: enemy.y + Math.sin(angle) * returnSpeed, + isChasing: false, + isReturning: true + }; + } + } + + // Check if stun has worn off + if (enemy.stunned && animationTime >= enemy.stunEndTime) { + enemy.stunned = false; + } + + if (enemy.targetVillager.status === 'rescued') { + return { + ...enemy, + color: CONFIG.enemies.colors.defeated + }; + } + + // Calculate distance to player + const dx = state.player.x - enemy.x; + const dy = state.player.y - enemy.y; + const distanceToPlayer = Math.sqrt(dx * dx + dy * dy); + + if (distanceToPlayer <= aggroRange) { + // Check if in attack range (half grid cell) + const attackRange = gridSize * 0.5; + + // If on attack cooldown, keep distance + if (enemy.attackCooldown) { + if (animationTime >= enemy.attackCooldownUntil) { + enemy.attackCooldown = false; + } else if (distanceToPlayer < gridSize) { + // Retreat if too close during cooldown + const retreatAngle = Math.atan2(dy, dx) + Math.PI; // Opposite direction + const retreatSpeed = baseSpeed * CONFIG.enemies.chase.speedMultiplier; + return { + ...enemy, + x: enemy.x + Math.cos(retreatAngle) * retreatSpeed, + y: enemy.y + Math.sin(retreatAngle) * retreatSpeed, + isChasing: true + }; + } + } + + // If in attack range and not on cooldown, initiate attack + if (distanceToPlayer <= attackRange && !enemy.attacking && !enemy.attackCooldown) { + enemy.attacking = true; + enemy.attackStartPosition = { x: enemy.x, y: enemy.y }; + enemy.attackTargetPosition = { + x: state.player.x, + y: state.player.y + }; + enemy.attackStartTime = animationTime; + + // Change enemy color to a random blue shade + enemy.color = blueShades[Math.floor(Math.random() * blueShades.length)]; + } + + // Handle attack animation and damage + if (enemy.attacking) { + const attackDuration = 200; // 200ms attack + const progress = (animationTime - enemy.attackStartTime) / attackDuration; + + if (progress >= 1) { + enemy.attacking = false; + enemy.attackCooldown = true; + enemy.attackCooldownUntil = animationTime + 1000; // 1 second cooldown + + // Check if attack hit the player + const finalDx = state.player.x - enemy.x; + const finalDy = state.player.y - enemy.y; + const finalDistance = Math.sqrt(finalDx * finalDx + finalDy * finalDy); + + if (finalDistance < enemy.size + CONFIG.player.size && + !state.player.isInvulnerable && + !state.player.isDefending && + !state.player.isSwinging && + state.player.bubbles.length === 0) { + state.player.hp -= 1; + state.player.isInvulnerable = true; + state.player.invulnerableUntil = animationTime + 1000; + } + + return { + ...enemy, + isChasing: true + }; + } + + // Fast lunge animation with ease-in + const t = progress * progress; // Quadratic ease-in + return { + ...enemy, + x: enemy.attackStartPosition.x + (enemy.attackTargetPosition.x - enemy.attackStartPosition.x) * t, + y: enemy.attackStartPosition.y + (enemy.attackTargetPosition.y - enemy.attackStartPosition.y) * t, + isChasing: true, + attacking: true + }; + } + + // Normal chase behavior if not attacking + const angle = Math.atan2(dy, dx); + const chaseSpeed = baseSpeed * CONFIG.enemies.chase.speedMultiplier; + + return { + ...enemy, + x: enemy.x + Math.cos(angle) * chaseSpeed, + y: enemy.y + Math.sin(angle) * chaseSpeed, + isChasing: true + }; + } else { + // Get current distance from villager + const dvx = enemy.x - enemy.targetVillager.x; + const dvy = enemy.y - enemy.targetVillager.y; + const distanceToVillager = Math.sqrt(dvx * dvx + dvy * dvy); + + // If too far from villager, start returning + if (distanceToVillager > gridSize * 3) { + return { + ...enemy, + isReturning: true, + isChasing: false + }; + } + + // Patrol behavior - move in small circles around current position + if (!enemy.patrolAngle) { + enemy.patrolAngle = Math.random() * Math.PI * 2; + } + + enemy.patrolAngle += baseSpeed * 0.02; // Small angle change for circular movement + + return { + ...enemy, + x: enemy.x + Math.cos(enemy.patrolAngle) * baseSpeed, + y: enemy.y + Math.sin(enemy.patrolAngle) * baseSpeed, + patrolAngle: enemy.patrolAngle, + isChasing: false + }; + } + }); +}; + +const renderEnemies = (ctx, enemies) => { + enemies.forEach(enemy => { + ctx.beginPath(); + ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2); + ctx.fillStyle = enemy.stunned ? 'rgb(150, 150, 150)' : enemy.color; + ctx.fill(); + + // Add a glowing effect + const glowSize = enemy.stunned ? 1.1 : (enemy.attacking ? 1.6 : enemy.isChasing ? 1.4 : 1.2); + const glowIntensity = enemy.stunned ? 0.1 : (enemy.attacking ? 0.5 : enemy.isChasing ? 0.3 : 0.2); + const gradient = ctx.createRadialGradient( + enemy.x, enemy.y, enemy.size * 0.5, + enemy.x, enemy.y, enemy.size * glowSize + ); + gradient.addColorStop(0, `rgba(255, 0, 0, ${glowIntensity})`); + gradient.addColorStop(1, 'rgba(255, 0, 0, 0)'); + + ctx.beginPath(); + ctx.arc(enemy.x, enemy.y, enemy.size * glowSize, 0, Math.PI * 2); + ctx.fillStyle = gradient; + ctx.fill(); + + // Draw HP bar + const maxHP = 10; + const barWidth = enemy.size * 2; + const barHeight = 4; + const barX = enemy.x - barWidth / 2; + const barY = enemy.y - enemy.size - barHeight - 5; + + // Background + ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; + ctx.fillRect(barX, barY, barWidth, barHeight); + + // HP + ctx.fillStyle = `rgb(${Math.floor(255 * (1 - enemy.hp/maxHP))}, ${Math.floor(255 * enemy.hp/maxHP)}, 0)`; + ctx.fillRect(barX, barY, barWidth * (enemy.hp/maxHP), barHeight); + }); +}; + +// Export the functions +window.enemySystem = { + generateEnemies, + updateEnemies, + renderEnemies +}; \ No newline at end of file diff --git a/html/plains/game.js b/html/plains/game.js index 9e91353..5923b16 100644 --- a/html/plains/game.js +++ b/html/plains/game.js @@ -286,6 +286,43 @@ const CONFIG = { sizeMultiplier: 1.0 } } + }, + enemies: { + size: { + min: 15, + max: 20 + }, + colors: { + active: { + min: { + red: 150, + green: 0, + blue: 0 + }, + max: { + red: 255, + green: 100, + blue: 0 + } + }, + defeated: 'rgb(100, 100, 100)' + }, + patrol: { + radius: { + min: 100, + max: 200 + }, + speed: { + base: 100 // pixels per second + } + }, + chase: { + range: 2, + speedMultiplier: 1.5 // 50% faster than base speed + }, + return: { + speedMultiplier: 1.25 // 25% faster than base speed + } } }; @@ -307,24 +344,29 @@ const CAMERA_DEADZONE_Y = GAME_HEIGHT * CONFIG.display.camera.deadzoneMultiplier // ============= State Management ============= const createInitialState = () => ({ player: { - x: CONFIG.player.size, // A bit offset from the edge - y: CONFIG.player.size, // A bit offset from the edge + x: CONFIG.player.size, + y: CONFIG.player.size, isDefending: false, direction: { x: 0, y: -1 }, swordAngle: 0, isSwinging: false, - equipment: 'unarmed', // Start without sword + equipment: 'unarmed', bubbles: [], bubbleParticles: [], lastBubbleTime: 0, - 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 + dashStartTime: 0, + isDashing: false, + dashExhausted: false, + lastInputTime: 0, baseDirection: { x: 0, y: -1 }, lastDashEnd: 0, swordUnlocked: false, - rescuedCount: 0 + rescuedCount: 0, + hp: 15, + maxHp: 15, + isInvulnerable: false, + invulnerableUntil: 0, + isDead: false }, particles: [], footprints: [], @@ -338,7 +380,8 @@ const createInitialState = () => ({ collisionMap: new Map(), villagers: [], gameComplete: false, - gameCompleteMessageShown: false + gameCompleteMessageShown: false, + enemies: [] }); let state = createInitialState(); @@ -348,6 +391,14 @@ let state = createInitialState(); const keys = new Set(); const handleKeyDown = (e) => { + // If player is dead, only handle restart + if (state.player.isDead) { + if (e.code === 'Space') { + window.location.reload(); + } + return; + } + keys.add(e.key); if (e.key === 'z' && !state.player.isDefending) { @@ -1022,6 +1073,53 @@ const renderPlayer = () => { ctx.restore(); }; +const renderPlayerHUD = (ctx) => { + // Save the current context state + ctx.save(); + + // Switch to screen coordinates + ctx.setTransform(1, 0, 0, 1, 0, 0); + + // HP Bar container + const barWidth = 200; + const barHeight = 20; + const barX = 20; + const barY = 20; + const borderWidth = 2; + + // Draw border + ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'; + ctx.fillRect( + barX - borderWidth, + barY - borderWidth, + barWidth + borderWidth * 2, + barHeight + borderWidth * 2 + ); + + // Background + ctx.fillStyle = 'rgba(50, 50, 50, 0.8)'; + ctx.fillRect(barX, barY, barWidth, barHeight); + + // HP + const hpRatio = state.player.hp / state.player.maxHp; + ctx.fillStyle = `rgb(${Math.floor(255 * (1 - hpRatio))}, ${Math.floor(255 * hpRatio)}, 0)`; + ctx.fillRect(barX, barY, barWidth * hpRatio, barHeight); + + // HP Text + ctx.fillStyle = 'white'; + ctx.font = '14px Arial'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText( + `HP: ${state.player.hp}/${state.player.maxHp}`, + barX + barWidth/2, + barY + barHeight/2 + ); + + // Restore the context state + ctx.restore(); +}; + const render = () => { ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT); @@ -1207,7 +1305,7 @@ const render = () => { // Choose color for this dot const colorIndex = useSingleColor ? cellColorIndex : - Math.floor(seededRandom(cellX * i * j, cellY * i * j) * config.colors.length); + Math.floor(seededRandom(cellX * i, cellY * j) * config.colors.length); ctx.fillStyle = config.colors[colorIndex]; ctx.beginPath(); @@ -1332,6 +1430,9 @@ const render = () => { ctx.restore(); }); + // Render enemies + enemySystem.renderEnemies(ctx, state.enemies); + // Draw player renderPlayer(); @@ -1361,6 +1462,33 @@ const render = () => { ctx.restore(); }); + // Render particles + state.particles = state.particles.filter(particle => { + const age = animationTime - particle.createdAt; + if (age >= particle.lifetime) return false; + + const alpha = 1 - (age / particle.lifetime); + ctx.beginPath(); + ctx.arc( + particle.x + particle.dx * age * 0.1, + particle.y + particle.dy * age * 0.1, + particle.size, + 0, Math.PI * 2 + ); + ctx.fillStyle = particle.color.replace('rgb', 'rgba').replace(')', `, ${alpha})`); + ctx.fill(); + + return true; + }); + + // Render HUD elements + renderPlayerHUD(ctx); + + // Update player invulnerability + if (state.player.isInvulnerable && animationTime >= state.player.invulnerableUntil) { + state.player.isInvulnerable = false; + } + ctx.restore(); }; @@ -1462,7 +1590,14 @@ const gameLoop = (currentTime) => { if (deltaTime >= FRAME_TIME) { animationTime += FRAME_TIME; + // Check for player death + if (state.player.hp <= 0 && !state.player.isDead) { + state.player.isDead = true; + showGameOver(); + } + updatePlayer(); + state.enemies = enemySystem.updateEnemies(state.enemies, deltaTime); render(); lastFrameTime = currentTime; @@ -1495,6 +1630,7 @@ resizeCanvas(); // Initialize villagers after collision map is populated state.villagers = generateVillagers(); +state.enemies = enemySystem.generateEnemies(state.villagers, state.collisionMap); // Start the game loop requestAnimationFrame(gameLoop); @@ -1696,4 +1832,23 @@ const showSwordUnlockAnimation = () => { document.body.removeChild(container); document.head.removeChild(style); }, CONFIG.player.equipment.unlockAnimation.duration); +}; + +const showGameOver = () => { + const gameOverDiv = document.createElement('div'); + gameOverDiv.style.position = 'fixed'; + gameOverDiv.style.top = '50%'; + gameOverDiv.style.left = '50%'; + gameOverDiv.style.transform = 'translate(-50%, -50%)'; + gameOverDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + gameOverDiv.style.padding = '20px'; + gameOverDiv.style.borderRadius = '10px'; + gameOverDiv.style.color = 'white'; + gameOverDiv.style.textAlign = 'center'; + gameOverDiv.style.fontSize = '24px'; + gameOverDiv.innerHTML = ` + <h2>Game Over</h2> + <p>Press Space to restart</p> + `; + document.body.appendChild(gameOverDiv); }; \ No newline at end of file diff --git a/html/plains/index.html b/html/plains/index.html index 492e93f..0ca2807 100644 --- a/html/plains/index.html +++ b/html/plains/index.html @@ -24,6 +24,7 @@ </head> <body> <canvas id="gameCanvas"></canvas> + <script src="enemies.js"></script> <script src="game.js"></script> </body> </html> |