|
|
@ -1,7 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<canvas id="canvas" style="border:1px solid #000"></canvas>
|
|
|
|
<canvas id="canvas" style="border:1px solid #000"></canvas>
|
|
|
|
<button onclick="tourneG(tab,canvas,ctx)">Tourner G</button>
|
|
|
|
<button onclick="swap(tab1,canvas,ctx,'H')">Swap H</button>
|
|
|
|
<button onclick="tourneD(tab,canvas,ctx)">Tourner D</button>
|
|
|
|
<button onclick="swap(tab1,canvas,ctx,'V')">Swap V</button>
|
|
|
|
|
|
|
|
|
|
|
|
<canvas id="canvas2" style="border:1px solid #000"></canvas>
|
|
|
|
<canvas id="canvas2" style="border:1px solid #000"></canvas>
|
|
|
|
<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
|
|
|
|
<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
|
|
|
@ -9,6 +9,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
@ -19,19 +22,25 @@
|
|
|
|
var canvasT = document.getElementById('canvasTotal');
|
|
|
|
var canvasT = document.getElementById('canvasTotal');
|
|
|
|
var ctxT = canvasT.getContext('2d');
|
|
|
|
var ctxT = canvasT.getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
tab=[];
|
|
|
|
var canvasO = document.getElementById('canvasObj');
|
|
|
|
|
|
|
|
var ctxO = canvasO.getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tab1=[];
|
|
|
|
tab2=[];
|
|
|
|
tab2=[];
|
|
|
|
tabTotal=[];
|
|
|
|
tabTotal=[];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width=300; // 6 lignes de 50px
|
|
|
|
width=300; // 6 lignes de 50px
|
|
|
|
height=300; // 6 colonnes de 50px
|
|
|
|
height=300; // 6 colonnes de 50px
|
|
|
|
canvas.width=width;
|
|
|
|
canvas.width=width;
|
|
|
|
canvas2.width=width;
|
|
|
|
canvas2.width=width;
|
|
|
|
canvasT.width=width;
|
|
|
|
canvasT.width=width;
|
|
|
|
|
|
|
|
canvasO.width=width;
|
|
|
|
|
|
|
|
|
|
|
|
canvas.height=height;
|
|
|
|
canvas.height=height;
|
|
|
|
canvas2.height=height;
|
|
|
|
canvas2.height=height;
|
|
|
|
canvasT.height=height;
|
|
|
|
canvasT.height=height;
|
|
|
|
|
|
|
|
canvasO.height=height;
|
|
|
|
|
|
|
|
|
|
|
|
function faireCercle(x,y,color,lectx){
|
|
|
|
function faireCercle(x,y,color,lectx){
|
|
|
|
var cercle = new Path2D();
|
|
|
|
var cercle = new Path2D();
|
|
|
@ -44,7 +53,6 @@ function faireCercle(x,y,color,lectx){
|
|
|
|
|
|
|
|
|
|
|
|
lectx.fillStyle = color;
|
|
|
|
lectx.fillStyle = color;
|
|
|
|
lectx.fill(cercle);
|
|
|
|
lectx.fill(cercle);
|
|
|
|
//tab.push([x,y,color]);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function tourneG(letab,lecanvas,lectx)
|
|
|
|
function tourneG(letab,lecanvas,lectx)
|
|
|
@ -55,7 +63,6 @@ function tourneG(letab,lecanvas,lectx)
|
|
|
|
element[1]=-tmp;
|
|
|
|
element[1]=-tmp;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
|
|
//console.log("nv coords "+tab);
|
|
|
|
|
|
|
|
empiler();
|
|
|
|
empiler();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -67,14 +74,11 @@ function tourneD(letab,lecanvas,lectx)
|
|
|
|
element[0]=-tmp;
|
|
|
|
element[0]=-tmp;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
|
|
//console.log("nv coords "+tab);
|
|
|
|
|
|
|
|
empiler();
|
|
|
|
empiler();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function toutDessiner(pts,lecanvas,lectx)
|
|
|
|
function toutDessiner(pts,lecanvas,lectx)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
//var lectx = lecanvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
|
|
|
|
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
|
|
|
|
pts.forEach(element=> {
|
|
|
|
pts.forEach(element=> {
|
|
|
|
faireCercle(element[0],element[1],element[2],lectx);
|
|
|
|
faireCercle(element[0],element[1],element[2],lectx);
|
|
|
@ -84,7 +88,7 @@ function toutDessiner(pts,lecanvas,lectx)
|
|
|
|
function empiler()
|
|
|
|
function empiler()
|
|
|
|
{
|
|
|
|
{
|
|
|
|
tabTotal=[];
|
|
|
|
tabTotal=[];
|
|
|
|
tab.forEach(element => {
|
|
|
|
tab1.forEach(element => {
|
|
|
|
tabTotal.push(element);
|
|
|
|
tabTotal.push(element);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
tab2.forEach(element => {
|
|
|
|
tab2.forEach(element => {
|
|
|
@ -94,26 +98,77 @@ function empiler()
|
|
|
|
toutDessiner(tabTotal,canvasT,ctxT);
|
|
|
|
toutDessiner(tabTotal,canvasT,ctxT);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function getMousePosition(canvas, event) {
|
|
|
|
function swap(letab, lecanvas, lectx,ladir){
|
|
|
|
let rect = canvas.getBoundingClientRect();
|
|
|
|
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 x = event.clientX - rect.left;
|
|
|
|
let y = event.clientY - rect.top;
|
|
|
|
let y = event.clientY - rect.top;
|
|
|
|
if(x<canvas.width/2)
|
|
|
|
if(x<canvas.width/2)
|
|
|
|
tourneG(tab,canvas,ctx);
|
|
|
|
tourneG(letab,lecanvas,lectx);
|
|
|
|
else
|
|
|
|
else
|
|
|
|
tourneD(tab,canvas,ctx);
|
|
|
|
tourneD(letab,lecanvas,lectx);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener("click",function(e)
|
|
|
|
canvas.addEventListener("click",function(e)
|
|
|
|
{
|
|
|
|
{
|
|
|
|
getMousePosition(canvas, e);
|
|
|
|
getMousePosition(canvas, e,ctx, tab1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
tab.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
|
|
|
|
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"]);
|
|
|
|
tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
|
|
|
|
toutDessiner(tab,canvas,ctx);
|
|
|
|
toutDessiner(tab1,canvas,ctx);
|
|
|
|
toutDessiner(tab2,canvas2,ctx2);
|
|
|
|
toutDessiner(tab2,canvas2,ctx2);
|
|
|
|
console.log(canvas);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|