Untitled

<!doctype=html>
<html>
<head>
	<tittle>
	</tittle>
	<style>
			body{
				background-color: black;
				display: flex;
				align-items:center;
				justify-content: center;
			}
			canvas{
				border:3px solid #fff;
			}
		</style>
</head>
<body>
	<canvas></canvas>
	<script>
			//mapa
			const block=50;
			const map_blocks=5;
			const map_size=block*map_blocks;
			//canvas
			const canvas = document.querySelector('canvas');
			const ctx = canvas.getContext('2d');
			canvas.width=map_size;
			canvas.height=map_size;
			var X=canvas.width;
			var Y=canvas.height;
			//fruit
			var fruitX=((Math.floor(Math.random()*map_blocks)+1)*block)-block;
			var fruitY=((Math.floor(Math.random()*map_blocks)+1)*block)-block;
			var s;

		function setup()
		{
			s = new snake();
		}
		function table()
		{
			ctx.fillStyle='black';
			ctx.fillRect(0,0,X,Y);
					for(let i=block; i<=X ; i+=block){
						ctx.beginPath();
						ctx.moveTo(i,0);
						ctx.lineTo(i, Y);
						ctx.lineWidth = 5;
						ctx.strokeStyle= 'white';
						ctx.stroke();
						ctx.beginPath();
						ctx.moveTo(0,i);
						ctx.lineTo(X, i);
						ctx.lineWidth = 5;
						ctx.strokeStyle= 'white';
						ctx.stroke();
					}
		}

		function snake()
		{
			this.x=(X-block)/2;
			this.x=(Y-block)/2;
			this.xspeed=1;
			this.yspeed=0;

			this.update=function()
			{
				this.x+=this.xspeed;
				this.y+=this.yspeed;
			}
			this.show = function ()
			{
				ctx.fillStyle='white';
				ctx.fillRect(this.x,this.y,block,block);
			}
		}
		function draw()
		{
			table();
			s.update();
			s.show();
		}
		setup();
		setInterval(draw,1000/5);
	</script>
</body>
</html>