script.js

window.onload = function()
{
    var canvasWidth = 900;
    var canvasHeigth = 600;
    var blockSize = 30;
    var ctx;
    var delay = 100;
    var xCoord = 0;
    var yCoord = 0;
    var snakee;
    var applee;
    var widthInBlocks = canvasWidth/blockSize;
    var heightInBlocks = canvasHeigth/blockSize;
    var score;
    var timeout;

    init();

    // FONCTION du CANVAS 

    function init()
    {
        var canvas = document.createElement('canvas');
        canvas.width = canvasWidth;
        canvas.height = canvasHeigth;
        canvas.style.backgroundColor = "#c4ffb3";
        canvas.style.border = "20px solid";
        canvas.style.borderColor = "#47d147";
        canvas.style.borderRadius = "15px";
        canvas.style.margin = "35px auto";
        canvas.style.display = "block";
        document.body.appendChild(canvas);
        ctx = canvas.getContext('2d');
        snakee = new Snake( [[6,4], [5,4], [4,4]], "right");
        applee = new Apple([10, 10]);
        score = 0;
        refreshCanvas();
    }

    function refreshCanvas()
    {
        snakee.advance();
        if(snakee.checkCollision())
        {
            // GAME OVER

            gameOver();
        }
        else
        {
            if(snakee.isEatingApple(applee))
            {
                // Le Seprent à mangé la pomme
                
                score++;
                snakee.ateApple = true;
                do
                {
                    applee.setNewPosition();
                }
                while(applee.isOnSnake(snakee))
            }
            ctx.clearRect(0,0,canvasWidth, canvasHeigth);
            drawScore();
            snakee.draw();
            applee.draw();
            timeout = setTimeout(refreshCanvas,delay);
        }
    }
        function gameOver()
        {
            ctx.save();
            ctx.font = "bold 70px sans-serif";
            ctx.fillStyle = "#47d147";
            ctx.textAlign = "center";
            ctx.tectBaseline = "middle";
            ctx.strokeStyle = "#4d4d4d";
            ctx.lineWidth = 7;
            var centreX = canvasWidth / 2;
            var centreY = canvasHeigth / 2;
            ctx.strokeText("Game Over", centreX, centreY - 180);
            ctx.fillText("Game Over", centreX, centreY - 180);
            ctx.font = "bold 30px sans-serif";
            ctx.strokeText("Press the space key to replay", centreX, centreY - 120);
            ctx.fillText("Press the space key to replay",centreX, centreY - 120);
            ctx.restore();
        }

        function restart()
        {
            snakee = new Snake( [[6,4], [5,4], [4,4]], "right");
            applee = new Apple([10, 10]);
            score = 0;
            clearTimeout(timeout);
            refreshCanvas();
        }

        function drawScore()
        {
            ctx.save();
            ctx.font = "bold 200px sans-serif";
            ctx.fillStyle = "#47d147";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.strokeStyle = "#4d4d4d";
            ctx.lineWidth = 7;
            var centreX = canvasWidth / 2;
            var centreY = canvasHeigth / 2;
            ctx.strokeText(score.toString(), centreX, centreY);
            ctx.fillText(score.toString(), centreX, centreY);
            ctx.restore();
        }

        function drawBlock(ctx, position)
        {
            var x = position[0] * blockSize;
            var y = position[1] * blockSize;
            ctx.fillRect(x,y, blockSize, blockSize);
        }

// FONCTION du SERPENT 

    function Snake(body,direction)
    {
        this.body = body;
        this.direction = direction;
        this.ateApple = false;
        this.draw = function()
        {
            ctx.save();
            ctx.fillStyle = "#4d4d4d";
            for(var i = 0; i < this.body.length; i++)
            {
                drawBlock(ctx, this.body[i]);
            }
            ctx.restore();
        };

// Direction du Serpent

        this.advance= function()
        {
            var nextPosition = this.body[0].slice();
            switch(this.direction)
            {
                case "left":                    
                    nextPosition[0] -= 1;
                    break;
                case "right":
                    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.ateApple = false;
        };
        this.setDirection = function(newDirection)
        {
            var allowedDirections;
            switch(this.direction)
            {
                case "left":
                case "right":
                    allowedDirections = ["up", "down"];
                    break;
                case "up":
                case "down":
                    allowedDirections = ["left", "right"];
                    break; 
                default:
                    throw("invalid Direction");
            }
            if(allowedDirections.indexOf(newDirection) > -1)
            {
                this.direction = newDirection;
            }

        };

    // Parametre des reglès du jeu pour le serpent

    this.checkCollision = function()
    {
        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.length ; i++)
        {
            if(snakeX === rest[i][0] && snakeY === rest[i][1])
            {
                snakeCollision = true;
            }
        }

        return wallCollision || snakeCollision;

    };

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

    }

    // Fonction de la pomme

    function Apple(position)
    {
        this.position = position;
        this.draw = function()
        {
            ctx.save();
            ctx.fillStyle = "#e60000"
            ctx.beginPath();
            var radius = blockSize/2;
            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();
        };
        this.setNewPosition = function()
        {
            var newX = Math.round(Math.random() * (widthInBlocks - 1));
            var newY = Math.round(Math.random() * (heightInBlocks - 1));
            this.position = [newX, newY];
        };
        this.isOnSnake = function(snakeToCheck)
        {
            var isOnSnake = false;

            for(var i = 0 ; i < snakeToCheck.body.length; i++)
            {
                if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] === snakeToCheck.body[i][1])
                {
                    isOnSnake = true;
                }
            }
            return isOnSnake;
        };
    }

     // Utilisateur touche sur le clavier 

document.onkeydown = function handleKeyDown(e)
    {
        var key = e.keyCode;
        var newDirection;
        switch(key)
        {
            case 37:
                newDirection = "left";
                break;
            case 38:
                newDirection = "up";
                break;
            case 39:
                newDirection = "right";
                break;
            case 40:
                newDirection = "down";
                break; 
            case 32:
                restart();
                return;
            default:
                return;
        }
        snakee.setDirection(newDirection);
    }; 
}