RootKiller/snake.html

## snake.html
<body>
	<canvas id="game" width="800" height="800"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("game");
	var ctx = canvas.getContext('2d');

	var w = 800, h = 800;
	var c = 30;

	var T_EMPTY = 0;
	var T_PLR = 1;
	var T_PT = 2;

	var clsX = Math.ceil(w/c)-1;
	var clsY = Math.ceil(h/c)-1;
	var grid = new Array(clsX);
	for (var x = 0; x < clsX; ++x) {
		grid[x] = new Array(clsY);
		for (var y = 0; y < clsY; ++y) {
			grid[x][y] = {
				type: T_EMPTY,
				nx: -1,
				ny: -1
			}
		}
	}

	var lastPoint = [ Math.ceil(clsX / 2), Math.ceil(clsY / 2) ];
	var firstPoint = [ Math.ceil(clsX / 2), Math.ceil(clsY / 2) ];
	grid[lastPoint[0]][lastPoint[1]].type = T_PLR;
	grid[lastPoint[0]][lastPoint[1]].nx = lastPoint[0];
	grid[lastPoint[0]][lastPoint[1]].ny = lastPoint[1];

	function spawnNewPoint()
	{
		while (true) {
			x = Math.floor(Math.random() * clsX);
			y = Math.floor(Math.random() * clsY);
			if (grid[x][y].type != T_EMPTY) {
				continue;
			}

			grid[x][y].type = T_PT;
			break;
		}
	}
	spawnNewPoint();

	var dirX = 0;
	var dirY = 1;

	window.onkeydown = function(e) {
		switch (e.keyCode) {
			case 83: dirY = 1; dirX = 0; break;
			case 87: dirY = -1; dirX = 0; break;
			case 83: dirY = 1; dirX = 0; break;
			case 65: dirX = -1; dirY = 0; break;
			case 68: dirX = 1; dirY = 0; break;
			default: return;
		}
		timeToMove = 0.0;
	}
	var ctr = 0;

	function moveSnake() {
		var curCell = grid[firstPoint[0]][firstPoint[1]];

		var newX = firstPoint[0] + dirX;
		var newY = firstPoint[1] + dirY;

		var newCell = grid[newX][newY];

		if ((newX < 0 || newY < 0 || newX > clsX || newY > clsY) || (newCell.type == T_PLR)) {
			return false;
		}

		firstPoint[0] = newX;
		firstPoint[1] = newY;

		curCell.nx = newX;
		curCell.ny = newY;

		if (newCell.type == T_PT) {
			// we ate new spawn point - do not remove last point
			spawnNewPoint();
		}
		else {
			// remove last point
			var lx = lastPoint[0];
			var ly = lastPoint[1];

			grid[lx][ly].type = T_EMPTY;
			lastPoint[0] = grid[lx][ly].nx;
			lastPoint[1] = grid[lx][ly].ny;
			grid[lx][ly].nx = grid[lx][ly].nx = -1;
		}

		newCell.type = T_PLR;
		return true;
	}

	var lastTime = 0;
	var MOVE_SPEED = 0.5;
	var timeToMove = MOVE_SPEED;
	function draw(time) {
		var dt = (time - lastTime) / 1000;
		lastTime = time;

		timeToMove -= dt;
		if (timeToMove <= 0.0) {
			if (! moveSnake(dirX, dirY)) {
				console.log("GAME OVER!");
				return;
			}
			timeToMove = MOVE_SPEED;
		}

		ctx.fillStyle="black";
		ctx.fillRect(0,0,w,h);

		for (var x = 0; x < clsX; ++x) {
			for (var y = 0; y < clsY; ++y) {
				var t = grid[x][y].type;
				if (t == T_EMPTY) {
					continue;
				}
				switch (t) {
				case T_PLR:
					ctx.fillStyle="white";
					break;
				case T_PT:
					ctx.fillStyle="yellow";
					break;
				}

				ctx.fillRect((c+1) * x , (c+1) *  y, c, c);
			}
		}

		requestAnimationFrame(draw);
	}

	requestAnimationFrame(draw);
	</script>
