如何在javascript中使用数组克隆图像？

如何解决如何在javascript中使用数组克隆图像？

window.onload = function(){
const FPS = 60;
let ImgSize = 60;
let ImgX,ImgY;
let Counter = 0;
let ImgVeloX,ImgVeloY;
let canvas,context;
let newarrayXv=[];
let newarrayXspeed = [];

let newarrayYv=[];
let newarrayYspeed = [];
let X2b,Y2b;
let tryone = false;

canvas = document.getElementById("gameCanvas");
Imge = document.getElementById("Imge");
context = canvas.getContext("2d");

setInterval(update,1000/FPS);

ImgX = canvas.width/2;
ImgY = canvas.height/2;      

ImgVeloX = Math.floor(Math.random()*69+29)/FPS;
ImgVeloY = Math.floor(Math.random()*69+19)/FPS;

 
    // Making output not choose the same number twice.

if( Math.floor(Math.random()*2)==0){
    ImgVeloX = -ImgVeloX;
}
if( Math.floor(Math.random()*2)==0){
    ImgVeloY = -ImgVeloY;
}

function update(){

    ImgX += ImgVeloX;
    ImgY += ImgVeloY; 
    //New number to be assigned to the array for speed every cycle(Counter).           
    
    if(tryone === true){
               // Add tasks to do                 
            X2b = Math.floor(Math.random()*69+19)/FPS;
            Y2b = Math.floor(Math.random()*69+19)/FPS;

            newarrayXspeed[Counter] = X2b;
            newarrayYspeed[Counter] = Y2b;
            newarrayXspeed.push(newarrayXspeed[Counter]);
            
            newarrayYspeed.push(newarrayYspeed[Counter]);

            if( Math.floor(Math.random()*2)==0){
                newarrayXspeed[Counter] = -newarrayXspeed[Counter];
            }
            if( Math.floor(Math.random()*2)==0){
                newarrayYspeed[Counter] = -newarrayYspeed[Counter];
            }
            tryone = false;        
            
    
     
    } 
    

    //Bounce Method.

    if(ImgX - ImgSize / 2 < 0 && ImgVeloX < 0){
        ImgVeloX = -ImgVeloX;
       
        Counter++;
        newarrayXv[Counter] = ImgX;
        newarrayYv[Counter] = ImgY;
        tryone = true;    
        
    }
    if(ImgX + ImgSize / 2 > canvas.width && ImgVeloX > 0){
        ImgVeloX = -ImgVeloX; 
        Counter++; 
        newarrayXv[Counter] = ImgX;
        newarrayYv[Counter] = ImgY;
        tryone = true;
        
    }
     if(ImgY + ImgSize / 2 > canvas.height && ImgVeloY > 0){
        ImgVeloY = -ImgVeloY;  
        Counter++;
        newarrayYv[Counter] = ImgY;
        newarrayXv[Counter] = ImgX;
        tryone = true;
    }
    if(ImgY - ImgSize / 2 < 0 && ImgVeloY < 0){
        ImgVeloY = -ImgVeloY; 
           
        Counter++;
        newarrayYv[Counter] = ImgY;
        newarrayXv[Counter] = ImgX;
        tryone = true;
    }

    //array Bounce method.

    newarrayXv.forEach((item,index,arr)=> {
    newarrayXv[index] += newarrayXspeed[index];     
      
    if(item - ImgSize / 2 < 0 && newarrayXspeed[index] < 0){
        newarrayXspeed[index] =-newarrayXspeed[index];
    }
    if(item + ImgSize / 2 > canvas.width && newarrayXspeed[index] > 0){
        newarrayXspeed[index] =-newarrayXspeed[index];
    }
    
    });


    newarrayYv.forEach((item,arr)=> {
    newarrayYv[index] += newarrayYspeed[index];

        if(item - ImgSize / 2 < 0 && newarrayYspeed[index] < 0){
            newarrayYspeed[index] =-newarrayYspeed[index];
        }
        if(item + ImgSize / 2 > canvas.width && newarrayYspeed[index] > 0){
            newarrayYspeed[index] =-newarrayYspeed[index];
        }

 
    });

/*我想将图像推送/添加到 newarrayXblip 数组中。并且对于每个 newarrayXblip 应该有一个不同的 newarrayXv 和 newarrayYv。 请帮我克隆，以便 newarrayXblip 数组的 foreach 应包含一个 newarrayXv 和一个 newarrayYv，并且每个计数器都应具有与前一个不同的 newarrayXv 和 newarrayYv */

    const newarrayXblip = []; 
    newarrayXblip.push(new Image());        
    newarrayXblip.forEach((item,arr)=> {
    
    
    
        newarrayXblip[index].src = "dice/Dice.png";
        newarrayXblip[index].onload = function() {
            context.fillStyle = "blue";
            context.fillRect(0,canvas.width,canvas.height);
            console.log(newarrayXv[Counter]);
            context.drawImage(newarrayXblip[index],newarrayXv[item]-ImgSize/2,newarrayXv[item]-ImgSize/2);
        } 
    });   

}
 

}