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=[];
mousePos=[];

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,sselem=null)
{
    if(sselem==null){
        letab.forEach(element => {
        tmp=element[1];
        element[1]=element[0];
        element[0]=-tmp;
    });
    }
    else {
        letab[sselem].forEach(element => {
        tmp=element[1];
        element[1]=element[0];
        element[0]=-tmp;
    });
    }
    toutDessiner(letab,lecanvas,lectx);
    if(sselem==null)
        empiler();
}

function toutDessiner(pts,lecanvas,lectx)
{
    lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
    pts.forEach(element=> {
        if(Array.isArray(element[0])){
            element.forEach(element2 => {
                faireCercle(element2[0],element2[1],element2[2],lectx);
            })
        }
        else
            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=[[],[]];
    tabObj[0]=Array.from(tab1);
    tabObj[1]=Array.from(tab2);
    console.log(tabObj);
    actions=getRandomInt(5);
    
    while(actions>0){
        tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
        console.log(tabObj);
        actions--;
    }
    console.log("sec",tabObj);
    toutDessiner(tabObj,canvasO,ctxO);
    
}

function getMousePosition(lecanvas, event, lectx, letab) { 
            let rect = lecanvas.getBoundingClientRect(); 
            let x = event.clientX - rect.left; 
            let y = event.clientY - rect.top; 
            let dir = compas(x,y,lecanvas);

            if(x<canvas.width/2)
                tourneG(letab,lecanvas,lectx);
            else
                tourneD(letab,lecanvas,lectx);
        } 

/// renvoie le point cardianl où se trouve le point

function compas(x,y,lecanvas)
{
    ne = x>y;
    se = x>lecanvas.height-y;

    if(ne && se ) return "E";
    if(ne && !se ) return "N";
    if(!ne && se ) return "S";
    if(!ne && !se ) return "O";
}

/*canvas.addEventListener("click",function(e) 
        { 
            //getMousePosition(canvas, e,ctx, tab1); 
            compas(e.clientX,e.clientY,canvas);
        }); */

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

        canvas.addEventListener("mousedown",function(e){
            //console.log(e);
            mousePos = [1,compas(e.clientX,e.clientY,e.currentTarget)];
            //mousePos=["obj",e.clientX-canvas.getBoundingClientRect().left<canvas.width/2,e.clientY-canvas.getBoundingClientRect().top<canvas.height/2];
            console.log(mousePos);
            })
        canvas.addEventListener("mouseup",function(e){
            dir = compas(e.clientX,e.clientY,e.currentTarget);
            if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
            {
                tourneG(tab1,canvas,ctx);
            }
            else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
            {
                tourneD(tab1,canvas,ctx);
            }
            else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
            {
                swap(tab1,canvas,ctx,"V");
            }
            else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
            {
                swap(tab1,canvas,ctx,"H");
            }
            })

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);

faireCercle(1,1,"violet",ctxO);


</script>