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

Merge branch 'affichage-v2'

Browse Source
aperçus-réserve
adplantade 5 years ago
parent 7c56070d47 bea019f0dc
commit 9b46a292b6
12 changed files with 481 additions and 381 deletions
Show Stats Download Patch File Download Diff File

55
code/index.css
Unescape View File

@ -1,25 +1,35 @@
.all-container {
display : flex;
justify-content: space-between;
/*
align-items: baseline;
width : min-content;
flex-direction: row;
flex-wrap: wrap;*/
}
.flex-container {
/* We first create a flex layout context */
display: flex;
display : flex;
align-items: baseline;
width : min-content;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
/* Then we define how is distributed the remaining space */
flex-direction: column;
}
/*
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
@ -29,4 +39,31 @@
font-weight: bold;
font-size: 3em;
text-align: center;
}*/
.vitraux {
/* We first create a flex layout context */
display : flex;
align-items: baseline;
width : min-content;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
/* Then we define how is distributed the remaining space */
flex-direction: column;
}
.vitrail {
margin: 3px;
padding: 6px;
background-image: url(ress/fond_fin.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

807
code/index.html
Unescape View File

@ -1,432 +1,495 @@
<!DOCTYPE html>
<html>
<canvas id="canvas1" style="border:1px solid #000"></canvas>
<canvas id="canvas2" style="border:1px solid #000"></canvas>
<canvas id="canvas3" style="border:1px solid #000"></canvas>
<canvas id="canvas4" style="border:1px solid #000"></canvas>
<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
<canvas id="canvasObj" style="border:1px solid green"></canvas>
<button onclick="generateEasy()">gen easy</button>
<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&eacute;sultat</h1>
<canvas id="canvasTotal" class="vitrail"></canvas>
<h1>Objectif</h1>
<canvas id="canvasObj" class="vitrail"></canvas>
<button onclick="generateEasy()">gen easy</button>
</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&eacute;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 canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var ctx3 = canvas3.getContext('2d');
var canvas4 = document.getElementById('canvas4');
var ctx4 = canvas4.getContext('2d');
var canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d');
var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d');
tab1=[];
tab2=[];
tab3=[];
tab4=[];
tabR=[];
tabTotal=[];
tabObjCmp=[];
mousePos=[];
colors=["red","yellow","green","purple"];
width=120; // 6 lignes de 50px
height=120; // 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 faireCercle0(x,y,color,lectx){
var cercle = new Path2D();
nx=(width/6)*(x>0 ? x+2 : x+3);
ny=(height/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fill(cercle);
}
<ul id="canvasR" class="flex-container" style="border:1px solid violet">
<canvas id="canvasR1" class="flex-item" width="150" height="150" style="border:1px solid red"></canvas>
<canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
<canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
<canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
</ul>
function drawImg(x,y,color,lectx)
{
var img= new Image();
//lectx2=eval(lectx);
var nx=(width/6)*(x>0 ? x+2 : x+3);
var ny=(height/6)*(y>0 ? y+2 : y+3);
img.src="ress/"+color+".png";
<script>
var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var ctx3 = canvas3.getContext('2d');
var canvas4 = document.getElementById('canvas4');
var ctx4 = canvas4.getContext('2d');
var canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d');
var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d');
tab1=[];
tab2=[];
tab3=[];
tab4=[];
tabR=[];
tabTotal=[];
tabObjCmp=[];
mousePos=[];
colors=["red","blue","green","brown"];
width=240; // 6 lignes de 50px
height=240; // 6 colonnes de 50px
canvas1.width=width;
canvas2.width=width;
canvas3.width=width;
canvas4.width=width;
canvasT.width=width;
canvasO.width=width;
canvas1.height=height;
canvas2.height=height;
canvas3.height=height;
canvas4.height=height;
canvasT.height=height;
canvasO.height=height;
function faireCercle(x,y,color,lectx){
var cercle = new Path2D();
nx=(width/6)*(x>0 ? x+2 : x+3);
ny=(height/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fill(cercle);
}
function tourneG(letab,lecanvas,lectx)
{
letab.forEach(element => {
tmp=element[0];
element[0]=element[1];
element[1]=-tmp;
});
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function tourneD(letab,lecanvas,lectx,sselem=null)
{
if(sselem==null){
img.onload = function(){
console.log("x:"+x+" y:"+y+" col:"+color);
lectx.drawImage(img,nx,ny,width/6,height/6);
}
}
function tourneG(letab,lecanvas,lectx)
{
letab.forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
tmp=element[0];
element[0]=element[1];
element[1]=-tmp;
});
toutDessiner(letab,lecanvas,lectx);
empiler();
}
else {
letab[sselem].forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
function tourneD(letab,lecanvas,lectx,sselem=null)
{
if(sselem==null){
letab.forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
else {
letab[sselem].forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
toutDessiner(letab,lecanvas,lectx);
if(sselem==null)
empiler();
}
toutDessiner(letab,lecanvas,lectx);
if(sselem==null)
empiler();
}
function toutDessiner(pts,lecanvas,lectx)
{
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0])
function toutDessiner(pts,lecanvas,lectx)
{
for(i=1;i<pts.length;i++)
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0])
{
if(Array.isArray(pts[i]))
for(i=1;i<pts.length;i++)
{
/*
pts[i].forEach(element => {
faireCercle(element[0],element[1],element[2],lectx);
})*/
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
if(Array.isArray(pts[i]))
{
drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
}
//else
//drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
}
else
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
}
}
/*
pts.forEach(element=> {
if(Array.isArray(element[0])){
element.forEach(element2 => {
faireCercle(element2[0],element2[1],element2[2],lectx);
})
}
else
faireCercle(element[0],element[1],element[2],lectx);
})*/
}
function empiler(obj=false)
{
const unique = (val) => val.toString() != test.toString();
exists=false;
if(!obj)
function empiler(obj=false)
{
tabTotal=[];
if(tab1[0])
const unique = (val) => val.toString() != test.toString();
exists=false;
if(!obj)
{
tab1.forEach(element => {
tabTotal.push(element);
})
}
if(tab2[0]){
tab2.forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
tabTotal=[];
if(tab1[0])
{
tab1.forEach(element => {
tabTotal.push(element);
})
}
if(tab2[0]){
tab2.forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
exists=!tabTotal.every(unique);
tabTotal.push(element);
exists=false;
})
if(!exists)
tabTotal.push(element);
exists=false;
})
}
if(tab3[0])
{
tab3.forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
}
if(tab3[0])
{
tab3.forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
exists=!tabTotal.every(unique);
tabTotal.push(element);
exists=false;
})
if(!exists)
tabTotal.push(element);
exists=false;
})
}
if(tab4[0]){
tab4.forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
})
}
checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT);
}
if(tab4[0]){
else{
tabObj[0].forEach(element => {
tabObjCmp.push(element);
})
tab4.forEach(element => {
tabObj[1].forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
exists=!tabObjCmp.every(unique);
})
if(!exists)
tabTotal.push(element);
tabObjCmp.push(element);
exists=false;
})
}
checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT);
}
else{
tabObj[0].forEach(element => {
tabObjCmp.push(element);
})
tabObj[1].forEach(element => {
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabObjCmp.every(unique);
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
if(!exists)
tabObjCmp.push(element);
exists=false;
})
}
else {
letab.forEach(element=> {
element[0]=-element[0];
})
}
toutDessiner(letab,lecanvas,lectx);
empiler();
}
}
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max))+1;
}
else {
letab.forEach(element=> {
element[0]=-element[0];
})
function generateEasy(){
tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)];
tabObjCmp=[];
actions=getRandomInt(8);
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
actions--;
}
empiler(true);
toutDessiner(tabObjCmp,canvasO,ctxO);
}
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max))+1;
}
function generateEasy(){
tabObj=[[],[]];
tabObj[0]=Array.from(tab1);
tabObj[1]=Array.from(tab2);
tabObjCmp=[];
actions=getRandomInt(8);
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);
}
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
actions--;
}
empiler(true);
toutDessiner(tabObj,canvasO,ctxO);
}
function getMousePosition(lecanvas, event, lectx, letab) {
let rect = lecanvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
let dir = compas(x,y,lecanvas);
if(x<lecanvas.width/2)
tourneG(letab,lecanvas,lectx);
else
tourneD(letab,lecanvas,lectx);
}
/// renvoie le point cardianl où se trouve le point
function compas(x,y,lecanvas)
{
rect = lecanvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;
ne = x>y;
se = x>lecanvas.height-y;
if(ne && se ) return "E";
if(ne && !se ) return "N";
if(!ne && se ) return "S";
if(!ne && !se ) return "O";
}
function rotationManager(e)
{
canvasNumber=e.currentTarget.id.substring(6);
if(canvasNumber=="R")
/// renvoie le point cardianl où se trouve le point
function compas(x,y,lecanvas)
{
toggleVisible(mousePos[0]);
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";
}
else
/*
6 cas : v1 vis->v1 vis
*/
function rotationManager(e)
{
lecanvas=eval("canvas"+canvasNumber);
letab=eval("tab"+canvasNumber);
lectx=lecanvas.getContext('2d');
dir = compas(e.clientX,e.clientY,e.currentTarget);
if(mousePos[0]==canvasNumber)
canvasNumber=e.currentTarget.id.substring(6);
if(mousePos[0]=="R" && canvasNumber!="R")
{
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"))
if(!isVisible(canvasNumber))
{
tourneD(letab,lecanvas,lectx);
toggleVisible(canvasNumber);
}
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
}
else
{
if(isVisible(mousePos[0]))
{
swap(letab,lecanvas,lectx,"V");
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]);
tabR.push(eval("tab"+mousePos[0]));
}
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"))
{
tourneG(letab,lecanvas,lectx);
}
else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
{
tourneD(letab,lecanvas,lectx);
}
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
{
swap(letab,lecanvas,lectx,"V");
}
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
{
swap(letab,lecanvas,lectx,"H");
}
}
else
{
changeOrder(mousePos[0],canvasNumber);
}
}
}
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
}
}
function checkAllOK(){
//const condition = (val) => val.toString() == element.toString();
exists=true;
//exists=!tabObjCmp.every(unique);
if(tabTotal.length==tabObjCmp.length)
{
for(i=0;i>tabTotal.length;i++)
{
swap(letab,lecanvas,lectx,"H");
exists*tabTotal[i].toString()==tabObjCmp[i].toString();
}
}
else
exists=false;
if(exists)
{
changeOrder(mousePos[0],canvasNumber);
console.log("OK");
generateEasy();
}
}
}
function checkAllOK(){
//const condition = (val) => val.toString() == element.toString();
exists=true;
//exists=!tabObjCmp.every(unique);
if(tabTotal.length==tabObjCmp.length)
function changeOrder(from, to)
{
for(i=0;i>tabTotal.length;i++)
fromTab=eval("tab"+from);
toTab=eval("tab"+to);
for(i=0;i<toTab.length;i++)
{
exists*tabTotal[i].toString()==tabObjCmp[i].toString();
[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));
toutDessiner(tabTotal,canvasT,ctxT);
empiler();
}
else
exists=false;
if(exists)
function isVisible(what)
{
console.log("OK");
generateEasy();
return eval("tab"+what+"[0]");
}
}
function changeOrder(from, to)
{
fromTab=eval("tab"+from);
toTab=eval("tab"+to);
for(i=0;i<toTab.length;i++)
function toggleVisible(where)
{
[fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT);
}
//[fromTab,toTab]=[toTab,fromTab];
toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
}
function toggleVisible(where)
{
eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT);
}
canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas1.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas2.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas3.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas4.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvasR.addEventListener("mouseup",function(e){
rotationManager(e);
})
/*
tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
tab3.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
*/
tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
toutDessiner(tab1,canvas1,ctx1);
toutDessiner(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4);
</script>
canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas1.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas2.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas3.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
canvas4.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvasR.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
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"],[1,1,"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(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4);
</script>
</body>
</html>

BIN
code/ress/fond.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
code/ress/fond_fin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
code/ress/fond_tr.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
code/ress/green.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
code/ress/material_08.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
code/ress/material_10.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
code/ress/purple.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
code/ress/red.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
code/ress/wi.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
code/ress/yellow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

Write Preview
Loading…
Cancel
Save