<script src='jquery.js'></script>
Score: <span></span>
<br>
<table border=1>
</table>
<style>
table{
border-collapse:collapse;
}
td{
width:15px;
height:15px;
}
.food{
	background:red;
}
.snake{
	background:green;
}
.snake.food{
	background:red;
}
</style>
<script>
let pom='',
vh=0,vw=-1,size=20;
for(let i =0; i < size ; i++)
{
	pom+='<tr>';
	for(let j =0; j < size ; j++)
	{
		pom+='<td></td>';
	}
	pom+='<tr>';
}
$('table').html(pom);
$('body').keydown((e)=>{
	switch(e.which)
	{
		case 37:
			vh=0;
			vw=-1;
			break;
		case 38:
			vh=-1;
			vw=0;
			break;
		case 39:
			vh=0;
			vw=+1;
			break;
		case 40:
			vh=1;
			vw=0;
			break;
	}
});

let tail=[[0,0],[0,1],[0,2],[0,3],[0,4]];
let food=[Math.floor(Math.random()*size),Math.floor(Math.random()*size)];
let interval=setInterval(game,1000/10);
function game()
{

	let pom=[((tail[0][0]+vh)%size+size)%size,((tail[0][1]+vw)%size+size)%size];
	if(pom[0]==food[0]&&pom[1]==food[1])
	{
		$('td').eq(food[0]*size+food[1]).removeClass();
		food=[Math.floor(Math.random()*size),Math.floor(Math.random()*size)];
	}
	else
	{
		let rem=tail.pop();
		$('td').eq(rem[0]*size+rem[1]).removeClass();

	}
	for(let i=0;i<tail.length;i++)
	{
		if(tail[i][0]==pom[0]&&tail[i][1]==pom[1])
		{
			clearInterval(interval);
			alert('You lost, Score : '+ (tail.length+1));
			location.reload();
			break;
		}
	}
	tail.unshift(pom);
	$('td').eq(pom[0]*size+pom[1]).addClass('snake');
	$('td').eq(food[0]*size+food[1]).addClass('food');
	$('span').text(tail.length);
}
</script>