jsSnake

snake

(function () {

    var self = this;
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    var oldX = 0;
    var oldY = 0;
    var sqrW = 10;
    var sqrH = 5;
    var dx = 10;
    var dy = 5;
    var movementLoop;
    var gameSpeed = 150;
    var snake = [];
    var snakeInitialSize = 5;

    function drawSquare(x, y) {
        context.beginPath();
        context.fillStyle = "#ff0000";
        context.fillRect(x, y, sqrW, sqrH);
        context.fill();
    }

    function initSnake() {
        for (var i = snakeInitialSize - 1; i >= 0; i--) {
            if (i == snakeInitialSize - 1) {
                x = i * 12;
                y = y;
            }

            snake.push({x: i, y: y});
        }
    }

    function drawSnake() {
        var snakeSize = snake.length;
        for (var i = 0; i < snakeSize; i++) {
            var body = snake[i];
            drawSquare(body.x * 12, body.y * 12);
        }

    }

    function clear(oldX, oldY) {
        context.fillStyle = "#ffffff";
        context.beginPath();
        context.clearRect(oldX, oldY, sqrW, sqrH);
        context.closePath();
        context.fill();
    }

    initSnake();
    drawSnake();

    function update() {
        var tail = snake.pop();
        tail.x = x;
        tail.y = y;
        snake.unshift(tail);

        clear(oldX, oldY);
        drawSnake();
    }

    function reset() {
        x = 0;
        y = 0;
    }

    function moveToUp() {
        oldX = x;
        oldY = y;
        y -= dy;
        console.log(' X : ' + x + ' Y : ' + y);
        update();
    }


    function moveToDown() {
        oldX = x;
        oldY = y;
        y += dy;
        console.log(' X : ' + x + ' Y : ' + y);

        update();
    }


    function moveToLeft() {
        oldX = x;
        oldY = y;
        x -= dx;
        console.log(' X : ' + x + ' Y : ' + y);

        update();
    }

    function moveToRight() {
        oldX = x;
        oldY = y;
        x += dx;
        console.log(' X : ' + x + ' Y : ' + y);
        update();
    }


    function moveTo(position) {
        clearInterval(movementLoop);
        switch (position) {
            case 'Up':
                movementLoop = setInterval(moveToUp, gameSpeed);
                break;
            case 'Down':
                movementLoop = setInterval(moveToDown, gameSpeed);
                break;
            case 'Left':
                movementLoop = setInterval(moveToLeft, gameSpeed);
                break;
            case 'Right':
                movementLoop = setInterval(moveToRight, gameSpeed);
                break;

        }
    }



    document.addEventListener('keydown', function (e) {
        var position = e.keyIdentifier;
        moveTo(position);
    });

})();