tactique-basket/ajout etienne/rectest.js

// get canvas related references
var canvas = document.getElementById("terrain");
var ctx = 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;

// 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 faire une passe 
var nbjpass = 0;
var passable = false;
// 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 = [];
// 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.closePath();
    ctx.fill();
}

function cercle(x,y,z,a,b,c,g) {
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(x,y,z,a,b,c);
    ctx.fill();
}

function ligne(a,b,c,d){
    ctx.beginPath();
    ctx.moveTo(a, b);
    ctx.lineTo(c, d);
    ctx.lineWidth= 3;
    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
    for (var i = 0; i < joueurs.length; i++) {
        var r = joueurs[i];
        if(r.setball == true){
            r.fill = "green";
        }
        else{
            r.fill = "red";
        }
        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";
        }
        ctx.fillStyle = r.fill;
        cercle(r.x,r.y,r.rayon,r.cache,r.taille,r.last);
    }
    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];
        ligne(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);
    //console.log(ball);

    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,
                    });
                    console.log(last);
                }
                else 
                     window.alert("Un seul ballon sur le terrain");
                ball = false;
                draw();
            }
        }
        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;
                if (nbball == 0){
                    r.setball = true;
                    r.gottheball = true;
                    nbball = nbball + 1;
                    last.push({
                        action : 4,
                    })
                }
                else 
                     window.alert("Un seul ballon sur le terrain");
                ball = false;
                draw();
            }
        }
        ball = false;
    }

    if(passable == 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 yes, set that rects isDragging=true
                document.body.style.cursor = 'pointer';
                if (nbjpass == 0){
                    if(r.gottheball == false){
                        passable = false;
                        console.log(nbjpass);
                        nbjpass = 0;
                        window.alert("Seulement un joueur qui possede le ballon a un moment peut faire une passe")
                    }
                    else
                    {
                        r.gottheball = false;
                        addj(i);
                        nbjpass=nbjpass+1;
                        console.log(nbjpass);
                    }
                }
                else{

                    r.gottheball = true;
                    addj(i);
                    nbjpass=nbjpass+1;
                    console.log(nbjpass);
                } 

                if(nbjpass % 2 == 0){
                    console.log(nbjpass % 2 );
                    passable=false;
                   draw();
                }
            }
    }
}

else {
    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;
            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;
    }
}


// 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;
            }
        }
        for (var i = 0; i < adversaire.length; i++) {
            var r = adversaire[i];
            if (r.isDragging) {
                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() {

    if (joueurs.length >= 5)
        window.alert("Nombre de joueurs maximum atteint");
    else {
        joueurs.push({
        x: 60,
        y: 35 + ((joueurs.length + 1) * 50),
        rayon: 20,
        cache: 0,
        taille: Math.PI*2,
        last: false,
        fill: "red",
        isDragging: false,
        setball : false,
        gottheball : false,
    });
        last.push({
            action : 1,
        });
        console.log(last);
        cercle(60,35 + (joueurs.length * 50),20,0,Math.PI*2,false,"red");
    }
}

function ajouteradversaire() {

    console.log(adversaire.length);
    if (adversaire.length >= 5)
        window.alert("Nombre d'adversaire maximum atteint");
    else {
        adversaire.push({
        x: 560,
        y: 35 + ((adversaire.length + 1) * 50),
        rayon: 20,
        cache: 0,
        taille: Math.PI*2,
        last: false,
        fill: "black",
        isDragging: false,
        setball : false
    });
        last.push({
            action : 2,
        });
        console.log(last);
        cercle(560,35 + (adversaire.length * 50),20,0,Math.PI*2,false,"black");
    }
}

function fairepasse(a,b) {
       console.log(a);
       console.log(b);
        passes.push({
        x: joueurs[a.c],
        y: joueurs[a.c],
        x2 : joueurs[b.c],
        y2 : joueurs[b.c],
    });
       // console.log("passe stp");
       jpass.pop();
       jpass.pop();
       last.push({
            action : 5,
            depart : a.c,
            arrivé : b.c,
        });
        console.log(last);
        ligne(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.rect(0, 0, lt, ht);
ctx.stroke();


ctx.lineWidth="2"; 
//Ligne centrale
ctx.beginPath();
ctx.moveTo(lt/2, ht);
ctx.lineTo(lt/2, 0);
ctx.stroke();

//Cercle central
ctx.beginPath();
ctx.arc(lt/2, ht/2, lt*0.064, 0, Math.PI*2, false);
ctx.stroke();


/* RAQUETTES */
//Rectangle raquette gauche
ctx.beginPath();
ctx.rect(0, ht/3, lt*0.208, ht/3);
ctx.stroke();

//Rectangle raquette droite
ctx.beginPath();  
ctx.rect(lt-lt*0.208, ht/3, lt-lt*0.208, ht/3);
ctx.stroke();

//Cercle raquette gauche
ctx.beginPath();
ctx.arc(lt*0.208, ht/2, lt*0.064, 1.5*Math.PI, 0.5*Math.PI, false);
ctx.stroke();

//Cercle raquette droite
ctx.beginPath();
ctx.arc(lt-(lt*0.208), ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
ctx.stroke();


/* LIGNES LANCERS FRANCS */
//Ligne lf 1 gauche
ctx.beginPath();
ctx.moveTo(0, 0.06*ht);
ctx.lineTo(lt*0.075, 0.06*ht);
ctx.stroke();

//Ligne lf 2 gauche
ctx.beginPath();
ctx.moveTo(0, 0.94*ht);
ctx.lineTo(lt*0.075, 0.94*ht);
ctx.stroke();

// Cercle lf gauche
ctx.beginPath();
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.moveTo(lt, 0.06*ht);
ctx.lineTo(lt*0.925, 0.06*ht);
ctx.stroke();

//Ligne lf 2 droite
ctx.beginPath();
ctx.moveTo(lt, 0.94*ht);
ctx.lineTo(lt*0.925, 0.94*ht);
ctx.stroke();

//Cercle lf droite
ctx.beginPath();
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.arc(lt*0.063, ht/2, ht*0.083, 1.5*Math.PI, 0.5*Math.PI, false);
ctx.stroke();

//Panier gauche
ctx.beginPath();
ctx.moveTo(lt*0.06, ht*0.44);
ctx.lineTo(lt*0.06, ht*0.56);
ctx.stroke();

ctx.beginPath();
ctx.arc(lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(lt*0.06, ht/2);
ctx.lineTo(lt*0.067, ht/2);
ctx.stroke();


//Cercle panier droit
ctx.beginPath();
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.moveTo(lt-lt*0.06, ht-ht*0.44);
ctx.lineTo(lt-lt*0.06, ht-ht*0.56);
ctx.stroke();

ctx.beginPath();
ctx.arc(lt-lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(lt-lt*0.06, ht-ht/2);
ctx.lineTo(lt-lt*0.067, ht-ht/2);
ctx.stroke();
    
}




function triggerdonnerlaballe(){
    ball = true;
    console.log(ball);
}

function triggerfairepasse(){
    if(joueurs.length < 2){
        window.alert("On ne peut faire une passe si on a pas 2 joueurs")
    }
        else{
        passable = true;
        console.log(passable);
    }
}

function addj(a){
     jpass.push({
        c : a,
    });
}

function retourarriere(){

    console.log(last);
    console.log("allo");
    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;
                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();

        }
    }

 }