Performance issues in vanilla javascript game (no canvas)

I tried to create a simple javascript game. I know that the recommended way to create a game is using canvas. I have lot of dom manipulations (seems like an issue). Maybe someone can have a look and give can explain me the problems.

javascript:

const KEY_CODE_LEFT = 37;
const KEY_CODE_RIGHT = 39;
const KEY_CODE_SPACE = 32;

const GAME_WIDTH = window.innerWidth;
const GAME_HEIGHT = window.innerHeight;

const SHIP_SPACE_TO_BOTTOM = 150;

const SCORE_MASK = 500;
const SCORE_VIRUS = 100;

const PLAYER_LIFE = 3;
const PLAYER_WIDTH = 20;
const PLAYER_MAX_SPEED = 800;
const LASER_MAX_SPEED = 500;
const LASER_COOLDOWN = 0.85;

const ENEMIES_PER_COLUMNS = 10;
const ENEMIES_PER_ROW = 5;
const ENEMY_HORIZONTAL_PADDING = 0;
const ENEMY_VERTICAL_PADDING = 80;
const ENEMY_VERTICAL_SPACING = 80;
const ENEMY_X_MOVEMENT = 80;
const ENEMY_Y_MOVEMENT = 0.1;
const ENEMY_LASER_MAX_SPEED = 650;
const ENEMY_COOLDOWN = 25.0;
const MASK_COOLDOWN = 12.5;

let playerScore = 0;

let timeBegan = null;
let timeStopped = null;
let started = null;
let stoppedDuration = 0;
let min;
let sec;
let ms;

const GAME_STATE = {
    lastTime: Date.now(),
    leftPressed: false,
    rightPressed: false,
    spacePressed: false,
    playerX: 0,
    playerY: 0,
    merkelX: 0,
    merkelY: 0,
    merkelLife: 3,
    spahnX: 0,
    spahnY: 0,
    spahnLife: 3,
    drostenX: 0,
    drostenY: 0,
    drostenLife: 3,
    lauterbachX: 0,
    lauterbachY: 0,
    lauterbachLife: 3,
    playerLife: PLAYER_LIFE,
    playerCooldown: 0,
    lasers: (),
    enemies: (),
    enemyLasers: (),
    masks: (),
    gameOver: false,
}

function rectsIntersect(r1, r2) {
    return !(
        r2.left > r1.right ||
        r2.right < r1.left ||
        r2.top > r1.bottom ||
        r2.bottom < r1.top
    );
}

function setPosition(el, x, y) {
    el.style.transform = `translate(${ x }px, ${ y }px)`;
}

function clamp(inputValue, min, max) {
    if (inputValue < min) {
        return min;
    } else if (inputValue > max) {
        return max;
    }
    return inputValue;
}

function rand(min, max) {
    if (min === undefined) min = 0;
    if (max === undefined) max = 1;
    return min + Math.random() * (max - min);
}

function createPlayer(container) {
    GAME_STATE.playerX = GAME_WIDTH / 2;
    GAME_STATE.playerY = GAME_HEIGHT - SHIP_SPACE_TO_BOTTOM;
    const player = document.createElement('img');
    player.src = "https://codereview.stackexchange.com/img/spaceship.png";
    player.className = 'player';
    container.appendChild(player);
    setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
}

function createCelebs(container, img, name, celebX, celebY, x) {
    // celebX = GAME_WIDTH / x;
    // celebX = x + 140;
    // celebY = GAME_HEIGHT - SHIP_SPACE_TO_BOTTOM - 100;
    const celeb = document.createElement('img');
    celeb.src = img;
    celeb.className = name;
    container.appendChild(celeb);
}

function updateHeartIcon(cssClass) {
    const heart = document.getElementById(cssClass);
    const heartLost = document.createElement('span');
    heartLost.setAttribute('id', 'heart-lost');
    const heartLostContent = document.createTextNode('');
    heartLost.appendChild(heartLostContent);
    heart.parentNode.replaceChild(heartLost, heart);
}

