Snake Game

snake.js

// MAP INFO
MAP_WIDTH = 300;
MAP_HEIGHT = 300;
MAP_BORDER = 0;
PORTRAIT_DIMENSION = 30;
LANDSCAPE_DIMENSION = 30;
CELL_WIDTH = MAP_WIDTH / PORTRAIT_DIMENSION;
CELL_HEIGTH = MAP_HEIGHT / LANDSCAPE_DIMENSION;

// CANVAS_INFO
CANVAS_WIDTH = MAP_WIDTH;
CANVAS_HEIGTH = MAP_HEIGHT;

// SNAKE INFO
SNAKE_LENGTH = 3;

// DIRECTIONS
DIRECTION_UP = 0;
DIRECTION_RIGHT = 1;
DIRECTION_DOWN = 2;
DIRECTION_LEFT = 3;



var direction = DIRECTION_RIGHT;
var game_loop = null;

window.onload = function() {
    init();
};

function init() {
    var ctx = getCanvasContext();
    var map = generateMap();
    var snake = new Array(SNAKE_LENGTH);
    map = generateFood(map);
    map = generateSnake(snake, map);
    initControls();
    if (game_loop) {
        clearInterval(game_loop);
    }
    game_loop = setInterval(loop, 60);

    function loop() {
        ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGTH);
        drawCanvas(ctx);
        drawMap(ctx, map);
        update(snake, map);
    }
}

function initControls() {
    document.addEventListener('keydown', function(e) {
        if (e.keyCode === 38 && direction !== DIRECTION_DOWN) {
            direction = DIRECTION_UP;
        } else if (e.keyCode === 40 && direction !== DIRECTION_UP) {
            direction = DIRECTION_DOWN;
        } else if (e.keyCode === 37 && direction !== DIRECTION_RIGHT) {
            direction = DIRECTION_LEFT;
        } else if (e.keyCode === 39 && direction !== DIRECTION_LEFT) {
            direction = DIRECTION_RIGHT;
        }
    });
}


function getCanvasContext() {
    var canvas = document.createElement("canvas");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGTH;
    document.getElementsByTagName("body")[0].appendChild(canvas);

    return canvas.getContext("2d");
}

function generateMap() {
    var map = new Array(PORTRAIT_DIMENSION);
    for (var i = 0; i < map.length; i++) {
        map[i] = new Array(LANDSCAPE_DIMENSION);
    }

    return map;
}

function generateFood(map) {
    var rx = random();
    var ry = random();

    while( map[rx][ry] === 2) {
        rx = random();
        ry = random();
    }

    map[rx][ry] = 1;

    return map;
}

function generateSnake(snake, map) {
    var rx = random();
    var ry = random();

    while((rx - snake.length) < 0) {
        rx = random();
    }

    for (var i = 0; i < snake.length; i++) {
        snake[i] = {x: rx - i, y: ry};
        map[rx - i][ry] = 2;
    }

    return map;
}

function drawCanvas(ctx) {
    ctx.strokeStyle = "black";

    ctx.strokeRect(0, 0, 300, 300);
}

function drawMap(ctx, map) {
    var colors = {
        1: "red",
        2: "blue"
    };

    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            drawCell(i, j, colors[map[i][j]]);
        }
    }

    function drawCell(x, y, color) {
        if (color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * CELL_WIDTH, y * CELL_HEIGTH, CELL_WIDTH, CELL_HEIGTH);
        }
    }
}

function update(snake, map) {
    for (var i = snake.length - 1; i >= 0; i--) {
        if (i === 0) {
            switch(direction) {
                case DIRECTION_UP:
                    snake[0] = { x: snake[0].x, y: snake[0].y - 1 };
                    break;
                case DIRECTION_RIGHT:
                    snake[0] = { x: snake[0].x + 1, y: snake[0].y };
                    break;
                case DIRECTION_DOWN:
                    snake[0] = { x: snake[0].x, y: snake[0].y + 1 };
                    break;
                case DIRECTION_LEFT:
                    snake[0] = { x: snake[0].x - 1, y: snake[0].y };
                    break;
            }

            var header = snake[0];

            if(header.x < 0 || header.x >= 30 ||
                header.y < 0 || header.y >= 30) {
                //alert("Game over");
                if (game_loop) {
                    clearInterval(game_loop);
                }
                return;
            }

            // Get food
            if (map[header.x][header.y] === 1) {
                map = generateFood(map);
                var newBody = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};
                snake.push(newBody);
                map[newBody.x][newBody.y] = 2;
            }

            map[snake[0].x][snake[0].y] = 2;
        } else {
            if (i === (snake.length - 1)) {
                map[snake[i].x][snake[i].y] = null;
            }

            snake[i] = {x: snake[i - 1].x, y: snake[i - 1].y};
            map[snake[i].x][snake[i].y] = 2;
        }
    }
}

function random() {
    return Math.round(Math.random() * PORTRAIT_DIMENSION);
}