Basic trigonometry via tiny game - Collision detection

withCollisionDect.ts

type Pair = [number, number];
type Entity = {
    dimensions: Pair;
    pos: Pair;
    img: HTMLImageElement;
    collider: number;
};
type GameState = {
    keyCode: number | null;
    player: Entity;
    enemy: Entity;
};

function game() {
    //SETUP
    let canvas = document.getElementById("canvas") as HTMLCanvasElement;
    let context = canvas.getContext("2d")!;
    canvas.width = 750;
    canvas.height = 500;

    let playerImg = new Image();
    playerImg.src = "/assets/player.png";

    let enemyImg = new Image();
    enemyImg.src = "/assets/enemy.png";

    document.addEventListener("keydown", e => {
        gs.keyCode = e.keyCode;
    });

    document.addEventListener("keyup", () => {
        gs.keyCode = null;
    });

    let gs: GameState = {
        keyCode: null,
        player: {
            pos: [100, 100],
            img: playerImg,
            collider: 20.0,
            dimensions: [50, 50]
        },
        enemy: {
            pos: [400, 300],
            img: enemyImg,
            collider: 75,
            dimensions: [150, 150]
        }
    };

    const runLoop = () => {
        requestAnimationFrame(() => loop(gs, context, runLoop));
    };
    runLoop();
}

function loop(gs: GameState, ctx: CanvasRenderingContext2D, done: Function) {
    //next version click on a spot and it moves to there?

    ctx.clearRect(0, 0, 750, 500);
    gs.player.pos = nextPlayerPosition(gs);

    //TRIG PART

    //knowing 2/3 points (player & enemy) we can find the right angle point
    let ra: Pair = [gs.player.pos[0], gs.enemy.pos[1]];

    //then we can figure out the opposite and adjacent lengths
    let oppositeL = Math.max(gs.player.pos[1], ra[1]) - Math.min(gs.player.pos[1], ra[1]);
    let adjacentL = Math.max(gs.enemy.pos[0], ra[0]) - Math.min(gs.enemy.pos[0], ra[0]);

    //from these we can reverse tan fn to get the alpha angle (angle at the enemys side)
    const alpha = Math.atan(oppositeL / adjacentL);
    //using alpha we can figure out the beta, the angle on the players side
    const beta = Math.PI - Math.PI / 2 - alpha;

    //Have the player face the right angle so we can use the beta radians
    const hozRotation = gs.player.pos[1] < gs.enemy.pos[1] ? Math.PI : 0;
    //then use the beta to face the enemy
    const latRotation = beta * (gs.player.pos[1] < gs.enemy.pos[1] ? -1 : 1);

    const collided = collisionDectection(gs.player, gs.enemy);
    renderRightTriangle(ctx, gs, ra);
    renderEntity(ctx, gs.player, hozRotation + latRotation);
    renderEntity(ctx, gs.enemy, 0);
    renderCollider(ctx, gs.player.pos, gs.player.collider, collided);
    renderCollider(ctx, gs.enemy.pos, gs.enemy.collider, collided);
    done();
}

function renderEntity(ctx: CanvasRenderingContext2D, entity: Entity, rotation: number) {
    const offsets: Pair = [entity.dimensions[0] / 2, entity.dimensions[1] / 2];
    ctx.save();
    ctx.translate(entity.pos[0], entity.pos[1]);
    ctx.rotate(rotation);
    ctx.drawImage(entity.img, -offsets[0], -offsets[1], entity.dimensions[0], entity.dimensions[1]);
    ctx.restore();
}

function renderCollider(
    ctx: CanvasRenderingContext2D,
    coord: Pair,
    radius: number,
    collided: boolean
) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = collided ? "red" : "green";
    ctx.arc(coord[0], coord[1], radius, 0, Math.PI * 2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function renderRightTriangle(ctx: CanvasRenderingContext2D, gs: GameState, ra: Pair) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.moveTo(gs.player.pos[0], gs.player.pos[1]);
    ctx.lineTo(ra[0], ra[1]);
    ctx.stroke();
    ctx.moveTo(gs.enemy.pos[0], gs.enemy.pos[1]);
    ctx.lineTo(ra[0], ra[1]);
    ctx.stroke();
    ctx.moveTo(gs.enemy.pos[0], gs.enemy.pos[1]);
    ctx.lineTo(gs.player.pos[0], gs.player.pos[1]);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function collisionDectection(a: Entity, b: Entity): boolean {
    //find the hypotenuse length between
    //check if hyp length > a.col + b.col
    const deltaX = a.pos[0];
    const deltaY = b.pos[1];
    const oppositeL = Math.max(a.pos[1], deltaY) - Math.min(a.pos[1], deltaY);
    const adjacentL = Math.max(b.pos[0], deltaX) - Math.min(b.pos[0], deltaX);
    //Pythagorus to get the hypotenuse
    const hypotenuseL = Math.sqrt(Math.pow(oppositeL, 2) + Math.pow(adjacentL, 2));
    const collided = hypotenuseL < a.collider + b.collider;
    return collided;
}

function nextPlayerPosition(gs: GameState): Pair {
    const changes = movement.get(gs.keyCode || 0) || [0, 0];
    return [gs.player.pos[0] + changes[0], gs.player.pos[1] + changes[1]];
}

const UP = 38;
const DOWN = 40;
const LEFT = 37;
const RIGHT = 39;
const speed = 2;
const movement = new Map<number, Pair>([
    [UP, [0, -speed]],
    [DOWN, [0, speed]],
    [LEFT, [-speed, 0]],
    [RIGHT, [speed, 0]]
]);

game();