function destroyPlayer() {
    GAME_STATE.playerLife -= 1;

    if (GAME_STATE.playerLife === 2) {
        updateHeartIcon('heart-3');
    } else if (GAME_STATE.playerLife === 1) {
        updateHeartIcon('heart-2')
    } else if (GAME_STATE.playerLife === 0) {
        updateHeartIcon('heart-1');
    }

    const audio = new Audio('sound/ship-hit.mp3');
    audio.play();

    if (GAME_STATE.playerLife === 0) {
        GAME_STATE.gameOver = true;
        const audio = new Audio('sound/game-over-music.mp3');
        audio.play();

        const time = document.getElementById('stopped-time');

        if (min < 10) {
            min = '0' + min;
        }
        if (sec < 10) {
            sec = '0' + sec;
        }
        if (ms < 1000) {
            ms = '0' + ms;
        }

        time.textContent = min + ':' + sec + ':' + ms;

        stopTimer();
    }
}

function stopTimer() {
    timeStopped = new Date();
    clearInterval(started);
}

function updatePlayer(deltaTime, container) {
    if (GAME_STATE.leftPressed) {
        GAME_STATE.playerX -= deltaTime * PLAYER_MAX_SPEED;
    }
    if (GAME_STATE.rightPressed) {
        GAME_STATE.playerX += deltaTime * PLAYER_MAX_SPEED;
    }

    GAME_STATE.playerX = clamp(
        GAME_STATE.playerX,
        PLAYER_WIDTH,
        GAME_WIDTH - PLAYER_WIDTH
    );

    if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
        createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
        GAME_STATE.playerCooldown = LASER_COOLDOWN;
    }
    if (GAME_STATE.playerCooldown > 0) {
        GAME_STATE.playerCooldown -= deltaTime;
    }

    // todo
    const player = document.querySelector('.player');
    setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
}

function updateCeleb(deltaTime, container, celebX, celebY) {
    // const celeb = document.querySelector('.celeb');
    // setPosition(celeb, celebX, celebY);
}

function createLaser(container, x, y) {
    const element = document.createElement('img');
    element.src = 'img/syringe.png';
    element.className = 'laser';
    container.appendChild(element);
    const laser = { x, y, element };
    GAME_STATE.lasers.push(laser);
    const audio = new Audio('sound/ship-shoot.mp3');
    audio.play(); // todo isplayable
    setPosition(element, x, y);
}

function updateLasers(deltaTime, container) {
    const lasers = GAME_STATE.lasers;

    for (let i = 0; i < lasers.length; i++) {
        const laser = lasers(i);
        laser.y -= deltaTime * LASER_MAX_SPEED;

        if (laser.y < 0) {
            destroyLaser(container, laser);
        }
        setPosition(laser.element, laser.x, laser.y);

        const r1 = laser.element.getBoundingClientRect();

        const enemies = GAME_STATE.enemies;
        for (let j = 0; j < enemies.length; j++) {
            const enemy = enemies(j);
            if (enemy.isDead) continue;
            const r2 = enemy.element.getBoundingClientRect();
            if (rectsIntersect(r1, r2)) {
                destroyEnemy(container, enemy);
                destroyLaser(container, laser);
                return;
            }
        }

        const masks = GAME_STATE.masks;
        for (let j = 0; j < masks.length; j++) {
            const mask = masks(j);
            if (mask.isDead) continue;
            const r2 = mask.element.getBoundingClientRect();
            if (rectsIntersect(r1, r2)) {
                destroyMask(container, mask);
                destroyLaser(container, laser);
                return;
            }
        }

        const merkel = setBoundingClientRect('.merkel');
        const spahn = setBoundingClientRect('.spahn');
        const drosten = setBoundingClientRect('.drosten');
        const lauterbach = setBoundingClientRect('.lauterbach');

        if (rectsIntersect(r1, merkel)
            || rectsIntersect(r1, spahn)
            || rectsIntersect(r1, drosten)
            || rectsIntersect(r1, lauterbach)
        ) {
            destroyLaser(container, laser);
        }
    }
    GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
}

function destroyLaser(container, laser) {
    container.removeChild(laser.element);
    laser.isDead = true;
}

function createEnemy(container, x, y, img) {
    const element = document.createElement('img');
    element.src = img;
    element.className = 'enemy';
    container.appendChild(element);
    const enemy = {
        x,
        y,
        cooldown: rand(0.5, ENEMY_COOLDOWN),
        element
    };
    GAME_STATE.enemies.push(enemy);
}

