You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
12 KiB
429 lines
12 KiB
|
|
<canvas id="canvas1" style="border:1px solid #000"></canvas>
|
|
|
|
<canvas id="canvas2" style="border:1px solid #000"></canvas>
|
|
|
|
<canvas id="canvas3" style="border:1px solid #000"></canvas>
|
|
|
|
<canvas id="canvas4" 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>
|
|
|
|
<canvas id="canvasR" style="border:1px solid violet">
|
|
<canvas id="canvasR1" width="150" height="150" style="border:1px solid red"></canvas>
|
|
<canvas id="canvasR2" width="150" height="150" style="border:1px solid blue"></canvas>
|
|
<canvas id="canvasR3" style="border:1px solid violet"></canvas>
|
|
<canvas id="canvasR4" style="border:1px solid violet"></canvas>
|
|
</canvas>
|
|
|
|
<script>
|
|
var canvas1 = document.getElementById('canvas1');
|
|
var ctx1 = canvas1.getContext('2d');
|
|
|
|
var canvas2 = document.getElementById('canvas2');
|
|
var ctx2 = canvas2.getContext('2d');
|
|
|
|
var canvas3 = document.getElementById('canvas3');
|
|
var ctx3 = canvas3.getContext('2d');
|
|
|
|
var canvas4 = document.getElementById('canvas4');
|
|
var ctx4 = canvas4.getContext('2d');
|
|
|
|
var canvasT = document.getElementById('canvasTotal');
|
|
var ctxT = canvasT.getContext('2d');
|
|
|
|
var canvasO = document.getElementById('canvasObj');
|
|
var ctxO = canvasO.getContext('2d');
|
|
|
|
var canvasR = document.getElementById('canvasR');
|
|
var ctxR = canvasR.getContext('2d');
|
|
|
|
tab1=[];
|
|
tab2=[];
|
|
tab3=[];
|
|
tab4=[];
|
|
tabR=[];
|
|
tabTotal=[];
|
|
tabObjCmp=[];
|
|
mousePos=[];
|
|
colors=["red","blue","green","brown"];
|
|
|
|
width=240; // 6 lignes de 50px
|
|
height=240; // 6 colonnes de 50px
|
|
canvas1.width=width;
|
|
canvas2.width=width;
|
|
canvas3.width=width;
|
|
canvas4.width=width;
|
|
canvasT.width=width;
|
|
canvasO.width=width;
|
|
|
|
canvas1.height=height;
|
|
canvas2.height=height;
|
|
canvas3.height=height;
|
|
canvas4.height=height;
|
|
canvasT.height=height;
|
|
canvasO.height=height;
|
|
|
|
function faireCercle(x,y,color,lectx){
|
|
var cercle = new Path2D();
|
|
|
|
|
|
|
|
nx=(width/6)*(x>0 ? x+2 : x+3);
|
|
ny=(height/6)*(y>0 ? y+2 : y+3);
|
|
|
|
cercle.moveTo(nx, ny);
|
|
cercle.arc(nx+(width/12), ny+(height/12), (height/12), 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);
|
|
if(pts[0])
|
|
{
|
|
for(i=1;i<pts.length;i++)
|
|
{
|
|
if(Array.isArray(pts[i]))
|
|
{
|
|
/*
|
|
pts[i].forEach(element => {
|
|
faireCercle(element[0],element[1],element[2],lectx);
|
|
})*/
|
|
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
|
|
}
|
|
else
|
|
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
|
|
}
|
|
}
|
|
/*
|
|
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(obj=false)
|
|
{
|
|
const unique = (val) => val.toString() != test.toString();
|
|
exists=false;
|
|
|
|
if(!obj)
|
|
{
|
|
tabTotal=[];
|
|
if(tab1[0])
|
|
{
|
|
|
|
tab1.forEach(element => {
|
|
tabTotal.push(element);
|
|
})
|
|
}
|
|
if(tab2[0]){
|
|
|
|
tab2.forEach(element => {
|
|
colors.forEach(col => {
|
|
test=[element[0],element[1],col];
|
|
if(!exists)
|
|
exists=!tabTotal.every(unique);
|
|
})
|
|
if(!exists)
|
|
tabTotal.push(element);
|
|
exists=false;
|
|
})
|
|
}
|
|
if(tab3[0])
|
|
{
|
|
|
|
tab3.forEach(element => {
|
|
colors.forEach(col => {
|
|
test=[element[0],element[1],col];
|
|
if(!exists)
|
|
exists=!tabTotal.every(unique);
|
|
})
|
|
if(!exists)
|
|
tabTotal.push(element);
|
|
exists=false;
|
|
})
|
|
}
|
|
if(tab4[0]){
|
|
|
|
tab4.forEach(element => {
|
|
colors.forEach(col => {
|
|
test=[element[0],element[1],col];
|
|
if(!exists)
|
|
exists=!tabTotal.every(unique);
|
|
})
|
|
if(!exists)
|
|
tabTotal.push(element);
|
|
exists=false;
|
|
})
|
|
}
|
|
checkAllOK();
|
|
toutDessiner(tabTotal,canvasT,ctxT);
|
|
}
|
|
else{
|
|
tabObj[0].forEach(element => {
|
|
tabObjCmp.push(element);
|
|
})
|
|
|
|
tabObj[1].forEach(element => {
|
|
colors.forEach(col => {
|
|
test=[element[0],element[1],col];
|
|
if(!exists)
|
|
exists=!tabObjCmp.every(unique);
|
|
})
|
|
if(!exists)
|
|
tabObjCmp.push(element);
|
|
exists=false;
|
|
})
|
|
}
|
|
}
|
|
|
|
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);
|
|
tabObjCmp=[];
|
|
actions=getRandomInt(8);
|
|
|
|
while(actions>0){
|
|
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
|
|
actions--;
|
|
}
|
|
empiler(true);
|
|
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<lecanvas.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)
|
|
{
|
|
rect = lecanvas.getBoundingClientRect();
|
|
x = event.clientX - rect.left;
|
|
y = event.clientY - rect.top;
|
|
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";
|
|
}
|
|
|
|
function rotationManager(e)
|
|
{
|
|
canvasNumber=e.currentTarget.id.substring(6);
|
|
lecanvas=eval("canvas"+canvasNumber);
|
|
letab=eval("tab"+canvasNumber);
|
|
lectx=lecanvas.getContext('2d');
|
|
dir = compas(e.clientX,e.clientY,e.currentTarget);
|
|
if(mousePos[0]==canvasNumber)
|
|
{
|
|
if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
|
|
{
|
|
tourneG(letab,lecanvas,lectx);
|
|
}
|
|
else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
|
|
{
|
|
tourneD(letab,lecanvas,lectx);
|
|
}
|
|
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
|
|
{
|
|
swap(letab,lecanvas,lectx,"V");
|
|
}
|
|
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
|
|
{
|
|
swap(letab,lecanvas,lectx,"H");
|
|
}
|
|
}
|
|
else if(canvasNumber=="R")
|
|
{
|
|
toggleVisible(mousePos[0]);
|
|
}
|
|
else
|
|
{
|
|
changeOrder(mousePos[0],canvasNumber);
|
|
}
|
|
}
|
|
|
|
|
|
function checkAllOK(){
|
|
//const condition = (val) => val.toString() == element.toString();
|
|
exists=true;
|
|
//exists=!tabObjCmp.every(unique);
|
|
|
|
if(tabTotal.length==tabObjCmp.length)
|
|
{
|
|
for(i=0;i>tabTotal.length;i++)
|
|
{
|
|
exists*tabTotal[i].toString()==tabObjCmp[i].toString();
|
|
}
|
|
}
|
|
else
|
|
exists=false;
|
|
|
|
if(exists)
|
|
{
|
|
console.log("OK");
|
|
generateEasy();
|
|
}
|
|
}
|
|
|
|
function changeOrder(from, to)
|
|
{
|
|
fromTab=eval("tab"+from);
|
|
toTab=eval("tab"+to);
|
|
for(i=0;i<toTab.length;i++)
|
|
{
|
|
|
|
[fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
|
|
}
|
|
//[fromTab,toTab]=[toTab,fromTab];
|
|
toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
|
|
toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
|
|
|
|
|
|
}
|
|
|
|
function toggleVisible(where)
|
|
{
|
|
eval("tab"+where+"[0]=!tab"+where+"[0];");
|
|
empiler();
|
|
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
|
|
toutDessiner(tabTotal,canvasT,ctxT);
|
|
}
|
|
|
|
|
|
canvas1.addEventListener("mousedown",function(e){
|
|
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
|
|
})
|
|
|
|
canvas1.addEventListener("mouseup",function(e){
|
|
rotationManager(e);
|
|
})
|
|
|
|
canvas2.addEventListener("mousedown",function(e){
|
|
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
|
|
})
|
|
|
|
canvas2.addEventListener("mouseup",function(e){
|
|
rotationManager(e);
|
|
})
|
|
|
|
canvas3.addEventListener("mousedown",function(e){
|
|
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
|
|
})
|
|
|
|
canvas3.addEventListener("mouseup",function(e){
|
|
rotationManager(e);
|
|
})
|
|
|
|
canvas4.addEventListener("mousedown",function(e){
|
|
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
|
|
})
|
|
|
|
canvas4.addEventListener("mouseup",function(e){
|
|
rotationManager(e);
|
|
})
|
|
|
|
canvasR.addEventListener("mouseup",function(e){
|
|
rotationManager(e);
|
|
})
|
|
|
|
/*
|
|
tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
|
|
tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
|
|
tab3.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
|
|
tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
|
|
*/
|
|
|
|
tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
|
|
tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
|
|
tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
|
|
tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
|
|
|
|
|
|
toutDessiner(tab1,canvas1,ctx1);
|
|
toutDessiner(tab2,canvas2,ctx2);
|
|
toutDessiner(tab3,canvas3,ctx3);
|
|
toutDessiner(tab4,canvas4,ctx4);
|
|
|
|
|
|
|
|
</script>
|