// ============= 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)
});
// Add the villager-related functions here
const generateVillagers = () => {
const villagers = [];
const occupiedCells = new Set();
const gridSize = CONFIG.display.grid.size;
const villageSize = CONFIG.world.village.size;
const worldSize = CONFIG.display.grid.worldSize;
// First, place one villager near the village
const nearVillageX = villageSize + Math.floor(Math.random() * 2);
const nearVillageY = villageSize + Math.floor(Math.random() * 2);
villagers.push({
x: (nearVillageX * gridSize) + (gridSize / 2),
y: (nearVillageY * gridSize) + (gridSize / 2),
color: CONFIG.world.villagers.colors[Math.floor(Math.random() * CONFIG.world.villagers.colors.length)],
shape: CONFIG.world.villagers.shapes[Math.floor(Math.random() * CONFIG.world.villagers.shapes.length)],
status: 'lost',
cellX: nearVillageX,
cellY: nearVillageY,
bobSpeed: 0.005 + Math.random() * 0.005, // Random speed for rescued villagers
bobAmplitude: 2 + Math.random() * 2, // Random amplitude for rescued villagers
lostBobSpeed: 0.005 + Math.random() * 0.005, // Random speed for lost villagers
lostBobAmplitude: 2 + Math.random() * 2 // Random amplitude for lost villagers
});
occupiedCells.add(`${nearVillageX},${nearVillageY}`);
// Place remaining villagers
while (villagers.length < CONFIG.world.villagers.total) {
const cellX = villageSize + Math.floor(Math.random() * (worldSize - villageSize));
const cellY = villageSize + Math.floor(Math.random() * (worldSize - villageSize));
const cellKey = `${cellX},${cellY}`;
// Skip if cell is occupied or has a tree
if (occupiedCells.has(cellKey) || state.collisionMap.has(cellKey)) {
continue;
}
villagers.push({
x: (cellX * gridSize) + (gridSize / 2),
y: (cellY * gridSize) + (gridSize / 2),
color: CONFIG.world.villagers.colors[Math.floor(Math.random() * CONFIG.world.villagers.colors.length)],
shape: CONFIG.world.villagers.shapes[Math.floor(Math.random() * CONFIG.world.villagers.shapes.length)],
status: 'lost',
cellX,
cellY,
bobSpeed: 0.005 + Math.random() * 0.005, // Random speed for rescued villagers
bobAmplitude: 2 + Math.random() * 2, // Random amplitude for rescued villagers
lostBobSpeed: 0.005 + Math.random() * 0.005, // Random speed for lost villagers
lostBobAmplitude: 2 + Math.random() * 2 // Random amplitude for lost villagers
});
occupiedCells.add(cellKey);
}
return villagers;
};
const drawVillagerShape = (ctx, x, y, shape, size) => {
ctx.beginPath();
switch (shape) {
case 'square':
ctx.rect(x - size/2, y - size/2, size, size);
break;
case 'triangle':
ctx.moveTo(x, y - size/2);
ctx.lineTo(x + size/2, y + size/2);
ctx.lineTo(x - size/2, y + size/2);
break;
case 'pentagon':
for (let i = 0; i < 5; i++) {
const angle = (i * 2 * Math.PI / 5) - Math.PI/2;
const px = x + Math.cos(angle) * size/2;
const py = y + Math.sin(angle) * size/2;
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
case 'hexagon':
for (let i = 0; i < 6; i++) {
const angle = (i * 2 * Math.PI / 6);
const px = x + Math.cos(angle) * size/2;
const py = y + Math.sin(angle) * size/2;
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
}
ctx.closePath();
};
// ============= Configuration =============
const CONFIG = {
display: {
fps: 60,
grid: {
size: 100,
color: 'rgba(221, 221, 221, 0.5)',
worldSize: 100,
voidColor: '#e6f3ff'
},
camera: {
deadzoneMultiplierX: 0.6,
deadzoneMultiplierY: 0.6,
ease: 0.08
}
},
effects: {
colors: {
primary: '#4169E1',
secondary: '#1E90FF',
tertiary: '#0000CD',
glow: 'rgba(0, 128, 255, 0.5)',
inner: '#0000CD'
}
},
player: {
size: 30,
speed: 5,
sprintMultiplier: 2,
color: '#111',
strafeKey: ' ',
directionIndicator: {
size: 10,
color: 'rgba(32, 178, 170, 1)'
},
dash: {
duration: 3000, // 3 seconds of use
cooldown: 1000, // 1 second cooldown
exhaustedAt: 0 // Track when dash was exhausted
},
idle: {
startDelay: 1500, // Start idle animation after 1.5 seconds
lookSpeed: 0.001, // Speed of the looking animation
lookRadius: 0.4 // How far to look around (in radians)
},
equipment: {
swordUnlockCount: 3, // Number of rescues needed to unlock sword
unlockAnimation: {
duration: 1500, // Duration of unlock animation in ms
glowColor: 'rgba(255, 215, 0, 0.6)', // Golden glow
messageText: 'Sword Unlocked!',
messageColor: '#FFD700' // Gold color for text
}
}
},
sword: {
length: 60,
swingSpeed: 0.6,
colors: null
},
bubble: {
size: 20,
speed: 8,
lifetime: 800,
cooldown: 1000,
arcWidth: Math.PI / 3,
colors: null,
particleEmitRate: 0.3,
fadeExponent: 2.5
},
bubbleParticle: {
lifetime: 700,
speedMultiplier: 0.3,
size: 3
},
defense: {
numLayers: 6,
maxRadiusMultiplier: 2,
baseAlpha: 0.15,
particleCount: 12,
orbitRadiusMultiplier: 0.8,
rotationSpeed: 1.5
},
footprints: {
lifetime: 1000,
spacing: 300,
size: 5
},
world: {
village: {
size: 5,
groundColor: '#f2f2f2'
},
villagers: {
total: 1000, // Total number of villagers to spawn
colors: [
'#4B0082', // Indigo
'#483D8B', // DarkSlateBlue
'#6A5ACD', // SlateBlue
'#2F4F4F', // DarkSlateGray
'#363636', // DarkGray
'#4682B4' // SteelBlue
],
shapes: ['square', 'triangle', 'pentagon', 'hexagon'],
size: 30, // Same as player size
rescueMessage: 'Congratulations! All villagers have been rescued!',
messageDisplayTime: 5000 // How long to show the completion message (ms)
},
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
}
}
},
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
}
}
};
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: CONFIG.player.size,
y: CONFIG.player.size,
isDefending: false,
direction: { x: 0, y: -1 },
swordAngle: 0,
isSwinging: false,
equipment: 'unarmed',
bubbles: [],
bubbleParticles: [],
lastBubbleTime: 0,
dashStartTime: 0,
isDashing: false,
dashExhausted: false,
lastInputTime: 0,
baseDirection: { x: 0, y: -1 },
lastDashEnd: 0,
swordUnlocked: false,
rescuedCount: 0,
hp: 15,
maxHp: 15,
isInvulnerable: false,
invulnerableUntil: 0,
isDead: false,
diamonds: 0, // Track number of collected diamonds
lastRenderedCircles: 4, // Add this line
},
particles: [],
footprints: [],
lastFootprintTime: 0,
camera: {
x: 0,
y: 0,
targetX: 0,
targetY: 0
},
collisionMap: new Map(),
villagers: [],
gameComplete: false,
gameCompleteMessageShown: false,
enemies: [],
diamonds: [] // Array to hold diamond objects
});
let state = createInitialState();
// ============= Input Handling =============
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) {
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;
if (state.player.equipment === 'sword') {
if (!state.player.swordUnlocked) return state; // Prevent sword usage if not unlocked
if (!state.player.isSwinging) {
return {
...state,
player: {
...state.player,
isSwinging: true,
swordAngle: Math.atan2(state.player.direction.y, state.player.direction.x) - Math.PI / 2
}
};
}
} else if (state.player.equipment === 'unarmed') {
return createBubbleAttack(state, animationTime);
}
return state;
},
handleEquipmentSwitch: (state) => {
if (!state.player.swordUnlocked) return state; // Can't switch if sword isn't unlocked
const equipment = ['sword', 'unarmed'];
const currentIndex = equipment.indexOf(state.player.equipment);
return {
...state,
player: {
...state.player,
equipment: equipment[(currentIndex + 1) % equipment.length]
}
};
}
};
// ============= 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;
const speedMultiplier = Math.pow(1 - ageRatio, 0.5);
return {
...bubble,
x: bubble.x + bubble.dx * speedMultiplier,
y: bubble.y + bubble.dy * speedMultiplier
};
};
const generateBubbleParticles = (bubble, animationTime) => {
const age = animationTime - bubble.createdAt;
const ageRatio = age / CONFIG.bubble.lifetime;
if (Math.random() >= CONFIG.bubble.particleEmitRate * (1 - ageRatio)) {
return [];
}
const trailDistance = Math.random() * 20;
const particleX = bubble.x - bubble.dx * (trailDistance / CONFIG.bubble.speed);
const particleY = bubble.y - bubble.dy * (trailDistance / CONFIG.bubble.speed);
const particleAngle = bubble.angle + (Math.random() - 0.5) * CONFIG.bubble.arcWidth * 2;
const spreadSpeed = CONFIG.bubble.speed * 0.2 * (1 - ageRatio);
const spreadAngle = Math.random() * Math.PI * 2;
const speedMultiplier = Math.pow(1 - ageRatio, 0.5);
return [{
x: particleX,
y: particleY,
dx: (Math.cos(particleAngle) * CONFIG.bubble.speed * CONFIG.bubbleParticle.speedMultiplier * speedMultiplier) +
(Math.cos(spreadAngle) * spreadSpeed),
dy: (Math.sin(particleAngle) * CONFIG.bubble.speed * CONFIG.bubbleParticle.speedMultiplier * speedMultiplier) +
(Math.sin(spreadAngle) * spreadSpeed),
size: CONFIG.bubbleParticle.size * (0.5 + Math.random() * 0.5),
createdAt: animationTime
}];
};
const updateBubbleParticles = (particles, animationTime) => {
return particles.filter(particle => {
const age = animationTime - particle.createdAt;
return age < CONFIG.bubbleParticle.lifetime;
}).map(particle => ({
...particle,
x: particle.x + particle.dx,
y: particle.y + particle.dy
}));
};
const createBubbleAttack = (state, animationTime) => {
const timeSinceLastBubble = animationTime - state.player.lastBubbleTime;
if (timeSinceLastBubble < CONFIG.bubble.cooldown) return state;
const angle = Math.atan2(state.player.direction.y, state.player.direction.x);
const bubble = {
x: state.player.x,
y: state.player.y,
dx: state.player.direction.x * CONFIG.bubble.speed,
dy: state.player.direction.y * CONFIG.bubble.speed,
angle: angle,
createdAt: animationTime,
size: CONFIG.bubble.size * (0.8 + Math.random() * 0.4)
};
return {
...state,
player: {
...state.player,
bubbles: [...state.player.bubbles, bubble],
lastBubbleTime: animationTime
}
};
};
const weaponSystems = {
updateBubbles: (state, animationTime) => {
const updatedBubbles = state.player.bubbles
.filter(bubble => animationTime - bubble.createdAt < CONFIG.bubble.lifetime)
.map(bubble => updateBubble(bubble, animationTime));
const newParticles = updatedBubbles
.flatMap(bubble => generateBubbleParticles(bubble, animationTime));
return {
...state,
player: {
...state.player,
bubbles: updatedBubbles,
bubbleParticles: [
...updateBubbleParticles(state.player.bubbleParticles, animationTime),
...newParticles
]
}
};
},
updateSwordSwing: (state, animationTime) => {
if (!state.player.isSwinging) return state;
const newAngle = state.player.swordAngle + CONFIG.sword.swingSpeed;
const swingComplete = newAngle > Math.atan2(state.player.direction.y, state.player.direction.x) + Math.PI / 2;
// Add sword collision detection
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
};
// Check all enemies for sword collision
const updatedEnemies = state.enemies.map(enemy => {
if (!enemy.stunned) {
const dx = enemy.x - state.player.x;
const dy = enemy.y - state.player.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < enemy.size + CONFIG.sword.length) {
const knockbackAngle = Math.atan2(dy, dx);
enemySystem.handleEnemyDamage(enemy, 1, 1, knockbackAngle);
}
}
return enemy;
});
return {
...state,
player: {
...state.player,
swordAngle: newAngle,
isSwinging: !swingComplete
},
enemies: updatedEnemies
};
}
};
// ============= Particle Systems =============
const createParticle = (x, y, angle) => ({
x,
y,
angle,
createdAt: animationTime,
lifetime: CONFIG.swordParticles.lifetime,
speed: CONFIG.swordParticles.speed * (0.5 + Math.random() * 0.5),
size: CONFIG.swordParticles.size.min + Math.random() * (CONFIG.swordParticles.size.max - CONFIG.swordParticles.size.min)
});
const createFootprint = (x, y, direction) => ({
x,
y,
direction,
createdAt: animationTime,
size: CONFIG.footprints.size * (0.8 + Math.random() * 0.4),
offset: (Math.random() - 0.5) * 5
});
// ============= Rendering System =============
const renderPlayer = () => {
ctx.save();
state.player.bubbleParticles.forEach(particle => {
const age = (animationTime - particle.createdAt) / CONFIG.bubbleParticle.lifetime;
const alpha = (1 - age) * 0.8;
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();
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();
});
state.player.bubbles.forEach(bubble => {
const age = (animationTime - bubble.createdAt) / CONFIG.bubble.lifetime;
const alpha = Math.pow(1 - age, CONFIG.bubble.fadeExponent);
const expandedSize = bubble.size * (1 + age * 2);
ctx.save();
ctx.translate(bubble.x, bubble.y);
ctx.rotate(bubble.angle);
ctx.beginPath();
ctx.arc(0, 0, expandedSize * 1.5,
-CONFIG.bubble.arcWidth * (1 + age * 0.5),
CONFIG.bubble.arcWidth * (1 + age * 0.5),
false
);
ctx.lineCap = 'round';
ctx.lineWidth = expandedSize * 0.5 * (1 - age * 0.3);
ctx.strokeStyle = CONFIG.bubble.colors.glow.replace(')', `, ${alpha * 0.5})`);
ctx.stroke();
const gradient = ctx.createLinearGradient(
-expandedSize, 0,
expandedSize, 0
);
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,
-CONFIG.bubble.arcWidth * 0.8 * (1 + age * 0.5),
CONFIG.bubble.arcWidth * 0.8 * (1 + age * 0.5),
false
);
ctx.lineWidth = expandedSize * 0.3 * (1 - age * 0.3);
ctx.strokeStyle = gradient;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, expandedSize * 0.9,
-CONFIG.bubble.arcWidth * 0.6 * (1 + age * 0.5),
CONFIG.bubble.arcWidth * 0.6 * (1 + age * 0.5),
false
);
ctx.lineWidth = expandedSize * 0.1 * (1 - age * 0.3);
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
ctx.stroke();
ctx.restore();
});
if (state.player.isSwinging && state.player.equipment === 'sword') {
const blurSteps = 12;
const blurSpread = 0.2;
for (let i = 0; i < blurSteps; i++) {
const alpha = 0.35 - (i * 0.02);
const angleOffset = -blurSpread * i;
ctx.strokeStyle = `rgba(30, 144, 255, ${alpha})`;
ctx.lineWidth = 4 + (blurSteps - i);
ctx.beginPath();
ctx.moveTo(state.player.x, state.player.y);
ctx.lineTo(
state.player.x + Math.cos(state.player.swordAngle + angleOffset) * CONFIG.sword.length,
state.player.y + Math.sin(state.player.swordAngle + angleOffset) * CONFIG.sword.length
);
ctx.stroke();
}
const gradient = ctx.createLinearGradient(
state.player.x,
state.player.y,
state.player.x + Math.cos(state.player.swordAngle) * CONFIG.sword.length,
state.player.y + Math.sin(state.player.swordAngle) * CONFIG.sword.length
);
gradient.addColorStop(0, CONFIG.sword.colors.primary);
gradient.addColorStop(0.6, CONFIG.sword.colors.secondary);
gradient.addColorStop(1, CONFIG.sword.colors.tertiary);
ctx.strokeStyle = CONFIG.sword.colors.glow;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(state.player.x, state.player.y);
ctx.lineTo(
state.player.x + Math.cos(state.player.swordAngle) * CONFIG.sword.length,
state.player.y + Math.sin(state.player.swordAngle) * CONFIG.sword.length
);
ctx.stroke();
ctx.strokeStyle = gradient;
ctx.lineWidth = 6;
ctx.stroke();
}
if (state.player.isDefending) {
const numLayers = CONFIG.defense.numLayers;
const maxRadius = CONFIG.player.size * CONFIG.defense.maxRadiusMultiplier;
const baseAlpha = CONFIG.defense.baseAlpha;
for (let i = numLayers - 1; i >= 0; i--) {
const radius = CONFIG.player.size / 2 + (maxRadius - CONFIG.player.size / 2) * (i / numLayers);
const alpha = baseAlpha * (1 - i / numLayers);
const pulseOffset = Math.sin(Date.now() / 500) * 3;
const glowGradient = ctx.createRadialGradient(
state.player.x, state.player.y, radius - 5,
state.player.x, state.player.y, radius + pulseOffset
);
glowGradient.addColorStop(0, `rgba(30, 144, 255, ${alpha})`);
glowGradient.addColorStop(1, 'rgba(30, 144, 255, 0)');
ctx.beginPath();
ctx.arc(state.player.x, state.player.y, radius + pulseOffset, 0, Math.PI * 2);
ctx.fillStyle = glowGradient;
ctx.fill();
}
const mainAuraGradient = ctx.createRadialGradient(
state.player.x, state.player.y, CONFIG.player.size / 2 - 2,
state.player.x, state.player.y, CONFIG.player.size / 2 + 8
);
mainAuraGradient.addColorStop(0, 'rgba(30, 144, 255, 0.3)');
mainAuraGradient.addColorStop(0.5, 'rgba(30, 144, 255, 0.2)');
mainAuraGradient.addColorStop(1, 'rgba(30, 144, 255, 0)');
ctx.beginPath();
ctx.arc(state.player.x, state.player.y, CONFIG.player.size / 2 + 8, 0, Math.PI * 2);
ctx.fillStyle = mainAuraGradient;
ctx.fill();
ctx.beginPath();
ctx.arc(state.player.x, state.player.y, CONFIG.player.size / 2, 0, Math.PI * 2);
ctx.fillStyle = '#111';
ctx.fill();
ctx.beginPath();
ctx.arc(state.player.x, state.player.y, CONFIG.player.size / 2, 0, Math.PI * 2);
ctx.strokeStyle = CONFIG.sword.colors.secondary;
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.arc(state.player.x, state.player.y, CONFIG.player.size / 2 - 3, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(30, 144, 255, 0.3)';
ctx.lineWidth = 2;
ctx.stroke();
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++) {
const radialOffset = Math.sin(animationTime * 0.002 + i * 0.5) * 4;
const orbitRadius = baseOrbitRadius + radialOffset;
const angle = (i / numParticles) * Math.PI * 2 + animationTime * rotationSpeed * 0.001;
const x = state.player.x + Math.cos(angle) * orbitRadius;
const y = state.player.y + Math.sin(angle) * orbitRadius;
const size = 2 + Math.sin(animationTime * 0.003 + i * 0.8) * 1.5;
const baseAlpha = 0.6 + Math.sin(animationTime * 0.002 + i) * 0.2;
ctx.beginPath();
ctx.arc(x, y, size * 2, 0, Math.PI * 2);
ctx.fillStyle = `rgba(30, 144, 255, ${baseAlpha * 0.3})`;
ctx.fill();
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(135, 206, 250, ${baseAlpha})`;
ctx.fill();
if (i > 0) {
const prevAngle = ((i - 1) / numParticles) * Math.PI * 2 + animationTime * rotationSpeed * 0.001;
const prevX = state.player.x + Math.cos(prevAngle) * orbitRadius;
const prevY = state.player.y + Math.sin(prevAngle) * orbitRadius;
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(x, y);
ctx.strokeStyle = `rgba(30, 144, 255, ${baseAlpha * 0.2})`;
ctx.lineWidth = 1;
ctx.stroke();
}
}
// Draw the eyeball...square
const dotSize = CONFIG.player.directionIndicator.size;
// Calculate cooldown progress
const timeSinceLastBubble = animationTime - state.player.lastBubbleTime;
// const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1);
// Set opacity based on cooldown's progress
const dotOpacity = getDotOpacity(state, animationTime);
ctx.fillStyle = CONFIG.player.directionIndicator.color.replace(
'1)',
`${dotOpacity})`
);
ctx.fillRect(
state.player.x - dotSize/2,
state.player.y - dotSize/2,
dotSize,
dotSize
);
} else {
// Draw player square
ctx.fillStyle = CONFIG.player.color;
ctx.fillRect(
state.player.x - CONFIG.player.size / 2,
state.player.y - CONFIG.player.size / 2,
CONFIG.player.size,
CONFIG.player.size
);
// Draw direction indicator square with cooldown opacity
const dotSize = CONFIG.player.directionIndicator.size;
const dotDistance = CONFIG.player.size / 3;
const dotX = state.player.x + state.player.direction.x * dotDistance;
const dotY = state.player.y + state.player.direction.y * dotDistance;
const timeSinceLastBubble = animationTime - state.player.lastBubbleTime;
// const cooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1);
// Set opacity based on cooldown's progress
const dotOpacity = getDotOpacity(state, animationTime);
ctx.fillStyle = CONFIG.player.directionIndicator.color.replace(
'1)', // Replace the full opacity with our calculated opacity
`${dotOpacity})`
);
ctx.fillRect(
dotX - dotSize/2,
dotY - dotSize/2,
dotSize,
dotSize
);
}
ctx.restore();
};
const renderPlayerHUD = (ctx) => {
// Save the current context state
ctx.save();
// Switch to screen coordinates
ctx.setTransform(1, 0, 0, 1, 0, 0);
const circleRadius = 15;
const circleSpacing = 40;
const startX = 30;
const startY = 30;
const totalCircles = 4;
const hpPerCircle = state.player.maxHp / totalCircles;
// Track if we need to create explosion particles
const currentFilledCircles = Math.ceil(state.player.hp / hpPerCircle);
if (currentFilledCircles < state.player.lastRenderedCircles) {
// Create explosion particles for the depleted circle
const circleIndex = currentFilledCircles;
const particleX = startX + circleIndex * circleSpacing;
createHealthCircleExplosion(particleX, startY);
}
state.player.lastRenderedCircles = currentFilledCircles;
// Draw circles
for (let i = 0; i < totalCircles; i++) {
const circleX = startX + i * circleSpacing;
const circleY = startY;
// Calculate how full this circle should be
const circleStartHp = i * hpPerCircle;
const circleEndHp = (i + 1) * hpPerCircle;
let fillAmount = 1;
if (state.player.hp <= circleStartHp) {
fillAmount = 0;
} else if (state.player.hp < circleEndHp) {
fillAmount = (state.player.hp - circleStartHp) / hpPerCircle;
}
// Draw outer circle (border)
ctx.beginPath();
ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 2;
ctx.stroke();
// Draw fill
if (fillAmount > 0) {
// Create gradient for filled portion
const gradient = ctx.createRadialGradient(
circleX, circleY, 0,
circleX, circleY, circleRadius
);
gradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
gradient.addColorStop(0.7, 'rgba(200, 0, 0, 0.6)');
gradient.addColorStop(1, 'rgba(150, 0, 0, 0.4)');
ctx.beginPath();
ctx.arc(circleX, circleY, circleRadius * 0.9, 0, Math.PI * 2 * fillAmount);
ctx.lineTo(circleX, circleY);
ctx.fillStyle = gradient;
ctx.fill();
}
}
// Restore the context state
ctx.restore();
};
// Add this new function to create the explosion effect
const createHealthCircleExplosion = (screenX, screenY) => {
const numParticles = 20;
const colors = [
'rgba(255, 0, 0, 0.8)',
'rgba(200, 0, 0, 0.6)',
'rgba(150, 0, 0, 0.4)'
];
// Convert screen coordinates to world coordinates
const worldX = screenX - state.camera.x;
const worldY = screenY - state.camera.y;
for (let i = 0; i < numParticles; i++) {
const angle = (i / numParticles) * Math.PI * 2;
const speed = 2 + Math.random() * 3;
const size = 2 + Math.random() * 3;
const color = colors[Math.floor(Math.random() * colors.length)];
state.particles.push({
x: worldX,
y: worldY,
dx: Math.cos(angle) * speed,
dy: Math.sin(angle) * speed,
size: size,
color: color,
lifetime: 1000,
createdAt: animationTime
});
}
};
const render = () => {
ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
const screenCenterX = -state.camera.x + GAME_WIDTH / 2;
const screenCenterY = -state.camera.y + GAME_HEIGHT / 2;
const distX = state.player.x - screenCenterX;
const distY = state.player.y - screenCenterY;
if (Math.abs(distX) > CAMERA_DEADZONE_X / 2) {
const bufferX = (GAME_WIDTH - CAMERA_DEADZONE_X) / 2;
const targetOffsetX = distX > 0 ? GAME_WIDTH - bufferX : bufferX;
state.camera.targetX = -(state.player.x - targetOffsetX);
}
if (Math.abs(distY) > CAMERA_DEADZONE_Y / 2) {
const bufferY = (GAME_HEIGHT - CAMERA_DEADZONE_Y) / 2;
const targetOffsetY = distY > 0 ? GAME_HEIGHT - bufferY : bufferY;
state.camera.targetY = -(state.player.y - targetOffsetY);
}
state.camera.x = lerp(state.camera.x, state.camera.targetX, CONFIG.display.camera.ease);
state.camera.y = lerp(state.camera.y, state.camera.targetY, CONFIG.display.camera.ease);
ctx.save();
ctx.translate(state.camera.x, state.camera.y);
const gridSize = CONFIG.display.grid.size;
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;
// 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, 0);
ctx.lineTo(x, worldSize);
ctx.stroke();
}
// Draw horizontal lines
for (let y = 0; y < worldSize; y += gridSize) {
ctx.beginPath();
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, cellY * 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();
}
}
}
}
}
// After drawing vegetation but before drawing the player, add:
state.villagers.forEach(villager => {
ctx.save();
ctx.fillStyle = villager.color;
// Add slight bobbing motion for rescued villagers
if (villager.status === 'rescued') {
const bobOffset = Math.sin(animationTime * villager.bobSpeed) * villager.bobAmplitude;
drawVillagerShape(ctx, villager.x, villager.y + bobOffset, villager.shape, CONFIG.world.villagers.size);
} else if (villager.status === 'lost') {
// Horizontal bobbing for lost villagers
const lostBobOffset = Math.sin(animationTime * villager.lostBobSpeed) * villager.lostBobAmplitude;
drawVillagerShape(ctx, villager.x + lostBobOffset, villager.y, villager.shape, CONFIG.world.villagers.size);
} else {
drawVillagerShape(ctx, villager.x, villager.y, villager.shape, CONFIG.world.villagers.size);
}
ctx.fill();
ctx.restore();
});
// Render enemies
enemySystem.renderEnemies(ctx, state.enemies);
// Draw player
renderPlayer();
state.footprints.forEach(footprint => {
const age = (animationTime - footprint.createdAt) / CONFIG.footprints.lifetime;
if (age >= 1) return;
const alpha = Math.max(0, 1 - age * age);
ctx.save();
ctx.translate(footprint.x + footprint.offset, footprint.y + footprint.offset);
const radius = Math.max(0.1, footprint.size * (1 - age * 0.5));
if (radius > 0) {
ctx.beginPath();
ctx.arc(0, 0, radius * 2, 0, Math.PI * 2);
ctx.fillStyle = `rgba(17, 17, 17, ${alpha * 0.1})`;
ctx.fill();
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(17, 17, 17, ${alpha * 0.3})`;
ctx.fill();
}
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;
}
// Render diamonds
renderDiamonds();
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;
}
}
// Check for villager collisions
state.villagers.forEach(villager => {
if (villager.status === 'rescued') return;
const dx = state.player.x - villager.x;
const dy = state.player.y - villager.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < (CONFIG.player.size + CONFIG.world.villagers.size) / 2) {
villager.status = 'rescued';
state.player.rescuedCount++;
// Check for sword unlock
if (state.player.rescuedCount >= CONFIG.player.equipment.swordUnlockCount && !state.player.swordUnlocked) {
state.player.swordUnlocked = true;
state.player.equipment = 'sword'; // Auto-equip sword
showSwordUnlockAnimation();
}
// Assign new position in village when rescued
const villageSize = CONFIG.world.village.size * CONFIG.display.grid.size;
const margin = CONFIG.world.villagers.size;
villager.x = margin + Math.random() * (villageSize - margin * 2);
villager.y = margin + Math.random() * (villageSize - margin * 2);
// Check if all villagers are rescued
const allRescued = state.villagers.every(v => v.status === 'rescued');
if (allRescued && !state.gameComplete) {
state.gameComplete = true;
// Show completion message
const message = document.createElement('div');
message.textContent = CONFIG.world.villagers.rescueMessage;
message.style.position = 'fixed';
message.style.top = '50%';
message.style.left = '50%';
message.style.transform = 'translate(-50%, -50%)';
message.style.padding = '20px';
message.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
message.style.color = 'white';
message.style.borderRadius = '10px';
message.style.fontSize = '24px';
document.body.appendChild(message);
setTimeout(() => {
document.body.removeChild(message);
}, CONFIG.world.villagers.messageDisplayTime);
}
}
});
};
const gameLoop = (currentTime) => {
if (!lastFrameTime) {
lastFrameTime = currentTime;
animationTime = 0;
}
const deltaTime = currentTime - lastFrameTime;
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);
collectDiamonds(); // Add this line to check for diamond collection
render();
lastFrameTime = currentTime;
}
requestAnimationFrame(gameLoop);
};
// ============= Setup & Initialization =============
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const resizeCanvas = () => {
GAME_WIDTH = window.innerWidth;
GAME_HEIGHT = window.innerHeight;
canvas.width = GAME_WIDTH;
canvas.height = GAME_HEIGHT;
if (!state.player.x) {
state.player.x = GAME_WIDTH / 2;
state.player.y = GAME_HEIGHT / 2;
}
};
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
window.addEventListener('resize', resizeCanvas);
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);
const getDotOpacity = (state, animationTime) => {
// Get bubble cooldown opacity
const timeSinceLastBubble = animationTime - state.player.lastBubbleTime;
const bubbleCooldownProgress = Math.min(timeSinceLastBubble / CONFIG.bubble.cooldown, 1);
const bubbleOpacity = 0.1 + (bubbleCooldownProgress * 0.9);
// Get dash cooldown opacity
let dashOpacity = 1;
if (state.player.dashExhausted) {
const timeSinceExhaustion = animationTime - state.player.lastDashEnd;
const dashCooldownProgress = timeSinceExhaustion / CONFIG.player.dash.cooldown;
dashOpacity = 0.1 + (Math.min(dashCooldownProgress, 1) * 0.9);
} else if (state.player.isDashing) {
const dashProgress = (animationTime - state.player.dashStartTime) / CONFIG.player.dash.duration;
dashOpacity = 1 - (dashProgress * 0.7); // Fade to 0.3 during dash
}
let blinkOpacity = 1;
if (state.player.isDefending) {
const blinkPhase = Math.sin(animationTime * 0.002);
if (blinkPhase > 0.7) {
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
}
};
};
const showSwordUnlockAnimation = () => {
// Create container for animation
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '50%';
container.style.left = '50%';
container.style.transform = 'translate(-50%, -50%)';
container.style.padding = '20px';
container.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
container.style.borderRadius = '10px';
container.style.animation = 'glow 2s ease-in-out';
container.style.zIndex = '1000';
// Add CSS animation
const style = document.createElement('style');
style.textContent = `
@keyframes glow {
0% { box-shadow: 0 0 0 0 ${CONFIG.player.equipment.unlockAnimation.glowColor}; opacity: 0; }
50% { box-shadow: 0 0 30px 10px ${CONFIG.player.equipment.unlockAnimation.glowColor}; opacity: 1; }
100% { box-shadow: 0 0 0 0 ${CONFIG.player.equipment.unlockAnimation.glowColor}; opacity: 0; }
}
`;
document.head.appendChild(style);
// Add message text
const message = document.createElement('div');
message.textContent = CONFIG.player.equipment.unlockAnimation.messageText;
message.style.color = CONFIG.player.equipment.unlockAnimation.messageColor;
message.style.fontSize = '24px';
message.style.textAlign = 'center';
container.appendChild(message);
// Add to document and remove after animation
document.body.appendChild(container);
setTimeout(() => {
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 = `
Game Over
Press Space to restart
`;
document.body.appendChild(gameOverDiv);
};
// Update the player's HP when collecting diamonds
const collectDiamonds = () => {
state.diamonds.forEach(diamond => {
const dx = state.player.x - diamond.x;
const dy = state.player.y - diamond.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < (CONFIG.player.size / 2 + diamond.size / 2) && !diamond.collected) {
diamond.collected = true; // Mark diamond as collected
state.player.hp = Math.min(state.player.hp + 1, state.player.maxHp); // Restore 1 HP, max out at maxHp
}
});
// Remove collected diamonds from the state
state.diamonds = state.diamonds.filter(diamond => !diamond.collected);
};
const renderDiamonds = () => {
state.diamonds.forEach(diamond => {
ctx.save();
// Add pulsing glow effect
const pulseIntensity = 0.5 + Math.sin(animationTime * 0.005) * 0.3; // Pulsing between 0.2 and 0.8
// Outer glow
const gradient = ctx.createRadialGradient(
diamond.x, diamond.y, diamond.size * 0.2,
diamond.x, diamond.y, diamond.size * 1.5
);
gradient.addColorStop(0, `rgba(255, 215, 0, ${pulseIntensity})`); // Gold center
gradient.addColorStop(0.6, 'rgba(255, 215, 0, 0.2)'); // Fading gold
gradient.addColorStop(1, 'rgba(255, 215, 0, 0)'); // Transparent edge
ctx.beginPath();
ctx.arc(diamond.x, diamond.y, diamond.size * 1.5, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
// Inner diamond
ctx.beginPath();
ctx.arc(diamond.x, diamond.y, diamond.size * 0.4, 0, Math.PI * 2); // Make core smaller
ctx.fillStyle = `rgba(255, 223, 0, ${0.8 + pulseIntensity * 0.2})`; // Brighter gold
ctx.fill();
// Shine effect
ctx.beginPath();
ctx.arc(
diamond.x - diamond.size * 0.2,
diamond.y - diamond.size * 0.2,
diamond.size * 0.15,
0, Math.PI * 2
);
ctx.fillStyle = `rgba(255, 255, 255, ${0.6 + pulseIntensity * 0.4})`;
ctx.fill();
ctx.restore();
});
};