function createMask(container, x, y, img) {
    const element = document.createElement('img');
    element.src = img;
    element.className = 'mask';
    container.appendChild(element);
    const mask = {
        x,
        y,
        cooldown: rand(0.5, ENEMY_COOLDOWN),
        element
    };
    GAME_STATE.masks.push(mask);
}

function updateEnemies(deltaTime, container, enemies, yMovement) {
    // const dx = Math.cos(GAME_STATE.lastTime / 5000.0) * ENEMY_X_MOVEMENT;
    // const dx = Math.cos(GAME_STATE.lastTime / 5000.0) * ENEMY_X_MOVEMENT;
    const dx = Math.cos(GAME_STATE.lastTime / 5000.0) * ENEMY_X_MOVEMENT;

    for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies(i);
        let x = (enemy.x + 80) + dx;
        const y = enemy.y += yMovement;

        if (y > (GAME_HEIGHT - 280)) {
            stopTimer();
            GAME_STATE.gameOver = true;
        }

        setPosition(enemy.element, x, y);

        enemy.cooldown -= deltaTime;

        if (enemy.cooldown <= 0) {
            createEnemyLaser(container, x, y);
            if (enemies === GAME_STATE.enemies) {
                enemy.cooldown = ENEMY_COOLDOWN;
            } else if (enemies === GAME_STATE.masks) {
                enemy.cooldown = MASK_COOLDOWN;
            }
        }
    }

    if (enemies === GAME_STATE.enemies) {
        GAME_STATE.enemies = enemies.filter(e => !e.isDead);
    } else if (enemies === GAME_STATE.masks) {
        GAME_STATE.masks = enemies.filter(e => !e.isDead);
    }
}

function destroyEnemy(container, enemy) {
    container.removeChild(enemy.element);
    enemy.isDead = true;
    updateScore(enemy, 0);
}

function destroyMask(container, enemy) {
    container.removeChild(enemy.element);
    enemy.isDead = true;
    updateScore(enemy, 1);
}

function updateScore(enemy, enemyLvl) {
    if (enemy.isDead) {
        if (enemyLvl === 0) {
            playerScore += SCORE_VIRUS;
        } else if (enemyLvl === 1) {
            playerScore += SCORE_MASK;
        }
        const highScore = document.getElementById('highscore');
        highScore.textContent = playerScore.toString();
    }
}

function createEnemyLaser(container, x, y) {
    const element = document.createElement('img');
    element.src = 'img/virus-shot.png';
    element.className = 'enemy-laser';
    container.appendChild(element);
    const laser = { x, y, element: element };
    GAME_STATE.enemyLasers.push(laser);
    setPosition(element, x, y);
}

function updateEnemyLasers(deltaTime, container) {
    const lasers = GAME_STATE.enemyLasers;
    for (let i = 0; i < lasers.length; i++) {
        const laser = lasers(i);
        laser.y += deltaTime * ENEMY_LASER_MAX_SPEED;

        if (laser.y > GAME_HEIGHT) {
            destroyLaser(container, laser);
        }

        setPosition(laser.element, laser.x, laser.y);
        const r1 = laser.element.getBoundingClientRect();

        const player = setBoundingClientRect('.player');
        const merkel = setBoundingClientRect('.merkel');
        const spahn = setBoundingClientRect('.spahn');
        const drosten = setBoundingClientRect('.drosten');
        const lauterbach = setBoundingClientRect('.lauterbach');

        if (rectsIntersect(r1, merkel)
            || rectsIntersect(r1, spahn)
            || rectsIntersect(r1, drosten)
            || rectsIntersect(r1, lauterbach)
        ) {
            destroyLaser(container, laser);
        }

        if (rectsIntersect(r1, player)) {
            destroyLaser(container, laser);
            destroyPlayer(container, player);
            return;
        }
    }
    GAME_STATE.enemyLasers = GAME_STATE.enemyLasers.filter(e => !e.isDead);
}

function setBoundingClientRect(cssClass) {
    return document.querySelector(cssClass).getBoundingClientRect();
}

function playerHasWon() {
    return (GAME_STATE.enemies.length === 0) && (GAME_STATE.masks.length === 0);
}

