Tetris race!!!

tetrisrace.html

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

setup(); loop(); gameLoop = setInterval(loop, 75);

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

var gameLoop, canvas, context, gridSize, gridByX, gridByY, grid, border, carSide, cars, ahead, startMoment;

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

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d'); border = true;
	document.addEventListener('keydown', keydownHandler);
	carSide = 'right';

	gridByX = 10; gridByY = 20; gridSize = 25;
	canvas.width = gridByX * gridSize;
	canvas.height = gridByY * gridSize;
	cars = [{side: 'left', y: 0}];
	ahead = 0; startMoment = (new Date).getTime();
}

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

function loop () {
	clearCanvas();

	drawGrid();
	drawBorder();

	regCars();		
	drawCars();
	if (collision()) {
		var playingTime = (new Date).getTime() - startMoment;
		alert('Game over!!!\nYou spend ' + (parseInt(playingTime / 60000)) + ' minutes ' + (parseInt((playingTime - (parseInt(playingTime / 60000)) * 60000) / 1000)) + ' seconds.\nAnd ahead of ' + ahead + ' cars!');

		clearInterval(gameLoop);
	}
	drawYourCar();
}

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

function collision () {
	if (cars[0].side === carSide && (cars[0].y > 12)) return true;
}

function regCars () {
	var l = cars.length;
	cars.forEach(function (car) { car.y++; });
	cars = cars.filter(function (car) { return car.y < 20; });
	ahead += l - cars.length;

	if (cars.length < 3)
		cars.push({
			side: ['left', 'right'][Math.floor(Math.random() * 2)],
			y: cars[cars.length == 1 ? 0 : 1].y - 12
		});

}

function drawCars () {
	cars.forEach(function (car) {
		drawCar(car.side === 'left'? 2 : 5, car.y);
	});
}

function drawYourCar () {
	if (carSide === 'left') drawCar(2, 16);
	if (carSide === 'right') drawCar(5, 16);
}

function drawBorder () {
	for (var i = 0; i < 6; i++) {
		drawField(0, 0 + i * 3 + border, true);
		drawField(0, 1 + i * 3 + border, true);	
		drawField(9, 0 + i * 3 + border, true);
		drawField(9, 1 + i * 3 + border, true);		
	}

	if (border) {
		drawField(0, 19, true);
		drawField(9, 19, true);
	}

	border = !border;
}

function drawCar (x, y) {
	drawField(x + 1, y, true);
	drawField(x + 1, y + 1, true);
	drawField(x + 1, y + 2, true);
	drawField(x, y + 1, true);
	drawField(x, y + 3, true);
	drawField(x + 2, y + 1, true);
	drawField(x + 2, y + 3, true);
}

function drawGrid () {
	for (var i = 0; i < gridByX; i++)
		for (var j = 0; j < gridByY; j++)
			drawField(i, j);
}

function drawField (x, y, isActive) {
	x = x * gridSize; y = y * gridSize;

	if (isActive) {
		context.fillStyle = 'black';
		context.strokeStyle = 'black';
	} else {
		context.fillStyle = 'rgba(0, 0, 0, 0.2)';
		context.strokeStyle = 'rgba(0, 0, 0, 0.2)';
	}

	context.beginPath();
	context.rect(x + 3, y + 3, gridSize - 6, gridSize - 6);
	context.stroke();

	context.beginPath();
	context.rect(x + 7, y + 7, gridSize - 14, gridSize - 14);
	context.fill();
	context.stroke();
}

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

function keydownHandler (event) {
	if (event.which === 37) carSide = 'left';
	if (event.which === 39) carSide = 'right';
}

</script>