onthedots/code/index.html

<canvas id="canvas" style="border:1px solid #000"></canvas>
<button onclick="swap(tab1,canvas,ctx,'H')">Swap H</button>
<button onclick="swap(tab1,canvas,ctx,'V')">Swap V</button>

<canvas id="canvas2" style="border:1px solid #000"></canvas>
<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>

<canvas id="canvasTotal" style="border:1px solid #000"></canvas>

<canvas id="canvasObj" style="border:1px solid green"></canvas>
<button onclick="generateEasy()">gen easy</button>

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');

    var canvasT = document.getElementById('canvasTotal');
    var ctxT = canvasT.getContext('2d');

    var canvasO = document.getElementById('canvasObj');
    var ctxO = canvasO.getContext('2d');

tab1=[];
tab2=[];
tabTotal=[];


width=300; // 6 lignes de 50px
height=300; // 6 colonnes de 50px
canvas.width=width;
canvas2.width=width;
canvasT.width=width;
canvasO.width=width;

canvas.height=height;
canvas2.height=height;
canvasT.height=height;
canvasO.height=height;

function faireCercle(x,y,color,lectx){
    var cercle = new Path2D();

    nx=50*(x>0 ? x+2 : x+3);
    ny=50*(y>0 ? y+2 : y+3);

    cercle.moveTo(nx, ny);
    cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);

    lectx.fillStyle = color;
    lectx.fill(cercle);
}

function tourneG(letab,lecanvas,lectx)
{
    letab.forEach(element => {
        tmp=element[0];
        element[0]=element[1];
        element[1]=-tmp;
    });
    toutDessiner(letab,lecanvas,lectx);
    empiler();
}

function tourneD(letab,lecanvas,lectx)
{
    letab.forEach(element => {
        tmp=element[1];
        element[1]=element[0];
        element[0]=-tmp;
    });
    toutDessiner(letab,lecanvas,lectx);
    empiler();
}

function toutDessiner(pts,lecanvas,lectx)
{
    lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
    pts.forEach(element=> {
        faireCercle(element[0],element[1],element[2],lectx);
    })
}

function empiler()
{
    tabTotal=[];
    tab1.forEach(element => {
        tabTotal.push(element);
    })
    tab2.forEach(element => {
        tabTotal.push(element);
    })

    toutDessiner(tabTotal,canvasT,ctxT);
}

function swap(letab, lecanvas, lectx,ladir){
    if(ladir=="H"){
        letab.forEach(element=> {
            element[1]=-element[1];
        })
    }
    else {
        letab.forEach(element=> {
            element[0]=-element[0];
        })
    }

    toutDessiner(letab,lecanvas,lectx);
    empiler();
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max))+1;
}

function generateEasy(){
    tabObj=[[],[]];
    /*
    tab1.forEach(elements => {
        tabObj[0].push(elements);
    })
    tab2.forEach(elements => {
        tabObj[1].push(elements);
    })*/
    tabObj[0]=Array.from(tab1);
    tabObj[1]=Array.from(tab2);
    console.log(tabObj);
    actions=getRandomInt(5);
    
    while(actions>0){
        tourneD(tabObj[getRandomInt(2)-1],canvasO,ctxO);
        console.log(tabObj);
        actions--;
    }
    console.log("sec",tabObj);
    toutDessiner(tabObj,canvasO,ctxO);
    
    //tourneD(tabObj[getRandomInt(2)-1],canvasO,ctxO);
}

function getMousePosition(lecanvas, event, lectx, letab) { 
            let rect = lecanvas.getBoundingClientRect(); 
            let x = event.clientX - rect.left; 
            let y = event.clientY - rect.top; 
            if(x<canvas.width/2)
                tourneG(letab,lecanvas,lectx);
            else
                tourneD(letab,lecanvas,lectx);
        } 

canvas.addEventListener("click",function(e) 
        { 
            getMousePosition(canvas, e,ctx, tab1); 
        }); 

        canvas2.addEventListener("click",function(e) 
        { 
            getMousePosition(canvas2, e, ctx2, tab2); 
        }); 

        canvasO.addEventListener("click",function(e){console.log("aaaa");})

tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
toutDessiner(tab1,canvas,ctx);
toutDessiner(tab2,canvas2,ctx2);


</script>