window.onload = function() { // début du window.onload
        var canvasWidth = 900;
        var canvasHeight = 600;
        var blockSize = 30; // taille d'un bloc de 30 pixels par 30 pixels 
        var ctx;
        var delay = 100; // exprimé en ms, c'est la vitesse du serpent  ex:1 trop vite 1000 trop lent
        // var xCoord = 0;
        // var yCoord = 0;
        var snakee;
        var applee;
        var widthInBlocks = canvasWidth / blockSize;
        var heightInBlocks = canvasHeight / blockSize;
        var score;
        var timeout;

        init();

        function init() { // début de la fonction d'initialisation
            var canvas = document.createElement('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            canvas.style.border = "30px solid gray";
            canvas.style.margin = "50px auto";
            canvas.style.display = "block";
            canvas.style.backgroundColor = "#ddd";
            document.body.appendChild(canvas);
            ctx = canvas.getContext('2d');
            snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
            applee = new Apple([10, 10]);
            score = 0;
            refresh_Canvas();
        } // ---Fin de la fonction d'initialisation

        function refresh_Canvas() { // Début de refresh_canvas
            console.log("Refresh_Canvas");
            snakee.advance();
            if (snakee.checkCollision()){
                gameOver();
            } else {
                if (snakee.isEatingApple(applee)){
                    score++;
                    snakee.ateApple = true;
                    do {
                        applee.setNewPosition();
                    } while(applee.isOnSnake(snakee));
                }
                ctx.clearRect(0,0,canvasWidth,canvasHeight); 
                drawScore();
                snakee.draw();
                applee.draw();
                timeout = setTimeout(refresh_Canvas,delay);
            }
        } // --- Fin de refreh_canvas

        function gameOver() { // Début de gameOver
            ctx.save();
            ctx.font = "bold 70px sans-sherif";
            ctx.fillStyle = "#000";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.strokeStyle = "white";
            ctx.lineWidth = 5;
            var centreX = canvasWidth / 2;
            var centreY = canvasHeight / 2;
            ctx.strokeText("Game Over", centreX, centreY - 180);
            ctx.fillText("Game Over", centreX, centreY - 180);
            ctx.font = "bold 30px sans-sherif";
            ctx.strokeText("Appuyez sur la touche expace pour rejouer", centreX, centreY - 120);
            ctx.fillText("Appuyez sur la touche expace pour rejouer", centreX, centreY - 120);
            ctx.restore();
        } // --- Fin de gameOver

        function restart() { // Début de restart
            snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
            applee = new Apple([10, 10]);
            score = 0;
            clearTimeout(timeout); 
            refresh_Canvas();
        } // --- Fin de restart

        function drawScore(){ // début de drawscore
            ctx.save();
            ctx.font = "bold 200px sans-sherif";
            ctx.fillStyle = "gray";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            var centreX = canvasWidth / 2;
            var centreY = canvasHeight / 2;
            ctx.fillText(score.toString(), centreX, centreY);
            ctx.restore();
        } // --- Fin de drawscore

        function drawBlock(ctx, position) { // Début de drawblock
            var x = position[0] * blockSize;
            var y = position[1] * blockSize;
            ctx.fillRect(x,y,blockSize,blockSize);
        } // --- Fin de drawblock

        function Snake(body, direction) { // Début de snake
            this.body = body;
            this.direction = direction;
            this.ateApple = false;

            this.draw = function(){ // On va dessiner le corps du serpent
                ctx.save(); // On sauvegarde le contexte qui existe
                ctx.fillStyle = "#ff0000"; // Le corps du serpent sera rouge
                for (var i=0; i < this.body.length ; i++){
                    drawBlock(ctx, this.body[i]);   
                }
                 ctx.restore();
            }; // --- Fin de snake
           
        this.advance = function() { // Début de advance
                var nextPosition = this.body[0].slice();
                switch (this.direction) {
                    case "left":
                        nextPosition[0] -= 1;
                        break;
                    case "right": // on ajout 1 pour se déplacer à droite
                        nextPosition[0] += 1;
                        break;
                    case "down":
                        nextPosition[1] += 1;
                        break;
                    case "up":
                        nextPosition[1] -= 1;
                        break;
                    default:
                        throw ("Invalid Direction");
                }
                this.body.unshift(nextPosition);
                if (!this.ateApple)
                    this.body.pop();
                else
                    this.ateApplle = false;
            }; // --- Fin de advance

        this.setDirection = function(newDirection){
            var allowedDirections;
            switch (this.direction) {
                case "left":
                case "right": // on ajout 1 pour se déplacer à droite
                    allowedDirections=["up","down"];
                    break;
                case "down":
                case "up":
                    allowedDirections=["left","right"];
                    break;
                default:
                    throw ("Invalid Direction");
            }
            if (allowedDirections.indexOf(newDirection) > -1) {
                this.direction = newDirection; // alloue la direction permise
            }
        };

        this.checkCollision = function(){ // Début checkcollision
            var wallCollision = false;
            var snakeCollision = false;
            var head = this.body[0];
            var rest = this.body.slice(1);
            var snakeX = head[0];
            var snakeY = head[1];
            var minX = 0; 
            var minY = 0;
            var maxX = widthInBlocks - 1;
            var maxY = heightInBlocks - 1;
            var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;
            var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

            if (isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)
                wallCollision = true;
            
            for (var i=0; i<rest.lenght;i++){
                if (snakeX === rest[i][0] && snakeY === rest[i][1])
                    snakeCollision = true;
            }
            
            return wallCollision || snakeCollision;
        }; // --- Fin de collision

        this.isEatingApple = function(appleToEat) { // Début de isEatingApple
                var head = this.body[0];
                if (head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])
                    return true;
                else
                    return false;
            } // Fin de isEatingApple
        }

        function Apple(position) { // Début de Apple
            this.position = position;
            this.setNewPosition = function() { //Début de SetNewposition 
                var newX = Math.round(Math.random()*(widthInBlocks - 1));
                var newY = Math.round(Math.random()*(heightInBlocks - 1));
                this.position = [newX,newY];
            }; // Fin de setNewPosition
            this.isOnSnake = function(snakeToCheck) { // Début de isOnSnake
                var isOnSnake = false;
                for (var i = 0; i < snakeToCheck.body.lenght; i++) { //Début de for 
                    if (this.position[0] === snakeToCheck.body[i][0] && this.position[1] === snakeToCheck.body[i][1])
                        isOnSnake = true;
                } // Fin du for
                return isOnSnake;
            }; // FIN de isOnSnake
            
            this.draw = function() { //Début de apple draw 
                ctx.save(); // sauvegarde du contexte du canvas
                ctx.fillStyle = "33cc33"; // définir la couleur verte
                ctx.beginPath(); // Un rond se constriot dofférement d'un rectangle
                var radius = blockSize/2; // radius est le rayon du cercle
                var x = this.position[0]*blockSize + radius;
                var y = this.position[1]*blockSize + radius;
                ctx.arc(x,y,radius,0,Math.PI*2,true);
                ctx.fill();
                ctx.restore(); // On restaure le contexte du canvas
            }; // Fin de apple draw
        } // Fin de Apple

        document.onkeydown = function handleKeyDown(e){ // crochet de document.onkeydown
                var key = e.keyCode; // nous renvoie le code de la touche employé
                var newDirection;
                switch (key) { // cochet du switch 03
                    case 37:
                        newDirection = "left"; // touche de flèche de gauche du clavier
                        break;
                    case 38:
                        newDirection = "up"; // touche flèche de haut du clavier
                        break;
                    case 39:
                        newDirection = "right"; // touche flèche de droite du clavier
                        break;
                    case 40:
                        newDirection = "down"; // touche flèche de bas du clavier
                        break;
                    case 32:
                        restart();
                        return;
                    default:
                        return; // On sort de la fonction en gardant la direction précédente
                } // fin du crochet du switch 03
                snakee.setDirection(newDirection); // serpent reçoit l
            }; // cochet du document.onkeydown
    } // fin du window.unload