const createCamera = (x, y) => ({ x, y, width: window.innerWidth, height: window.innerHeight, // Define the dead zone (the area where camera won't move) deadZone: { x: window.innerWidth * 0.3, // 30% of screen width y: window.innerHeight * 0.3, // 30% of screen height } }); const updateCamera = (camera, target) => { // Calculate the center point of the screen const screenCenterX = camera.x + camera.width / 2; const screenCenterY = camera.y + camera.height / 2; // Calculate the distance from the target to the screen center const distanceX = target.x - screenCenterX; const distanceY = target.y - screenCenterY; // Calculate the dead zone boundaries const deadZoneLeft = -camera.deadZone.x / 2; const deadZoneRight = camera.deadZone.x / 2; const deadZoneTop = -camera.deadZone.y / 2; const deadZoneBottom = camera.deadZone.y / 2; // Calculate new camera position with smooth following let newX = camera.x; let newY = camera.y; // Horizontal camera movement if (distanceX < deadZoneLeft) { newX += distanceX - deadZoneLeft; } else if (distanceX > deadZoneRight) { newX += distanceX - deadZoneRight; } // Vertical camera movement if (distanceY < deadZoneTop) { newY += distanceY - deadZoneTop; } else if (distanceY > deadZoneBottom) { newY += distanceY - deadZoneBottom; } // Add subtle smoothing to camera movement const smoothing = 0.1; newX = camera.x + (newX - camera.x) * smoothing; newY = camera.y + (newY - camera.y) * smoothing; return { ...camera, x: newX, y: newY }; };