The simple game snake.

snake.html

<canvas id="canvasElement" style="border: 1px solid black;"></canvas>
<script>

setup(); gameLooping = setInterval(loop, 180);

////////////////////////////////////////////////////////////

var gameLooping, canvas, context, sideOfSquare, head, snake, tail, direct, moved, points, eat;

////////////////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d');
	canvas.width = canvas.height = 700; eat = null;
	sideOfSquare = 50; moved = true; points = 0;

	snake = [{x: 3, y: 3}, {x: 4, y: 3}, {x: 5, y: 3}];
	head = snake[2]; tail = snake[0]; direct = 'right';

	document.onkeyup = function (e) {
		if (moved) {
			var oldDirect = direct;
			switch (e.which) {
				case 39: direct = (direct !== 'left' ) ? 'right' : direct; break;
				case 37: direct = (direct !== 'right') ? 'left'  : direct; break;
				case 38: direct = (direct !== 'down' ) ? 'top'   : direct; break;
				case 40: direct = (direct !== 'top'  ) ? 'down'  : direct; break;
			}
			moved = oldDirect === direct;		
		}
	}
}

////////////////////////////////////////////////////////////

function loop () {
	moveSnake();

	if (collision() || eat === -1) {
		alert('End game!\nYou have accumulated\n' + points + ' points.');
		return clearInterval(gameLooping);
	}

	clearCanvas();

	if (eat === null && eat !== -1) {
		createEat();
	} else {
		drawEat();
	}

	drawSnake();

	moved = true; points += snake.length;
	context.fillText(points + ' / ' + snake.length, 10, 10);
}

////////////////////////////////////////////////////////////

function drawEat () {
	drawCircle(eat.x, eat.y, sideOfSquare / 4);
}

function createEat () {
	var matrica = [];

	for (var i = 0; i < 14; i++) {
		matrica.push([]);
		for (var j = 0; j < 14; j++)
			matrica[i].push({x: i, y: j});
	}

	snake.forEach(function (item) {
		matrica[item.x][item.y] = false;
	});

	var opportunity = [];
	matrica.forEach(function (row) {
		row.forEach(function (column) {
			if (column !== false) {
				opportunity.push(column);
			}
		});
	});

	if (opportunity !== 0)
		eat = opportunity[Math.floor(Math.random() * opportunity.length)];
	else
		eat = -1;
}

function collision () {
	for (var i = 0, _i = snake.length - 2; i < _i; i++)
		if (head.x === snake[i].x && head.y === snake[i].y)
			return true;

	if (head.x < 0 || head.x > 13 || head.y < 0 || head.y > 13)
		return true;

	return false;
}

function clearCanvas () {
	canvas.height = canvas.width;
}

function moveSnake () {
	for (var i = 0, _i = snake.length - 1; i < _i; i++) {
		snake[i].x = snake[i + 1].x;
		snake[i].y = snake[i + 1].y;
	}

	switch (direct) {
		case 'right': head.x++; break;
		case 'left':  head.x--; break;
		case 'top':   head.y--; break;
		case 'down':  head.y++; break;
	}

	if (eat !== null && head.x === eat.x && head.y === eat.y) {
		snake.push({x: head.x, y: head.y});
		head = snake[snake.length - 1];
		eat = null;
	}
}

function drawSnake () {
	snake.forEach(function (part) {
		drawCircle(part.x, part.y, sideOfSquare / 2);		
	});

	drawCircle(head.x, head.y, sideOfSquare / 3);
}

function drawCircle (x, y, r) {
	var point = coordinateToPixel(x, y);

	context.beginPath();
	context.arc(point.x, point.y, r || 1, 0, 2*Math.PI);
	context.stroke();
}

function coordinateToPixel (x, y) {
	return {
		x: (x + 0.5) * sideOfSquare,
		y: (y + 0.5) * sideOfSquare
	}
}

</script>