</body>
	<body>
	<canvas id="game" width="800" height="800"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("game");
	var ctx = canvas.getContext('2d');

	var w = 800, h = 800;
	var c = 30;

	var T_EMPTY = 0;
	var T_PLR = 1;
	var T_PT = 2;

	var clsX = Math.ceil(w/c)-1;
	var clsY = Math.ceil(h/c)-1;
	var grid = new Array(clsX);
	for (var x = 0; x < clsX; ++x) {
	grid[x] = new Array(clsY);
	for (var y = 0; y < clsY; ++y) {
	grid[x][y] = {
	type: T_EMPTY,
	nx: -1,
	ny: -1
	}
	}
	}

	var lastPoint = [ Math.ceil(clsX / 2), Math.ceil(clsY / 2) ];
	var firstPoint = [ Math.ceil(clsX / 2), Math.ceil(clsY / 2) ];
	grid[lastPoint[0]][lastPoint[1]].type = T_PLR;
	grid[lastPoint[0]][lastPoint[1]].nx = lastPoint[0];
	grid[lastPoint[0]][lastPoint[1]].ny = lastPoint[1];

	function spawnNewPoint()
	{
	while (true) {
	x = Math.floor(Math.random() * clsX);
	y = Math.floor(Math.random() * clsY);
	if (grid[x][y].type != T_EMPTY) {
	continue;
	}

	grid[x][y].type = T_PT;
	break;
	}
	}
	spawnNewPoint();

	var dirX = 0;
	var dirY = 1;

	window.onkeydown = function(e) {
	switch (e.keyCode) {
	case 83: dirY = 1; dirX = 0; break;
	case 87: dirY = -1; dirX = 0; break;
	case 83: dirY = 1; dirX = 0; break;
	case 65: dirX = -1; dirY = 0; break;
	case 68: dirX = 1; dirY = 0; break;
	default: return;
	}
	timeToMove = 0.0;
	}
	var ctr = 0;

	function moveSnake() {
	var curCell = grid[firstPoint[0]][firstPoint[1]];

	var newX = firstPoint[0] + dirX;
	var newY = firstPoint[1] + dirY;

	var newCell = grid[newX][newY];

	if ((newX < 0 \|\| newY < 0 \|\| newX > clsX \|\| newY > clsY) \|\| (newCell.type == T_PLR)) {
	return false;
	}

	firstPoint[0] = newX;
	firstPoint[1] = newY;

	curCell.nx = newX;
	curCell.ny = newY;

	if (newCell.type == T_PT) {
	// we ate new spawn point - do not remove last point
	spawnNewPoint();
	}
	else {
	// remove last point
	var lx = lastPoint[0];
	var ly = lastPoint[1];

	grid[lx][ly].type = T_EMPTY;
	lastPoint[0] = grid[lx][ly].nx;
	lastPoint[1] = grid[lx][ly].ny;
	grid[lx][ly].nx = grid[lx][ly].nx = -1;
	}

	newCell.type = T_PLR;
	return true;
	}

	var lastTime = 0;
	var MOVE_SPEED = 0.5;
	var timeToMove = MOVE_SPEED;
	function draw(time) {
	var dt = (time - lastTime) / 1000;
	lastTime = time;

	timeToMove -= dt;
	if (timeToMove <= 0.0) {
	if (! moveSnake(dirX, dirY)) {
	console.log("GAME OVER!");
	return;
	}
	timeToMove = MOVE_SPEED;
	}

	ctx.fillStyle="black";
	ctx.fillRect(0,0,w,h);

	for (var x = 0; x < clsX; ++x) {
	for (var y = 0; y < clsY; ++y) {
	var t = grid[x][y].type;
	if (t == T_EMPTY) {
	continue;
	}
	switch (t) {
	case T_PLR:
	ctx.fillStyle="white";
	break;
	case T_PT:
	ctx.fillStyle="yellow";
	break;
	}

	ctx.fillRect((c+1) * x , (c+1) * y, c, c);
	}
	}

	requestAnimationFrame(draw);
	}

	requestAnimationFrame(draw);
	</script>
	</body>