function startTimer() {
    const currentTime = new Date();
    const timeElapsed = new Date(currentTime - timeBegan - stoppedDuration)
    min = timeElapsed.getUTCMinutes()
    sec = timeElapsed.getUTCSeconds()
    ms = timeElapsed.getUTCMilliseconds();

    document.getElementById('timer').innerHTML =
        (min > 9 ? min : '0' + min) + ':' +
        (sec > 9 ? sec : '0' + sec) + '.' +
        (ms > 99 ? ms : ms > 9 ? '0' + ms : '00' + ms);

    if (timeBegan === null) {
        timeBegan = new Date();
    } else {
        clearInterval(started);
    }

    started = setInterval(startTimer, 10);
}

function init() {
    const container = document.querySelector('.game');
    createPlayer(container);

    createCelebs(
        container,
        'img/merkel.png',
        'merkel',
        GAME_STATE.merkelX,
        GAME_STATE.merkelY,
        (GAME_WIDTH / 2) / 3
    );
    createCelebs(
        container,
        'img/spahn.png',
        'spahn',
        GAME_STATE.spahnX,
        GAME_STATE.spahnY,
        (GAME_WIDTH / 2) / 1.5
    );
    createCelebs(
        container,
        'img/drosten.png',
        'drosten',
        GAME_STATE.drostenX,
        GAME_STATE.drostenY,
        (GAME_WIDTH / 2)
    );
    createCelebs(
        container,
        'img/lauterbach.png',
        'lauterbach',
        GAME_STATE.lauterbachX,
        GAME_STATE.lauterbachY,
        (GAME_WIDTH) / 1.5
    );

    const enemySpacing = ((GAME_WIDTH) / ENEMIES_PER_COLUMNS);
    for (let j = 0; j < ENEMIES_PER_ROW; j++) {
        const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
        for (let i = 0; i < ENEMIES_PER_COLUMNS; i++) {
            const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;

            const virusC1 = (i === 0 && j === 0);
            const virusC2 = (i === 1 && j === 0);
            const virusC3 = (i === 2 && j === 0);
            const virusC4 = (i === 7 && j === 0);
            const virusC5 = (i === 8 && j === 0);
            const virusC6 = (i === 9 && j === 0);
            const virusC7 = (i === 0 && j === 1);
            const virusC8 = (i === 1 && j === 1);
            const virusC9 = (i === 2 && j === 1);
            const virusC10 = (i === 7 && j === 1);
            const virusC11 = (i === 8 && j === 1);
            const virusC12 = (i === 9 && j === 1);

            const virusB1 = (i === 0 && j === 2);
            const virusB2 = (i === 1 && j === 2);
            const virusB3 = (i === 2 && j === 2);
            const virusB4 = (i === 7 && j === 2);
            const virusB5 = (i === 8 && j === 2);
            const virusB6 = (i === 9 && j === 2);
            const virusB7 = (i === 0 && j === 3);
            const virusB8 = (i === 1 && j === 3);
            const virusB9 = (i === 2 && j === 3);
            const virusB10 = (i === 3 && j === 3);
            const virusB11 = (i === 4 && j === 3);
            const virusB12 = (i === 5 && j === 3);
            const virusB13 = (i === 6 && j === 3);
            const virusB14 = (i === 7 && j === 3);
            const virusB15 = (i === 8 && j === 3);
            const virusB16 = (i === 9 && j === 3);

            const virusA1 = (i === 0 && j === 4);
            const virusA2 = (i === 1 && j === 4);
            const virusA3 = (i === 2 && j === 4);
            const virusA4 = (i === 3 && j === 4);
            const virusA5 = (i === 4 && j === 4);
            const virusA6 = (i === 5 && j === 4);
            const virusA7 = (i === 6 && j === 4);
            const virusA8 = (i === 7 && j === 4);
            const virusA9 = (i === 8 && j === 4);
            const virusA10 = (i === 9 && j === 4);

            // Mask area
            const row1a = (i === 3 && j === 0);
            const row1b = (i === 4 && j === 0);
            const row1c = (i === 5 && j === 0);
            const row1d = (i === 6 && j === 0);

            const row2a = (i === 3 && j === 1);
            const row2b = (i === 4 && j === 1);
            const row2c = (i === 5 && j === 1);
            const row2d = (i === 6 && j === 1);

            const row3a = (i === 3 && j === 2);
            const row3b = (i === 4 && j === 2);
            const row3c = (i === 5 && j === 2);
            const row3d = (i === 6 && j === 2);

            if (virusC1 || virusC2 || virusC3 || virusC4 || virusC5 || virusC6 || virusC6 || virusC7 || virusC8 || virusC9 || virusC10 || virusC11 || virusC12) {
                createEnemy(container, x, y, 'img/virus-c1.png');
            } else if (virusB1 || virusB2 || virusB3 || virusB4 || virusB5 || virusB6 || virusB7 || virusB8 || virusB9 || virusB10 || virusB11 || virusB12 || virusB13 || virusB14 || virusB15 || virusB16) {
                createEnemy(container, x, y, 'img/virus-b1.png');
            } else if (virusA1 || virusA2 || virusA3 || virusA4 || virusA5 || virusA5 || virusA6 || virusA7 || virusA8 || virusA9 || virusA10) {
                createEnemy(container, x, y, 'img/virus-a1.png');
            } else if (row1a) {
                createMask(container, x, y, 'img/mask-part-1.png');
            } else if (row1b) {
                createMask(container, x, y, 'img/mask-part-2.png');
            } else if (row1c) {
                createMask(container, x, y, 'img/mask-part-3.png');
            } else if (row1d) {
                createMask(container, x, y, 'img/mask-part-4.png');
            } else if (row2a) {
                createMask(container, x, y, 'img/mask-part-5.png');
            } else if (row2b) {
                createMask(container, x, y, 'img/mask-part-6.png');
            } else if (row2c) {
                createMask(container, x, y, 'img/mask-part-7.png');
            } else if (row2d) {
                createMask(container, x, y, 'img/mask-part-8.png');
            } else if (row3a) {
                createMask(container, x, y, 'img/mask-part-9.png');
            } else if (row3b) {
                createMask(container, x, y, 'img/mask-part-10.png');
            } else if (row3c) {
                createMask(container, x, y, 'img/mask-part-11.png');
            } else if (row3d) {
                createMask(container, x, y, 'img/mask-part-12.png');
            }
        }
    }
    startTimer();
}

