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.
3182 lines
96 KiB
3182 lines
96 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 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);
|
|
}
|
|
|
|
//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){
|
|
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.a + r.rayon*Math.cos(r.angle);
|
|
ty = r.b+ r.rayon *Math.sin(r.angle);
|
|
px = r.a + r.rayon*Math.cos(r.inverse);
|
|
py = r.b+ 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.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 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++){
|
|
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++){
|
|
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],
|
|
});
|
|
|
|
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);
|
|
var coord = getBezierXY(0.05,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord1 = getBezierXY(0.1,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord2 = getBezierXY(0.15,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord3 = getBezierXY(0.2,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord4 = getBezierXY(0.25,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord5 = getBezierXY(0.3,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord6 = getBezierXY(0.35,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord7 = getBezierXY(0.4,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord8 = getBezierXY(0.45,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord9 = getBezierXY(0.5,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord10 = getBezierXY(0.55,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord11 = getBezierXY(0.6,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord12 = getBezierXY(0.65,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord13 = getBezierXY(0.7,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord14 = getBezierXY(0.75,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord15 = getBezierXY(0.8,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord16 = getBezierXY(0.85,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord17 = getBezierXY(0.9,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var coord18 = getBezierXY(0.95,deple[0+i*4].x, deple[0+i*4].y, 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);
|
|
var inter = intervalleDroite(deple[0+i*4].x,deple[0+i*4].y,coord.x,coord.y);
|
|
centreIntervalle(deple[0+i*4].x,deple[0+i*4].y,coord.x,coord.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord.x,coord.y,coord1.x,coord1.y);
|
|
centreIntervalle(coord.x,coord.y,coord1.x,coord1.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord1.x,coord1.y,coord2.x,coord2.y);
|
|
centreIntervalle(coord1.x,coord1.y,coord2.x,coord2.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord2.x,coord2.y,coord3.x,coord3.y);
|
|
centreIntervalle(coord2.x,coord2.y,coord3.x,coord3.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord3.x,coord3.y,coord4.x,coord4.y);
|
|
centreIntervalle(coord3.x,coord3.y,coord4.x,coord4.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord4.x,coord4.y,coord5.x,coord5.y);
|
|
centreIntervalle(coord4.x,coord4.y,coord5.x,coord5.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord5.x,coord5.y,coord6.x,coord6.y);
|
|
centreIntervalle(coord5.x,coord5.y,coord6.x,coord6.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord6.x,coord6.y,coord7.x,coord7.y);
|
|
centreIntervalle(coord6.x,coord6.y,coord7.x,coord7.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord7.x,coord7.y,coord8.x,coord8.y);
|
|
centreIntervalle(coord7.x,coord7.y,coord8.x,coord8.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord8.x,coord8.y,coord9.x,coord9.y);
|
|
centreIntervalle(coord8.x,coord8.y,coord9.x,coord9.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord9.x,coord9.y,coord10.x,coord10.y);
|
|
centreIntervalle(coord9.x,coord9.y,coord10.x,coord10.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord10.x,coord10.y,coord11.x,coord11.y);
|
|
centreIntervalle(coord10.x,coord10.y,coord11.x,coord11.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord11.x,coord11.y,coord12.x,coord12.y);
|
|
centreIntervalle(coord11.x,coord11.y,coord12.x,coord12.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord12.x,coord12.y,coord13.x,coord13.y);
|
|
centreIntervalle(coord12.x,coord12.y,coord13.x,coord13.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord13.x,coord13.y,coord14.x,coord14.y);
|
|
centreIntervalle(coord13.x,coord13.y,coord14.x,coord14.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord14.x,coord14.y,coord15.x,coord15.y);
|
|
centreIntervalle(coord14.x,coord14.y,coord15.x,coord15.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord15.x,coord15.y,coord16.x,coord16.y);
|
|
centreIntervalle(coord15.x,coord15.y,coord16.x,coord16.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord16.x,coord16.y,coord17.x,coord17.y);
|
|
centreIntervalle(coord16.x,coord16.y,coord17.x,coord17.y,nbIntervalle,inter);
|
|
var inter = intervalleDroite(coord17.x,coord17.y,coord18.x,coord18.y);
|
|
centreIntervalle(coord17.x,coord17.y,coord18.x,coord18.y,nbIntervalle,inter);
|
|
le_contexte.lineTo(coord18.x,coord18.y);
|
|
le_contexte.lineTo(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(i = 0;i< (nbptsdib/4);i++){
|
|
for(j=1;j<4;j++){
|
|
cercleedit(dribblement[j+i*4].x,dribblement[j+i*4].y,15,0,Math.PI*2,"rgba(128,128,128,0.9)");
|
|
}
|
|
for(h = 0;h< (nbptsdib/4);h++){
|
|
le_contexte.moveTo(dribblement[0+h*4].x,dribblement[0+h*4].y);
|
|
le_contexte.bezierCurveTo(dribblement[1+h*4].x,dribblement[1+h*4].y,dribblement[2+h*4].x,dribblement[2+h*4].y,dribblement[3+h*4].x,dribblement[3+h*4].y);
|
|
canvas_arrow2(le_contexte, dribblement[2+h*4].x, dribblement[2+h*4].y, dribblement[3+h*4].x, dribblement[3+h*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);
|
|
le_contexte.bezierCurveTo(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);
|
|
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) {
|
|
// 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]);
|
|
|
|
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]);
|
|
}
|
|
|
|
// if(nbIntervalle % 2 == 0) {
|
|
// ctx.moveTo(pointsATracer[taillePointsATracer - 8], pointsATracer[taillePointsATracer - 7]);
|
|
// ctx.lineTo(xb, yb);
|
|
// }
|
|
// if(nbIntervalle % 2 == 1) {
|
|
// ctx.moveTo(pointsATracer[taillePointsATracer - 6], pointsATracer[taillePointsATracer - 5]);
|
|
// ctx.lineTo(xb, yb);
|
|
// }
|
|
|
|
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 = 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
|
|
};
|
|
}
|
|
|
|
|