Puzle
¡reutilízame!
Extension proposée par Nicolas Forestier et Hervé Thomas.
<div class="nePasRetirerPuzzle" style="background-color:orange;">
A ne pas retirer, contient le script du puzzle - PIECES SANS BRODURE
</div>
<script>
var inEditor = (window.location.pathname.split("/")[1]=="editor" ? true : false);
const limite=5;
function getViewItem(objet)
{
var trouve=false;
while(!trouve)
{
objet=objet.parentNode;
if (objet==null)
{
trouve=true;
}
else if (objet.getAttribute("class")!=null)
{
if (objet.getAttribute("class").slice(0,18)=="genially-view-item")
{
trouve =true;
}
}
}
return objet;
}
function getAnimatedItem(objet)
{
var trouve=false;
while(!trouve)
{
objet=objet.parentNode;
if (objet==null)
{
trouve=true;
}
else if (objet.getAttribute("class")!=null)
{
if (objet.getAttribute("class").slice(0,25) == "genially-animated-wrapper")
{
trouve =true;
}
}
}
return objet;
}
if (!inEditor)
{
var NPR = document.querySelector(".nePasRetirerPuzzle");
NPR.setAttribute("class","fini");
NPR.style.display="none";
var divConsignesPuzzle = document.querySelector(".consignesPuzzle");
divConsignesPuzzle.setAttribute("class","fini");
divConsignesPuzzle.innerHTML="";
var groupeConsignes = getViewItem(divConsignesPuzzle);
groupeConsignes.style.display="none";
var lignesConsignes = groupeConsignes.getElementsByTagName("li");
var nbColonnes=parseInt(lignesConsignes[0].innerText);
var nbLignes=parseInt(lignesConsignes[1].innerText);
var piecesLisses = (lignesConsignes[2].innerText=="oui" ? false : true);
var divImagePuzzle = document.querySelector(".imagePuzzle");
divImagePuzzle.setAttribute("class","fini");
divImagePuzzle.innerHTML="";
var groupeImagePuzzle=getAnimatedItem(divImagePuzzle);
var racine=groupeImagePuzzle.parentNode;
var largeurPuzzle=groupeImagePuzzle.offsetWidth;
var hauteurPuzzle=groupeImagePuzzle.offsetHeight;
var coinGauche=groupeImagePuzzle.offsetLeft;
var coinHaut=groupeImagePuzzle.offsetTop;
var indexZ = groupeImagePuzzle.style.zIndex;
var imageConsigne=groupeImagePuzzle.getElementsByTagName("img").item(0);
imageConsigne.onload=imageChargee;
var divGagne=document.querySelectorAll(".gagnePuzzle");
var groupeGagne=[];
divGagne.forEach(elt=>
{
elt.setAttribute("class","fini");
elt.innerHTML="";
let groupe=getViewItem(elt);
groupeGagne.push(groupe);
groupe.style.display="none";
});
var pieces=[];
var moveActif=-1;
var xAppel;
var yAppel;
function imageChargee()
{
var largeurConsigne=imageConsigne.naturalWidth;
var hauteurConsigne=imageConsigne.naturalHeight;
for (var j=0;j<nbLignes;j++)
{
for (var i=0;i<nbColonnes;i++)
{
let newDiv = document.createElement("div");
let gauche=coinGauche+i*largeurPuzzle/nbColonnes;
let haut=coinHaut+j*hauteurPuzzle/nbLignes;
let largeur=largeurPuzzle/nbColonnes;
let hauteur=hauteurPuzzle/nbLignes;
let xStartOri=i/nbColonnes*largeurConsigne;
let yStartOri=j/nbLignes*hauteurConsigne;
let largeurOri=largeurConsigne/nbColonnes;
let hauteurOri=hauteurConsigne/nbLignes;
if (!piecesLisses)
{
if (i<nbColonnes-1)
{
largeur*=1.2;
largeurOri*=1.2;
}
if (j<nbLignes-1)
{
hauteur*=1.2;
hauteurOri*=1.2;
}
}
newDiv.setAttribute("style","position:absolute;left:"+ gauche +"px;top:" + haut +"px;height:" + hauteur + "px;width:" + largeur +"px;z-index:"+ indexZ +";");
let newPattern = document.createElement("canvas");
newPattern.height=hauteur;
newPattern.width=largeur;
let patternCtx=newPattern.getContext('2d');
patternCtx.drawImage(imageConsigne,xStartOri,yStartOri,largeurOri,hauteurOri,0,0,largeur,hauteur);
let newCanvas = document.createElement("canvas");
newCanvas.height=hauteur;
newCanvas.width=largeur;
let ctx=newCanvas.getContext('2d');
newDiv.appendChild(newPattern);
newDiv.appendChild(newCanvas);
racine.appendChild(newDiv);
largeur=largeurPuzzle/nbColonnes,
hauteur=hauteurPuzzle/nbLignes,
pieces.push({
physique:newDiv,
pattern:newPattern,
ctx:ctx,
largeur:largeur,
hauteur:hauteur,
appartenance:i+j*nbColonnes,
bougeant:false,
xStart:gauche,
yStart:haut,
gDSize:largeur*0.15,
gDelta:hauteur*0.12,
gRMid:hauteur/2.4,
dDSize:largeur*0.15,
dDelta:hauteur*0.12,
dRMid:hauteur/2.4,
hDSize:hauteur*0.15,
hDelta:largeur*0.12,
hRMid:largeur/2.4,
hDSize:hauteur*0.15,
bDelta:largeur*0.12,
bRMid:largeur/2.4
});
}
}
for (var i=0;i<pieces.length;i++)
{
if (i%nbColonnes!=nbColonnes-1)
{
var alea = (Math.random()*9+10)/100;
pieces[i].dDSize=alea*pieces[i].largeur;
pieces[i+1].gDSize=alea*pieces[i].largeur;
alea = (Math.random()*10+5)/100;
pieces[i].dDelta=alea*pieces[i].hauteur;
pieces[i+1].gDelta=alea*pieces[i].hauteur;
alea = (Math.random()*0.6+0.2);
pieces[i].dRMid=alea*pieces[i].hauteur;
pieces[i+1].gRMid=alea*pieces[i].hauteur;
}
if (i<pieces.length-nbColonnes)
{
var alea = (Math.random()*9+10)/100;
pieces[i].bDSize=alea*pieces[i].hauteur;
pieces[i+nbColonnes].hDSize=alea*pieces[i].hauteur;
alea = (Math.random()*10+5)/100;
pieces[i].bDelta=alea*pieces[i].largeur;
pieces[i+nbColonnes].hDelta=alea*pieces[i].largeur;
alea = (Math.random()*0.6+0.2);
pieces[i].bRMid=alea*pieces[i].largeur;
pieces[i+nbColonnes].hRMid=alea*pieces[i].largeur;
}
}
for (var i=0;i<pieces.length;i++)
{
var pattern = pieces[i].ctx.createPattern(pieces[i].pattern,"no-repeat");
pieces[i].ctx.fillStyle=pattern;
pieces[i].ctx.beginPath();
pieces[i].ctx.lineWidth = 0.1;
pieces[i].ctx.strokeStyle = "#000000";
pieces[i].ctx.moveTo(0,0);
if (!piecesLisses &&i>=nbColonnes)
{
pieces[i].ctx.lineTo(pieces[i].hRMid-pieces[i].hDelta,0);
pieces[i].ctx.bezierCurveTo(pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid-2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,pieces[i].hDSize);
pieces[i].ctx.bezierCurveTo(pieces[i].hRMid+2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid+pieces[i].hDelta,0);
}
pieces[i].ctx.lineTo(pieces[i].largeur,0);
if (!piecesLisses && i%nbColonnes!=nbColonnes-1)
{
pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].dRMid-pieces[i].dDelta);
pieces[i].ctx.bezierCurveTo(pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid+0.5*pieces[i].dDelta,1.10*pieces[i].largeur,pieces[i].dRMid-2*pieces[i].dDelta,pieces[i].largeur+pieces[i].dDSize,pieces[i].dRMid);
pieces[i].ctx.bezierCurveTo(1.10*pieces[i].largeur,pieces[i].dRMid+2*pieces[i].dDelta,pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid-0.5*pieces[i].dDelta,pieces[i].largeur,pieces[i].dRMid+pieces[i].dDelta);
}
pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].hauteur);
if (!piecesLisses&&i<pieces.length-nbColonnes)
{
pieces[i].ctx.lineTo(pieces[i].bRMid+pieces[i].bDelta,pieces[i].hauteur);
pieces[i].ctx.bezierCurveTo(pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid+2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+pieces[i].bDSize);
pieces[i].ctx.bezierCurveTo(pieces[i].bRMid-2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid-pieces[i].bDelta,pieces[i].hauteur);
}
pieces[i].ctx.lineTo(0,pieces[i].hauteur);
if (!piecesLisses&&i%nbColonnes!=0)
{
pieces[i].ctx.lineTo(0,pieces[i].gRMid+pieces[i].gDelta);
pieces[i].ctx.bezierCurveTo(0.3*pieces[i].gDSize,pieces[i].gRMid-0.5*pieces[i].gDelta,0.10*pieces[i].largeur,pieces[i].gRMid+2*pieces[i].gDelta,pieces[i].gDSize,pieces[i].gRMid);
pieces[i].ctx.bezierCurveTo(0.10*pieces[i].largeur,pieces[i].gRMid-2*pieces[i].gDelta,0.3*pieces[i].gDSize,pieces[i].gRMid+0.5*pieces[i].gDelta,0,pieces[i].gRMid-pieces[i].gDelta);
}
pieces[i].ctx.lineTo(0,0);
pieces[i].ctx.fill();
pieces[i].ctx.stroke();
pieces[i].pattern.style.display="none";
}
pieces.forEach(function (elt,indice)
{
elt.physique.addEventListener('mousedown',function (evt) {enfonce(evt,indice)});
elt.physique.addEventListener('touchstart',function (evt) {enfonceTactile(evt,indice)});
elt.physique.addEventListener('touchmove',function (evt) {tactileDeplace(evt,indice)});
elt.physique.addEventListener('touchend',function (evt) {tactileFin()});
elt.physique.addEventListener('touchleave',function (evt) {tactileFin()});
});
groupeImagePuzzle.style.display="none";
shuffle();
}
function shuffle()
{
var xMin=coinGauche;
var xMax=coinGauche+largeurPuzzle*(nbColonnes-1)/nbColonnes;
var yMin=coinHaut;
var yMax=coinHaut+hauteurPuzzle*(nbLignes-1)/nbLignes;
pieces.forEach(elt=>
{
let alea=Math.random()*(xMax-xMin)+xMin;
elt.physique.style.left=alea+"px";
alea=Math.random()*(yMax-yMin)+yMin;
elt.physique.style.top=alea+"px";
});
}
function enfonce(evt,qui)
{
evt.preventDefault();
moveActif=qui;
xAppel=evt.clientX;
yAppel=evt.clientY;
for (var i=0;i<pieces.length;i++)
{
if (pieces[i].appartenance==pieces[qui].appartenance)
{
pieces[i].bougeant=true;
pieces[i].xStart=pieces[i].physique.offsetLeft;
pieces[i].yStart=pieces[i].physique.offsetTop;
}
else
{
pieces[i].bougeant=false;
}
}
}
function enfonceTactile(evt,qui)
{
if (moveActif==-1)
{
evt.preventDefault();
moveActif=qui;
xAppel=evt.changedTouches[0].clientX;
yAppel=evt.changedTouches[0].clientY;
for (var i=0;i<pieces.length;i++)
{
if (pieces[i].appartenance==pieces[qui].appartenance)
{
pieces[i].bougeant=true;
pieces[i].xStart=pieces[i].physique.offsetLeft;
pieces[i].yStart=pieces[i].physique.offsetTop;
}
else
{
pieces[i].bougeant=false;
}
}
}
}
document.addEventListener('mouseup',function()
{
moveActif=-1;
});
function tactileFin()
{
moveActif=-1;
}
document.addEventListener('mousemove',sourisDeplace)
function sourisDeplace(evt)
{
if (moveActif>-1)
{
var contours=racine.getBoundingClientRect();
var deltaX=(xAppel-evt.clientX)/contours.width*1200;
var deltaY=(yAppel-evt.clientY)/contours.height*675;
pieces.forEach(function (elt,indice)
{
if (elt.bougeant)
{
elt.physique.style.left=(elt.xStart-deltaX)+"px";
elt.physique.style.top=(elt.yStart-deltaY)+"px";
}
});
pieces.forEach(function (elt,indice)
{
if (elt.bougeant)
{
checkForNeighbours(indice,evt.clientX,evt.clientY);
}
});
}
}
function tactileDeplace(evt)
{
if (moveActif>-1)
{
var contours=racine.getBoundingClientRect();
var deltaX=(xAppel-evt.changedTouches[0].clientX)/contours.width*1200;
var deltaY=(yAppel-evt.changedTouches[0].clientY)/contours.height*675;
pieces.forEach(function (elt,indice)
{
if (elt.bougeant)
{
elt.physique.style.left=(elt.xStart-deltaX)+"px";
elt.physique.style.top=(elt.yStart-deltaY)+"px";
}
});
pieces.forEach(function (elt,indice)
{
if (elt.bougeant)
{
checkForNeighbours(indice,evt.changedTouches[0].clientX,evt.changedTouches[0].clientY);
}
});
}
}
function checkForNeighbours(numero,x,y)
{
if (numero%nbColonnes>0)
{
if ((Math.abs(pieces[numero].physique.offsetLeft-pieces[numero].largeur-pieces[numero-1].physique.offsetLeft)<limite) && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero-1].physique.offsetTop)<limite) && !pieces[numero-1].bougeant)
{
pieces[numero-1].physique.style.left=(pieces[numero].physique.offsetLeft-pieces[numero].largeur)+"px";
pieces[numero-1].physique.style.top=pieces[numero].physique.offsetTop+"px";
repositionGroupe(numero-1);
xAppel=x;
yAppel=y;
pieces[numero-1].bougeant=true;
return;
}
}
if (numero%nbColonnes<nbColonnes-1)
{
if ((Math.abs(pieces[numero].physique.offsetLeft+pieces[numero].largeur-pieces[numero+1].physique.offsetLeft))<limite && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero+1].physique.offsetTop)<limite)&& !pieces[numero+1].bougeant)
{
pieces[numero+1].physique.style.left=(pieces[numero].physique.offsetLeft+pieces[numero].largeur)+"px";
pieces[numero+1].physique.style.top=pieces[numero].physique.offsetTop+"px";
repositionGroupe(numero+1);
xAppel=x;
yAppel=y;
pieces[numero+1].bougeant=true;
return;
}
}
if (numero>=nbColonnes)
{
if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero-nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero-nbColonnes].physique.offsetTop-pieces[numero].hauteur)<limite && !pieces[numero-nbColonnes].bougeant)
{
pieces[numero-nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px";
pieces[numero-nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop-pieces[numero].hauteur)+"px";
repositionGroupe(numero-nbColonnes);
xAppel=x;
yAppel=y;
pieces[numero-nbColonnes].bougeant=true;
return;
}
}
if (numero<pieces.length-nbColonnes)
{
if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero+nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero+nbColonnes].physique.offsetTop+pieces[numero].hauteur)<limite && !pieces[numero+nbColonnes].bougeant)
{
pieces[numero+nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px";
pieces[numero+nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop+pieces[numero].hauteur)+"px";
repositionGroupe(numero+nbColonnes);
xAppel=x;
yAppel=y;
pieces[numero+nbColonnes].bougeant=true;
return;
}
}
}
function switchAppartenance(transfuge)
{
pieces.forEach(elt=>
{
if (elt.appartenance==transfuge)
{
elt.appartenance=moveActif;
}
});
pieces.forEach(elt=>
{
elt.xStart=elt.physique.offsetLeft;
elt.yStart=elt.physique.offsetTop;
});
checkGagne();
}
function checkGagne()
{
var premier=pieces[0].appartenance;
var cBon=true;
for (var i=1;i<pieces.length;i++)
{
if (pieces[i].appartenance!=premier)
{
cBon=false;
}
}
if (cBon)
{
groupeGagne.forEach(elt=>elt.style.display="block");
}
}
function repositionGroupe(refferent)
{
var xRef=pieces[refferent].physique.offsetLeft;
var yRef=pieces[refferent].physique.offsetTop;
for (var i=0;i<pieces.length;i++)
{
if (pieces[i].appartenance==pieces[refferent].appartenance)
{
pieces[i].physique.style.left=xRef+(i%nbColonnes - refferent%nbColonnes)*pieces[0].largeur+"px";
pieces[i].physique.style.top=yRef+(Math.floor(i/nbColonnes)-Math.floor(refferent/nbColonnes))*pieces[0].hauteur+"px";
}
}
switchAppartenance (refferent);
}
}
</script>
Agrupar con la imagen para el puzle.
Permite definir el número de columnas de nuestro puzle.
nombre de piezas a lo largo
nombre de piezas a lo ancho.
sí:
no :
Deja este elemento pegado en la página.
OU
Contiene el script del puzle, déjalo en la página.
PUZLE
Ju Alv
Created on March 22, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Fill in Blanks
View
Countdown
View
Stopwatch
View
Unpixelator
View
Break the Piñata
View
Bingo
View
Create a Secret Code
Explore all templates
Transcript
Puzle
¡reutilízame!
Extension proposée par Nicolas Forestier et Hervé Thomas.
<div class="nePasRetirerPuzzle" style="background-color:orange;"> A ne pas retirer, contient le script du puzzle - PIECES SANS BRODURE </div> <script> var inEditor = (window.location.pathname.split("/")[1]=="editor" ? true : false); const limite=5; function getViewItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,18)=="genially-view-item") { trouve =true; } } } return objet; } function getAnimatedItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,25) == "genially-animated-wrapper") { trouve =true; } } } return objet; } if (!inEditor) { var NPR = document.querySelector(".nePasRetirerPuzzle"); NPR.setAttribute("class","fini"); NPR.style.display="none"; var divConsignesPuzzle = document.querySelector(".consignesPuzzle"); divConsignesPuzzle.setAttribute("class","fini"); divConsignesPuzzle.innerHTML=""; var groupeConsignes = getViewItem(divConsignesPuzzle); groupeConsignes.style.display="none"; var lignesConsignes = groupeConsignes.getElementsByTagName("li"); var nbColonnes=parseInt(lignesConsignes[0].innerText); var nbLignes=parseInt(lignesConsignes[1].innerText); var piecesLisses = (lignesConsignes[2].innerText=="oui" ? false : true); var divImagePuzzle = document.querySelector(".imagePuzzle"); divImagePuzzle.setAttribute("class","fini"); divImagePuzzle.innerHTML=""; var groupeImagePuzzle=getAnimatedItem(divImagePuzzle); var racine=groupeImagePuzzle.parentNode; var largeurPuzzle=groupeImagePuzzle.offsetWidth; var hauteurPuzzle=groupeImagePuzzle.offsetHeight; var coinGauche=groupeImagePuzzle.offsetLeft; var coinHaut=groupeImagePuzzle.offsetTop; var indexZ = groupeImagePuzzle.style.zIndex; var imageConsigne=groupeImagePuzzle.getElementsByTagName("img").item(0); imageConsigne.onload=imageChargee; var divGagne=document.querySelectorAll(".gagnePuzzle"); var groupeGagne=[]; divGagne.forEach(elt=> { elt.setAttribute("class","fini"); elt.innerHTML=""; let groupe=getViewItem(elt); groupeGagne.push(groupe); groupe.style.display="none"; }); var pieces=[]; var moveActif=-1; var xAppel; var yAppel; function imageChargee() { var largeurConsigne=imageConsigne.naturalWidth; var hauteurConsigne=imageConsigne.naturalHeight; for (var j=0;j<nbLignes;j++) { for (var i=0;i<nbColonnes;i++) { let newDiv = document.createElement("div"); let gauche=coinGauche+i*largeurPuzzle/nbColonnes; let haut=coinHaut+j*hauteurPuzzle/nbLignes; let largeur=largeurPuzzle/nbColonnes; let hauteur=hauteurPuzzle/nbLignes; let xStartOri=i/nbColonnes*largeurConsigne; let yStartOri=j/nbLignes*hauteurConsigne; let largeurOri=largeurConsigne/nbColonnes; let hauteurOri=hauteurConsigne/nbLignes; if (!piecesLisses) { if (i<nbColonnes-1) { largeur*=1.2; largeurOri*=1.2; } if (j<nbLignes-1) { hauteur*=1.2; hauteurOri*=1.2; } } newDiv.setAttribute("style","position:absolute;left:"+ gauche +"px;top:" + haut +"px;height:" + hauteur + "px;width:" + largeur +"px;z-index:"+ indexZ +";"); let newPattern = document.createElement("canvas"); newPattern.height=hauteur; newPattern.width=largeur; let patternCtx=newPattern.getContext('2d'); patternCtx.drawImage(imageConsigne,xStartOri,yStartOri,largeurOri,hauteurOri,0,0,largeur,hauteur); let newCanvas = document.createElement("canvas"); newCanvas.height=hauteur; newCanvas.width=largeur; let ctx=newCanvas.getContext('2d'); newDiv.appendChild(newPattern); newDiv.appendChild(newCanvas); racine.appendChild(newDiv); largeur=largeurPuzzle/nbColonnes, hauteur=hauteurPuzzle/nbLignes, pieces.push({ physique:newDiv, pattern:newPattern, ctx:ctx, largeur:largeur, hauteur:hauteur, appartenance:i+j*nbColonnes, bougeant:false, xStart:gauche, yStart:haut, gDSize:largeur*0.15, gDelta:hauteur*0.12, gRMid:hauteur/2.4, dDSize:largeur*0.15, dDelta:hauteur*0.12, dRMid:hauteur/2.4, hDSize:hauteur*0.15, hDelta:largeur*0.12, hRMid:largeur/2.4, hDSize:hauteur*0.15, bDelta:largeur*0.12, bRMid:largeur/2.4 }); } } for (var i=0;i<pieces.length;i++) { if (i%nbColonnes!=nbColonnes-1) { var alea = (Math.random()*9+10)/100; pieces[i].dDSize=alea*pieces[i].largeur; pieces[i+1].gDSize=alea*pieces[i].largeur; alea = (Math.random()*10+5)/100; pieces[i].dDelta=alea*pieces[i].hauteur; pieces[i+1].gDelta=alea*pieces[i].hauteur; alea = (Math.random()*0.6+0.2); pieces[i].dRMid=alea*pieces[i].hauteur; pieces[i+1].gRMid=alea*pieces[i].hauteur; } if (i<pieces.length-nbColonnes) { var alea = (Math.random()*9+10)/100; pieces[i].bDSize=alea*pieces[i].hauteur; pieces[i+nbColonnes].hDSize=alea*pieces[i].hauteur; alea = (Math.random()*10+5)/100; pieces[i].bDelta=alea*pieces[i].largeur; pieces[i+nbColonnes].hDelta=alea*pieces[i].largeur; alea = (Math.random()*0.6+0.2); pieces[i].bRMid=alea*pieces[i].largeur; pieces[i+nbColonnes].hRMid=alea*pieces[i].largeur; } } for (var i=0;i<pieces.length;i++) { var pattern = pieces[i].ctx.createPattern(pieces[i].pattern,"no-repeat"); pieces[i].ctx.fillStyle=pattern; pieces[i].ctx.beginPath(); pieces[i].ctx.lineWidth = 0.1; pieces[i].ctx.strokeStyle = "#000000"; pieces[i].ctx.moveTo(0,0); if (!piecesLisses &&i>=nbColonnes) { pieces[i].ctx.lineTo(pieces[i].hRMid-pieces[i].hDelta,0); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid-2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,pieces[i].hDSize); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid+2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid+pieces[i].hDelta,0); } pieces[i].ctx.lineTo(pieces[i].largeur,0); if (!piecesLisses && i%nbColonnes!=nbColonnes-1) { pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].dRMid-pieces[i].dDelta); pieces[i].ctx.bezierCurveTo(pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid+0.5*pieces[i].dDelta,1.10*pieces[i].largeur,pieces[i].dRMid-2*pieces[i].dDelta,pieces[i].largeur+pieces[i].dDSize,pieces[i].dRMid); pieces[i].ctx.bezierCurveTo(1.10*pieces[i].largeur,pieces[i].dRMid+2*pieces[i].dDelta,pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid-0.5*pieces[i].dDelta,pieces[i].largeur,pieces[i].dRMid+pieces[i].dDelta); } pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].hauteur); if (!piecesLisses&&i<pieces.length-nbColonnes) { pieces[i].ctx.lineTo(pieces[i].bRMid+pieces[i].bDelta,pieces[i].hauteur); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid+2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+pieces[i].bDSize); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid-2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid-pieces[i].bDelta,pieces[i].hauteur); } pieces[i].ctx.lineTo(0,pieces[i].hauteur); if (!piecesLisses&&i%nbColonnes!=0) { pieces[i].ctx.lineTo(0,pieces[i].gRMid+pieces[i].gDelta); pieces[i].ctx.bezierCurveTo(0.3*pieces[i].gDSize,pieces[i].gRMid-0.5*pieces[i].gDelta,0.10*pieces[i].largeur,pieces[i].gRMid+2*pieces[i].gDelta,pieces[i].gDSize,pieces[i].gRMid); pieces[i].ctx.bezierCurveTo(0.10*pieces[i].largeur,pieces[i].gRMid-2*pieces[i].gDelta,0.3*pieces[i].gDSize,pieces[i].gRMid+0.5*pieces[i].gDelta,0,pieces[i].gRMid-pieces[i].gDelta); } pieces[i].ctx.lineTo(0,0); pieces[i].ctx.fill(); pieces[i].ctx.stroke(); pieces[i].pattern.style.display="none"; } pieces.forEach(function (elt,indice) { elt.physique.addEventListener('mousedown',function (evt) {enfonce(evt,indice)}); elt.physique.addEventListener('touchstart',function (evt) {enfonceTactile(evt,indice)}); elt.physique.addEventListener('touchmove',function (evt) {tactileDeplace(evt,indice)}); elt.physique.addEventListener('touchend',function (evt) {tactileFin()}); elt.physique.addEventListener('touchleave',function (evt) {tactileFin()}); }); groupeImagePuzzle.style.display="none"; shuffle(); } function shuffle() { var xMin=coinGauche; var xMax=coinGauche+largeurPuzzle*(nbColonnes-1)/nbColonnes; var yMin=coinHaut; var yMax=coinHaut+hauteurPuzzle*(nbLignes-1)/nbLignes; pieces.forEach(elt=> { let alea=Math.random()*(xMax-xMin)+xMin; elt.physique.style.left=alea+"px"; alea=Math.random()*(yMax-yMin)+yMin; elt.physique.style.top=alea+"px"; }); } function enfonce(evt,qui) { evt.preventDefault(); moveActif=qui; xAppel=evt.clientX; yAppel=evt.clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } function enfonceTactile(evt,qui) { if (moveActif==-1) { evt.preventDefault(); moveActif=qui; xAppel=evt.changedTouches[0].clientX; yAppel=evt.changedTouches[0].clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } } document.addEventListener('mouseup',function() { moveActif=-1; }); function tactileFin() { moveActif=-1; } document.addEventListener('mousemove',sourisDeplace) function sourisDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.clientX)/contours.width*1200; var deltaY=(yAppel-evt.clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.clientX,evt.clientY); } }); } } function tactileDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.changedTouches[0].clientX)/contours.width*1200; var deltaY=(yAppel-evt.changedTouches[0].clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.changedTouches[0].clientX,evt.changedTouches[0].clientY); } }); } } function checkForNeighbours(numero,x,y) { if (numero%nbColonnes>0) { if ((Math.abs(pieces[numero].physique.offsetLeft-pieces[numero].largeur-pieces[numero-1].physique.offsetLeft)<limite) && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero-1].physique.offsetTop)<limite) && !pieces[numero-1].bougeant) { pieces[numero-1].physique.style.left=(pieces[numero].physique.offsetLeft-pieces[numero].largeur)+"px"; pieces[numero-1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero-1); xAppel=x; yAppel=y; pieces[numero-1].bougeant=true; return; } } if (numero%nbColonnes<nbColonnes-1) { if ((Math.abs(pieces[numero].physique.offsetLeft+pieces[numero].largeur-pieces[numero+1].physique.offsetLeft))<limite && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero+1].physique.offsetTop)<limite)&& !pieces[numero+1].bougeant) { pieces[numero+1].physique.style.left=(pieces[numero].physique.offsetLeft+pieces[numero].largeur)+"px"; pieces[numero+1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero+1); xAppel=x; yAppel=y; pieces[numero+1].bougeant=true; return; } } if (numero>=nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero-nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero-nbColonnes].physique.offsetTop-pieces[numero].hauteur)<limite && !pieces[numero-nbColonnes].bougeant) { pieces[numero-nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero-nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop-pieces[numero].hauteur)+"px"; repositionGroupe(numero-nbColonnes); xAppel=x; yAppel=y; pieces[numero-nbColonnes].bougeant=true; return; } } if (numero<pieces.length-nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero+nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero+nbColonnes].physique.offsetTop+pieces[numero].hauteur)<limite && !pieces[numero+nbColonnes].bougeant) { pieces[numero+nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero+nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop+pieces[numero].hauteur)+"px"; repositionGroupe(numero+nbColonnes); xAppel=x; yAppel=y; pieces[numero+nbColonnes].bougeant=true; return; } } } function switchAppartenance(transfuge) { pieces.forEach(elt=> { if (elt.appartenance==transfuge) { elt.appartenance=moveActif; } }); pieces.forEach(elt=> { elt.xStart=elt.physique.offsetLeft; elt.yStart=elt.physique.offsetTop; }); checkGagne(); } function checkGagne() { var premier=pieces[0].appartenance; var cBon=true; for (var i=1;i<pieces.length;i++) { if (pieces[i].appartenance!=premier) { cBon=false; } } if (cBon) { groupeGagne.forEach(elt=>elt.style.display="block"); } } function repositionGroupe(refferent) { var xRef=pieces[refferent].physique.offsetLeft; var yRef=pieces[refferent].physique.offsetTop; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[refferent].appartenance) { pieces[i].physique.style.left=xRef+(i%nbColonnes - refferent%nbColonnes)*pieces[0].largeur+"px"; pieces[i].physique.style.top=yRef+(Math.floor(i/nbColonnes)-Math.floor(refferent/nbColonnes))*pieces[0].hauteur+"px"; } } switchAppartenance (refferent); } } </script>
Agrupar con la imagen para el puzle.
Permite definir el número de columnas de nuestro puzle.
nombre de piezas a lo largo
nombre de piezas a lo ancho.
sí:
no :
Deja este elemento pegado en la página.
OU
Contiene el script del puzle, déjalo en la página.