function update() {
    const currentTime = Date.now();
    const deltaTime = (currentTime - GAME_STATE.lastTime) / 1000.0;

    if (GAME_STATE.gameOver) {
        document.querySelector('.game-over').style.display = 'block';
        return;
    }

    if (playerHasWon()) {
        document.querySelector('.congratulations').style.display = 'block';
        return;
    }

    const container = document.querySelector('.game');
    updatePlayer(deltaTime, container);
    updateLasers(deltaTime, container);

    // updateCeleb(deltaTime, container, GAME_STATE.merkelX, GAME_STATE.merkelY);
    // updateCeleb(deltaTime, container, GAME_STATE.spahnX, GAME_STATE.spahnY);
    // updateCeleb(deltaTime, container, GAME_STATE.drostenX, GAME_STATE.drostenY);
    // updateCeleb(deltaTime, container, GAME_STATE.lauterbachX, GAME_STATE.lauterbachY);

    updateEnemies(deltaTime, container, GAME_STATE.enemies, ENEMY_Y_MOVEMENT);
    updateEnemies(deltaTime, container, GAME_STATE.masks, ENEMY_Y_MOVEMENT);
    updateEnemyLasers(deltaTime, container);

    GAME_STATE.lastTime = currentTime;
    window.requestAnimationFrame(update);
}

function onKeyDown(e) {
    if (e.keyCode === KEY_CODE_LEFT) {
        GAME_STATE.leftPressed = true;
    } else if (e.keyCode === KEY_CODE_RIGHT) {
        GAME_STATE.rightPressed = true;
    } else if (e.keyCode === KEY_CODE_SPACE) {
        GAME_STATE.spacePressed = true;
    }
}

function onKeyUp(e) {
    if (e.keyCode === KEY_CODE_LEFT) {
        GAME_STATE.leftPressed = false;
    } else if (e.keyCode === KEY_CODE_RIGHT) {
        GAME_STATE.rightPressed = false;
    } else if (e.keyCode === KEY_CODE_SPACE) {
        GAME_STATE.spacePressed = false;
    }
}

init();

window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
window.requestAnimationFrame(update);