Almost snake.js...

gistfile1.js

"use strict";

var H_PADDING = 10;
var V_PADDING = 10;
var ROWS = 20,
    COLUMNS = 20;

var KEYCODES = {
    37: "left",
    38: "up",
    39: "right",
    40: "down"
};

var DIRECTIONS = {
    left: "left",
    right: "right",
    up: "up",
    down: "down"
};

var OPPOSITES = {
    left: "right",
    right: "left",
    up: "down",
    down: "up"
};

var OFFSETS = {
    left: [-1, 0],
    right: [1, 0],
    up: [0, -1],
    down: [0, 1]
};

var Snake = function() {
    this.body = [
        [0, 0],
        [1, 0],
        [2, 0]
    ];
    this.dir = DIRECTIONS.right;
    this.dead = false;
    this.grow = false;
}

Snake.prototype.getHead = function () {
    return this.body[this.body.length - 1];
};

Snake.prototype.getBody = function () {
    return this.body.slice(0, this.body.length - 1);
};

Snake.prototype.update = function (keyCode) {
    var dir = KEYCODES[keyCode],
        op = OPPOSITES[this.dir];
    if (dir && dir != op) {
        this.dir = dir;
    } else if (keyCode === 32) {
        this.grow = true;
    }
};

Snake.prototype.move = function () {
    var offset = OFFSETS[this.dir],
        head = this.getHead(),
        newHead = [offset[0] + head[0], offset[1] + head[1]];
    this.body = this.body.slice(this.grow ? 0 : 1);
    this.body.push(newHead);
    this.grow = false;
};

Snake.prototype.isSelfCollide = function () {
    var head = this.getHead(),
        body = this.getBody();
    for (var i = 0; i < body.length; i++) {
        var unit = body[i];
        if (unit[0] === head[0] && unit[1] === head[1]) return true;
    }
    return false;
};

Snake.prototype.collide = function (isArenaCollide) {
    var head = this.getHead();
    this.dead = isArenaCollide(head[0], head[1]) || this.isSelfCollide();
};

function app(processing) {
    var colWidth, rowHeight, snake, keybd;

    var colors = {
        white: processing.color(255, 255, 255),
        black: processing.color(0, 0, 0),
        gray: processing.color(200, 200, 200),
        red: processing.color(255, 0, 0),
        green: processing.color(0, 255, 0),
        blue: processing.color(0, 0, 255),
    };

    var drawGrid = function () {
        processing.fill(255);
        for (var i = 0; i <= ROWS; i++) {
            processing.line(H_PADDING,
            rowHeight * i + V_PADDING,
            processing.width - H_PADDING,
            rowHeight * i + V_PADDING);
        }
        for (var i = 0; i <= COLUMNS; i++) {
            processing.line(colWidth * i + H_PADDING,
            V_PADDING,
            colWidth * i + H_PADDING,
            processing.height - V_PADDING);
        }
    };

    var xyToGrid = function (x, y) {
        return [x * colWidth + H_PADDING,
        y * rowHeight + V_PADDING];
    };

    var boxAt = function (x, y, color) {
        var coord = xyToGrid(x, y);
        processing.fill(color);
        processing.rect(coord[0], coord[1], colWidth, rowHeight);
    };

    var randInt = function (n) {
        return Math.floor(Math.random() * n);
    };

    var renderSnake = function (snake) {
        for (var i = 0; i < snake.body.length; i++) {
            var unit = snake.body[i];
            boxAt(unit[0], unit[1],
            snake.dead ? colors.black : colors.red);
        }
    };

    processing.keyPressed = function () {
        keybd = processing.keyCode;
    }

    processing.setup = function () {
        processing.frameRate(10);
        processing.size(320, 320);

        colWidth = (processing.width - H_PADDING * 2) / COLUMNS;
        rowHeight = (processing.height - V_PADDING * 2) / ROWS;

        snake = new Snake();
    }

    processing.draw = function () {
        processing.background(colors.gray);
        drawGrid();

        if (!snake.dead) {
            snake.update(keybd);
            snake.move();
            snake.collide(function (x, y) {
                if (x < 0 || x >= COLUMNS) return true;
                if (y < 0 || y >= ROWS) return true;
                return false;
            });
        }
        keybd = 0;
        renderSnake(snake);
    }
}

var $canvas = document.getElementById("primary-canvas");
var $o = new Processing($canvas, app);