Compare commits
3 Commits
master
...
page-accue
| Author | SHA1 | Date |
|---|---|---|
adplantade
|
0c58eb0a2d | 5 years ago |
|
adplantade
|
9176767d23 | 5 years ago |
|
adplantade
|
3738f7816a | 5 years ago |
@ -0,0 +1,605 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>On The Dot</title>
|
||||
<link rel="stylesheet" type="text/css" href="game.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="all-container" class="all-container" style="border:2px solid orangered">
|
||||
<ul id="obj-container" class="obj-container" style="border:2px solid yellow">
|
||||
<h1>Résultat</h1>
|
||||
<canvas id="canvasTotal" class="vitrail"></canvas>
|
||||
<h1>Objectif</h1>
|
||||
<canvas id="canvasObj" class="vitrail"></canvas>
|
||||
<button onclick="generateEasy()">gen easy</button>
|
||||
<p id="stats"></p>
|
||||
</ul>
|
||||
<ul id="vitraux" class="vitraux" style="border:2px solid purple">
|
||||
<canvas id="canvas1" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas2" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas3" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas4" class="vitrail"></canvas>
|
||||
</ul>
|
||||
|
||||
<ul id="canvasR" class="flex-container" style="border:1px solid violet">
|
||||
<h1>Réserve</h1>
|
||||
<canvas id="canvasR1" class="vitrail"></canvas>
|
||||
<canvas id="canvasR2" class="vitrail"></canvas>
|
||||
<canvas id="canvasR3" class="vitrail"></canvas>
|
||||
<canvas id="canvasR4" class="vitrail"></canvas>
|
||||
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
<script>
|
||||
|
||||
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=[];
|
||||
points=0;
|
||||
tabTotal=[];
|
||||
tabObjCmp=[];
|
||||
mousePos=[];
|
||||
colorsAvailable=["red","yellow","green","purple"];
|
||||
colors=["red","yellow","green","purple"];
|
||||
|
||||
size=120; // 6 lignes de 50px // 6 colonnes de 50px
|
||||
canvasT.width=size;
|
||||
canvasO.width=size;
|
||||
|
||||
canvasT.height=size;
|
||||
canvasO.height=size;
|
||||
|
||||
for(var a=1;a<5;a++)
|
||||
{
|
||||
eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
|
||||
eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
|
||||
eval("canvas"+a+".width=size");
|
||||
eval("canvas"+a+".height=size");
|
||||
|
||||
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=(size/6)*(x>0 ? x+2 : x+3);
|
||||
ny=(size/6)*(y>0 ? y+2 : y+3);
|
||||
|
||||
cercle.moveTo(nx, ny);
|
||||
cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
|
||||
|
||||
lectx.fillStyle = color;
|
||||
lectx.fill(cercle);
|
||||
}
|
||||
|
||||
function drawImg(x,y,color,lectx)
|
||||
{
|
||||
var img= new Image();
|
||||
|
||||
|
||||
var nx=(size/6)*(x>0 ? x+2 : x+3);
|
||||
var ny=(size/6)*(y>0 ? y+2 : y+3);
|
||||
|
||||
img.src="ress/"+color+".png";
|
||||
|
||||
img.onload = function(){
|
||||
lectx.drawImage(img,nx,ny,size/6,size/6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
//console.log("pre-empiler :"+tabTotal);
|
||||
empiler(sselem!=null);
|
||||
//console.log("post-empiler :"+tabTotal);
|
||||
if(sselem==null)
|
||||
toutDessiner(letab,lecanvas,lectx);
|
||||
}
|
||||
|
||||
function toutDessiner(pts,lecanvas,lectx)
|
||||
{
|
||||
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
|
||||
if(pts[0])
|
||||
{
|
||||
var i=1*(typeof pts[0]==="boolean");
|
||||
for(i;i<pts.length;i++)
|
||||
{
|
||||
if(Array.isArray(pts[i]))
|
||||
{
|
||||
drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function empiler(obj=false)
|
||||
{
|
||||
const unique = (val) => val.toString() != test.toString();
|
||||
var exists=false;
|
||||
|
||||
if(!obj)
|
||||
{
|
||||
tabTotal=[];
|
||||
if(tab1[0])
|
||||
{
|
||||
|
||||
tab1.forEach(element => {
|
||||
if(Array.isArray(element))
|
||||
{
|
||||
tabTotal.push(element);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(tab2[0]){
|
||||
|
||||
tab2.forEach(element => {
|
||||
if(Array.isArray(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 => {
|
||||
if(Array.isArray(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 => {
|
||||
if(Array.isArray(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{
|
||||
tabObjCmp=[];
|
||||
for(count=1;count<tabObj[0].length;count++)
|
||||
{
|
||||
tabObjCmp.push(tabObj[0][count]);
|
||||
}
|
||||
for(tabCount=1;tabCount<tabObj.length;tabCount++)
|
||||
{
|
||||
for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
|
||||
{
|
||||
element=tabObj[tabCount][elmCount];
|
||||
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 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(){
|
||||
console.log(copyMDArray(tab1))
|
||||
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
|
||||
tabObjCmp=[];
|
||||
actions=getRandomInt(8)+1;
|
||||
|
||||
while(actions>0){
|
||||
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
|
||||
actions--;
|
||||
}
|
||||
empiler(true);
|
||||
toutDessiner(tabObjCmp,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";
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
6 cas : v1 vis->v1 vis
|
||||
|
||||
*/
|
||||
function rotationManager(e)
|
||||
{
|
||||
|
||||
var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
|
||||
canvasNumber=e.currentTarget.id.substring(6);
|
||||
document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
|
||||
|
||||
if(mouseOnRes && canvasNumber!="R")
|
||||
{
|
||||
if(!isVisible(canvasNumber))
|
||||
{
|
||||
toggleVisible(canvasNumber);
|
||||
tabR[canvasNumber]=[];
|
||||
toggleVisible(mousePos[0].substring(1),true);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(isVisible(mousePos[0]))
|
||||
{
|
||||
if(canvasNumber=="R")
|
||||
{
|
||||
toggleVisible(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
|
||||
{
|
||||
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"))
|
||||
{
|
||||
console.log("G");
|
||||
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"))
|
||||
{
|
||||
console.log("D");
|
||||
tourneD(letab,lecanvas,lectx);
|
||||
}
|
||||
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
|
||||
{
|
||||
console.log("V");
|
||||
swap(letab,lecanvas,lectx,"V");
|
||||
}
|
||||
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
|
||||
{
|
||||
console.log("H");
|
||||
swap(letab,lecanvas,lectx,"H");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
changeOrder(mousePos[0],canvasNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkAllOK(){
|
||||
//const condition = (val) => val.toString() == element.toString();
|
||||
var exists=true;
|
||||
//exists=!tabObjCmp.every(unique);
|
||||
if(tabTotal.length==tabObjCmp.length)
|
||||
{
|
||||
var verifTab=[];
|
||||
verifTab=copyMDArray(tabTotal);
|
||||
|
||||
|
||||
for(i=0;i<tabTotal.length;i++)
|
||||
{
|
||||
const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
|
||||
exists*=result.length;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
exists=false;
|
||||
}
|
||||
|
||||
if(exists)
|
||||
{
|
||||
var audio = new Audio('ress/Jewel4.mp3');
|
||||
audio.play();
|
||||
points++;
|
||||
document.getElementById("stats").innerHTML = points+" points";
|
||||
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));
|
||||
empiler();
|
||||
toutDessiner(tabTotal,canvasT,ctxT);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function isVisible(what)
|
||||
{
|
||||
if(what.includes("R"))
|
||||
return eval("tabR["+what.substring(1)+"][0]");
|
||||
return eval("tab"+what+"[0]");
|
||||
}
|
||||
|
||||
function toggleVisible(where,reserve=false)
|
||||
{
|
||||
if(!reserve)
|
||||
{
|
||||
eval("tab"+where+"[0]=!tab"+where+"[0];");
|
||||
empiler();
|
||||
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
|
||||
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){
|
||||
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){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas2.addEventListener("mouseup",function(e){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas3.addEventListener("mouseup",function(e){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas4.addEventListener("mouseup",function(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){
|
||||
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){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
|
||||
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"]);
|
||||
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"],[3,-3,"purple"]);
|
||||
|
||||
toutDessiner(tab1,canvas1,ctx1);
|
||||
toutDessiner(tab2,canvas2,ctx2);
|
||||
toutDessiner(tab3,canvas3,ctx3);
|
||||
toutDessiner(tab4,canvas4,ctx4);
|
||||
|
||||
empiler();
|
||||
toutDessiner(tabTotal,canvasT,ctxT);
|
||||
|
||||
document.getElementById("stats").innerHTML = points+" points";
|
||||
|
||||
//events();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,605 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>On The Dot</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="all-container" class="all-container" style="border:2px solid orangered">
|
||||
<ul id="obj-container" class="obj-container" style="border:2px solid yellow">
|
||||
<h1>Résultat</h1>
|
||||
<canvas id="canvasTotal" class="vitrail"></canvas>
|
||||
<h1>Objectif</h1>
|
||||
<canvas id="canvasObj" class="vitrail"></canvas>
|
||||
<button onclick="generateEasy()">gen easy</button>
|
||||
<p id="stats"></p>
|
||||
</ul>
|
||||
<ul id="vitraux" class="vitraux" style="border:2px solid purple">
|
||||
<canvas id="canvas1" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas2" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas3" class="vitrail"></canvas>
|
||||
|
||||
<canvas id="canvas4" class="vitrail"></canvas>
|
||||
</ul>
|
||||
|
||||
<ul id="canvasR" class="flex-container" style="border:1px solid violet">
|
||||
<h1>Réserve</h1>
|
||||
<canvas id="canvasR1" class="vitrail"></canvas>
|
||||
<canvas id="canvasR2" class="vitrail"></canvas>
|
||||
<canvas id="canvasR3" class="vitrail"></canvas>
|
||||
<canvas id="canvasR4" class="vitrail"></canvas>
|
||||
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
<script>
|
||||
|
||||
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=[];
|
||||
points=0;
|
||||
tabTotal=[];
|
||||
tabObjCmp=[];
|
||||
mousePos=[];
|
||||
colorsAvailable=["red","yellow","green","purple"];
|
||||
colors=["red","yellow","green","purple"];
|
||||
|
||||
size=120; // 6 lignes de 50px // 6 colonnes de 50px
|
||||
canvasT.width=size;
|
||||
canvasO.width=size;
|
||||
|
||||
canvasT.height=size;
|
||||
canvasO.height=size;
|
||||
|
||||
for(var a=1;a<5;a++)
|
||||
{
|
||||
eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
|
||||
eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
|
||||
eval("canvas"+a+".width=size");
|
||||
eval("canvas"+a+".height=size");
|
||||
|
||||
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=(size/6)*(x>0 ? x+2 : x+3);
|
||||
ny=(size/6)*(y>0 ? y+2 : y+3);
|
||||
|
||||
cercle.moveTo(nx, ny);
|
||||
cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
|
||||
|
||||
lectx.fillStyle = color;
|
||||
lectx.fill(cercle);
|
||||
}
|
||||
|
||||
function drawImg(x,y,color,lectx)
|
||||
{
|
||||
var img= new Image();
|
||||
|
||||
|
||||
var nx=(size/6)*(x>0 ? x+2 : x+3);
|
||||
var ny=(size/6)*(y>0 ? y+2 : y+3);
|
||||
|
||||
img.src="ress/"+color+".png";
|
||||
|
||||
img.onload = function(){
|
||||
lectx.drawImage(img,nx,ny,size/6,size/6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
//console.log("pre-empiler :"+tabTotal);
|
||||
empiler(sselem!=null);
|
||||
//console.log("post-empiler :"+tabTotal);
|
||||
if(sselem==null)
|
||||
toutDessiner(letab,lecanvas,lectx);
|
||||
}
|
||||
|
||||
function toutDessiner(pts,lecanvas,lectx)
|
||||
{
|
||||
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
|
||||
if(pts[0])
|
||||
{
|
||||
var i=1*(typeof pts[0]==="boolean");
|
||||
for(i;i<pts.length;i++)
|
||||
{
|
||||
if(Array.isArray(pts[i]))
|
||||
{
|
||||
drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function empiler(obj=false)
|
||||
{
|
||||
const unique = (val) => val.toString() != test.toString();
|
||||
var exists=false;
|
||||
|
||||
if(!obj)
|
||||
{
|
||||
tabTotal=[];
|
||||
if(tab1[0])
|
||||
{
|
||||
|
||||
tab1.forEach(element => {
|
||||
if(Array.isArray(element))
|
||||
{
|
||||
tabTotal.push(element);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(tab2[0]){
|
||||
|
||||
tab2.forEach(element => {
|
||||
if(Array.isArray(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 => {
|
||||
if(Array.isArray(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 => {
|
||||
if(Array.isArray(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{
|
||||
tabObjCmp=[];
|
||||
for(count=1;count<tabObj[0].length;count++)
|
||||
{
|
||||
tabObjCmp.push(tabObj[0][count]);
|
||||
}
|
||||
for(tabCount=1;tabCount<tabObj.length;tabCount++)
|
||||
{
|
||||
for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
|
||||
{
|
||||
element=tabObj[tabCount][elmCount];
|
||||
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 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(){
|
||||
console.log(copyMDArray(tab1))
|
||||
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
|
||||
tabObjCmp=[];
|
||||
actions=getRandomInt(8)+1;
|
||||
|
||||
while(actions>0){
|
||||
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
|
||||
actions--;
|
||||
}
|
||||
empiler(true);
|
||||
toutDessiner(tabObjCmp,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";
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
6 cas : v1 vis->v1 vis
|
||||
|
||||
*/
|
||||
function rotationManager(e)
|
||||
{
|
||||
|
||||
var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
|
||||
canvasNumber=e.currentTarget.id.substring(6);
|
||||
document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
|
||||
|
||||
if(mouseOnRes && canvasNumber!="R")
|
||||
{
|
||||
if(!isVisible(canvasNumber))
|
||||
{
|
||||
toggleVisible(canvasNumber);
|
||||
tabR[canvasNumber]=[];
|
||||
toggleVisible(mousePos[0].substring(1),true);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(isVisible(mousePos[0]))
|
||||
{
|
||||
if(canvasNumber=="R")
|
||||
{
|
||||
toggleVisible(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
|
||||
{
|
||||
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"))
|
||||
{
|
||||
console.log("G");
|
||||
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"))
|
||||
{
|
||||
console.log("D");
|
||||
tourneD(letab,lecanvas,lectx);
|
||||
}
|
||||
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
|
||||
{
|
||||
console.log("V");
|
||||
swap(letab,lecanvas,lectx,"V");
|
||||
}
|
||||
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
|
||||
{
|
||||
console.log("H");
|
||||
swap(letab,lecanvas,lectx,"H");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
changeOrder(mousePos[0],canvasNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkAllOK(){
|
||||
//const condition = (val) => val.toString() == element.toString();
|
||||
var exists=true;
|
||||
//exists=!tabObjCmp.every(unique);
|
||||
if(tabTotal.length==tabObjCmp.length)
|
||||
{
|
||||
var verifTab=[];
|
||||
verifTab=copyMDArray(tabTotal);
|
||||
|
||||
|
||||
for(i=0;i<tabTotal.length;i++)
|
||||
{
|
||||
const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
|
||||
exists*=result.length;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
exists=false;
|
||||
}
|
||||
|
||||
if(exists)
|
||||
{
|
||||
var audio = new Audio('ress/Jewel4.mp3');
|
||||
audio.play();
|
||||
points++;
|
||||
document.getElementById("stats").innerHTML = points+" points";
|
||||
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));
|
||||
empiler();
|
||||
toutDessiner(tabTotal,canvasT,ctxT);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function isVisible(what)
|
||||
{
|
||||
if(what.includes("R"))
|
||||
return eval("tabR["+what.substring(1)+"][0]");
|
||||
return eval("tab"+what+"[0]");
|
||||
}
|
||||
|
||||
function toggleVisible(where,reserve=false)
|
||||
{
|
||||
if(!reserve)
|
||||
{
|
||||
eval("tab"+where+"[0]=!tab"+where+"[0];");
|
||||
empiler();
|
||||
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
|
||||
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){
|
||||
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){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas2.addEventListener("mouseup",function(e){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas3.addEventListener("mouseup",function(e){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
canvas4.addEventListener("mouseup",function(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){
|
||||
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){
|
||||
rotationManager(e);
|
||||
})
|
||||
|
||||
|
||||
|
||||
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"]);
|
||||
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"],[3,-3,"purple"]);
|
||||
|
||||
toutDessiner(tab1,canvas1,ctx1);
|
||||
toutDessiner(tab2,canvas2,ctx2);
|
||||
toutDessiner(tab3,canvas3,ctx3);
|
||||
toutDessiner(tab4,canvas4,ctx4);
|
||||
|
||||
empiler();
|
||||
toutDessiner(tabTotal,canvasT,ctxT);
|
||||
|
||||
document.getElementById("stats").innerHTML = points+" points";
|
||||
|
||||
//events();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<form action="./game.html" method="post">
|
||||
<div class="button">
|
||||
<button type="submit">Envoyer le message</button>
|
||||
</div>
|
||||
</form>
|
||||
Loading…
Reference in new issue