pascal.lafourcade
/
onthedots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'apercu-reserve'

Browse Source
page-accueil
adplantade 5 years ago
parent b6c1f61152 e1d77f878e
commit 3f558123fe
3 changed files with 252 additions and 124 deletions
Show Stats Download Patch File Download Diff File

20
code/index.css
Unescape View File

@ -67,3 +67,23 @@
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
.vitrail-select {
margin: 3px;
padding: 6px;
background-image: url(ress/fond_fin.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 5px solid red;
}
.vitrail-hover {
margin: 3px;
padding: 6px;
background-image: url(ress/fond_fin.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 5px solid blue;
}

280
code/index.html
Unescape View File

@ -13,6 +13,7 @@
<h1>Objectif</h1> <h1>Objectif</h1>
<canvas id="canvasObj" class="vitrail"></canvas> <canvas id="canvasObj" class="vitrail"></canvas>
<button onclick="generateEasy()">gen easy</button> <button onclick="generateEasy()">gen easy</button>
<p id="stats"></p>
</ul> </ul>
<ul id="vitraux" class="vitraux" style="border:2px solid purple"> <ul id="vitraux" class="vitraux" style="border:2px solid purple">
<canvas id="canvas1" class="vitrail"></canvas> <canvas id="canvas1" class="vitrail"></canvas>
@ -35,17 +36,6 @@
</ul> </ul>
<script> <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 canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d'); var ctxT = canvasT.getContext('2d');
@ -61,56 +51,58 @@
tab3=[]; tab3=[];
tab4=[]; tab4=[];
tabR=[]; tabR=[];
points=0;
tabTotal=[]; tabTotal=[];
tabObjCmp=[]; tabObjCmp=[];
mousePos=[]; mousePos=[];
colorsAvailable=["red","yellow","green","purple"];
colors=["red","yellow","green","purple"]; colors=["red","yellow","green","purple"];
width=120; // 6 lignes de 50px size=120; // 6 lignes de 50px // 6 colonnes de 50px
height=120; // 6 colonnes de 50px canvasT.width=size;
canvas1.width=width; canvasO.width=size;
canvas2.width=width;
canvas3.width=width; canvasT.height=size;
canvas4.width=width; canvasO.height=size;
canvasT.width=width;
canvasO.width=width; for(var a=1;a<5;a++)
{
canvas1.height=height; eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
canvas2.height=height; eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
canvas3.height=height; eval("canvas"+a+".width=size");
canvas4.height=height; eval("canvas"+a+".height=size");
canvasT.height=height;
canvasO.height=height;
function faireCercle(x,y,color,lectx){
var cercle = new Path2D();
eval("var canvasR"+ a +"= document.getElementById('canvasR"+a+"')");
eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
eval("canvasR"+a+".width=size");
eval("canvasR"+a+".height=size");
}
function faireCercle0(x,y,color,lectx){
var cercle = new Path2D();
nx=(width/6)*(x>0 ? x+2 : x+3); nx=(size/6)*(x>0 ? x+2 : x+3);
ny=(height/6)*(y>0 ? y+2 : y+3); ny=(size/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny); cercle.moveTo(nx, ny);
cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI); cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
lectx.fillStyle = color; lectx.fillStyle = color;
lectx.fill(cercle); lectx.fill(cercle);
} }
function drawImg0(x,y,color,lectx) function drawImg(x,y,color,lectx)
{ {
var img= new Image(); var img= new Image();
//lectx2=eval(lectx);
var nx=(width/6)*(x>0 ? x+2 : x+3); var nx=(size/6)*(x>0 ? x+2 : x+3);
var ny=(height/6)*(y>0 ? y+2 : y+3); var ny=(size/6)*(y>0 ? y+2 : y+3);
img.src="ress/"+color+".png"; img.src="ress/"+color+".png";
img.onload = function(){ img.onload = function(){
console.log("x:"+x+" y:"+y+" col:"+color); lectx.drawImage(img,nx,ny,size/6,size/6);
lectx.drawImage(img,nx,ny,width/6,height/6);
} }
} }
@ -135,6 +127,7 @@
element[0]=-tmp; element[0]=-tmp;
}); });
} }
else { else {
letab[sselem].forEach(element => { letab[sselem].forEach(element => {
tmp=element[1]; tmp=element[1];
@ -142,9 +135,11 @@
element[0]=-tmp; element[0]=-tmp;
}); });
} }
toutDessiner(letab,lecanvas,lectx); //console.log("pre-empiler :"+tabTotal);
empiler(sselem!=null);
//console.log("post-empiler :"+tabTotal);
if(sselem==null) if(sselem==null)
empiler(); toutDessiner(letab,lecanvas,lectx);
} }
function toutDessiner(pts,lecanvas,lectx) function toutDessiner(pts,lecanvas,lectx)
@ -152,15 +147,13 @@
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height); lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0]) if(pts[0])
{ {
var i=1*(typeof pts[0]==="boolean");
for(i=1;i<pts.length;i++) for(i;i<pts.length;i++)
{ {
if(Array.isArray(pts[i])) if(Array.isArray(pts[i]))
{ {
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx); drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
} }
//else
//faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
} }
} }
} }
@ -168,7 +161,7 @@
function empiler(obj=false) function empiler(obj=false)
{ {
const unique = (val) => val.toString() != test.toString(); const unique = (val) => val.toString() != test.toString();
exists=false; var exists=false;
if(!obj) if(!obj)
{ {
@ -177,12 +170,17 @@
{ {
tab1.forEach(element => { tab1.forEach(element => {
if(Array.isArray(element))
{
tabTotal.push(element); tabTotal.push(element);
}
}) })
} }
if(tab2[0]){ if(tab2[0]){
tab2.forEach(element => { tab2.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
if(!exists) if(!exists)
@ -191,12 +189,14 @@
if(!exists) if(!exists)
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}
}) })
} }
if(tab3[0]) if(tab3[0])
{ {
tab3.forEach(element => { tab3.forEach(element => {
if(Array.isArray(element)){
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
if(!exists) if(!exists)
@ -205,11 +205,14 @@
if(!exists) if(!exists)
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}
}) })
} }
if(tab4[0]){ if(tab4[0]){
tab4.forEach(element => { tab4.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
if(!exists) if(!exists)
@ -218,17 +221,23 @@
if(!exists) if(!exists)
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}
}) })
} }
checkAllOK(); checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
} }
else{ else{
tabObj[0].forEach(element => { tabObjCmp=[];
tabObjCmp.push(element); for(count=1;count<tabObj[0].length;count++)
}) {
tabObjCmp.push(tabObj[0][count]);
tabObj[1].forEach(element => { }
for(tabCount=1;tabCount<tabObj.length;tabCount++)
{
for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
{
element=tabObj[tabCount][elmCount];
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
if(!exists) if(!exists)
@ -237,7 +246,8 @@
if(!exists) if(!exists)
tabObjCmp.push(element); tabObjCmp.push(element);
exists=false; exists=false;
}) }
}
} }
} }
@ -261,10 +271,20 @@
return Math.floor(Math.random() * Math.floor(max))+1; return Math.floor(Math.random() * Math.floor(max))+1;
} }
function copyMDArray(array) //permet la copie d'arrays sans copier les références
{
var newArray = [];
array.forEach(element => {
newArray.push(Array.from(element))
});
return newArray
}
function generateEasy(){ function generateEasy(){
tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)]; console.log(copyMDArray(tab1))
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
tabObjCmp=[]; tabObjCmp=[];
actions=getRandomInt(8); actions=getRandomInt(8)+1;
while(actions>0){ while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1); tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
@ -310,12 +330,18 @@
*/ */
function rotationManager(e) function rotationManager(e)
{ {
var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
canvasNumber=e.currentTarget.id.substring(6); canvasNumber=e.currentTarget.id.substring(6);
if(mousePos[0]=="R" && canvasNumber!="R") document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
if(mouseOnRes && canvasNumber!="R")
{ {
if(!isVisible(canvasNumber)) if(!isVisible(canvasNumber))
{ {
toggleVisible(canvasNumber); toggleVisible(canvasNumber);
tabR[canvasNumber]=[];
toggleVisible(mousePos[0].substring(1),true);
} }
} }
else else
@ -324,14 +350,12 @@
{ {
if(canvasNumber=="R") if(canvasNumber=="R")
{ {
/*
eval("tab"+mousePos[0]+"[0]=!tab"+mousePos[0]+"[0];");
empiler();
toutDessiner(eval("tab"+mousePos[0]),eval("canvas"+mousePos[0]),eval("ctx"+mousePos[0]));
toutDessiner(tabTotal,canvasT,ctxT);
*/
toggleVisible(mousePos[0]); toggleVisible(mousePos[0]);
tabR.push(eval("tab"+mousePos[0])); tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
tabR[mousePos[0]][0]=eval("tab"+mousePos[0]+"[0]");
toggleVisible(mousePos[0],true);
toutDessiner(eval("tabR["+(mousePos[0])+"]"),eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
//console.log(eval("tabR["+(mousePos[0]-1)+"]"));
} }
else else
{ {
@ -343,18 +367,22 @@
{ {
if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N")) if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
{ {
console.log("G");
tourneG(letab,lecanvas,lectx); 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")) else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
{ {
console.log("D");
tourneD(letab,lecanvas,lectx); tourneD(letab,lecanvas,lectx);
} }
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E")) else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
{ {
console.log("V");
swap(letab,lecanvas,lectx,"V"); swap(letab,lecanvas,lectx,"V");
} }
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N")) else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
{ {
console.log("H");
swap(letab,lecanvas,lectx,"H"); swap(letab,lecanvas,lectx,"H");
} }
} }
@ -370,22 +398,31 @@
function checkAllOK(){ function checkAllOK(){
//const condition = (val) => val.toString() == element.toString(); //const condition = (val) => val.toString() == element.toString();
exists=true; var exists=true;
//exists=!tabObjCmp.every(unique); //exists=!tabObjCmp.every(unique);
if(tabTotal.length==tabObjCmp.length) if(tabTotal.length==tabObjCmp.length)
{ {
for(i=0;i>tabTotal.length;i++) var verifTab=[];
verifTab=copyMDArray(tabTotal);
for(i=0;i<tabTotal.length;i++)
{ {
exists*tabTotal[i].toString()==tabObjCmp[i].toString(); const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
exists*=result.length;
} }
} }
else else
{
exists=false; exists=false;
}
if(exists) if(exists)
{ {
console.log("OK"); var audio = new Audio('ress/Jewel4.mp3');
audio.play();
points++;
document.getElementById("stats").innerHTML = points+" points";
generateEasy(); generateEasy();
} }
} }
@ -402,61 +439,136 @@
//[fromTab,toTab]=[toTab,fromTab]; //[fromTab,toTab]=[toTab,fromTab];
toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from)); toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to)); toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
toutDessiner(tabTotal,canvasT,ctxT);
empiler(); empiler();
toutDessiner(tabTotal,canvasT,ctxT);
} }
function isVisible(what) function isVisible(what)
{ {
if(what.includes("R"))
return eval("tabR["+what.substring(1)+"][0]");
return eval("tab"+what+"[0]"); return eval("tab"+what+"[0]");
} }
function toggleVisible(where) function toggleVisible(where,reserve=false)
{
if(!reserve)
{ {
eval("tab"+where+"[0]=!tab"+where+"[0];"); eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler(); empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where)); toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
} }
else
{
tabR[where][0]=!tabR[where][0];
toutDessiner(eval("tabR["+where+"]"),eval("canvasR"+where),eval("ctxR"+where));
}
}
/*
function events() {
for(var i=1;i<5;i++)
{
lecanvas="canvas"+i
eval("canvas"+i).addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById(lecanvas).classList.add('vitrail-select');
});
eval("canvas"+i).addEventListener("mouseup",function(e){
rotationManager(e);
})
}
}*/
canvas1.addEventListener("mousedown",function(e){ canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)]; mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas1").classList.add('vitrail-select');
})
canvas2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas2").classList.add('vitrail-select');
})
canvas3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas3").classList.add('vitrail-select');
})
canvas4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas4").classList.add('vitrail-select');
}) })
canvas1.addEventListener("mouseup",function(e){ canvas1.addEventListener("mouseup",function(e){
rotationManager(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){ canvas2.addEventListener("mouseup",function(e){
rotationManager(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){ canvas3.addEventListener("mouseup",function(e){
rotationManager(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){ canvas4.addEventListener("mouseup",function(e){
rotationManager(e); rotationManager(e);
}) })
canvas1.addEventListener("mouseenter",function(e){
document.getElementById("canvas1").classList.add('vitrail-hover');
})
canvas1.addEventListener("mouseleave",function(e){
document.getElementById("canvas1").classList.remove('vitrail-hover');
})
canvas2.addEventListener("mouseenter",function(e){
document.getElementById("canvas2").classList.add('vitrail-hover');
})
canvas2.addEventListener("mouseleave",function(e){
document.getElementById("canvas2").classList.remove('vitrail-hover');
})
canvas3.addEventListener("mouseenter",function(e){
document.getElementById("canvas3").classList.add('vitrail-hover');
})
canvas3.addEventListener("mouseleave",function(e){
document.getElementById("canvas3").classList.remove('vitrail-hover');
})
canvas4.addEventListener("mouseenter",function(e){
document.getElementById("canvas4").classList.add('vitrail-hover');
})
canvas4.addEventListener("mouseleave",function(e){
document.getElementById("canvas4").classList.remove('vitrail-hover');
})
/*
canvasR.addEventListener("mousedown",function(e){ canvasR.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)]; mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
}) })
*/
canvasR1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR1").classList.add('vitrail-select');
})
canvasR2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR2").classList.add('vitrail-select');
})
canvasR3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR3").classList.add('vitrail-select');
})
canvasR4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR4").classList.add('vitrail-select');
})
canvasR.addEventListener("mouseup",function(e){ canvasR.addEventListener("mouseup",function(e){
rotationManager(e); rotationManager(e);
@ -467,23 +579,19 @@
tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[1,1,"purple"]); tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
/*
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(tab1,canvas1,ctx1);
toutDessiner(tab2,canvas2,ctx2); toutDessiner(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3); toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4); toutDessiner(tab4,canvas4,ctx4);
empiler(); empiler();
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
document.getElementById("stats").innerHTML = points+" points";
//events();

BIN
code/ress/Jewel4.mp3
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save