html/side-scrolling-rogue-thing/js/camera.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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
    };
};