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

Rendu les fonctions de rotation standard

Browse Source
pile_4_cartes
adplantade 5 years ago
parent aee29d492b
commit 00f51ad37a
1 changed files with 210 additions and 192 deletions
Show Stats Download Patch File Download Diff File

402
code/index.html
Unescape View File

@ -1,11 +1,11 @@
<canvas id="canvas" style="border:1px solid #000"></canvas>
<button onclick="swap(tab1,canvas,ctx,'H')">Swap H</button>
<button onclick="swap(tab1,canvas,ctx,'V')">Swap V</button>
<canvas id="canvas1" style="border:1px solid #000"></canvas>
<canvas id="canvas2" style="border:1px solid #000"></canvas>
<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>
<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>
@ -13,212 +13,230 @@
<button onclick="generateEasy()">gen easy</button>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvas1 = document.getElementById('canvas1');
var ctx = 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');
tab1=[];
tab2=[];
tabTotal=[];
mousePos=[];
width=300; // 6 lignes de 50px
height=300; // 6 colonnes de 50px
canvas.width=width;
canvas2.width=width;
canvasT.width=width;
canvasO.width=width;
canvas.height=height;
canvas2.height=height;
canvasT.height=height;
canvasO.height=height;
function faireCercle(x,y,color,lectx){
var cercle = new Path2D();
nx=50*(x>0 ? x+2 : x+3);
ny=50*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+25, ny+25, 25, 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;
});
tab1=[];
tab2=[];
tabTotal=[];
mousePos=[];
width=300; // 6 lignes de 50px
height=300; // 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=50*(x>0 ? x+2 : x+3);
ny=50*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fill(cercle);
}
toutDessiner(letab,lecanvas,lectx);
if(sselem==null)
function tourneG(letab,lecanvas,lectx)
{
letab.forEach(element => {
tmp=element[0];
element[0]=element[1];
element[1]=-tmp;
});
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function toutDessiner(pts,lecanvas,lectx)
{
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
pts.forEach(element=> {
if(Array.isArray(element[0])){
element.forEach(element2 => {
faireCercle(element2[0],element2[1],element2[2],lectx);
})
}
function tourneD(letab,lecanvas,lectx,sselem=null)
{
if(sselem==null){
letab.forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
else
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);
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()
{
tabTotal=[];
tab1.forEach(element => {
tabTotal.push(element);
})
tab2.forEach(element => {
tabTotal.push(element);
})
toutDessiner(tabTotal,canvasT,ctxT);
}
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
}
else {
letab.forEach(element=> {
element[0]=-element[0];
function empiler()
{
tabTotal=[];
tab1.forEach(element => {
tabTotal.push(element);
})
tab2.forEach(element => {
tabTotal.push(element);
})
toutDessiner(tabTotal,canvasT,ctxT);
}
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);
console.log(tabObj);
actions=getRandomInt(5);
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
console.log(tabObj);
actions--;
}
console.log("sec",tabObj);
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<canvas.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)
{
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";
}
/*canvas.addEventListener("click",function(e)
{
//getMousePosition(canvas, e,ctx, tab1);
compas(e.clientX,e.clientY,canvas);
}); */
canvas2.addEventListener("click",function(e)
{
getMousePosition(canvas2, e, ctx2, tab2);
});
canvas.addEventListener("mousedown",function(e){
//console.log(e);
mousePos = [1,compas(e.clientX,e.clientY,e.currentTarget)];
//mousePos=["obj",e.clientX-canvas.getBoundingClientRect().left<canvas.width/2,e.clientY-canvas.getBoundingClientRect().top<canvas.height/2];
console.log(mousePos);
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
canvas.addEventListener("mouseup",function(e){
dir = compas(e.clientX,e.clientY,e.currentTarget);
if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
{
tourneG(tab1,canvas,ctx);
}
else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
{
tourneD(tab1,canvas,ctx);
}
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
{
swap(tab1,canvas,ctx,"V");
}
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
{
swap(tab1,canvas,ctx,"H");
}
}
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);
console.log(tabObj);
actions=getRandomInt(5);
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
console.log(tabObj);
actions--;
}
console.log("sec",tabObj);
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[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");
}
}
canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
toutDessiner(tab1,canvas,ctx);
toutDessiner(tab2,canvas2,ctx2);
faireCercle(1,1,"violet",ctxO);
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)];
//console.log("md =",e.clientX,":",e.clientY);
})
canvas2.addEventListener("mouseup",function(e){
rotationManager(e);
})
tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
toutDessiner(tab1,canvas1,ctx);
toutDessiner(tab2,canvas2,ctx2);
faireCercle(1,1,"violet",ctxO);
</script>

Write Preview
Loading…
Cancel
Save