Как заставить двигаться спрайт

Как вырезать конкретную картинку из спарйта и заставить двигаться динозаврика? В данный момент dino.png это обычный png файл(не спрайт), имеется спрайт со всеми анимациями, но как вырезать конкретный участок из него для начала игры(когда он просто стоит) и для анимации ходьбы? Как работать со спрайтами в js, или я не так начал изначально разработку полагаясь на анимации из css?

script.js

const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");

document.addEventListener("keydown", function(event) {
    jump();
});

function jump() {
    if (dino.classList != "jump") {
        dino.classList.add("jump");
    }
    setTimeout(function () {
        dino.classList.remove("jump");
    }, 500)
}

let isAlive = setInterval(function () {
  let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
  let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));

    if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
        alert("Game Over");
        }
}, 10)

css

#dino {
    width: 50px;
    height: 50px;
    background-image: url("image/dino.png");
    background-size: 50px 50px;
    position: relative;
    top: 150px;
}
#cactus {
    width: 45px;
    height: 45px;
    background-image: url("image/cactus.png");
    background-size: 40px 50px;
    position: relative;
    top: 105px;
    left: 575px;
    animation: cactusMove 1.5s infinite linear;
}

@keyframes cactusMove {
    0% {
        left: 575px;
    }
    100% {
        left: -25px;
    }
}

.jump {
    animation: jumpDino 0.5s linear;
}

@keyframes jumpDino {
    0% {
        top: 150px;
    }
    5%{
        top: 143px;
    }
    10%{
        top: 136px;