每次图像从画布反弹时，我如何克隆图像并为其指定不同的方向 最多 80 张图像

如何解决每次图像从画布反弹时，我如何克隆图像并为其指定不同的方向 最多 80 张图像

我想做一个背景。这个背景需要有一个骰子的图像，从中心开始并随机选择一个方向 X 和 Y。当图像从画布反弹时，它应该克隆自己并给自己一个新的方向，但从与当父骰子从画布上弹开时父骰子。

我是 JavaScript 新手。 我试过了：

window.onload = function(){
    const FPS = 50;
    let ImgSize = 60;
    let ImgX,ImgY;
    let ImgVeloX,ImgVeloY;
    let canvas,context;
    let twoX,twoY;
    let twosX,twosY;
    let randomnum,randotwo;

    
    canvas = document.getElementById("gameCanvas");

    context = canvas.getContext("2d");
    
    setInterval(update,1000/FPS);
    
    ImgX = canvas.width/2;
    ImgY = canvas.height/2;
    twoX = canvas.width/2;
    twoY = canvas.height/2;
     

    ImgVeloX = Math.floor(Math.random()*69+19)/FPS;
    ImgVeloY = Math.floor(Math.random()*69+19)/FPS;
    randomnum =  Math.floor(Math.random()*15+5)/FPS;
    randotwo = randomnum;
    
    
    if( Math.floor(Math.random()*2)==0){
        ImgVeloX = -ImgVeloX;
    }
    if( Math.floor(Math.random()*2)==0){
        ImgVeloY = -ImgVeloY;
    }
    context.fillStyle = "blue";
    context.fillRect(0,canvas.width,canvas.height);


    function updaterando(){
        randotwo = randomnum +5;
    }

    twosX = ((ImgVeloX-randomnum)-randotwo);
    twosY = ((ImgVeloX-randomnum)-randotwo);
    function update(){
              

        ImgX += ImgVeloX-randomnum;
        ImgY += ImgVeloY-randomnum; 
        twoY += twosY; 
        twoX += twosX;
         

        if(ImgX - ImgSize / 2 < 0 && ImgVeloX < 0){
            ImgVeloX = -ImgVeloX; 
            
        }
        
        if(ImgX + ImgSize / 2 > canvas.width && 50+ImgVeloX > 0){
            ImgVeloX = -ImgVeloX; 
        }
         if(ImgY + ImgSize / 2 > canvas.height && ImgVeloY > 0){
            ImgVeloY = -ImgVeloY;  

        }
        if(ImgY - ImgSize / 2 < 0 && ImgVeloY < 0){
            ImgVeloY = -ImgVeloY;  
        }

        if(twoX - ImgSize / 2 < 0 && twosX < 0){
            twosX = -twosX; 
            updaterando();
        }
        if(twoX + ImgSize / 2 > canvas.width && 50+twosX > 0){
            twosX = -twosX; 
        }
         if(twoY + ImgSize / 2 > canvas.height && twosY > 0){
            twosY = -twosY;  

        }
        if(twoY - ImgSize / 2 < 0 && twosY < 0){
            twosY = -twosY;  
        }

        console.log(twoY+"Y");
        console.log(twosY);

        /*const img = new Image();
        img.src = "dice/Dice.png";
        img.onload = function() {
            context.drawImage(img,ImgX-ImgSize/2,ImgY-ImgSize/2);
    
        } */
        const imgt = new Image();
        imgt.src = "dice/Dice.png";
        imgt.onload = function() {

            context.drawImage(imgt,twoX-ImgSize/2,twoY-ImgSize/2);
        }     
    }
}