Плавное 2D-движение с нуля (javascript, пиксельарт)

const game = document.querySelector('#game');
const context = game.getContext('2d');

const background = new Image();
background.src = 'https://i.imgur.com/82hX6qh.png';

const player = new Image();
player.src = 'https://i.imgur.com/LrL69By.png';

const backgroundHeight = 480;
const backgroundWidth = 840;
const playerHeight = 16;
const playerWidth = 12;

const initialGameWidth = 240;
const initialGameHeight = playerWidth * 10;

const cameraSpeed = 0.1;
const step = 1 / 60;

let x = backgroundWidth / 2; // Player Starting X
let y = backgroundHeight / 2; // Player Starting Y
let speed = 1;
let keymap = [];
let previousMs;
let cameraX = x;
let cameraY = y;

game.width = initialGameWidth;
game.height = initialGameHeight;

const handleScreens = () => {
    const scale = window.innerHeight / initialGameHeight;
    game.style.scale = scale;

    const gameHeight = Math.round(window.innerHeight / scale);
    const gameWidth = Math.round(window.innerWidth / scale);

    game.height = gameHeight % 2 ? gameHeight + 1 : gameHeight;
    game.width = gameWidth % 2 ? gameWidth + 1 : gameWidth;
};

handleScreens();
window.addEventListener('resize', () => handleScreens());

window.addEventListener('keydown', event => {
    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }

    keymap.push(event.key);
});

window.addEventListener('keyup', event => {
    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }
});

const handleCamera = (currentValue, destinationValue) => {
    return currentValue * (1 - cameraSpeed) + destinationValue * cameraSpeed;
};

const handleWork = () => {
    let tempChange = { x: 0, y: 0 };

    [...keymap].forEach(direction => {
        switch (direction) {
            case 'ArrowRight':
                tempChange.x = 1;
                break;
            case 'ArrowLeft':
                tempChange.x = -1;
                break;
            case 'ArrowUp':
                tempChange.y = -1;
                break;
            case 'ArrowDown':
                tempChange.y = 1;
                break;
        }
    });

    let angle = Math.atan2(tempChange.y, tempChange.x);

    if (tempChange.x !== 0) {
        x += Math.cos(angle) * speed;
    }

    if (tempChange.y !== 0) {
        y += Math.sin(angle) * speed;
    }

    cameraX = handleCamera(cameraX, x);
    cameraY = handleCamera(cameraY, y);

    //context.imageSmoothingEnabled = false;
    context.clearRect(0, 0, game.width, game.height);
    context.save();
    context.translate(-cameraX + (game.width / 2) - (playerWidth / 2), -cameraY + (game.height / 2) - (playerHeight / 2));
    context.drawImage(background, 0, 0, backgroundWidth, backgroundHeight);
    context.drawImage(player, 0, 0, playerWidth, playerHeight, x, y, playerWidth, playerHeight);
    context.restore();
};

const main = (timestampMs) => {
    if (previousMs == undefined) {
        previousMs = timestampMs;
    }

    let delta = (timestampMs - previousMs) / 1000;

    while (delta >= step) {
        handleWork();
        delta -= step;
    }

    previousMs = timestampMs - delta * 1000;

    requestAnimationFrame(main);
};

requestAnimationFrame(main);

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#game {
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}

<canvas id = "game"></canvas>