I’m making an attempt to animate a sprite sheet. I’ve a single picture, and a number of objects of the identical kind however drawn at totally different places on the canvas. What i am making an attempt to do is having every object with an animate pace of its personal, and an general recreation framerate utilizing requestAnimationFrame, but it surely clears the entire canvas, as an alternative of redrawing.
I’ve beforehand tried the setInterval strategy, but it surely causes flickering (I am unable to actually inform why, even I’ve googled it on-line.

const objectsArray = []
const gameFrameRate = 1000/30;
let allowedSoldiersQuantity = 30;
let internationalImageObjects = [];

let newObject = new genericObject('robotic.png', 200, 200);
objectsArray.push(newObject)
let otherObject = new genericObject('2.png', 300, 300);
objectsArray.push(otherObject)

canvas = doc.getElementById('game_canvas');
context = canvas.getContext('2nd');
canvas.width = 1200;
canvas.peak = 720;
canvas.type.borderColor="crimson"
canvas.type.borderWidth="5px"

setup = operate() {

    // setInterval Approach
    //setInterval(operate (){
    //    context.clearRect(0, 0, canvas.width, canvas.peak)
    //    objectsArray.map((component) => {
    //        component.animateObjectImage(component.objectImage, 4)
    //    })
    //},30)

    // RequestAnimationFrame strategy
    objectsArray.map((component) => {
        component.animateObjectImage(component.objectImage, 9)
    })
    context.clearRect(0, 0, canvas.width, canvas.peak)
    window.requestAnimationFrame(setup)
}
window.requestAnimationFrame(setup)


doc.addEventListener('click on', (occasion) => {
    console.log(occasion.x);
    console.log(occasion.y);
    if (allowedSoldiersQuantity){
        let object = new genericObject('robotic.png', occasion.x, occasion.y)
        objectsArray.push(object)
        object.animateObjectImage(object.objectImage, 5)
        allowedSoldiersQuantity -= 1;
    }
}, false)

operate genericObject(objectSpriteSheet, xPosition, yPosition){
    this.objectImage = (operate (){
        let newImageObject = new Image()
        newImageObject.src = objectSpriteSheet
        return (newImageObject)
    })()
    this.animateObjectImage = operate(objectImage, frameRate){
        let setIntervalTime = 1000 / frameRate;
        let currentFrame = 1;
        let totalSprites = 8;
        let spriteHeight = objectImage.peak;
        let spriteWidth = objectImage.width / totalSprites;
        setInterval(operate animateObjectSprites(){
            currentFrame = (currentFrame + 1) % totalSprites;
            let screenX = currentFrame * spriteWidth;
            context.drawImage(objectImage, screenX, 0, spriteWidth, spriteHeight, xPosition, yPosition, spriteWidth, spriteHeight);
            currentFrame++;
        }, setIntervalTime)
    }
}
//setup(); // This operate ought to be run with the setInterval strategy
```