var canvas; // le canvas
        var ctx; //le graphique
        var isGaming = false;

        //taille du canvas
        var LARGEUR_CANVAS = 403;
        var HAUTEUR_CANVAS = 225;
        //taille des raquettes
        var LARG_RAQ = 10;
        var LONG_RAQ = 50;

        /* -------
        LES SCORES
        ------- */
        var LIM_SCORE = 4;
        var score_J1;
        var score_J2;


        /* --------
        CLASS BALLE
        -------- */
        function Balle() {
            //position de la balle
            this.posX = LARGEUR_CANVAS / 2;
            this.posY = HAUTEUR_CANVAS / 2;
            //taille de la balle
            this.size = 8;
            //deplacement de la balle
            this.VITESSE_BASSE = 2;
            this.vitesseX = this.VITESSE_BASSE;
            this.vitesseY = this.VITESSE_BASSE;
            this.sensX = -1;
            this.sensY = -1;
			
			var vitesseInc = false;

            this.avance = function () {
                this.posX = this.posX + (this.sensX * this.vitesseX);
                this.posY = this.posY + (this.sensY * this.vitesseY);
            }

            this.rebondRaq = function (Raquette) {

                //1er tiers de la raqette : effet de lift
                if (this.posY >= Raquette.posY && this.posY < (Raquette.posY + (Raquette.longueur / 3))) {
                    if (this.vitesseY >= 0) {
                        this.vitesseY = this.vitesseY - 1;
                    }
                }
                //3e tiers de la raqette : effet de lift
                if (this.posY > (Raquette.posY + ((Raquette.longueur / 3) * 2)) && this.posY <= (Raquette.posY + (Raquette.longueur))) {
                    if (this.vitesseY >= 0) {
                        this.vitesseY = this.vitesseY + 1;
                    }
                }
				if(vitesseInc)
				{
					this.vitesseX = this.vitesseX + 1; //augment la vitesse du jeu
				}
				vitesseInc = !vitesseInc;
                this.sensX = -this.sensX; //change de sens
            }

            this.rebondTerrain = function () {
                this.sensY = -this.sensY;
            }

            this.dessine = function () {
                ctx.fillRect(this.posX, this.posY, this.size, this.size);
            }
        }

        /* -----------
        CLASS RAQUETTE
        ----------- */
        function Raquette(X, Y) {
            //taille de la raquette
            this.largeur = LARG_RAQ;
            this.longueur = LONG_RAQ;
            //position de la raquette
            this.posX = X;
            this.posY = Y;
            //vitesse de la raquette
            this.vitesse = 4; //niveau du joueur : plus la vitesse est élevé plus le joueur est rapide;

            this.deplacerHaut = function () {
                this.posY = this.posY - this.vitesse;
            }

            this.deplacerBas = function () {
                this.posY = this.posY + this.vitesse;
            }

            this.dessine = function () {
                ctx.fillRect(this.posX, this.posY, this.largeur, this.longueur);
            }
        }

        var raquetteJoueur = new Raquette(10, (HAUTEUR_CANVAS / 2) - (LARG_RAQ / 2));
        var raquetteOrdi = new Raquette(LARGEUR_CANVAS - LARG_RAQ - 10, (HAUTEUR_CANVAS / 2) - (LONG_RAQ / 2));
        var ballon = new Balle();
        /* ---------------
        DEBUT DE PROGRAMME
        --------------- */

        function go() {
            if (!isGaming) {
                score_J1 = 0;
                score_J2 = 0;
                ctx.font = "40px monospace"; //choix de la typo pour le score
                setInterval(draw, 30); //Timer qui claque tous les 30 milisecondes, en lançant draw()
            }
        }


        function menu() {
            ctx.textAlign = "center";
            ctx.fillStyle = "#FF5855"; //colorise les graphiques
            ctx.font = "35px Arial"; //choix de la typo pour la page d'accueil
            ctx.fillText("Click", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS / 2) - 50);
            ctx.fillText("to start", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS / 2) - 20);
            ctx.fillText("PONG", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS / 2) + 10);
            ctx.font = "15px Arial"; //choix de la typo pour la page d'accueil
            ctx.fillStyle = "#333"; //colorise les graphiques
            ctx.fillText("use key-up and key-down", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS) / 2 + 35);
            ctx.fillText("to move the paddle", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS) / 2 + 50);
        }

        function gameLoad() {
            canvas = document.getElementById('game');
            ctx = canvas.getContext('2d'); //definie le canvas entant que graphique 2D
            menu();
            ctx.fillStyle = "#FF5855"; //colorise les graphiques
        }

        function draw() {
            ctx.clearRect(0, 0, LARGEUR_CANVAS, HAUTEUR_CANVAS); // Efface le canvas
            if (score_J1 === LIM_SCORE) {
                isGaming = false;
                ctx.font = "40px monospace"; //choix de la typo pour la page d'accueil
                ctx.fillText("YOU WIN", LARGEUR_CANVAS / 2, HAUTEUR_CANVAS / 2);
                ctx.font = "20px monospace"; //choix de la typo pour la page d'accueil
                ctx.fillText("CLICK TO RESTART", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS / 2) + 20);
            }
            else if (score_J2 === LIM_SCORE) {
                isGaming = false;
                ctx.font = "40px monospace"; //choix de la typo pour la page d'accueil
                ctx.fillText("GAMEOVER", LARGEUR_CANVAS / 2, HAUTEUR_CANVAS / 2);
                ctx.font = "20px monospace"; //choix de la typo pour la page d'accueil
                ctx.fillText("CLICK TO RESTART", LARGEUR_CANVAS / 2, (HAUTEUR_CANVAS / 2) + 20);
            }
            else {
                isGaming = true;
                ctx.fillText(score_J1 + " " + score_J2, LARGEUR_CANVAS / 2, 50);  //affiche le score
                ctx.fillRect(LARGEUR_CANVAS / 2, 0, 1, HAUTEUR_CANVAS); // milieu de terrain
                DessinRaquettes(); //(re)Dessine les raquettes
                DessinBalle(); //(re)Dessine la balle
            }
        }


        //DESSINS DES RAQUETTES
        function DessinRaquettes() {
            ordiBouge(); //calcul de la position pour la raquette de l'ordi
            raquetteOrdi.dessine(); // ordi
            raquetteJoueur.dessine(); // joueur1
        }

        //DESSIN DE LA BALLE
        function DessinBalle() {
            directionBalle(); //calcul la nouvelle position de la balle
            ballon.dessine(); // balle
        }


        //CALCUL DU MOUVEMENT DE LA BALLE
        function directionBalle() {
            //rebondit sur le bas du terrain
            if ((ballon.posY + ballon.size) >= HAUTEUR_CANVAS) {
                ballon.rebondTerrain();
            }
            //rebondit sur le haut du terrain
            if (ballon.posY <= 0) {
                ballon.rebondTerrain();
            }

            //La raquette de l'ordi renvoie la balle
            if ((ballon.posX + ballon.size >= raquetteOrdi.posX) && ballon.posY >= raquetteOrdi.posY && ballon.posY <= (raquetteOrdi.posY + raquetteOrdi.longueur)) {
                ballon.rebondRaq(raquetteOrdi);
            }
            //La raquette du joueur 1 renvoie la balle
            if ((ballon.posX <= (raquetteJoueur.posX + raquetteJoueur.largeur)) && ballon.posY >= raquetteJoueur.posY && ballon.posY <= (raquetteJoueur.posY + raquetteJoueur.longueur)) {
                ballon.rebondRaq(raquetteJoueur);
            }

            //l'ordi n'a pas réussi à renvoyer la balle
            if (ballon.posX > LARGEUR_CANVAS) {
                balleAuCentre("j1"); //le joueur 1 marque un point
            }
            //le joueur 1 n'a pas réussi à renvoyer la balle
            if (ballon.posX < 0) {
                balleAuCentre("j2"); //l'ordi marque un point
            }
            //et ça avance
            ballon.avance();
        }


        //ENGAGEMENT
        function balleAuCentre(joueur) {
            //le joueur 1 marque
            if (joueur === "j1") {
                score_J1++; //son score augmente
                ballon.sensX = -1; //la balle pour l'ordi
            }
            //l'ordi marque
            if (joueur === "j2") {
                score_J2++; //son score augmente
                ballon.sensX = 1; //la balle pour le joueur 1
            }

            //La balle au centre
            ballon.posX = LARGEUR_CANVAS / 2;
            ballon.posY = HAUTEUR_CANVAS / 2;
            //coup d'envoie
            ballon.vitesseY = 1;
            ballon.vitesseX = 1;
        }

        var Level = 0;
        //MOUVEMENT DE LA RAQUETTE DE L'ORDI
        function ordiBouge() {

            if (Level === 2) {
                /*
                LA RAQUETTE DE L'ORDI DOIT TENDRE VERS LA BALLE
                */
                //en bas
                if (ballon.posY > (raquetteOrdi.posY + (raquetteOrdi.longueur / 2))) {
                    if ((raquetteOrdi.posY + raquetteOrdi.longueur) <= HAUTEUR_CANVAS) {
                        raquetteOrdi.deplacerBas();
                    }
                }
                //en haut
                else if (ballon.posY < (raquetteOrdi.posY + (raquetteOrdi.longueur / 2))) {
                    if (raquetteOrdi.posY >= 0) {
                        raquetteOrdi.deplacerHaut();
                    }
                } 
                Level = 0;
            }
            Level++;
        }

        //MOUVEMENT DE LA RAQUETTE DU JOUEUR AVEC LES TOUCHES
        document.onkeydown = function (event) {
            var keyCode;
            if (event === null) {
                keyCode = window.event.keyCode;
            }
            else {
                keyCode = event.keyCode;
            }
            switch (keyCode) {
                // fleche du haut                               
                case 38:
                    if (raquetteJoueur.posY > 0) {
                        raquetteJoueur.deplacerHaut();
                    }
                    break;
                // fleche du bas                              
                case 40:
                    if ((raquetteJoueur.posY + raquetteJoueur.longueur) < HAUTEUR_CANVAS) {
                        raquetteJoueur.deplacerBas();
                    }
                    break;
                default:
                    break;
            }
            DessinRaquettes();
        }

        //MOUVEMENT DE LA RAQUETTE DU JOUEUR AVEC LA SOURIE
        document.onmousemove = function (event) {
            var posMouseY;
            posMouseY = event.clientY;
            if (posMouseY >= 0 && (posMouseY + raquetteJoueur.longueur) <= HAUTEUR_CANVAS) {
                raquetteJoueur.posY = posMouseY;
            }
        }