You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3877 lines
112 KiB
3877 lines
112 KiB
// get canvas related references
|
|
var canvas = document.getElementById("terrain");
|
|
zeubi = document.getElementById
|
|
var ctx = canvas.getContext("2d");
|
|
var le_contexte = canvas.getContext("2d");
|
|
var BB = canvas.getBoundingClientRect();
|
|
var offsetX = BB.left;
|
|
var offsetY = BB.top;
|
|
canvas.width = window.innerWidth*0.74;
|
|
var lt = canvas.width;
|
|
canvas.height = lt*0.536;
|
|
var ht = canvas.height;
|
|
var WIDTH = canvas.width;
|
|
var HEIGHT = canvas.height;
|
|
var buttonPNG = document.getElementById('btn-download');
|
|
var buttonPDF = document.getElementById('btn-downloadpdf');
|
|
var createtextbox = document.createElement("INPUT");
|
|
createtextbox.setAttribute("type", "text");
|
|
var taillejoueur=20;
|
|
var buttonAugmenter = document.getElementById('boutonatt+');
|
|
var buttonReduire = document.getElementById('boutonatt-');
|
|
var buttonAugmenterdef = document.getElementById('boutondef+');
|
|
var buttonReduiredef = document.getElementById('boutondef-');
|
|
var taillejoueur =20;
|
|
var tailledefenseur = 20;
|
|
var nbIntervalle = 0;
|
|
var deja = 0;
|
|
var r=255,g=0,b=0;
|
|
var r2=255,g2=0,b2=0;
|
|
var r3=255,g3=0,b3=0;
|
|
var r5=255,g5=0,b5=0;
|
|
//Variables qui stockeront la couleur en rgb.
|
|
|
|
var r_1=255,g_1=0,b_1=0;
|
|
var r_2=255,g_2=0,b_2=0;
|
|
var r_3=255,g_3=0,b_3=0;
|
|
var r_4=255,g_4=0,b_4=0;
|
|
var r_5=255,g_5=0,b_5=0;
|
|
// Variables secondaires rgb.
|
|
// drag related variables
|
|
var dragok = false;
|
|
var startX;
|
|
var startY;
|
|
|
|
//variable pour donner le ballon
|
|
var ball = false;
|
|
var nbball=0;
|
|
var nba = 0;
|
|
var nbb = 0;
|
|
|
|
//variable pour les tirs
|
|
var tirable = false;
|
|
var nbtir = 0;
|
|
//variable pour les zones d'influence
|
|
var nbzone = 0;
|
|
//array de points pour dessiner la zone d'influence
|
|
var zone = [];
|
|
var zonable = false;
|
|
var nbpoints = 0;
|
|
|
|
//variable pour editer zone d influence et mouvements
|
|
var edit = false;
|
|
var ecra = false;
|
|
//variable pour creer des deplacements
|
|
var bouge = false;
|
|
var nbptsdep = 0;
|
|
var currentdep = 0;
|
|
var deple = [];
|
|
var nbbase = 0;
|
|
var deplacement = [];
|
|
var depdeu = [];
|
|
var nbdepdeu =0;
|
|
var usabledep = false;
|
|
var currentdepdeu =false;
|
|
var currentdepun = false;
|
|
var drideu = [];
|
|
var nbdrideu = 0;
|
|
|
|
var dribblement = [];
|
|
var nbptsdib = 0;
|
|
var drib = 0;
|
|
var nbbased =0;
|
|
var nbdrib = 0;
|
|
//variable pour faire une passe
|
|
var nbjpass = 0;
|
|
var passable = false;
|
|
var nbclicpass = 0;
|
|
var dernierpass = null;
|
|
// array de cercle de joueurs
|
|
var joueurs = [];
|
|
// array de cercle d'adversaire
|
|
var adversaire = [];
|
|
// array de passes
|
|
var passes = [];
|
|
// array de numero de joueur pour créér la passe
|
|
var jpass = [];
|
|
// array d'action pour pouvoir supprimer la derniere
|
|
var last = [];
|
|
|
|
var nbhig = 0;
|
|
// listen for mouse events
|
|
canvas.onmousedown = myDown;
|
|
canvas.onmouseup = myUp;
|
|
canvas.onmousemove = myMove;
|
|
|
|
// call to draw the scene
|
|
draw();
|
|
|
|
// draw a single rect
|
|
function rect(x, y, w, h) {
|
|
ctx.beginPath();
|
|
ctx.rect(x, y, w, h);
|
|
ctx.strokeStyle ="black";
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
function cercle(x,y,z,a,b,c,g) {
|
|
ctx.fillStyle = g;
|
|
ctx.beginPath();
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(x,y,z,a,b,c);
|
|
ctx.fill();
|
|
}
|
|
|
|
function cercleedit(x,y,z,a,b,c,g) {
|
|
le_contexte.fillStyle = g;
|
|
le_contexte.beginPath();
|
|
le_contexte.arc(x,y,z,a,b,c);
|
|
le_contexte.stroke();
|
|
le_contexte.fill();
|
|
}
|
|
|
|
function lignePasse(a,b,c,d){
|
|
var dx = c - a;
|
|
var dy = d - b;
|
|
var angle = Math.atan2(dy, dx);
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
ctx.setLineDash([ 9 , 15]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(a + 20 * Math.cos(angle) , b + 20 * Math.sin(angle));
|
|
ctx.lineTo(c - 20 * Math.cos(angle), d - 20 * Math.sin(angle));
|
|
ctx.stroke();
|
|
canvas_arrow(ctx, a, b, c, d);
|
|
}
|
|
|
|
function ligneDrible(xa, ya, xb, yb){
|
|
var intervalles = intervalleDroite(xa, ya, xb, yb);
|
|
centreIntervalle(xa, ya, xb, yb, nbIntervalle, intervalles,false);
|
|
}
|
|
|
|
//Fonction permettant de dessiner la tête d'une flèche
|
|
function canvas_arrow(context, fromx, fromy, tox, toy) {
|
|
var headlen = 30; // length of head in pixels
|
|
var dx = tox - fromx;
|
|
context.lineWidth = 2;
|
|
var dy = toy - fromy;
|
|
var angle = Math.atan2(dy, dx);
|
|
context.beginPath();
|
|
context.setLineDash([]);
|
|
context.moveTo(tox - 20 * Math.cos(angle), toy - 20 * Math.sin(angle));
|
|
context.lineTo(tox - 20 * Math.cos(angle) - headlen * Math.cos(angle - Math.PI / 6), toy - 20 * Math.sin(angle) - headlen * Math.sin(angle - Math.PI / 6));
|
|
context.moveTo(tox - 20 * Math.cos(angle), toy - 20 * Math.sin(angle));
|
|
context.lineTo(tox - 20 * Math.cos(angle) - headlen * Math.cos(angle + Math.PI / 6), toy - 20 * Math.sin(angle) - headlen * Math.sin(angle + Math.PI / 6));
|
|
context.stroke();
|
|
}
|
|
|
|
function canvas_arrow2(context, fromx, fromy, tox, toy) {
|
|
var headlen = 30; // length of head in pixels
|
|
context.lineWidth = 2;
|
|
var dx = tox - fromx;
|
|
var dy = toy - fromy;
|
|
var angle = Math.atan2(dy, dx);
|
|
context.setLineDash([]);
|
|
context.moveTo(tox, toy);
|
|
context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
|
|
context.moveTo(tox, toy);
|
|
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
|
|
}
|
|
|
|
function ligne(a,b,c,d){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(a, b);
|
|
ctx.lineTo(c, d);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function ligneappui(a,b,c,d,hi){
|
|
|
|
le_contexte.beginPath();
|
|
if(hi == true){
|
|
ctx.lineWidth = 5;
|
|
}
|
|
else{
|
|
ctx.lineWidth = 2;
|
|
}
|
|
le_contexte.setLineDash([]);
|
|
le_contexte.strokeStyle = document.getElementById("resultatdef").value;
|
|
le_contexte.moveTo(a, b);
|
|
le_contexte.lineTo(c, d);
|
|
le_contexte.stroke();
|
|
}
|
|
|
|
function ligneTir(a,b,c,d){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash([2,5]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(a, b);
|
|
ctx.lineTo(c, d);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// clear the canvas
|
|
function clear() {
|
|
ctx.clearRect(0, 0, WIDTH, HEIGHT);
|
|
}
|
|
|
|
// redraw the scene
|
|
function draw() {
|
|
clear();
|
|
ctx.fillStyle = "#FAF7F8";
|
|
rect(0, 0, WIDTH, HEIGHT);
|
|
faireterrain();
|
|
// redraw each rect in the rects[] array
|
|
if(depdeu.length > 0 && depdeu.length%2 ==0){
|
|
depladeu();
|
|
}
|
|
if(drideu.length > 0 && drideu.length%2 ==0){
|
|
dribdeu();
|
|
}
|
|
if(dribblement.length%4 == 0 && dribblement.length>0){
|
|
dribblage();
|
|
}
|
|
if(currentdep == 1 || deple.length > 0){
|
|
deplacer();
|
|
}
|
|
if(nbzone == 1){
|
|
zoner();
|
|
}
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if(r.setball == true){
|
|
if(r.gottheball){
|
|
r.fill = "green";
|
|
}
|
|
if(r.tiring == true){
|
|
ligneTir(r.x,r.y,lt-lt*0.072, ht/2);
|
|
}
|
|
}
|
|
else{
|
|
r.fill = document.getElementById("resultat").value ;
|
|
}
|
|
ctx.fillStyle = r.fill;
|
|
cercle(r.x,r.y,r.rayon,r.cache,r.taille,r.last,r.fill);
|
|
|
|
}
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.setball == true){
|
|
r.fill = "green";
|
|
}
|
|
tx = r.x + r.rayon*Math.cos(r.angle);
|
|
ty = r.y+ r.rayon *Math.sin(r.angle);
|
|
px = r.x + r.rayon*Math.cos(r.inverse);
|
|
py = r.y+ r.rayon *Math.sin(r.inverse);
|
|
rx = tx + r.rretour *Math.cos(r.rangle);
|
|
ry = ty+ r.rretour *Math.sin(r.rangle);
|
|
ox = px + r.rretour*Math.cos(r.rangle);
|
|
oy = py + r.rretour *Math.sin(r.rangle);
|
|
|
|
ctx.fillStyle = r.fill;
|
|
ligneappui(tx,ty,rx,ry,r.hig);
|
|
ligneappui(px,py,ox,oy,r.hig);
|
|
ligneappui(tx,ty,px,py,r.hig);
|
|
|
|
}
|
|
for (var i = 0; i < jpass.length-1; i=i+2) {
|
|
var r = jpass[i];
|
|
var z = jpass[i+1];
|
|
nbjpass=0;
|
|
fairepasse(r,z);
|
|
}
|
|
for(var i = 0; i < passes.length; i++) {
|
|
var r = passes[i];
|
|
lignePasse(r.x.x,r.x.y,r.x2.x,r.y2.y);
|
|
}
|
|
}
|
|
|
|
|
|
// handle mousedown events
|
|
function myDown(e) {
|
|
|
|
// tell the browser we're handling this mouse event
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// get the current mouse position
|
|
var mx = parseInt(e.clientX - offsetX);
|
|
var my = parseInt(e.clientY - offsetY);
|
|
console.log(mx);
|
|
console.log(my);
|
|
|
|
if(ball == true){
|
|
dragok = false;
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
// if yes, set that rects isDragging=true
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
if (nbball == 0){
|
|
r.setball = true;
|
|
r.gottheball = true;
|
|
nbball = nbball + 1;
|
|
last.push({
|
|
action : 3,
|
|
});
|
|
untoggleDonner();
|
|
}
|
|
else
|
|
window.alert("Un seul ballon sur le terrain");
|
|
ball = false;
|
|
draw();
|
|
}
|
|
}
|
|
untoggleDonner();
|
|
ball = false;
|
|
}
|
|
if(edit == true){
|
|
dragok = false;
|
|
for (var i = 0; i < zone.length; i++) {
|
|
var r = zone[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
// if yes, set that rects isDragging=true
|
|
document.body.style.cursor = 'pointer';
|
|
if(r.hig == true){
|
|
nbhig = nbhig -1;
|
|
r.hig = false;
|
|
if(nbhig == 0){
|
|
UntoggleOutilAppui();
|
|
}
|
|
}
|
|
else{
|
|
nbhig = nbhig+1;
|
|
r.hig = true;
|
|
toggleOutilAppui();
|
|
}
|
|
draw();
|
|
}
|
|
|
|
}
|
|
for (var i = 0; i < deple.length; i++) {
|
|
var r = deple[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
for(var i = 0;i<deple.length/4;i++){
|
|
var r = deple[3+i*4];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
if(r.hig == true){
|
|
r.hig = false;
|
|
UntoggleOutilAppui();
|
|
}
|
|
else{
|
|
r.hig = true;
|
|
if(r.ec)
|
|
toggleOutilAppui();
|
|
}
|
|
|
|
draw();
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < depdeu.length; i++) {
|
|
var r = depdeu[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
for (var i = 0; i < drideu.length; i++) {
|
|
var r = drideu[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < depdeu.length/2; i++) {
|
|
var r = depdeu[1+i*2];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
if(r.hig == true){
|
|
r.hig = false;
|
|
UntoggleOutilAppui();
|
|
}
|
|
else{
|
|
r.hig = true;
|
|
if(r.ec)
|
|
toggleOutilAppui();
|
|
}
|
|
|
|
draw();
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < dribblement.length; i++) {
|
|
var r = dribblement[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if(ecra == true){
|
|
for(h = 0;h< (nbptsdep/4);h++){
|
|
var r = deple[3+h*4];
|
|
if (mx > r.x - 2*r.rayon && mx < r.x + 2*r.rayon && my > r.y - 2*r.rayon && my < r.y + 2*r.rayon) {
|
|
r.ec = true;
|
|
ecra = false;
|
|
untoggleecran();
|
|
draw();
|
|
}
|
|
}
|
|
|
|
for(h = 0;h< (nbdepdeu/2);h++){
|
|
var r = depdeu[1+h*2];
|
|
if (mx > r.x - 2*r.rayon && mx < r.x + 2*r.rayon && my > r.y - 2*r.rayon && my < r.y + 2*r.rayon) {
|
|
r.ec = true;
|
|
ecra = false;
|
|
untoggleecran();
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if(bouge == true){
|
|
if(nbptsdep%4 == 0){
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
deple.push({
|
|
x : joueurs[i].x,
|
|
y: joueurs[i].y,
|
|
edit : false,
|
|
rayon : joueurs[i].rayon,
|
|
jbase : i,
|
|
});
|
|
depdeu.push({
|
|
x : joueurs[i].x,
|
|
y: joueurs[i].y,
|
|
edit : false,
|
|
rayon : joueurs[i].rayon,
|
|
jbase : i,
|
|
});
|
|
r.sedeplace = true,
|
|
nbptsdep = nbptsdep +1;
|
|
nbbase = nbbase+1;
|
|
nbdepdeu = nbdepdeu +1;
|
|
|
|
}
|
|
}
|
|
if(nbbase == 0){
|
|
window.alert("Un deplacement doit partir d'un joueur");
|
|
bouge = false;
|
|
draw();
|
|
untoggleDeplacer();
|
|
}
|
|
}
|
|
|
|
|
|
else{
|
|
g = mx;
|
|
f = my;
|
|
deple.push({
|
|
x : g,
|
|
y : f,
|
|
edit : false,
|
|
rayon : 15,
|
|
isDragging : false,
|
|
ec :false,
|
|
hig : false,
|
|
angle : Math.PI/2,
|
|
inverse : -Math.PI/2,
|
|
});
|
|
depdeu.push({
|
|
x : g,
|
|
y : f,
|
|
edit : false,
|
|
rayon : 15,
|
|
isDragging : false,
|
|
ec : false,
|
|
hig : false,
|
|
angle : Math.PI/2,
|
|
inverse : -Math.PI/2,
|
|
});
|
|
nbdepdeu = nbdepdeu +1;
|
|
|
|
nbptsdep = nbptsdep +1;
|
|
cercle(mx,my,3,0,Math.PI*2,false,"black");
|
|
if(nbptsdep%4 == 0){
|
|
currentdepun = true;
|
|
deplace();
|
|
}
|
|
}
|
|
}
|
|
if(drib == true){
|
|
dragok = false;
|
|
if(nbptsdib%4 == 0){
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
if(r.gottheball){
|
|
document.body.style.cursor = 'pointer';
|
|
dribblement.push({
|
|
x : joueurs[i].x,
|
|
y: joueurs[i].y,
|
|
edit : false,
|
|
rayon : joueurs[i].rayon,
|
|
dbase : i,
|
|
});
|
|
drideu.push({
|
|
x : joueurs[i].x,
|
|
y: joueurs[i].y,
|
|
edit : false,
|
|
rayon : joueurs[i].rayon,
|
|
dbase : i,
|
|
});
|
|
nbdrideu = nbdrideu+1;
|
|
r.dribbb = true,
|
|
nbptsdib = nbptsdib +1;
|
|
nbbased = nbbased+1;
|
|
|
|
}
|
|
if(r.gottheball == false){
|
|
drib = false;
|
|
window.alert("Seul un joueur qui a le ballon peu dribbler");
|
|
draw();
|
|
untoggleDribble();
|
|
|
|
}
|
|
}
|
|
}
|
|
if(nbbased == 0 && drib == true){
|
|
window.alert("Un dribble doit partir d'un joueur");
|
|
drib = false;
|
|
draw();
|
|
untoggleDribble();
|
|
}
|
|
}
|
|
|
|
|
|
else{
|
|
g = mx;
|
|
f = my;
|
|
dribblement.push({
|
|
x : g,
|
|
y : f,
|
|
edit : false,
|
|
rayon : 15,
|
|
isDragging : false,
|
|
});
|
|
drideu.push({
|
|
x : g,
|
|
y : f,
|
|
edit : false,
|
|
rayon : 15,
|
|
isDragging : false,
|
|
});
|
|
nbdrideu = nbdrideu +1;
|
|
nbptsdib = nbptsdib +1;
|
|
cercle(mx,my,3,0,Math.PI*2,false,"black");
|
|
if(nbptsdib%4 == 0){
|
|
dribble();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if(zonable == true){
|
|
if(nbzone == 0){
|
|
g = mx;
|
|
f = my;
|
|
zone.push({
|
|
|
|
x : g,
|
|
y : f,
|
|
edit : false,
|
|
rayon : 15,
|
|
isDragging : false,
|
|
});
|
|
nbpoints=nbpoints+1;
|
|
cercle(g,f,3,0,Math.PI*2,false,"black");
|
|
}
|
|
else{
|
|
window.alert("Une seule zone d'influence sur le terrain");
|
|
zonable = false;
|
|
untogglezone();
|
|
}
|
|
}
|
|
|
|
|
|
if(passable == true ){
|
|
nbclicpass = nbclicpass + 1;
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
// if yes, set that rects isDragging=true
|
|
document.body.style.cursor = 'pointer';
|
|
if (nbjpass % 2 == 0){
|
|
if(r.gottheball == false){
|
|
passable = false;
|
|
nbjpass = 0;
|
|
window.alert("Seulement un joueur qui possede le ballon a un moment peut faire une passe");
|
|
document.body.style.cursor = 'default';
|
|
nbclicpass = 0;
|
|
untogglePasse();
|
|
|
|
}
|
|
else
|
|
{
|
|
dernierpass = i;
|
|
addj(i);
|
|
nbjpass=nbjpass+1;
|
|
}
|
|
}
|
|
else{
|
|
if(i == jpass[jpass.length -1].c){
|
|
window.alert("On ne peut se faire une passe a soit meme");
|
|
passable = false;
|
|
jpass.pop();
|
|
nbclicpass = 0;
|
|
untogglePasse();
|
|
nbjpass = 0;
|
|
}
|
|
else{
|
|
joueurs[dernierpass].gottheball = false;
|
|
r.gottheball = true;
|
|
dernierpass = i;
|
|
|
|
addj(i);
|
|
nbjpass=nbjpass+1;
|
|
}
|
|
}
|
|
if(nbjpass % 2 == 0){
|
|
passable=false;
|
|
nbclicpass = 0;
|
|
untogglePasse();
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
if(nbjpass == 0){
|
|
untogglePasse();
|
|
passable = false;
|
|
nbclicpass = 0;
|
|
|
|
}
|
|
if(nbjpass == 1 && nbclicpass == 2){
|
|
jpass.pop();
|
|
untogglePasse();
|
|
passable = false;
|
|
nbclicpass = 0;
|
|
nbjpass = 0;
|
|
}
|
|
}
|
|
if(tirable == true){
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
if(r.gottheball == true){
|
|
r.setball = true;
|
|
r.tiring = true;
|
|
tirable = false;
|
|
nbtir = nbtir +1;
|
|
|
|
last.push({
|
|
action : 9,
|
|
});
|
|
draw();
|
|
}
|
|
else{
|
|
tirable = false;
|
|
window.alert("Seul un joueur qui a le ballon peut tirer");
|
|
}
|
|
}
|
|
}
|
|
untoggletire();
|
|
}
|
|
|
|
else {
|
|
if(edit == false && drib == false){
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
// if yes, set that rects isDragging=true
|
|
document.body.style.cursor = 'pointer';
|
|
if(drib == false){
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
// if yes, set that rects isDragging=true
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
if(deple.length%4 == 0){
|
|
for(var i = 0;i<deple.length/4;i++){
|
|
var r = deple[3+i*4];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(depdeu%2 == 0){
|
|
for (var i = 0; i < depdeu.length/2; i++) {
|
|
var r = depdeu[1+i*2];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
if(dribblement.length%4 == 0){
|
|
for(var i = 0;i<dribblement.length/4;i++){
|
|
var r = dribblement[3+i*4];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(drideu%2 == 0){
|
|
for (var i = 0; i < drideu.length/2; i++) {
|
|
var r = drideu[1+i*2];
|
|
if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
|
|
document.body.style.cursor = 'pointer';
|
|
dragok = true;
|
|
r.isDragging = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// save the current mouse position
|
|
startX = mx;
|
|
startY = my;
|
|
}
|
|
|
|
|
|
// handle mouseup events
|
|
function myUp(e) {
|
|
// tell the browser we're handling this mouse event
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// clear all the dragging flags
|
|
document.body.style.cursor = 'default';
|
|
dragok = false;
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
joueurs[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
adversaire[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < zone.length; i++) {
|
|
zone[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < deple.length; i++) {
|
|
deple[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < depdeu.length; i++){
|
|
depdeu[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < dribblement.length; i++) {
|
|
dribblement[i].isDragging = false;
|
|
}
|
|
for (var i = 0; i < drideu.length; i++) {
|
|
drideu[i].isDragging = false;
|
|
}
|
|
}
|
|
|
|
|
|
// handle mouse moves
|
|
function myMove(e) {
|
|
|
|
// if we're dragging anything...
|
|
if (dragok) {
|
|
|
|
// tell the browser we're handling this mouse event
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// get the current mouse position
|
|
var mx = parseInt(e.clientX - offsetX);
|
|
var my = parseInt(e.clientY - offsetY);
|
|
|
|
// calculate the distance the mouse has moved
|
|
// since the last mousemove
|
|
var dx = mx - startX;
|
|
var dy = my - startY;
|
|
|
|
// move each rect that isDragging
|
|
// by the distance the mouse has moved
|
|
// since the last mousemove
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if (r.isDragging) {
|
|
r.x += dx;
|
|
r.y += dy;
|
|
if(r.sedeplace == true){
|
|
var a = deple.length/4;
|
|
for(var h = 0;h<a;h++){
|
|
if(deple[h*4].jbase == i){
|
|
deple[h*4].x += dx;
|
|
deple[h*4].y += dy;
|
|
}
|
|
}
|
|
var b = depdeu.length/2;
|
|
for(var h = 0;h<b;h++){
|
|
if(depdeu[h*2].jbase == i){
|
|
depdeu[0+h*2].x += dx;
|
|
depdeu[0+h*2].y += dy;
|
|
}
|
|
}
|
|
}
|
|
if(r.dribbb == true){
|
|
var a = dribblement.length/4;
|
|
for(var h = 0;h<a;h++){
|
|
if(dribblement[h*4].dbase == i){
|
|
dribblement[h*4].x += dx;
|
|
dribblement[h*4].y += dy;
|
|
}
|
|
}
|
|
var b = drideu.length/2;
|
|
for(var h = 0;h<b;h++){
|
|
if(drideu[h*2].dbase == i){
|
|
console.log("ok");
|
|
drideu[0+h*2].x += dx;
|
|
drideu[0+h*2].y += dy;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if (r.isDragging) {
|
|
r.x += dx;
|
|
r.y += dy;
|
|
r.a += dx;
|
|
r.b += dy;
|
|
r.c += dy;
|
|
r.d += dx;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < zone.length; i++) {
|
|
var r = zone[i];
|
|
if (r.isDragging) {
|
|
r.x += dx;
|
|
r.y += dy;
|
|
}
|
|
}
|
|
for (var i = 0; i < deple.length; i++) {
|
|
var r = deple[i];
|
|
if (r.isDragging) {
|
|
if(i%4 != 0){
|
|
r.x += dx;
|
|
r.y += dy;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < depdeu.length; i++) {
|
|
var r = depdeu[i];
|
|
if (r.isDragging) {
|
|
if(i%2 != 0){
|
|
r.x += dx;
|
|
r.y += dy;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < dribblement.length; i++) {
|
|
var r = dribblement[i];
|
|
if (r.isDragging) {
|
|
if(i%4 != 0){
|
|
r.x += dx;
|
|
r.y += dy;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < drideu.length; i++) {
|
|
var r = drideu[i];
|
|
if (r.isDragging) {
|
|
if(i%2 != 0){
|
|
r.x += dx;
|
|
r.y += dy;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// redraw the scene with the new rect positions
|
|
draw();
|
|
|
|
// reset the starting mouse position for the next mousemove
|
|
startX = mx;
|
|
startY = my;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function ajouterjoueur() {
|
|
var c = joueurs.length;
|
|
var nom = '';
|
|
nom = nom.concat(c+1);
|
|
if (joueurs.length >= 5)
|
|
window.alert("Nombre de joueurs maximum atteint");
|
|
else {
|
|
joueurs.push({
|
|
x: 60,
|
|
y: 35 + ((joueurs.length + 1) * 50),
|
|
rayon: taillejoueur,
|
|
cache: 0,
|
|
taille: Math.PI*2,
|
|
last: false,
|
|
nom: nom,
|
|
fill: "red",
|
|
isDragging: false,
|
|
setball : false,
|
|
gottheball : false,
|
|
sedeplace : false,
|
|
tiring : false,
|
|
});
|
|
last.push({
|
|
action : 1,
|
|
});
|
|
if (document.getElementById("resultat").value == null ) {
|
|
cercle(60,35 + (joueurs.length * 50),taillejoueur,0,Math.PI*2,false,"red");
|
|
}
|
|
else
|
|
cercle(60,35 + (joueurs.length * 50),taillejoueur,0,Math.PI*2,false,document.getElementById("resultat").value);
|
|
|
|
}
|
|
}
|
|
|
|
function ajouteradversaire() {
|
|
|
|
if (adversaire.length >= 5)
|
|
window.alert("Nombre d'adversaire maximum atteint");
|
|
else {
|
|
adversaire.push({
|
|
x: 560,
|
|
y: 35 + ((adversaire.length + 1) * 50),
|
|
rayon: tailledefenseur,
|
|
cache: 0,
|
|
taille: Math.PI*2,
|
|
last: false,
|
|
fill: "black",
|
|
isDragging: false,
|
|
setball : false,
|
|
hig : false,
|
|
a : 560,
|
|
b : 35 + (((adversaire.length + 1)* 50)),
|
|
angle : Math.PI/2,
|
|
inverse : -Math.PI/2,
|
|
rretour : 13,
|
|
rangle : 2 * Math.PI,
|
|
});
|
|
last.push({
|
|
action : 2,
|
|
});
|
|
ligneappui(560,35 + (adversaire.length * 50)+tailledefenseur,560+13,35 + (adversaire.length * 50)+tailledefenseur);
|
|
ligneappui(560,35 + (adversaire.length * 50)-tailledefenseur,560+13,35 + (adversaire.length * 50)-tailledefenseur);
|
|
tx = 560 + tailledefenseur*Math.cos(Math.PI/2);
|
|
ty = 35 + (adversaire.length * 50)+ tailledefenseur *Math.sin(Math.PI/2);
|
|
px = 560 + tailledefenseur*Math.cos((-Math.PI/2));
|
|
py = 35 + (adversaire.length * 50)+ tailledefenseur *Math.sin((-Math.PI/2));
|
|
ligneappui(px,py,tx,ty,false);
|
|
|
|
}
|
|
}
|
|
|
|
function fairepasse(a,b) {
|
|
|
|
passes.push({
|
|
x: joueurs[a.c],
|
|
y: joueurs[a.c],
|
|
x2 : joueurs[b.c],
|
|
y2 : joueurs[b.c],
|
|
dep : a.c,
|
|
arr : b.c,
|
|
|
|
});
|
|
|
|
jpass.pop();
|
|
jpass.pop();
|
|
last.push({
|
|
action : 5,
|
|
depart : a.c,
|
|
arrivé : b.c,
|
|
});
|
|
lignePasse(joueurs[a.c].x,joueurs[a.c].y,joueurs[b.c].x,joueurs[b.c].y);
|
|
;
|
|
}
|
|
|
|
|
|
function faireterrain() {
|
|
ctx.lineWidth="5";
|
|
|
|
|
|
//Bordures du terrain
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.rect(0, 0, lt, ht);
|
|
ctx.fillStyle=document.getElementById("resultatter").value;
|
|
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.lineWidth="2";
|
|
|
|
//Cercle central
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt/2, ht/2, lt*0.064, 0, Math.PI*2, false);
|
|
ctx.fillStyle= document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
//Ligne centrale
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt/2, ht);
|
|
ctx.lineTo(lt/2, 0);
|
|
ctx.stroke();
|
|
|
|
/* RAQUETTES */
|
|
//Rectangle raquette gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.rect(0, ht/3, lt*0.208, ht/3);
|
|
ctx.fillStyle= document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
//Rectangle raquette droite
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.rect(lt-lt*0.208, ht/3, lt-lt*0.208, ht/3);
|
|
ctx.fillStyle= document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
//Cercle raquette gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt*0.208, ht/2, lt*0.064, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
ctx.fillStyle= document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
//Cercle raquette droite
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt-(lt*0.208), ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
ctx.fillStyle= document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
|
|
/* LIGNES LANCERS FRANCS */
|
|
//Ligne lf 1 gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(0, 0.06*ht);
|
|
ctx.lineTo(lt*0.075, 0.06*ht);
|
|
ctx.stroke();
|
|
|
|
//Ligne lf 2 gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(0, 0.94*ht);
|
|
ctx.lineTo(lt*0.075, 0.94*ht);
|
|
ctx.stroke();
|
|
|
|
// Cercle lf gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt*0.063, ht/2, ht*0.44, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
ctx.stroke();
|
|
|
|
|
|
//Ligne lf 1 droite
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt, 0.06*ht);
|
|
ctx.lineTo(lt*0.925, 0.06*ht);
|
|
ctx.stroke();
|
|
|
|
//Ligne lf 2 droite
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt, 0.94*ht);
|
|
ctx.lineTo(lt*0.925, 0.94*ht);
|
|
ctx.stroke();
|
|
|
|
//Cercle lf droite
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt*0.937, ht/2, lt*0.236, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
/* PANIERS */
|
|
//Cercle panier gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt*0.063, ht/2, ht*0.083, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
ctx.fillStyle=document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
//Panier gauche
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt*0.06, ht*0.44);
|
|
ctx.lineTo(lt*0.06, ht*0.56);
|
|
ctx.fillStyle=document.getElementById("resultatinter").value;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt*0.06, ht/2);
|
|
ctx.lineTo(lt*0.067, ht/2);
|
|
ctx.stroke();
|
|
|
|
|
|
//Cercle panier droit
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt-lt*0.063, ht/2, ht*0.083, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
ctx.stroke();
|
|
|
|
//Panier droit
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt-lt*0.06, ht-ht*0.44);
|
|
ctx.lineTo(lt-lt*0.06, ht-ht*0.56);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.arc(lt-lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle ="black";
|
|
ctx.moveTo(lt-lt*0.06, ht-ht/2);
|
|
ctx.lineTo(lt-lt*0.067, ht-ht/2);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function zoner(){
|
|
if(edit == true){
|
|
le_contexte.beginPath();
|
|
le_contexte.fillStyle = "rgb("+r5+","+g5+","+b5+",0.3)";
|
|
le_contexte.strokeStyle = "rgb(255,0,0)";
|
|
cercleedit(zone[0].x,zone[0].y,15,0,Math.PI*2,"rgba(128,128,128,0.3)");
|
|
for (j = 1; j< nbpoints;j++){
|
|
cercleedit(zone[j].x,zone[j].y,15,0,Math.PI*2,"rgba(128,128,128,0.3)");
|
|
}
|
|
le_contexte.moveTo(zone[0].x, zone[0].y);
|
|
for (i = 1; i< nbpoints;i++){
|
|
le_contexte.lineTo(zone[i].x, zone[i].y);
|
|
}
|
|
le_contexte.lineTo(zone[0].x, zone[0].y);
|
|
le_contexte.fill();
|
|
le_contexte.stroke();
|
|
|
|
|
|
}
|
|
else{
|
|
le_contexte.beginPath();
|
|
le_contexte.fillStyle = "rgb("+r5+","+g5+","+b5+",0.3)";
|
|
le_contexte.strokeStyle = "rgb(255,0,0)";
|
|
le_contexte.moveTo(zone[0].x, zone[0].y);
|
|
for (i = 1; i< nbpoints;i++)
|
|
le_contexte.lineTo(zone[i].x, zone[i].y);
|
|
le_contexte.lineTo(zone[0].x, zone[0].y);
|
|
le_contexte.fill();
|
|
le_contexte.stroke();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function deplacer(){
|
|
le_contexte.beginPath();
|
|
le_contexte.strokeStyle = "black";
|
|
if ( edit == true){
|
|
for(i = 0;i< (nbptsdep/4);i++){
|
|
for(j=1;j<4;j++){
|
|
cercleedit(deple[j+i*4].x,deple[j+i*4].y,15,0,Math.PI*2,"rgba(128,128,128,0.9)");
|
|
}
|
|
for(h = 0;h< (nbptsdep/4);h++){
|
|
le_contexte.moveTo(deple[0+h*4].x,deple[0+h*4].y);
|
|
le_contexte.bezierCurveTo(deple[1+h*4].x,deple[1+h*4].y,deple[2+h*4].x,deple[2+h*4].y,deple[3+h*4].x,deple[3+h*4].y);
|
|
if(deple[3+h*4].ec == false){
|
|
canvas_arrow2(le_contexte, deple[2+h*4].x, deple[2+h*4].y, deple[3+h*4].x, deple[3+h*4].y);
|
|
}
|
|
else{
|
|
le_contexte.moveTo(deple[0+h*4].x,deple[0+h*4].y);
|
|
le_contexte.bezierCurveTo(deple[1+h*4].x,deple[1+h*4].y,deple[2+h*4].x,deple[2+h*4].y,deple[3+h*4].x,deple[3+h*4].y);
|
|
a = deple[3+h*4].x + deple[3+h*4].rayon*Math.cos(deple[3+h*4].angle);
|
|
b = deple[3+h*4].y + deple[3+h*4].rayon*Math.sin(deple[3+h*4].angle);
|
|
c = deple[3+h*4].x + deple[3+h*4].rayon*Math.cos(deple[3+h*4].inverse);
|
|
d = deple[3+h*4].y + deple[3+h*4].rayon*Math.sin(deple[3+h*4].inverse);
|
|
|
|
if(deple[3+h*4].hig == true){
|
|
ctx.lineWidth = 5;
|
|
}
|
|
else{
|
|
ctx.lineWidth = 2;
|
|
}
|
|
le_contexte.setLineDash([]);
|
|
le_contexte.strokeStyle ="black";
|
|
le_contexte.moveTo(a, b);
|
|
le_contexte.lineTo(c, d);
|
|
le_contexte.stroke();
|
|
}
|
|
}
|
|
}
|
|
le_contexte.stroke();
|
|
}
|
|
else{
|
|
if(deple.length > 0 && deple.length %4 == 0){
|
|
le_contexte.beginPath();
|
|
le_contexte.strokeStyle = "black";
|
|
for(i = 0;i< (nbptsdep/4);i++){
|
|
if(deple[3+i*4].ec == false){
|
|
le_contexte.moveTo(deple[0+i*4].x,deple[0+i*4].y);
|
|
le_contexte.bezierCurveTo(deple[1+i*4].x,deple[1+i*4].y,deple[2+i*4].x,deple[2+i*4].y,deple[3+i*4].x,deple[3+i*4].y);
|
|
canvas_arrow2(le_contexte, deple[2+i*4].x, deple[2+i*4].y, deple[3+i*4].x, deple[3+i*4].y);
|
|
}
|
|
else{
|
|
le_contexte.moveTo(deple[0+i*4].x,deple[0+i*4].y);
|
|
le_contexte.bezierCurveTo(deple[1+i*4].x,deple[1+i*4].y,deple[2+i*4].x,deple[2+i*4].y,deple[3+i*4].x,deple[3+i*4].y);
|
|
a = deple[3+i*4].x + deple[3+i*4].rayon*Math.cos(deple[3+i*4].angle);
|
|
b = deple[3+i*4].y + deple[3+i*4].rayon*Math.sin(deple[3+i*4].angle);
|
|
c = deple[3+i*4].x + deple[3+i*4].rayon*Math.cos(deple[3+i*4].inverse);
|
|
d = deple[3+i*4].y + deple[3+i*4].rayon*Math.sin(deple[3+i*4].inverse);
|
|
if(deple[3+i*4].hig == true){
|
|
le_contexte.lineWidth = 5;
|
|
}
|
|
else{
|
|
le_contexte.lineWidth = 2;
|
|
}
|
|
le_contexte.setLineDash([]);
|
|
le_contexte.strokeStyle ="black";
|
|
le_contexte.moveTo(a, b);
|
|
le_contexte.lineTo(c, d);
|
|
le_contexte.stroke();
|
|
}
|
|
|
|
}
|
|
ctx.stroke();
|
|
le_contexte.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
function depladeu(){
|
|
le_contexte.beginPath();
|
|
le_contexte.strokeStyle = "black";
|
|
if(edit == true){
|
|
for(i = 0; i< (nbdepdeu/2);i++){
|
|
cercleedit(depdeu[1+i*2].x,depdeu[1+i*2].y,15,0,Math.PI*2,"rgba(128,128,128,0.9)");
|
|
if(depdeu[1+i*2].ec == false){
|
|
le_contexte.moveTo(depdeu[0+i*2].x,depdeu[0+i*2].y);
|
|
le_contexte.lineTo(depdeu[1+i*2].x,depdeu[1+i*2].y);
|
|
canvas_arrow2(le_contexte, depdeu[0+i*2].x, depdeu[0+i*2].y, depdeu[1+i*2].x, depdeu[1+i*2].y);
|
|
}
|
|
else{
|
|
le_contexte.moveTo(depdeu[0+i*2].x,depdeu[0+i*2].y);
|
|
le_contexte.lineTo(depdeu[1+i*2].x,depdeu[1+i*2].y);
|
|
a = depdeu[1+i*2].x + depdeu[1+i*2].rayon*Math.cos(depdeu[1+i*2].angle);
|
|
b = depdeu[1+i*2].y + depdeu[1+i*2].rayon*Math.sin(depdeu[1+i*2].angle);
|
|
c = depdeu[1+i*2].x + depdeu[1+i*2].rayon*Math.cos(depdeu[1+i*2].inverse);
|
|
d = depdeu[1+i*2].y + depdeu[1+i*2].rayon*Math.sin(depdeu[1+i*2].inverse);
|
|
if(depdeu[1+i*2].hig == true){
|
|
le_contexte.lineWidth = 5;
|
|
}
|
|
else{
|
|
le_contexte.lineWidth = 2;
|
|
}
|
|
le_contexte.setLineDash([]);
|
|
le_contexte.strokeStyle ="black";
|
|
le_contexte.moveTo(a, b);
|
|
le_contexte.lineTo(c, d);
|
|
le_contexte.stroke();
|
|
}
|
|
}
|
|
le_contexte.stroke();
|
|
}
|
|
else{
|
|
for(i = 0; i< (nbdepdeu/2);i++){
|
|
if(depdeu[1+i*2].ec == false){
|
|
le_contexte.moveTo(depdeu[0+i*2].x,depdeu[0+i*2].y);
|
|
le_contexte.lineTo(depdeu[1+i*2].x,depdeu[1+i*2].y);
|
|
canvas_arrow2(le_contexte, depdeu[0+i*2].x, depdeu[0+i*2].y, depdeu[1+i*2].x, depdeu[1+i*2].y);
|
|
}
|
|
else{
|
|
le_contexte.moveTo(depdeu[0+i*2].x,depdeu[0+i*2].y);
|
|
le_contexte.lineTo(depdeu[1+i*2].x,depdeu[1+i*2].y);
|
|
a = depdeu[1+i*2].x + depdeu[1+i*2].rayon*Math.cos(depdeu[1+i*2].angle);
|
|
b = depdeu[1+i*2].y + depdeu[1+i*2].rayon*Math.sin(depdeu[1+i*2].angle);
|
|
c = depdeu[1+i*2].x + depdeu[1+i*2].rayon*Math.cos(depdeu[1+i*2].inverse);
|
|
d = depdeu[1+i*2].y + depdeu[1+i*2].rayon*Math.sin(depdeu[1+i*2].inverse);
|
|
if(depdeu[1+i*2].hig == true){
|
|
le_contexte.lineWidth = 5;
|
|
}
|
|
else{
|
|
le_contexte.lineWidth = 2;
|
|
}
|
|
le_contexte.setLineDash([]);
|
|
le_contexte.strokeStyle ="black";
|
|
le_contexte.moveTo(a, b);
|
|
le_contexte.lineTo(c, d);
|
|
le_contexte.stroke();
|
|
}
|
|
}
|
|
le_contexte.stroke();
|
|
|
|
}
|
|
}
|
|
|
|
function dribdeu(){
|
|
le_contexte.beginPath();
|
|
le_contexte.strokeStyle = "black";
|
|
if(edit == true){
|
|
for(i = 0; i< (nbdrideu/2);i++){
|
|
cercleedit(drideu[1+i*2].x,drideu[1+i*2].y,15,0,Math.PI*2,"rgba(128,128,128,0.9)");
|
|
ligneDrible(drideu[0+i*2].x, drideu[0+i*2].y, drideu[1+i*2].x, drideu[1+i*2].y);
|
|
canvas_arrow2(le_contexte, drideu[0+i*2].x, drideu[0+i*2].y, drideu[1+i*2].x, drideu[1+i*2].y);
|
|
|
|
}
|
|
le_contexte.stroke();
|
|
}
|
|
else{
|
|
for(i = 0; i< (nbdrideu/2);i++){
|
|
ligneDrible(drideu[0+i*2].x, drideu[0+i*2].y, drideu[1+i*2].x, drideu[1+i*2].y);
|
|
canvas_arrow2(le_contexte, drideu[0+i*2].x, drideu[0+i*2].y, drideu[1+i*2].x, drideu[1+i*2].y);
|
|
|
|
}
|
|
le_contexte.stroke();
|
|
|
|
}
|
|
}
|
|
|
|
function dribblage(){
|
|
if ( edit == true){
|
|
le_contexte.beginPath();
|
|
le_contexte.strokeStyle = "black";
|
|
for(k = 0;k< (nbptsdib/4);k++){
|
|
for(j=1;j<4;j++){
|
|
cercleedit(dribblement[j+k*4].x,dribblement[j+k*4].y,15,0,Math.PI*2,"rgba(128,128,128,0.9)");
|
|
}
|
|
for(i = 0;i< (nbptsdib/4);i++){
|
|
le_contexte.moveTo(dribblement[0+i*4].x,dribblement[0+i*4].y);
|
|
var coord = getBezierXY(0.05,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
centreIntervalle(dribblement[0+i*4].x,dribblement[0+i*4].y,coord.x,coord.y,nbIntervalle,intervalleDroite(dribblement[0+i*4].x,dribblement[0+i*4].y,coord.x,coord.y),true);
|
|
for(var fd = 0.05; fd < 0.95; fd = fd +0.05){
|
|
var coord = getBezierXY(fd,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
var coord1 = getBezierXY(fd+0.05,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
centreIntervalle(coord.x,coord.y,coord1.x,coord1.y,nbIntervalle,intervalleDroite(coord.x,coord.y,coord1.x,coord1.y),true);
|
|
}
|
|
var coord19 = getBezierXY(0.98,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
le_contexte.lineTo(dribblement[3+i*4].x,dribblement[3+i*4].y);
|
|
canvas_arrow2(le_contexte, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
}
|
|
}
|
|
le_contexte.stroke();
|
|
}
|
|
else{
|
|
if(dribblement.length > 0 && dribblement.length %4 == 0){
|
|
le_contexte.strokeStyle = "black";
|
|
for(i = 0;i< (nbptsdib/4);i++){
|
|
le_contexte.moveTo(dribblement[0+i*4].x,dribblement[0+i*4].y);
|
|
var coord = getBezierXY(0.05,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
centreIntervalle(dribblement[0+i*4].x,dribblement[0+i*4].y,coord.x,coord.y,nbIntervalle,intervalleDroite(dribblement[0+i*4].x,dribblement[0+i*4].y,coord.x,coord.y),true);
|
|
for(var fd = 0.05; fd < 0.95; fd = fd +0.05){
|
|
var coord = getBezierXY(fd,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
var coord1 = getBezierXY(fd+0.05,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
centreIntervalle(coord.x,coord.y,coord1.x,coord1.y,nbIntervalle,intervalleDroite(coord.x,coord.y,coord1.x,coord1.y),true);
|
|
}
|
|
var coord19 = getBezierXY(0.98,dribblement[0+i*4].x, dribblement[0+i*4].y, dribblement[1+i*4].x,dribblement[1+i*4].y, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
le_contexte.lineTo(dribblement[3+i*4].x,dribblement[3+i*4].y);
|
|
canvas_arrow2(le_contexte, dribblement[2+i*4].x, dribblement[2+i*4].y, dribblement[3+i*4].x, dribblement[3+i*4].y);
|
|
|
|
}
|
|
le_contexte.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
function triggerdonnerlaballe(){
|
|
if(ball == true){
|
|
ball = false;
|
|
untoggleDonner();
|
|
}else{
|
|
toggleDonner();
|
|
ball = true;
|
|
}
|
|
}
|
|
|
|
function triggerfairepasse(){
|
|
if(joueurs.length < 2){
|
|
window.alert("On ne peut faire une passe si on a pas 2 joueurs");
|
|
return;
|
|
}
|
|
if(passable == true){
|
|
passable = false;
|
|
untogglePasse();
|
|
return;
|
|
}
|
|
if(passable == false && joueurs.length >= 2){
|
|
togglePasse();
|
|
passable = true;
|
|
return;
|
|
|
|
}
|
|
}
|
|
|
|
function addj(a){
|
|
jpass.push({
|
|
c : a,
|
|
});
|
|
}
|
|
|
|
function retourarriere(){
|
|
|
|
x = last.length;
|
|
if(x == 0){
|
|
window.alert("Vous ne pouvez revenir en arriere")
|
|
}
|
|
else{
|
|
if(last[x-1].action == 1){
|
|
joueurs.pop();
|
|
last.pop();
|
|
draw();
|
|
}
|
|
if(last[x-1].action == 2){
|
|
adversaire.pop();
|
|
last.pop();
|
|
draw();
|
|
}
|
|
if(last[x-1].action == 3){
|
|
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if(r.setball == true){
|
|
r.setball = false;
|
|
r.gottheball = false;
|
|
nbball = nbball - 1;
|
|
last.pop();
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
|
|
if(last[x-1].action == 4){
|
|
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.setball = true){
|
|
r.setball = false;
|
|
nbball = nbball - 1;
|
|
last.pop();
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
if(last[x-1].action == 5){
|
|
joueurs[last[x-1].arrivé].gottheball = false;
|
|
joueurs[last[x-1].depart].gottheball = true;
|
|
last.pop();
|
|
passes.pop();
|
|
draw();
|
|
|
|
}
|
|
if(last[x-1].action == 6){
|
|
while(zone.length != 0){
|
|
zone.pop();
|
|
}
|
|
nbzone = 0;
|
|
nbpoints = 0;
|
|
last.pop();
|
|
draw();
|
|
|
|
}
|
|
|
|
if(last[x-1].action == 7){
|
|
for(i = 0; i< 4;i++){
|
|
deple.pop();
|
|
}
|
|
nbptsdep = nbptsdep -4;
|
|
last.pop();
|
|
draw();
|
|
|
|
}
|
|
|
|
if(last[x-1].action == 8){
|
|
for(i = 0; i< 4;i++){
|
|
dribblement.pop();
|
|
}
|
|
nbptsdib = nbptsdib -4;
|
|
last.pop();
|
|
nbdrib = nbdrib -1;
|
|
draw();
|
|
|
|
}
|
|
|
|
if(last[x-1].action == 9){
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
r.tiring = false;
|
|
}
|
|
nbtir = nbtir-1;
|
|
last.pop();
|
|
draw();
|
|
|
|
}
|
|
|
|
if(last[x-1].action == 10){
|
|
for(i =0; i<2;i++){
|
|
depdeu.pop();
|
|
}
|
|
nbdepdeu = nbdepdeu-2;
|
|
last.pop();
|
|
draw();
|
|
|
|
}
|
|
|
|
if(last[x-1].action == 11){
|
|
for(i =0; i<2;i++){
|
|
drideu.pop();
|
|
}
|
|
nbdrideu = nbdrideu-2;
|
|
last.pop();
|
|
draw();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function influer(){
|
|
if(zonable == true){
|
|
untogglezone();
|
|
zonable = false;
|
|
if(zonable == false && nbpoints > 2 && nbzone == 0){
|
|
nbzone = 1;
|
|
last.push({
|
|
action : 6,
|
|
});
|
|
draw();
|
|
}
|
|
}
|
|
else{
|
|
zonable = true ;
|
|
togglezone();
|
|
}
|
|
}
|
|
|
|
function editer(){
|
|
if(edit == false){
|
|
edit = true;
|
|
draw();
|
|
toggleediter();
|
|
}
|
|
else{
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
adversaire[i].hig = false;
|
|
}
|
|
for (var i = 0;i<deple.length/4;i++){
|
|
deple[3+i*4].hig = false;
|
|
}
|
|
for (var i = 0;i<depdeu.length/2;i++){
|
|
depdeu[1+i*2].hig = false;
|
|
}
|
|
nbhig =0;
|
|
edit = false;
|
|
draw();
|
|
untoggleediter();
|
|
UntoggleOutilAppui();
|
|
}
|
|
}
|
|
|
|
|
|
function deplace(){
|
|
if(bouge == false){
|
|
bouge = true;
|
|
toggleDeplacer();
|
|
draw();
|
|
}
|
|
else{
|
|
bouge = false;
|
|
untoggleDeplacer();
|
|
if(nbptsdep >3 && currentdepun == true){
|
|
for(j = 0;j<4;j++){
|
|
depdeu.pop();
|
|
}
|
|
nbdepdeu = nbdepdeu -4;
|
|
currentdep = 1;
|
|
last.push({
|
|
action : 7,
|
|
});
|
|
draw();
|
|
usabledep = true;
|
|
currentdepun = false;
|
|
}
|
|
if(nbdepdeu%2 == 0){
|
|
while(deple.length%4 !=0){
|
|
deple.pop();
|
|
}
|
|
while(nbptsdep%4 !=0){
|
|
nbptsdep = nbptsdep-1;
|
|
}
|
|
last.push({
|
|
action : 10,
|
|
});
|
|
draw();
|
|
usabledep = true;
|
|
|
|
}
|
|
if(nbptsdep < 3 && nbdepdeu != 2 && !usabledep){
|
|
window.alert("Il vous faut 4 points pour se deplacer en courbe ou 2 pour une ligne")
|
|
while(deple.length%4 !=0){
|
|
deple.pop();
|
|
}
|
|
nbdepdeu == 0;
|
|
while(depdeu.length%4 !=0){
|
|
depdeu.pop();
|
|
}
|
|
nbptsdep = 0;
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function dribble(){
|
|
if(drib == false){
|
|
drib = true;
|
|
toggleDribble();
|
|
draw();
|
|
}
|
|
else{
|
|
drib = false;
|
|
untoggleDribble();
|
|
|
|
if(nbptsdib >3){
|
|
for(j = 0;j<4;j++){
|
|
drideu.pop();
|
|
}
|
|
last.push({
|
|
action : 8,
|
|
});
|
|
nbdrib = nbdrib +1;
|
|
draw();
|
|
|
|
}
|
|
if(nbdrideu%2 == 0 && nbdrib == 0){
|
|
while(dribblement.length%4 !=0){
|
|
dribblement.pop();
|
|
}
|
|
while(nbdrib%4 !=0){
|
|
nbdrib = nbdrib-1;
|
|
}
|
|
last.push({
|
|
action : 11,
|
|
});
|
|
draw();
|
|
usabledep = true;
|
|
|
|
}
|
|
if(nbptsdib < 3 && nbdrideu != 2 && !usabledep){
|
|
window.alert("Il vous faut 4 points pour dribbler en courbe ou 2 pour une ligne")
|
|
while(dribblement.length%4 !=0){
|
|
dribblement.pop();
|
|
}
|
|
nbdrideu == 0;
|
|
while(drideu.length%4 !=0){
|
|
drideu.pop();
|
|
}
|
|
nbptsdib = 0;
|
|
draw();
|
|
}
|
|
}
|
|
}
|
|
|
|
function tire(){
|
|
if(tirable == false){
|
|
if(nbtir >0){
|
|
window.alert("Un tir maximum par schéma");
|
|
untoggletire();
|
|
}
|
|
else{
|
|
tirable = true;
|
|
toggletire();
|
|
}
|
|
}
|
|
else{
|
|
tirable = false;
|
|
untoggletire();
|
|
}
|
|
|
|
}
|
|
|
|
function tournergauche(){
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.hig){
|
|
r.angle = r.angle - Math.PI/10;
|
|
r.inverse = r.inverse - Math.PI/10;
|
|
r.rangle = r.rangle - Math.PI/10;
|
|
}
|
|
}
|
|
for (var i = 0;i<deple.length/4;i++){
|
|
var r = deple[3+i*4];
|
|
if(r.hig){
|
|
r.angle = r.angle - Math.PI/10;
|
|
r.inverse = r.inverse - Math.PI/10;
|
|
r.rangle = r.rangle - Math.PI/10;
|
|
}
|
|
}
|
|
|
|
for (var i = 0;i<depdeu.length/2;i++){
|
|
var r = depdeu[1+i*2];
|
|
if(r.hig){
|
|
r.angle = r.angle - Math.PI/10;
|
|
r.inverse = r.inverse - Math.PI/10;
|
|
r.rangle = r.rangle - Math.PI/10;
|
|
}
|
|
}
|
|
draw();
|
|
}
|
|
|
|
function tournerdroite(){
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.hig){
|
|
r.angle = r.angle + Math.PI/10;
|
|
r.inverse = r.inverse + Math.PI/10;
|
|
r.rangle = r.rangle + Math.PI/10;
|
|
}
|
|
}
|
|
for (var i = 0;i<deple.length/4;i++){
|
|
var r = deple[3+i*4];
|
|
if(r.hig){
|
|
r.angle = r.angle + Math.PI/10;
|
|
r.inverse = r.inverse + Math.PI/10;
|
|
r.rangle = r.rangle + Math.PI/10;
|
|
}
|
|
}
|
|
|
|
for (var i = 0;i<depdeu.length/2;i++){
|
|
var r = depdeu[1+i*2];
|
|
if(r.hig){
|
|
r.angle = r.angle + Math.PI/10;
|
|
r.inverse = r.inverse + Math.PI/10;
|
|
r.rangle = r.rangle + Math.PI/10;
|
|
}
|
|
}
|
|
draw();
|
|
}
|
|
|
|
function showData (form) {
|
|
var showData= document.getElementById("myTextBox");
|
|
x = showData.value * (Math.PI/180);
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.hig){
|
|
r.angle = x;
|
|
r.inverse = Math.PI +x;
|
|
r.rangle = x - Math.PI/2;
|
|
}
|
|
}
|
|
for (var i = 0; i < deple.length/4; i++) {
|
|
var r = deple[3+i*4];
|
|
if(r.hig){
|
|
r.angle = x;
|
|
r.inverse = Math.PI +x;
|
|
r.rangle = x - Math.PI/2;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < depdeu.length/2; i++) {
|
|
var r = depdeu[1+i*2];
|
|
if(r.hig){
|
|
r.angle = x;
|
|
r.inverse = Math.PI +x;
|
|
r.rangle = x - Math.PI/2;
|
|
}
|
|
}
|
|
draw();
|
|
}
|
|
|
|
function nextStep(){
|
|
for(var i = 0;i < joueurs.length;i++){
|
|
console.log("zaeaz");
|
|
var r = joueurs[i];
|
|
for(var t =0 ; t< deple.length/4;t++){
|
|
if(deple[0+t*4].jbase == i){
|
|
r.x = deple[3+t*4].x;
|
|
r.y = deple[3+t*4].y;
|
|
deple.splice(0+t*4);
|
|
deple.splice(1+t*4);
|
|
deple.splice(2+t*4);
|
|
deple.splice(3+t*4);
|
|
nbptsdep = nbptsdep-4;
|
|
}
|
|
}
|
|
for(var t =0 ; t< depdeu.length/2;t++){
|
|
if(depdeu[0+t*2].jbase == i){
|
|
r.x = depdeu[1+t*2].x;
|
|
r.y = depdeu[1+t*2].y;
|
|
depdeu.splice(0+t*2);
|
|
depdeu.splice(1+t*2);
|
|
nbdepdeu = nbdepdeu-2;
|
|
}
|
|
}
|
|
for(var t =0 ; t< dribblement.length/4;t++){
|
|
if(dribblement[0+t*4].dbase == i){
|
|
r.x = dribblement[3+t*4].x;
|
|
r.y = dribblement[3+t*4].y;
|
|
dribblement.splice(0+t*4);
|
|
dribblement.splice(1+t*4);
|
|
dribblement.splice(2+t*4);
|
|
dribblement.splice(3+t*4);
|
|
nbptsdib = nbptsdib-4;
|
|
}
|
|
}
|
|
for(var t =0 ; t< drideu.length/2;t++){
|
|
if(drideu[0+t*2].dbase == i){
|
|
r.x = drideu[1+t*2].x;
|
|
r.y = drideu[1+t*2].y;
|
|
drideu.splice(0+t*2);
|
|
drideu.splice(1+t*2);
|
|
nbdrideu = nbdrideu-2;
|
|
}
|
|
}
|
|
|
|
if(r.gottheball == true){
|
|
r.setball = true;
|
|
}
|
|
else{
|
|
r.setball = false;
|
|
}
|
|
}
|
|
for(var t = 0; t< passes.length+1;t++){
|
|
passes.pop();
|
|
}
|
|
console.log(joueurs);
|
|
draw();
|
|
|
|
}
|
|
|
|
function centreIntervalle(xa, ya, xb, yb, nbIntervalle, intervalles,abon) {
|
|
// Tableau des coordonnées des points étant au centre de chaque intervalle :
|
|
centreI = [];
|
|
|
|
let tailleTab = intervalles.length;
|
|
//console.log("Emplacement [0] : ", intervalles[0]);
|
|
|
|
//Calcul de chaque distance B - Intervalle :
|
|
for(let i = 0; i < tailleTab; i = i + 4) {
|
|
let dist1 = Math.sqrt(Math.pow((intervalles[i] - xb), 2) + Math.pow((intervalles[i + 1] - yb), 2));
|
|
let dist2 = Math.sqrt(Math.pow((intervalles[i + 2] - xb), 2) + Math.pow((intervalles[i + 3] - yb), 2));
|
|
if(dist1 < dist2) {
|
|
centreI.push(intervalles[i], intervalles[i + 1]);
|
|
}
|
|
if(dist2 < dist1) {
|
|
centreI.push(intervalles[i + 2], intervalles[i + 3]);
|
|
}
|
|
}
|
|
let tailleTab2 = centreI.length;
|
|
|
|
pointsATracer = [];
|
|
|
|
let aab = (ya - yb)/(xa - xb);
|
|
|
|
// cas où les points ont la même ordonnée
|
|
if (aab == 0){
|
|
aab = 0.001;
|
|
}
|
|
|
|
//coefficient directeur de DE :
|
|
let ade = -1/aab;
|
|
|
|
// Distance entre C et E :
|
|
let CE = 8;
|
|
|
|
for(let i = 0; i <= tailleTab2; i = i + 2) {
|
|
if(i == 0) {
|
|
//Coordonnées de C, milieu de l'intervalle :
|
|
var xc = (xa + centreI[0])/2;
|
|
var yc = (ya + centreI[1])/2;
|
|
}
|
|
|
|
if(i > 0) {
|
|
//Coordonnées de C, milieu de l'intervalle :
|
|
var xc = (centreI[i - 2] + centreI[i])/2;
|
|
var yc = (centreI[i - 1] + centreI[i + 1])/2;
|
|
}
|
|
|
|
if(i == tailleTab2) {
|
|
//Coordonnées de C, milieu de l'intervalle :
|
|
var xc = (centreI[i - 2] + xb)/2;
|
|
var yc = (centreI[i - 1] + yb)/2;
|
|
}
|
|
|
|
// Ordonnée à l'origine de DE :
|
|
var bde = yc - ade*xc;
|
|
|
|
let A = (1 + Math.pow(ade, 2));
|
|
let B = (2*ade*bde - 2*ade*yc - 2*xc);
|
|
let C = (Math.pow(xc, 2) + Math.pow(bde, 2) + Math.pow(yc, 2) - 2*bde*yc - Math.pow(CE, 2));
|
|
|
|
// Delta :
|
|
let D = (Math.pow(B, 2) - 4*A*C);
|
|
|
|
// Abscisses de E et de D :
|
|
let xe = (-B + Math.sqrt(D))/(2*A);
|
|
let xd = (-B - Math.sqrt(D))/(2*A);
|
|
|
|
// Ordonnées de E et de D :
|
|
let ye = ade*xe + bde;
|
|
let yd = ade*xd + bde;
|
|
|
|
pointsATracer.push(xd, yd, xe, ye);
|
|
|
|
}
|
|
|
|
let taillePointsATracer = pointsATracer.length;
|
|
let tailleCentreI = centreI.length;
|
|
ctx.beginPath();
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle = "black";
|
|
|
|
ctx.moveTo(xa, ya);
|
|
ctx.lineTo(pointsATracer[0], pointsATracer[1]);
|
|
|
|
|
|
if(abon){
|
|
for(let i = 0; i <= taillePointsATracer - 8; i = i + 8) {
|
|
ctx.moveTo(pointsATracer[i], pointsATracer[i + 1]);
|
|
ctx.lineTo(pointsATracer[i + 6], pointsATracer[i + 7]);
|
|
ctx.moveTo(pointsATracer[i + 6], pointsATracer[i + 7]);
|
|
ctx.lineTo(pointsATracer[i + 8], pointsATracer[i + 9]);
|
|
}
|
|
if(nbIntervalle % 2 == 0) {
|
|
ctx.moveTo(pointsATracer[taillePointsATracer - 4], pointsATracer[taillePointsATracer - 3]);
|
|
ctx.lineTo(xb, yb);
|
|
console.log("Pair");
|
|
}
|
|
if(nbIntervalle % 2 == 1) {
|
|
ctx.moveTo(pointsATracer[taillePointsATracer - 2], pointsATracer[taillePointsATracer - 1]);
|
|
ctx.lineTo(xb, yb);
|
|
}
|
|
}
|
|
|
|
else{
|
|
|
|
for(let i = 0; i < taillePointsATracer - 16; i = i + 8) {
|
|
ctx.moveTo(pointsATracer[i], pointsATracer[i + 1]);
|
|
ctx.lineTo(pointsATracer[i + 6], pointsATracer[i + 7]);
|
|
ctx.moveTo(pointsATracer[i + 6], pointsATracer[i + 7]);
|
|
ctx.lineTo(pointsATracer[i + 8], pointsATracer[i + 9]);
|
|
}
|
|
ctx.lineTo(centreI[tailleCentreI - 4], centreI[tailleCentreI - 3]);
|
|
ctx.moveTo(centreI[tailleCentreI - 4], centreI[tailleCentreI - 3]);
|
|
ctx.lineTo(xb, yb);
|
|
}
|
|
|
|
|
|
|
|
ctx.stroke();
|
|
|
|
//console.log("Tableau des centres : ", tailleTab2);
|
|
//console.log("Tableau des points à tracer : ", taillePointsATracer);
|
|
//pointsATracer.forEach(element => console.log(element));
|
|
//centreI.forEach(element => console.log(element));
|
|
}
|
|
//Fonction permettant de calculer tous les points d'intervalles sur la droite
|
|
function intervalleDroite(xa, ya, xb, yb) {
|
|
//coefficient directeur de AB :
|
|
let aab = (ya - yb)/(xa - xb);
|
|
|
|
//cas où les points ont la même abscisse :
|
|
if (aab == Infinity){
|
|
aab = 2000; //on simule un très grand coefficient directeur pour éviter d'avoir une valeur infinie
|
|
}
|
|
if (aab == -Infinity){
|
|
aab = -2000; //on simule un très petit coefficient directeur pour éviter d'avoir une valeur infiniment petite
|
|
}
|
|
|
|
// Distance entre A et B :
|
|
let AB = Math.sqrt(Math.pow((xb - xa), 2) + Math.pow((yb - ya), 2));
|
|
|
|
//Le nombre d'intervalle est proportionnel à la distance AB
|
|
nbIntervalle = Math.round(AB/10);
|
|
//nbIntervalle = Math.round(nbIntervalle);
|
|
|
|
// Distance entre deux intervalles :
|
|
let dist = AB/(nbIntervalle + 1);
|
|
|
|
// Ordonnée à l'origine de AB :
|
|
var bab = ya - aab*xa;
|
|
|
|
// Tableau des coordonnées des intervalles :
|
|
var intervalles = [];
|
|
|
|
for(let i = 1; i <= nbIntervalle; i++) {
|
|
// Coordonnées intervalles :
|
|
let Ai = (1 + Math.pow(aab, 2));
|
|
let Bi = (2*aab*bab - 2*aab*ya - 2*xa);
|
|
let Ci = (Math.pow(xa, 2) + Math.pow(bab, 2) + Math.pow(ya, 2) - 2*bab*ya - Math.pow(dist*i, 2));
|
|
|
|
// Delta :
|
|
let Di = (Math.pow(Bi, 2) - 4*Ai*Ci);
|
|
|
|
// Abscisses de Ei et de Di :
|
|
let xi1 = (-Bi + Math.sqrt(Di))/(2*Ai);
|
|
let xi2 = (-Bi - Math.sqrt(Di))/(2*Ai);
|
|
|
|
// Ordonnées de Ei et de Di :
|
|
let yi1 = aab*xi1 + bab;
|
|
let yi2 = aab*xi2 + bab;
|
|
|
|
intervalles.push(xi1, yi1, xi2, yi2);
|
|
}
|
|
//console.log("Longueur tableau : ", intervalles.length);
|
|
// intervalles.forEach(element => console.log(element));
|
|
return intervalles;
|
|
}
|
|
|
|
function toggleOutilAppui(){
|
|
document.getElementById("gauche").classList.remove('yay');
|
|
document.getElementById("droite").classList.remove('yay');
|
|
document.getElementById("perso").classList.remove('yay');
|
|
|
|
}
|
|
|
|
function UntoggleOutilAppui(){
|
|
document.getElementById("gauche").classList.add('yay');
|
|
document.getElementById("droite").classList.add('yay');
|
|
document.getElementById("perso").classList.add('yay');
|
|
|
|
}
|
|
|
|
function togglePasse(){
|
|
document.getElementById("bouttonpasse").classList.add('red');
|
|
|
|
}
|
|
function untogglePasse(){
|
|
document.getElementById("bouttonpasse").classList.remove('red');
|
|
|
|
}
|
|
|
|
function toggleDeplacer(){
|
|
document.getElementById("bouttondeplacer").classList.add('red');
|
|
|
|
}
|
|
function untoggleDeplacer(){
|
|
document.getElementById("bouttondeplacer").classList.remove('red');
|
|
|
|
}
|
|
|
|
function toggleDribble(){
|
|
document.getElementById("bouttondribbler").classList.add('red');
|
|
|
|
}
|
|
|
|
function untoggleDribble(){
|
|
document.getElementById("bouttondribbler").classList.remove('red');
|
|
|
|
}
|
|
|
|
function toggleDonner(){
|
|
document.getElementById("bouttondonner").classList.add('red');
|
|
|
|
}
|
|
|
|
function untoggleDonner(){
|
|
document.getElementById("bouttondonner").classList.remove('red');
|
|
|
|
}
|
|
|
|
function togglezone(){
|
|
document.getElementById("bouttoninfluence").classList.add('red');
|
|
|
|
}
|
|
function untogglezone(){
|
|
document.getElementById("bouttoninfluence").classList.remove('red');
|
|
|
|
}
|
|
function toggleediter(){
|
|
document.getElementById("bouttonediter").classList.add('red');
|
|
|
|
}
|
|
function untoggleediter(){
|
|
document.getElementById("bouttonediter").classList.remove('red');
|
|
|
|
}
|
|
|
|
function toggletire(){
|
|
document.getElementById("bouttontirer").classList.add('red');
|
|
|
|
}
|
|
function untoggletire(){
|
|
document.getElementById("bouttontirer").classList.remove('red');
|
|
|
|
}
|
|
|
|
function toggleecran(){
|
|
document.getElementById("bouttonecran").classList.add('red');
|
|
|
|
}
|
|
function untoggleecran(){
|
|
document.getElementById("bouttonecran").classList.remove('red');
|
|
|
|
}
|
|
buttonPNG.onclick = function(){
|
|
download(canvas, 'Schema.png');
|
|
}
|
|
|
|
|
|
|
|
|
|
function download(canvas, filename) {
|
|
var lnk = document.createElement('a'), e;
|
|
lnk.download = filename;
|
|
|
|
|
|
lnk.href = canvas.toDataURL("image/png;base64");
|
|
|
|
/// create a "fake" click-event to trigger the download
|
|
if (document.createEvent) {
|
|
e = document.createEvent("MouseEvents");
|
|
e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null);
|
|
lnk.dispatchEvent(e);
|
|
} else if (lnk.fireEvent) {
|
|
lnk.fireEvent("onclick");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
init();
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
|
|
|
|
var button = document.getElementById( 'download' );
|
|
button.addEventListener( 'click', function() {
|
|
var imgData = canvas.toDataURL("image/jpeg", 1.0);
|
|
var pdf = new jsPDF();
|
|
imgData.width=300;
|
|
imgData.height=200;
|
|
|
|
pdf.addImage(imgData, 'JPEG',0 ,0);
|
|
pdf.save("Schema.pdf");
|
|
|
|
} );
|
|
}
|
|
|
|
|
|
function ecraner(){
|
|
|
|
|
|
if(ecra ){
|
|
ecra = false;
|
|
untoggleecran();
|
|
}
|
|
else{
|
|
ecra = true;
|
|
toggleecran();
|
|
}
|
|
draw();
|
|
|
|
}
|
|
|
|
|
|
function togglePopup(){
|
|
document.getElementById("popup-2").classList.toggle("inactive");
|
|
document.getElementById("popup-3").classList.toggle("inactive");
|
|
document.getElementById("popup-4").classList.toggle("inactive");
|
|
document.getElementById("popup-5").classList.toggle("inactive");
|
|
document.getElementById("popup-1").classList.toggle("active");
|
|
document.onmousedown=calcul;
|
|
|
|
}
|
|
function togglePopup2(){
|
|
document.getElementById("popup-1").classList.toggle("inactive");
|
|
document.getElementById("popup-3").classList.toggle("inactive");
|
|
document.getElementById("popup-4").classList.toggle("inactive");
|
|
document.getElementById("popup-5").classList.toggle("inactive");
|
|
document.getElementById("popup-2").classList.toggle("active");
|
|
document.onmousedown=calcul2;
|
|
}
|
|
|
|
function togglePopup3(){
|
|
document.getElementById("popup-1").classList.toggle("inactive");
|
|
document.getElementById("popup-2").classList.toggle("inactive");
|
|
document.getElementById("popup-4").classList.toggle("inactive");
|
|
document.getElementById("popup-5").classList.toggle("inactive");
|
|
document.getElementById("popup-3").classList.toggle("active");
|
|
document.onmousedown=calcul3;
|
|
}
|
|
|
|
function togglePopup4(){
|
|
document.getElementById("popup-1").classList.toggle("inactive");
|
|
document.getElementById("popup-2").classList.toggle("inactive");
|
|
document.getElementById("popup-3").classList.toggle("inactive");
|
|
document.getElementById("popup-5").classList.toggle("inactive");
|
|
document.getElementById("popup-4").classList.toggle("active");
|
|
document.onmousedown=calcul4;
|
|
}
|
|
|
|
|
|
function togglePopup5(){
|
|
document.getElementById("popup-1").classList.toggle("inactive");
|
|
document.getElementById("popup-2").classList.toggle("inactive");
|
|
document.getElementById("popup-3").classList.toggle("inactive");
|
|
document.getElementById("popup-4").classList.toggle("inactive");
|
|
document.getElementById("popup-5").classList.toggle("active");
|
|
document.onmousedown=calcul5;
|
|
}
|
|
|
|
|
|
function togglePopupTa(){
|
|
document.getElementById("popup-6").classList.toggle("active");
|
|
}
|
|
function togglePopup2Td(){
|
|
document.getElementById("popup-7").classList.toggle("active");
|
|
}
|
|
|
|
var clic=false;
|
|
//Cette variable nous indique si l'utilisateur clique sur la barre.
|
|
|
|
var clic2=false;
|
|
//Cette variable nous indique si l'utilisateur clique sur le carré.
|
|
var blanc=0,noir=1;
|
|
// Le pourcentage de noir et de blanc entre 0 et 1 appliqué à la couleur (ici, pour le noir, 1 signifie qu'il n'y en aura pas, et 0 totalement : c'est l'inverse)
|
|
|
|
var x=360,y=20;
|
|
var posxDef=360,posyDef=20;
|
|
var posxTer=360,posyTer=20;
|
|
var posxinTer=360,posyinTer=20;
|
|
var posxzone=360,posyzone=20;
|
|
//position initiale de curseur2 (dans le carré).
|
|
|
|
|
|
function clique(objet)
|
|
{
|
|
|
|
if(objet=="barre") // si l'utilisateur clique sur la barre ...
|
|
{
|
|
clic=true; // ...alors on met true (vrai) à clic
|
|
}
|
|
else // sinon l'utilisateur clique sur le carré ...
|
|
{
|
|
clic2=true; // ...alors on met true (vrai) à clic2
|
|
}
|
|
|
|
}
|
|
|
|
function position(axe,event)
|
|
{
|
|
// event contient les évènements de la page (on s'en sert pour la position du curseur)
|
|
|
|
var e = event || window.event;
|
|
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
|
|
|
|
if(axe=="x") //si on demande x
|
|
{
|
|
var rep=e.clientX; // position x de la souris.
|
|
}
|
|
else // sinon y
|
|
{
|
|
var rep=e.clientY; // position y de la souris.
|
|
}
|
|
|
|
return rep;
|
|
// on renvoie la valeur de rep.
|
|
|
|
}
|
|
|
|
function position2(axe,event)
|
|
{
|
|
// event contient les évènements de la page (on s'en sert pour la position du curseur)
|
|
|
|
var e = event || window.event;
|
|
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
|
|
|
|
if(axe=="posxDef") //si on demande x
|
|
{
|
|
var rep=e.clientX; // position x de la souris.
|
|
}
|
|
else // sinon y
|
|
{
|
|
var rep=e.clientY; // position y de la souris.
|
|
}
|
|
|
|
return rep;
|
|
// on renvoie la valeur de rep.
|
|
|
|
}
|
|
function position3(axe,event)
|
|
{
|
|
// event contient les évènements de la page (on s'en sert pour la position du curseur)
|
|
|
|
var e = event || window.event;
|
|
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
|
|
|
|
if(axe=="posxTer") //si on demande x
|
|
{
|
|
var rep=e.clientX; // position x de la souris.
|
|
}
|
|
else // sinon y
|
|
{
|
|
var rep=e.clientY; // position y de la souris.
|
|
}
|
|
|
|
return rep;
|
|
// on renvoie la valeur de rep.
|
|
|
|
}
|
|
function position4(axe,event)
|
|
{
|
|
// event contient les évènements de la page (on s'en sert pour la position du curseur)
|
|
|
|
var e = event || window.event;
|
|
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
|
|
|
|
if(axe=="posxinTer") //si on demande x
|
|
{
|
|
var rep=e.clientX; // position x de la souris.
|
|
}
|
|
else // sinon y
|
|
{
|
|
var rep=e.clientY; // position y de la souris.
|
|
}
|
|
|
|
return rep;
|
|
// on renvoie la valeur de rep.
|
|
|
|
}
|
|
|
|
function position5(axe,event)
|
|
{
|
|
// event contient les évènements de la page (on s'en sert pour la position du curseur)
|
|
|
|
var e = event || window.event;
|
|
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
|
|
|
|
if(axe=="posxzone") //si on demande x
|
|
{
|
|
var rep=e.clientX; // position x de la souris.
|
|
}
|
|
else // sinon y
|
|
{
|
|
var rep=e.clientY; // position y de la souris.
|
|
}
|
|
|
|
return rep;
|
|
// on renvoie la valeur de rep.
|
|
|
|
}
|
|
|
|
|
|
|
|
// lorsque la souris bouge n'importe où dans le document, on appelle la fonction calcul.
|
|
|
|
// lorsque la souris clique n'importe où dans le document, on appelle la fonction calcul.
|
|
|
|
document.onmouseup=function() { clic=false;clic2=false; }
|
|
// si l'utilisateur relâche le bouton de la souris, alors les variables clic et clic2 redeviennent fausses (false).
|
|
|
|
|
|
function calcul(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
|
|
{
|
|
|
|
if(clic && position('y',event)<=320 && position('y',event)>=20) // on appelle position() pour connaître la position de la souris.
|
|
{
|
|
document.getElementById("curseur1").style.top=position('y',event)-7;
|
|
//on change la position du curseur (top) en même temps que la souris.
|
|
|
|
|
|
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
|
|
|
|
if((position('y',event)-20)<=50) // 1/6 (50px)
|
|
{
|
|
|
|
r=255;
|
|
g=0;
|
|
b=Math.round((position('y',event)-20)*255/50);
|
|
|
|
}
|
|
else if((position('y',event)-20)<=100) // 2/6 (100px)
|
|
{
|
|
|
|
r=Math.round(255-((position('y',event)-70)*255/50));
|
|
g=0;
|
|
b=255;
|
|
|
|
}
|
|
else if((position('y',event)-20)<=150) // 3/6 (150px)
|
|
{
|
|
|
|
r=0;
|
|
g=Math.round((position('y',event)-120)*255/50);
|
|
b=255;
|
|
|
|
}
|
|
else if((position('y',event)-20)<=200) // 4/6 (200px)
|
|
{
|
|
|
|
r=0;
|
|
g=255;
|
|
b=Math.round(255-((position('y',event)-170)*255/50));
|
|
|
|
}
|
|
else if((position('y',event)-20)<=250) // 5/6 (250px)
|
|
{
|
|
|
|
r=Math.round((position('y',event)-220)*255/50);
|
|
g=255;
|
|
b=0;
|
|
|
|
}
|
|
else if((position('y',event)-20)<=300) // 6/6 (300px)
|
|
{
|
|
|
|
r=255;
|
|
g=Math.round(255-((position('y',event)-270)*255/50));
|
|
b=0;
|
|
|
|
}
|
|
|
|
document.getElementById("carre").style.backgroundColor="rgb("+r+","+g+","+b+")";
|
|
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
|
|
|
|
|
|
|
|
|
afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
if(clic2) // si l'utilisateur clique sur le carré...
|
|
{
|
|
|
|
if(position('y',event)>20 && position('y',event)<320)
|
|
{
|
|
document.getElementById("curseur2").style.top=(position('y',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
y=position('y',event);
|
|
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
if(position('x',event)>60 && position('x',event)<360)
|
|
{
|
|
document.getElementById("curseur2").style.left=(position('x',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
x=position('x',event);
|
|
// on enregistre la position x de la souris dans la variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function calcul2(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
|
|
{
|
|
|
|
if(clic && position2('posyDef',event)<=320 && position2('posyDef',event)>=20) // on appelle position() pour connaître la position de la souris.
|
|
{
|
|
document.getElementById("curseur1def").style.top=position2('posyDef',event)-7;
|
|
//on change la position du curseur (top) en même temps que la souris.
|
|
|
|
|
|
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
|
|
|
|
if((position2('posyDef',event)-20)<=50) // 1/6 (50px)
|
|
{
|
|
|
|
r2=255;
|
|
g2=0;
|
|
b2=Math.round((position2('posyDef',event)-20)*255/50);
|
|
|
|
}
|
|
else if((position2('posyDef',event)-20)<=100) // 2/6 (100px)
|
|
{
|
|
|
|
r2=Math.round(255-((position2('posyDef',event)-70)*255/50));
|
|
g2=0;
|
|
b2=255;
|
|
|
|
}
|
|
else if((position2('posyDef',event)-20)<=150) // 3/6 (150px)
|
|
{
|
|
|
|
r2=0;
|
|
g2=Math.round((position2('posyDef',event)-120)*255/50);
|
|
b2=255;
|
|
|
|
}
|
|
else if((position2('posyDef',event)-20)<=200) // 4/6 (200px)
|
|
{
|
|
|
|
r2=0;
|
|
g2=255;
|
|
b2=Math.round(255-((position2('posyDef',event)-170)*255/50));
|
|
|
|
}
|
|
else if((position2('posyDef',event)-20)<=250) // 5/6 (250px)
|
|
{
|
|
|
|
r2=Math.round((position2('posyDef',event)-220)*255/50);
|
|
g2=255;
|
|
b2=0;
|
|
|
|
}
|
|
else if((position2('posyDef',event)-20)<=300) // 6/6 (300px)
|
|
{
|
|
|
|
r2=255;
|
|
g2=Math.round(255-((position2('posyDef',event)-270)*255/50));
|
|
b2=0;
|
|
|
|
}
|
|
|
|
document.getElementById("lecarre").style.backgroundColor="rgb("+r2+","+g2+","+b2+")";
|
|
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
|
|
|
|
|
|
|
|
|
afficher2(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
if(clic2) // si l'utilisateur clique sur le carré...
|
|
{
|
|
|
|
if(position2('posyDef',event)>20 && position2('posyDef',event)<320)
|
|
{
|
|
document.getElementById("curseur2def").style.top=(position2('posyDef',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posyDef=position2('posyDef',event);
|
|
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
if(position2('posxDef',event)>60 && position2('posxDef',event)<360)
|
|
{
|
|
document.getElementById("curseur2def").style.left=(position2('posxDef',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posxDef=position2('posxDef',event);
|
|
// on enregistre la position x de la souris dans la variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
afficher2(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function calcul3(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
|
|
{
|
|
|
|
if(clic && position3('posyTer',event)<=320 && position3('posyTer',event)>=20) // on appelle position() pour connaître la position de la souris.
|
|
{
|
|
document.getElementById("curseur1ter").style.top=position3('posyTer',event)-7;
|
|
//on change la position du curseur (top) en même temps que la souris.
|
|
|
|
|
|
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
|
|
|
|
if((position3('posyTer',event)-20)<=50) // 1/6 (50px)
|
|
{
|
|
|
|
r3=255;
|
|
g3=0;
|
|
b3=Math.round((position3('posyTer',event)-20)*255/50);
|
|
|
|
}
|
|
else if((position3('posyTer',event)-20)<=100) // 2/6 (100px)
|
|
{
|
|
|
|
r3=Math.round(255-((position3('posyTer',event)-70)*255/50));
|
|
g3=0;
|
|
b3=255;
|
|
|
|
}
|
|
else if((position3('posyTer',event)-20)<=150) // 3/6 (150px)
|
|
{
|
|
|
|
r3=0;
|
|
g3=Math.round((position3('posyTer',event)-120)*255/50);
|
|
b3=255;
|
|
|
|
}
|
|
else if((position3('posyTer',event)-20)<=200) // 4/6 (200px)
|
|
{
|
|
|
|
r3=0;
|
|
g3=255;
|
|
b3=Math.round(255-((position3('posyTer',event)-170)*255/50));
|
|
|
|
}
|
|
else if((position3('posyTer',event)-20)<=250) // 5/6 (250px)
|
|
{
|
|
|
|
r3=Math.round((position3('posyTer',event)-220)*255/50);
|
|
g3=255;
|
|
b3=0;
|
|
|
|
}
|
|
else if((position3('posyTer',event)-20)<=300) // 6/6 (300px)
|
|
{
|
|
|
|
r3=255;
|
|
g3=Math.round(255-((position3('posyTer',event)-270)*255/50));
|
|
b3=0;
|
|
|
|
}
|
|
|
|
document.getElementById("lecarret").style.backgroundColor="rgb("+r3+","+g3+","+b3+")";
|
|
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
|
|
|
|
|
|
|
|
|
afficher3(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
if(clic2) // si l'utilisateur clique sur le carré...
|
|
{
|
|
|
|
if(position3('posyTer',event)>20 && position3('posyTer',event)<320)
|
|
{
|
|
document.getElementById("curseur2ter").style.top=(position3('posyTer',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posyTer=position3('posyTer',event);
|
|
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
if(position3('posxTer',event)>60 && position3('posxTer',event)<360)
|
|
{
|
|
document.getElementById("curseur2ter").style.left=(position3('posxTer',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posxTer=position3('posxTer',event);
|
|
// on enregistre la position x de la souris dans lposxTera variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
afficher3(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
}
|
|
|
|
function calcul4(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
|
|
{
|
|
|
|
if(clic && position4('posyinTer',event)<=320 && position4('posyinTer',event)>=20) // on appelle position() pour connaître la position de la souris.
|
|
{
|
|
document.getElementById("curseur1inter").style.top=position4('posyinTer',event)-7;
|
|
//on change la position du curseur (top) en même temps que la souris.
|
|
|
|
|
|
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
|
|
|
|
if((position4('posyinTer',event)-20)<=50) // 1/6 (50px)
|
|
{
|
|
|
|
r4=255;
|
|
g4=0;
|
|
b4=Math.round((position4('posyinTer',event)-20)*255/50);
|
|
|
|
}
|
|
else if((position4('posyinTer',event)-20)<=100) // 2/6 (100px)
|
|
{
|
|
|
|
r4=Math.round(255-((position4('posyinTer',event)-70)*255/50));
|
|
g4=0;
|
|
b4=255;
|
|
|
|
}
|
|
else if((position4('posyinTer',event)-20)<=150) // 3/6 (150px)
|
|
{
|
|
|
|
r4=0;
|
|
g4=Math.round((position4('posyinTer',event)-120)*255/50);
|
|
b4=255;
|
|
|
|
}
|
|
else if((position4('posyinTer',event)-20)<=200) // 4/6 (200px)
|
|
{
|
|
|
|
r4=0;
|
|
g4=255;
|
|
b4=Math.round(255-((position4('posyinTer',event)-170)*255/50));
|
|
|
|
}
|
|
else if((position4('posyinTer',event)-20)<=250) // 5/6 (250px)
|
|
{
|
|
|
|
r4=Math.round((position4('posyinTer',event)-220)*255/50);
|
|
g4=255;
|
|
b4=0;
|
|
|
|
}
|
|
else if((position4('posyinTer',event)-20)<=300) // 6/6 (300px)
|
|
{
|
|
|
|
r4=255;
|
|
g4=Math.round(255-((position4('posyinTer',event)-270)*255/50));
|
|
b4=0;
|
|
|
|
}
|
|
|
|
document.getElementById("lecarreint").style.backgroundColor="rgb("+r4+","+g4+","+b4+")";
|
|
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
|
|
|
|
|
|
|
|
|
afficher4(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
if(clic2) // si l'utilisateur clique sur le carré...
|
|
{
|
|
|
|
if(position4('posyinTer',event)>20 && position4('posyinTer',event)<320)
|
|
{
|
|
document.getElementById("curseur2inter").style.top=(position4('posyinTer',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posyinTer=position4('posyinTer',event);
|
|
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
if(position4('posxinTer',event)>60 && position4('posxinTer',event)<360)
|
|
{
|
|
document.getElementById("curseur2inter").style.left=(position4('posxinTer',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posxinTer=position4('posxinTer',event);
|
|
// on enregistre la position x de la souris dans lposxTera variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
afficher4(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
}
|
|
function calcul5(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
|
|
{
|
|
|
|
if(clic && position5('posyzone',event)<=320 && position5('posyzone',event)>=20) // on appelle position() pour connaître la position de la souris.
|
|
{
|
|
document.getElementById("curseur1zone").style.top=position5('posyzone',event)-7;
|
|
//on change la position du curseur (top) en même temps que la souris.
|
|
|
|
|
|
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
|
|
|
|
if((position5('posyzone',event)-20)<=50) // 1/6 (50px)
|
|
{
|
|
|
|
r5=255;
|
|
g5=0;
|
|
b5=Math.round((position5('posyzone',event)-20)*255/50);
|
|
|
|
}
|
|
else if((position5('posyzone',event)-20)<=100) // 2/6 (100px)
|
|
{
|
|
|
|
r5=Math.round(255-((position5('posyzone',event)-70)*255/50));
|
|
g5=0;
|
|
b5=255;
|
|
|
|
}
|
|
else if((position5('posyzone',event)-20)<=150) // 3/6 (150px)
|
|
{
|
|
|
|
r5=0;
|
|
g5=Math.round((position5('posyzone',event)-120)*255/50);
|
|
b5=255;
|
|
|
|
}
|
|
else if((position5('posyzone',event)-20)<=200) // 4/6 (200px)
|
|
{
|
|
|
|
r5=0;
|
|
g5=255;
|
|
b5=Math.round(255-((position5('posyzone',event)-170)*255/50));
|
|
|
|
}
|
|
else if((position5('posyzone',event)-20)<=250) // 5/6 (250px)
|
|
{
|
|
|
|
r5=Math.round((position5('posyzone',event)-220)*255/50);
|
|
g5=255;
|
|
b5=0;
|
|
|
|
}
|
|
else if((position5('posyzone',event)-20)<=300) // 6/6 (300px)
|
|
{
|
|
|
|
r5=255;
|
|
g5=Math.round(255-((position5('posyzone',event)-270)*255/50));
|
|
b5=0;
|
|
|
|
}
|
|
|
|
document.getElementById("lecarrezone").style.backgroundColor="rgb("+r5+","+g5+","+b5+")";
|
|
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
|
|
|
|
|
|
|
|
|
afficher5(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
if(clic2) // si l'utilisateur clique sur le carré...
|
|
{
|
|
|
|
if(position5('posyzone',event)>20 && position5('posyzone',event)<320)
|
|
{
|
|
document.getElementById("curseur2zone").style.top=(position5('posyzone',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posyzone=position5('posyzone',event);
|
|
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
if(position5('posxzone',event)>60 && position5('posxzone',event)<360)
|
|
{
|
|
document.getElementById("curseur2zone").style.left=(position5('posxzone',event)-10)+"px";
|
|
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
|
|
|
|
posxzone=position5('posxzone',event);
|
|
// on enregistre la position x de la souris dans lposxTera variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
|
}
|
|
|
|
afficher5(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
|
|
}
|
|
|
|
}
|
|
function afficher() // ici on gère l'affichage de la couleur
|
|
{
|
|
noir=Math.round( (x-60)*100/300)/100;
|
|
blanc=Math.round((y-20)*100/300)/100;
|
|
|
|
r_1=Math.round((255-r)*blanc)+r;
|
|
g_1=Math.round((255-g)*blanc)+g;
|
|
b_1=Math.round((255-b)*blanc)+b;
|
|
|
|
r_1=Math.round(r_1*noir);
|
|
g_1=Math.round(g_1*noir);
|
|
b_1=Math.round(b_1*noir);
|
|
|
|
// --modification--
|
|
|
|
r_hexa = hexadecimal( Math.floor(r_1 /16) ) + hexadecimal( r_1 % 16 );
|
|
g_hexa = hexadecimal( Math.floor(g_1 /16) ) + hexadecimal( g_1 % 16 );
|
|
b_hexa = hexadecimal( Math.floor(b_1 /16) ) + hexadecimal( b_1 % 16 );
|
|
|
|
document.getElementById("resultat").value = "#" + r_hexa + g_hexa + b_hexa;
|
|
|
|
// --fin modification--
|
|
|
|
document.getElementById('resultat').style.backgroundColor="rgb("+r_1+","+g_1+","+b_1+")";
|
|
draw();
|
|
|
|
|
|
}
|
|
function afficher2() // ici on gère l'affichage de la couleur
|
|
{
|
|
noir=Math.round((posxDef-60)*100/300)/100;
|
|
blanc=Math.round((posyDef-20)*100/300)/100;
|
|
|
|
|
|
r_2=Math.round((255-r2)*blanc)+r2;
|
|
g_2=Math.round((255-g2)*blanc)+g2;
|
|
b_2=Math.round((255-b2)*blanc)+b2;
|
|
|
|
r_2=Math.round(r_2*noir);
|
|
g_2=Math.round(g_2*noir);
|
|
b_2=Math.round(b_2*noir);
|
|
|
|
// --modification--
|
|
|
|
r_hexa2 = hexadecimal( Math.floor(r_2 /16) ) + hexadecimal( r_2 % 16 );
|
|
g_hexa2 = hexadecimal( Math.floor(g_2 /16) ) + hexadecimal( g_2 % 16 );
|
|
b_hexa2 = hexadecimal( Math.floor(b_2 /16) ) + hexadecimal( b_2 % 16 );
|
|
|
|
document.getElementById("resultatdef").value = "#" + r_hexa2 + g_hexa2 + b_hexa2;
|
|
// --fin modification--
|
|
|
|
document.getElementById('resultatdef').style.backgroundColor="rgb("+r_2+","+g_2+","+b_2+")";
|
|
draw();
|
|
|
|
|
|
}
|
|
|
|
function afficher3() // ici on gère l'affichage de la couleur
|
|
{
|
|
noir=Math.round((posxTer-60)*100/300)/100;
|
|
blanc=Math.round((posyTer-20)*100/300)/100;
|
|
|
|
|
|
r_3=Math.round((255-r3)*blanc)+r3;
|
|
g_3=Math.round((255-g3)*blanc)+g3;
|
|
b_3=Math.round((255-b3)*blanc)+b3;
|
|
|
|
r_3=Math.round(r_3*noir);
|
|
g_3=Math.round(g_3*noir);
|
|
b_3=Math.round(b_3*noir);
|
|
|
|
// --modification--
|
|
|
|
r_hexa3 = hexadecimal( Math.floor(r_3 /16) ) + hexadecimal( r_3 % 16 );
|
|
g_hexa3 = hexadecimal( Math.floor(g_3 /16) ) + hexadecimal( g_3 % 16 );
|
|
b_hexa3 = hexadecimal( Math.floor(b_3 /16) ) + hexadecimal( b_3 % 16 );
|
|
|
|
document.getElementById("resultatter").value = "#" + r_hexa3 + g_hexa3 + b_hexa3;
|
|
// --fin modification--
|
|
|
|
document.getElementById('resultatter').style.backgroundColor="rgb("+r_3+","+g_3+","+b_3+")";
|
|
draw();
|
|
|
|
|
|
}
|
|
function afficher4() // ici on gère l'affichage de la couleur
|
|
{
|
|
noir=Math.round((posxinTer-60)*100/300)/100;
|
|
blanc=Math.round((posyinTer-20)*100/300)/100;
|
|
|
|
|
|
r_4=Math.round((255-r4)*blanc)+r4;
|
|
g_4=Math.round((255-g4)*blanc)+g4;
|
|
b_4=Math.round((255-b4)*blanc)+b4;
|
|
|
|
r_4=Math.round(r_4*noir);
|
|
g_4=Math.round(g_4*noir);
|
|
b_4=Math.round(b_4*noir);
|
|
|
|
// --modification--
|
|
|
|
r_hexa4 = hexadecimal( Math.floor(r_4 /16) ) + hexadecimal( r_4 % 16 );
|
|
g_hexa4 = hexadecimal( Math.floor(g_4 /16) ) + hexadecimal( g_4 % 16 );
|
|
b_hexa4 = hexadecimal( Math.floor(b_4 /16) ) + hexadecimal( b_4 % 16 );
|
|
|
|
document.getElementById("resultatinter").value = "#" + r_hexa4 + g_hexa4 + b_hexa4;
|
|
// --fin modification--
|
|
|
|
document.getElementById('resultatinter').style.backgroundColor="rgb("+r_4+","+g_4+","+b_4+")";
|
|
draw();
|
|
|
|
|
|
}
|
|
|
|
function afficher5() // ici on gère l'affichage de la couleur
|
|
{
|
|
noir=Math.round((posxzone-60)*100/300)/100;
|
|
blanc=Math.round((posyzone-20)*100/300)/100;
|
|
|
|
|
|
r_5=Math.round((255-r5)*blanc)+r5;
|
|
g_5=Math.round((255-g5)*blanc)+g5;
|
|
b_5=Math.round((255-b5)*blanc)+b5;
|
|
|
|
r_5=Math.round(r_5*noir);
|
|
g_5=Math.round(g_5*noir);
|
|
b_5=Math.round(b_5*noir);
|
|
|
|
// --modification--
|
|
|
|
r_hexa5 = hexadecimal( Math.floor(r_5 /16) ) + hexadecimal( r_5 % 16 );
|
|
g_hexa5 = hexadecimal( Math.floor(g_5 /16) ) + hexadecimal( g_5 % 16 );
|
|
b_hexa5 = hexadecimal( Math.floor(b_5 /16) ) + hexadecimal( b_5 % 16 );
|
|
|
|
document.getElementById("resultatzone").value = "#" + r_hexa5 + g_hexa5 + b_hexa5;
|
|
// --fin modification--
|
|
|
|
document.getElementById('resultatzone').style.backgroundColor="rgb("+r_5+","+g_5+","+b_5+")";
|
|
draw();
|
|
|
|
|
|
}
|
|
|
|
function hexadecimal(nombre)
|
|
{
|
|
|
|
if(nombre < 10)
|
|
{
|
|
return nombre.toString(); // le nombre en chaîne de caractères.
|
|
}
|
|
else
|
|
{
|
|
|
|
switch (nombre)
|
|
{
|
|
case 10:
|
|
return "A";
|
|
break;
|
|
case 11:
|
|
return "B";
|
|
break;
|
|
case 12:
|
|
return "C";
|
|
break;
|
|
case 13:
|
|
return "D";
|
|
break;
|
|
case 14:
|
|
return "E";
|
|
break;
|
|
case 15:
|
|
return "F";
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
buttonAugmenter.onclick = function(){
|
|
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if(r.setball == true){
|
|
r.fill = "green";
|
|
if(r.tiring == true){
|
|
ligneTir(r.x,r.y,lt-lt*0.072, ht/2);
|
|
}
|
|
}
|
|
else{
|
|
|
|
r.fill = document.getElementById("resultat").value ;
|
|
}
|
|
r.rayon=r.rayon+5;
|
|
ctx.fillStyle = r.fill;
|
|
|
|
|
|
}
|
|
taillejoueur=taillejoueur+5;
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.setball == true){
|
|
r.fill = "green";
|
|
}
|
|
r.rayon=r. rayon+5;
|
|
ctx.fillStyle = r.fill;
|
|
}
|
|
tailledefenseur=tailledefenseur+5;
|
|
|
|
draw();
|
|
|
|
}
|
|
|
|
|
|
buttonReduire.onclick = function(){
|
|
|
|
for (var i = 0; i < joueurs.length; i++) {
|
|
var r = joueurs[i];
|
|
if(r.setball == true)
|
|
{
|
|
r.fill = "green";
|
|
if(r.tiring == true)
|
|
{
|
|
ligneTir(r.x,r.y,lt-lt*0.072, ht/2);
|
|
}
|
|
}
|
|
else{
|
|
|
|
r.fill = document.getElementById("resultat").value ;
|
|
}
|
|
r.rayon=r.rayon-5;
|
|
ctx.fillStyle = r.fill;
|
|
|
|
|
|
}
|
|
taillejoueur=taillejoueur-5;
|
|
draw();
|
|
for (var i = 0; i < adversaire.length; i++) {
|
|
var r = adversaire[i];
|
|
if(r.setball == true){
|
|
r.fill = "green";
|
|
}
|
|
r.rayon=r.rayon-5;
|
|
ctx.fillStyle = r.fill;
|
|
|
|
}
|
|
tailledefenseur=tailledefenseur-5;
|
|
|
|
|
|
draw();
|
|
}
|
|
|
|
function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
|
|
return {
|
|
x: Math.pow(1-t,3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
|
|
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex,
|
|
y: Math.pow(1-t,3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
|
|
+ 3 * t * t * (1 - t) * cp2y + t * t * t * ey
|
|
};
|
|
}
|
|
|
|
|
|
function updateBtn() {
|
|
|
|
var taille=document.getElementById('tailleattaq');
|
|
taille.value= joueurs.length;
|
|
taille.parentElement.submit();
|
|
for (var i = 0; i < joueurs.length ; i++) {
|
|
var R=joueurs[i];
|
|
var num= document.getElementById('numero'+i);
|
|
num.value= R.nom;
|
|
num.parentElement.submit();
|
|
var posX= document.getElementById('posX'+i);
|
|
posX.value= R.x;
|
|
posX.parentElement.submit();
|
|
var posY= document.getElementById('posY'+i);
|
|
posY.value= R.y;
|
|
posY.parentElement.submit();
|
|
var rayon= document.getElementById('rayon'+i);
|
|
rayon.value= R.rayon;
|
|
rayon.parentElement.submit();
|
|
var couleur= document.getElementById('couleur'+i);
|
|
couleur.value= R.fill;
|
|
couleur.parentElement.submit();
|
|
var gottheball= document.getElementById('gottheball'+i);
|
|
gottheball.value= R.gottheball;
|
|
gottheball.parentElement.submit();
|
|
var setball= document.getElementById('setball'+i);
|
|
setball.value= R.setball;
|
|
setball.parentElement.submit();
|
|
var sedeplace= document.getElementById('sedeplace'+i);
|
|
sedeplace.value= R.sedeplace;
|
|
sedeplace.parentElement.submit();
|
|
var tiring= document.getElementById('tiring'+i);
|
|
tiring.value= R.tiring;
|
|
tiring.parentElement.submit();
|
|
var isDragging= document.getElementById('isDragging'+i);
|
|
isDragging.value= R.isDragging;
|
|
isDragging.parentElement.submit();
|
|
var dribbb= document.getElementById('dribbb'+i);
|
|
dribbb.value= R.dribbb;
|
|
dribbb.parentElement.submit();
|
|
console.log(R);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var tailledef=document.getElementById('tailledef');
|
|
tailledef.value= adversaire.length;
|
|
tailledef.parentElement.submit();
|
|
console.log(tailledef);
|
|
for (var i = 0; i < adversaire.length ; i++) {
|
|
var A=adversaire[i];
|
|
var ddefX= document.getElementById('ddefX'+i);
|
|
ddefX.value= A.x;
|
|
ddefX.parentElement.submit();
|
|
var ddefY= document.getElementById('ddefY'+i);
|
|
ddefY.value= A.y;
|
|
ddefY.parentElement.submit();
|
|
var ddefrayon= document.getElementById('ddefrayon'+i);
|
|
ddefrayon.value= A.rayon;
|
|
ddefrayon.parentElement.submit();
|
|
var ddefcouleur= document.getElementById('ddefcouleur'+i);
|
|
ddefcouleur.value= A.fill;
|
|
ddefcouleur.parentElement.submit();
|
|
var ddefisDragging= document.getElementById('ddefisDragging'+i);
|
|
ddefisDragging.value= A.isDragging;
|
|
ddefisDragging.parentElement.submit();
|
|
var ddefsetball= document.getElementById('ddefsetball'+i);
|
|
ddefsetball.value= A.setball;
|
|
ddefsetball.parentElement.submit();
|
|
var ddefhig= document.getElementById('ddefhig'+i);
|
|
ddefhig.value= A.hig;
|
|
ddefhig.parentElement.submit();
|
|
var ddefangle= document.getElementById('ddefangle'+i);
|
|
ddefangle.value= A.angle;
|
|
ddefangle.parentElement.submit();
|
|
var ddefinverse= document.getElementById('ddefinverse'+i);
|
|
ddefinverse.value= A.inverse;
|
|
ddefinverse.parentElement.submit();
|
|
var ddefretour= document.getElementById('ddefretour'+i);
|
|
ddefretour.value= A.rretour;
|
|
ddefretour.parentElement.submit();
|
|
console.log(ddefretour);
|
|
var ddefrangle= document.getElementById('ddefrangle'+i);
|
|
ddefrangle.value= A.rangle;
|
|
ddefrangle.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleddep=document.getElementById('tailleddep');
|
|
tailleddep.value= deple.length;
|
|
tailleddep.parentElement.submit();
|
|
console.log(deple.length);
|
|
for (var i = 0; i < deple.length ; i++) {
|
|
var A=deple[i];
|
|
var ddepX= document.getElementById('ddepX'+i);
|
|
ddepX.value= A.x;
|
|
ddepX.parentElement.submit();
|
|
var ddepY= document.getElementById('ddepY'+i);
|
|
ddepY.value= A.y;
|
|
ddepY.parentElement.submit();
|
|
var ddepedit= document.getElementById('ddepedit'+i);
|
|
ddepedit.value= A.edit;
|
|
ddepedit.parentElement.submit();
|
|
var ddeprayon= document.getElementById('ddeprayon'+i);
|
|
ddeprayon.value= A.rayon;
|
|
console.log(A.rayon);
|
|
ddeprayon.parentElement.submit();
|
|
var ddepdbase= document.getElementById('ddepdbase'+i);
|
|
ddepdbase.value= A.jbase;
|
|
ddepdbase.parentElement.submit();
|
|
var ddepec= document.getElementById('ddepec'+i);
|
|
ddepec.value= A.ec;
|
|
ddepec.parentElement.submit();
|
|
var ddephig= document.getElementById('ddephig'+i);
|
|
ddephig.value= A.hig;
|
|
ddephig.parentElement.submit();
|
|
var ddepangle= document.getElementById('ddepangle'+i);
|
|
ddepangle.value= A.angle;
|
|
ddepangle.parentElement.submit();
|
|
var ddepinverse= document.getElementById('ddepinverse'+i);
|
|
ddepinverse.value= A.inverse;
|
|
ddepinverse.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleddep2=document.getElementById('tailleddep2');
|
|
tailleddep2.value= depdeu.length;
|
|
tailleddep2.parentElement.submit();
|
|
console.log(depdeu.length);
|
|
for (var i = 0; i < depdeu.length ; i++) {
|
|
var A=depdeu[i];
|
|
var ddep2X= document.getElementById('ddep2X'+i);
|
|
ddep2X.value= A.x;
|
|
ddep2X.parentElement.submit();
|
|
var ddep2Y= document.getElementById('ddep2Y'+i);
|
|
ddep2Y.value= A.y;
|
|
ddep2Y.parentElement.submit();
|
|
var ddep2edit= document.getElementById('ddep2edit'+i);
|
|
ddep2edit.value= A.edit;
|
|
ddep2edit.parentElement.submit();
|
|
var ddep2rayon= document.getElementById('ddep2rayon'+i);
|
|
ddep2rayon.value= A.rayon;
|
|
ddep2rayon.parentElement.submit();
|
|
var ddep2dbase= document.getElementById('ddep2dbase'+i);
|
|
ddep2dbase.value= A.jbase;
|
|
ddep2dbase.parentElement.submit();
|
|
var ddep2ec= document.getElementById('ddep2ec'+i);
|
|
ddep2ec.value= A.ec;
|
|
ddep2ec.parentElement.submit();
|
|
var ddep2hig= document.getElementById('ddep2hig'+i);
|
|
ddep2hig.value= A.hig;
|
|
ddep2hig.parentElement.submit();
|
|
var ddep2angle= document.getElementById('ddep2angle'+i);
|
|
ddep2angle.value= A.angle;
|
|
ddep2angle.parentElement.submit();
|
|
var ddep2inverse= document.getElementById('ddep2inverse'+i);
|
|
ddep2inverse.value= A.inverse;
|
|
ddep2inverse.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleddri=document.getElementById('tailleddri');
|
|
tailleddri.value= dribblement.length;
|
|
tailleddri.parentElement.submit();
|
|
console.log(dribblement.length);
|
|
for (var i = 0; i < dribblement.length ; i++) {
|
|
var A=dribblement[i];
|
|
var ddriX= document.getElementById('ddriX'+i);
|
|
ddriX.value= A.x;
|
|
ddriX.parentElement.submit();
|
|
var ddriY= document.getElementById('ddriY'+i);
|
|
ddriY.value= A.y;
|
|
ddriY.parentElement.submit();
|
|
var ddriedit= document.getElementById('ddriedit'+i);
|
|
ddriedit.value= A.edit;
|
|
ddriedit.parentElement.submit();
|
|
var ddrirayon= document.getElementById('ddrirayon'+i);
|
|
ddrirayon.value= A.rayon;
|
|
ddrirayon.parentElement.submit();
|
|
var ddridbase= document.getElementById('ddridbase'+i);
|
|
ddridbase.value= A.dbase;
|
|
ddridbase.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleddri2=document.getElementById('tailleddri2');
|
|
tailleddri2.value= drideu.length;
|
|
tailleddri2.parentElement.submit();
|
|
console.log(drideu.length);
|
|
for (var i = 0; i < drideu.length ; i++) {
|
|
var A=drideu[i];
|
|
var ddri2X= document.getElementById('ddri2X'+i);
|
|
ddri2X.value= A.x;
|
|
ddri2X.parentElement.submit();
|
|
var ddri2Y= document.getElementById('ddri2Y'+i);
|
|
ddri2Y.value= A.y;
|
|
ddri2Y.parentElement.submit();
|
|
var ddri2edit= document.getElementById('ddri2edit'+i);
|
|
ddri2edit.value= A.edit;
|
|
ddri2edit.parentElement.submit();
|
|
var ddri2rayon= document.getElementById('ddri2rayon'+i);
|
|
ddri2rayon.value= A.rayon;
|
|
ddri2rayon.parentElement.submit();
|
|
var ddri2dbase= document.getElementById('ddri2dbase'+i);
|
|
ddri2dbase.value= A.dbase;
|
|
ddri2dbase.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleppasse=document.getElementById('tailleppasse');
|
|
tailleppasse.value= passes.length;
|
|
tailleppasse.parentElement.submit();
|
|
console.log(passes.length);
|
|
for (var i = 0; i < passes.length ; i++) {
|
|
var A=passes[i];
|
|
var ppassedep= document.getElementById('ppassedep'+i);
|
|
ppassedep.value= A.x.nom;
|
|
ppassedep.parentElement.submit();
|
|
var ppassearr= document.getElementById('ppassearr'+i);
|
|
ppassearr.value= A.x2.nom;
|
|
ppassearr.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
var taillelaste=document.getElementById('taillelast');
|
|
taillelaste.value= last.length;
|
|
taillelaste.parentElement.submit();
|
|
console.log(last.length);
|
|
for (var i = 0; i < last.length ; i++) {
|
|
var A=last[i];
|
|
var lasteact= document.getElementById('lastact'+i);
|
|
lasteact.value= A.action;
|
|
lasteact.parentElement.submit();
|
|
var lastearr= document.getElementById('lastarr'+i);
|
|
lastearr.value= A.arrivé;
|
|
lastearr.parentElement.submit();
|
|
var lastedep= document.getElementById('lastdep'+i);
|
|
lastedep.value= A.depart;
|
|
lastedep.parentElement.submit();
|
|
}
|
|
|
|
|
|
|
|
console.log(zone.length);
|
|
var taillezon=document.getElementById('taillezon');
|
|
taillezon.value= zone.length;
|
|
taillezon.parentElement.submit();
|
|
console.log(zone.length);
|
|
for (var i = 0; i < zone.length ; i++) {
|
|
var A=zone[i];
|
|
var zonX= document.getElementById('zonX'+i);
|
|
zonX.value= A.x;
|
|
zonX.parentElement.submit();
|
|
var zonY= document.getElementById('zonY'+i);
|
|
zonY.value= A.y;
|
|
zonY.parentElement.submit();
|
|
var zonrayon= document.getElementById('zonrayon'+i);
|
|
zonrayon.value= A.rayon;
|
|
zonrayon.parentElement.submit();
|
|
var zonisDragging= document.getElementById('zonisDragging'+i);
|
|
zonisDragging.value= A.isDragging;
|
|
zonisDragging.parentElement.submit();
|
|
var zonedit= document.getElementById('zonedit'+i);
|
|
zonedit.value= A.edit;
|
|
zonedit.parentElement.submit();
|
|
}
|
|
}
|
|
|
|
|
|
function charge() {
|
|
|
|
var taille=document.getElementById('taille').value;
|
|
console.log(taille);
|
|
for (var i = 0; i <= taille-1 ; i++) {
|
|
var nume= document.getElementById('numer'+i).value;
|
|
var num =parseInt(nume);
|
|
console.log(num);
|
|
var poseX= document.getElementById('X'+i).value;
|
|
var posX =parseInt(poseX);
|
|
var poseY= document.getElementById('Y'+i).value;
|
|
var posY =parseInt(poseY);
|
|
var rayone= document.getElementById('rayo'+i).value;
|
|
var rayon =parseInt(rayone);
|
|
var couleur= document.getElementById('couleu'+i).value;
|
|
console.log(couleur);
|
|
var newcolor= document.getElementById('resultat');
|
|
newcolor.value= couleur;
|
|
var color = document.getElementById('resultat').value;
|
|
var ddefangle= document.getElementById('ddefangle'+i);
|
|
var gotthebal= document.getElementById('gotthebal'+i).value;
|
|
if (gotthebal == 'true'){
|
|
gottheball = true;
|
|
}else{
|
|
gottheball = false;
|
|
}
|
|
var setbal= document.getElementById('setbal'+i).value;
|
|
if (setbal == 'true'){
|
|
setball = true;
|
|
}else{
|
|
setball = false;
|
|
}
|
|
var sedeplac= document.getElementById('sedeplac'+i).value;
|
|
if (sedeplac == 'true'){
|
|
sedeplace = true;
|
|
}else{
|
|
sedeplace = false;
|
|
}
|
|
var tirin= document.getElementById('tirin'+i).value;
|
|
if (tirin == 'true'){
|
|
tiring = true;
|
|
}else{
|
|
tiring = false;
|
|
}
|
|
var isDraggin= document.getElementById('isDraggin'+i).value;
|
|
if (isDraggin == 'true'){
|
|
isDragging = true;
|
|
}else{
|
|
isDragging = false;
|
|
}
|
|
var dribb= document.getElementById('dribb'+i).value;
|
|
if (dribb == 'true'){
|
|
dribb = true;
|
|
}else{
|
|
dribb = false;
|
|
}
|
|
joueurs.push({
|
|
x: posX,
|
|
y: posY,
|
|
rayon: rayon,
|
|
cache: 0,
|
|
taille: Math.PI*2,
|
|
last: false,
|
|
nom: num,
|
|
fill: couleur,
|
|
isDragging: isDragging,
|
|
setball : setball,
|
|
gottheball : gottheball,
|
|
sedeplace : sedeplace,
|
|
tiring : tiring,
|
|
dribbb : dribb,
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailleAd=document.getElementById('tailleAd').value;
|
|
console.log(tailleAd );
|
|
for (var i = 0; i <= tailleAd-1 ; i++) {
|
|
|
|
var defXX= document.getElementById('defX'+i).value;
|
|
var defX =parseInt(defXX);
|
|
console.log(defXX);
|
|
var defYY= document.getElementById('defY'+i).value;
|
|
var defY =parseInt(defYY);
|
|
var defrayone= document.getElementById('defrayon'+i).value;
|
|
var defrayon =parseInt(defrayone);
|
|
var defcouleur= document.getElementById('defcouleur'+i).value;
|
|
var defisDraggin= document.getElementById('defisDragging'+i).value;
|
|
if (defisDraggin == 'true'){
|
|
defisDragging = true;
|
|
}else{
|
|
defisDragging = false;
|
|
}
|
|
var defsetbal= document.getElementById('defsetball'+i).value;
|
|
if (defsetbal == 'true'){
|
|
defsetball = true;
|
|
}else{
|
|
defsetball = false;
|
|
}
|
|
var defhige= document.getElementById('defhig'+i).value;
|
|
if (defhige == 'true'){
|
|
defhig = true;
|
|
}else{
|
|
defhig = false;
|
|
}
|
|
var defangl= document.getElementById('defangle'+i).value;
|
|
var defangle =parseFloat(defangl);
|
|
var definvers= document.getElementById('definverse'+i).value;
|
|
var definverse =parseFloat(definvers);
|
|
var defrretoure= document.getElementById('defrretour'+i).value;
|
|
var defrretour =parseInt(defrretoure);
|
|
var defrangl= document.getElementById('defrangle'+i).value;
|
|
var defrangle =parseFloat(defrangl);
|
|
adversaire.push({
|
|
x: defX,
|
|
y: defY,
|
|
rayon: defrayon,
|
|
cache: 0,
|
|
taille: Math.PI*2,
|
|
last: false,
|
|
fill: defcouleur,
|
|
isDragging: defisDragging,
|
|
setball : defsetball,
|
|
hig : defhig,
|
|
a : 560,
|
|
b : 35 + (((adversaire.length + 1)* 50)),
|
|
angle : defangle,
|
|
inverse : definverse,
|
|
rretour : defrretour,
|
|
rangle : defrangle,
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
var tailledep=document.getElementById('tailledep').value;
|
|
console.log(tailledep);
|
|
for (var i = 0; i <= tailledep-1 ; i++) {
|
|
|
|
var depX= document.getElementById('depX'+i).value;
|
|
var X =parseInt(depX);
|
|
var depY= document.getElementById('depY'+i).value;
|
|
var Y =parseInt(depY);
|
|
var depedit= document.getElementById('depedit'+i).value;
|
|
if (depedit == 'true'){
|
|
depedit = true;
|
|
}else{
|
|
depedit = false;
|
|
}
|
|
var deprayon= document.getElementById('deprayon'+i).value;
|
|
var rayon =parseInt(deprayon);
|
|
var depdbase= document.getElementById('depdbase'+i).value;
|
|
var dbase =parseInt(depdbase);
|
|
var depec= document.getElementById('depec'+i).value;
|
|
if (depec == 'true'){
|
|
depec = true;
|
|
}else{
|
|
depec = false;
|
|
}
|
|
var dephig= document.getElementById('dephig'+i).value;
|
|
if (dephig == 'true'){
|
|
dephig = true;
|
|
}else{
|
|
dephig = false;
|
|
}
|
|
var depangle= document.getElementById('depangle'+i).value;
|
|
var angle =parseInt(depangle);
|
|
var depinverse= document.getElementById('depinverse'+i).value;
|
|
var inverse =parseInt(depinverse);
|
|
|
|
if(i==0){
|
|
deple.push({
|
|
x : X,
|
|
y : Y,
|
|
edit : depedit,
|
|
rayon : rayon,
|
|
isDragging : false,
|
|
ec :depec,
|
|
hig : dephig,
|
|
angle : angle,
|
|
inverse : inverse,
|
|
jbase : dbase,
|
|
});
|
|
}else{
|
|
deple.push({
|
|
x : X,
|
|
y : Y,
|
|
edit : depedit,
|
|
rayon : rayon,
|
|
isDragging : false,
|
|
ec :depec,
|
|
hig : dephig,
|
|
angle : angle,
|
|
inverse : inverse,
|
|
});
|
|
|
|
}
|
|
}
|
|
console.log(deple);
|
|
nbptsdep=tailledep;
|
|
|
|
|
|
|
|
var tailledep2=document.getElementById('tailledep2').value;
|
|
console.log(tailledep2);
|
|
for (var i = 0; i <= tailledep2-1 ; i++) {
|
|
|
|
var dep2X= document.getElementById('dep2X'+i).value;
|
|
var X2 =parseInt(dep2X);
|
|
var dep2Y= document.getElementById('dep2Y'+i).value;
|
|
var Y2 =parseInt(dep2Y);
|
|
var dep2edit= document.getElementById('dep2edit'+i).value;
|
|
if (dep2edit == 'true'){
|
|
dep2edit = true;
|
|
}else{
|
|
dep2edit = false;
|
|
}
|
|
var dep2rayon= document.getElementById('dep2rayon'+i).value;
|
|
var rayon2 =parseInt(dep2rayon);
|
|
var dep2dbase= document.getElementById('dep2dbase'+i).value;
|
|
var dbase2 =parseInt(dep2dbase);
|
|
var dep2ec= document.getElementById('dep2ec'+i).value;
|
|
if (dep2ec == 'true'){
|
|
dep2ec = true;
|
|
}else{
|
|
dep2ec = false;
|
|
}
|
|
var dep2hig= document.getElementById('dep2hig'+i).value;
|
|
if (dep2hig == 'true'){
|
|
dep2hig = true;
|
|
}else{
|
|
dep2hig = false;
|
|
}
|
|
var dep2angle= document.getElementById('dep2angle'+i).value;
|
|
var angle2 =parseInt(dep2angle);
|
|
var dep2inverse= document.getElementById('dep2inverse'+i).value;
|
|
var inverse2 =parseInt(dep2inverse);
|
|
depdeu.push({
|
|
x : X2,
|
|
y : Y2,
|
|
edit : dep2edit,
|
|
rayon : rayon2,
|
|
isDragging : false,
|
|
ec : dep2ec,
|
|
hig : dep2hig,
|
|
angle : angle2,
|
|
inverse : inverse2,
|
|
jbase : dbase2,
|
|
});
|
|
}
|
|
console.log(depdeu);
|
|
nbdepdeu=tailledep2;
|
|
|
|
|
|
var tailledri=document.getElementById('tailledri').value;
|
|
console.log(tailledri);
|
|
for (var i = 0; i <= tailledri-1 ; i++) {
|
|
|
|
var driX= document.getElementById('driX'+i).value;
|
|
var dX =parseInt(driX);
|
|
var driY= document.getElementById('driY'+i).value;
|
|
var dY =parseInt(driY);
|
|
var driedit= document.getElementById('driedit'+i).value;
|
|
if (driedit == 'true'){
|
|
driedit = true;
|
|
}else{
|
|
driedit = false;
|
|
}
|
|
var drirayon= document.getElementById('drirayon'+i).value;
|
|
var drayon =parseInt(drirayon);
|
|
var dridbase= document.getElementById('dridbase'+i).value;
|
|
var ddbase =parseInt(dridbase);
|
|
|
|
dribblement.push({
|
|
x : dX,
|
|
y: dY,
|
|
edit : driedit,
|
|
rayon : drayon,
|
|
dbase : ddbase,
|
|
});
|
|
|
|
}
|
|
nbptsdib=tailledri;
|
|
|
|
|
|
|
|
|
|
var tailledri2=document.getElementById('tailledri2').value;
|
|
console.log(tailledri2);
|
|
for (var i = 0; i <= tailledri2-1 ; i++) {
|
|
|
|
var dri2X= document.getElementById('dri2X'+i).value;
|
|
var d2X =parseInt(dri2X);
|
|
var dri2Y= document.getElementById('dri2Y'+i).value;
|
|
var d2Y =parseInt(dri2Y);
|
|
var dri2edit= document.getElementById('dri2edit'+i).value;
|
|
if (dri2edit == 'true'){
|
|
dri2edit = true;
|
|
}else{
|
|
dri2edit = false;
|
|
}
|
|
var dri2rayon= document.getElementById('dri2rayon'+i).value;
|
|
var d2rayon =parseInt(dri2rayon);
|
|
var dri2dbase= document.getElementById('dri2dbase'+i).value;
|
|
var d2dbase =parseInt(dri2dbase);
|
|
|
|
drideu.push({
|
|
x : d2X,
|
|
y : d2Y,
|
|
edit : dri2edit,
|
|
rayon : d2rayon,
|
|
isDragging : false,
|
|
dbase : d2dbase,
|
|
});
|
|
|
|
}
|
|
console.log(drideu);
|
|
nbdrideu=tailledri2;
|
|
|
|
|
|
|
|
|
|
var taillepasse=document.getElementById('taillepasse').value;
|
|
console.log(taillepasse);
|
|
for (var i = 0; i <= taillepasse-1 ; i++) {
|
|
|
|
var passedep= document.getElementById('passedep'+i).value;
|
|
var dep =parseInt(passedep) -1 ;
|
|
var passearr= document.getElementById('passearr'+i).value;
|
|
var arr =parseInt(passearr) -1 ;
|
|
passes.push({
|
|
x: joueurs[dep],
|
|
y: joueurs[dep],
|
|
x2 : joueurs[arr],
|
|
y2 : joueurs[arr],
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
var taillezone=document.getElementById('taillezone').value;
|
|
console.log(taillezone);
|
|
for (var i = 0; i <= taillezone-1 ; i++) {
|
|
|
|
var zoneX= document.getElementById('zoneX'+i).value;
|
|
var zX =parseInt(zoneX);
|
|
var zoneY= document.getElementById('zoneY'+i).value;
|
|
var zY =parseInt(zoneY);
|
|
var zonerayon= document.getElementById('zonerayon'+i).value;
|
|
var zrayon =parseInt(zonerayon);
|
|
var zoneisDragging= document.getElementById('zoneisDragging'+i).value;
|
|
if (zoneisDragging == 'true'){
|
|
zoneisDragging = true;
|
|
}else{
|
|
zoneisDragging = false;
|
|
}
|
|
var zoneedit= document.getElementById('zoneedit'+i).value;
|
|
if (zoneedit == 'true'){
|
|
zoneedit = true;
|
|
}else{
|
|
zoneedit = false;
|
|
}
|
|
zone.push({
|
|
|
|
x : zX,
|
|
y : zY,
|
|
edit : zoneedit,
|
|
rayon : zrayon,
|
|
isDragging : zoneisDragging,
|
|
});
|
|
}
|
|
if(taillezone>2){
|
|
|
|
nbzone=1;
|
|
nbpoints=taillezone;
|
|
console.log(zone);
|
|
console.log(nbzone);
|
|
}
|
|
draw();
|
|
|
|
|
|
}
|
|
|
|
|