Используйте анимацию CSS для игры в JS (просто для удовольствия)

Когда элемент движется с помощью анимации CSS, мы можем прочитать его реальные координаты в коде JS и использовать его в расчетах. Таким образом, CSS занимается анимацией и расчеты JS – столкновения.

Анимация для блока

@keyframes animation-a { 
    0% { 
       left: 400px;
    }
    50% { 
       left: 200px;
    }
    100% { 
       left: 400px;
    }
}

Блоки массив

const blocks = [  // left, bottom, width, animation-name, duration
    [240, 240, 700, null],
    [0, 180, 200, null],
    [400, 140, 100, 'animation-a', 5],
    [400, 90, 250, null],
    [250, 40, 150, 'animation-b', 3],
    [0, 0, 250, null],
    [400, 0, 670, null],
    [0, -40, 700, null],
];

Подготовьте блоки для сцены

function prepareBlocks() {
    for (let b in blocks) {
        let _block = blocks[b];
        let block = document.createElement('div');
        block.classList.add('block');
        block.style.left = `${_block[0]}px`;
        block.style.bottom = `${_block[1]}px`;
        block.style.width = `${_block[2]}px`;
        block.style.animationName = _block[3] || '';
        block.style.animationDuration = `${_block[4]}s` || '';
        scene.insertBefore(block, player);
        blocks[b] = block;
    }
}

Оригинал: “https://dev.to/tetragius/use-css-animation-for-game-in-js-just-for-fun-4h1c”

Читайте ещё по теме: