Added my snake.

.gitignore

@@ -0,0 +1 @@
+.idea

snake.html

@@ -17,8 +17,8 @@
 			}
 
 			.tile {
-				width: calc(100vmin/10);
+				width: calc(100vmin/30);
-				height: calc(100vmin/10);
+				height: calc(100vmin/30);
 				border: 1px solid black;
 				box-sizing: border-box;
 			}
@@ -37,11 +37,14 @@
 		</style>
 
 		<script>
+			const fieldSize = 30;
+
 			document.addEventListener("DOMContentLoaded", () => {
 				const game = document.getElementById("game");
 				const tileTemplate = document.getElementById("tile-template");
-				for (let x = 0; x < 10; x++) {
+
-					for (let y = 0; y < 10; y++) {
+				for (let x = 0; x < fieldSize; x++) {
+					for (let y = 0; y < fieldSize; y++) {
 						const tile = tileTemplate.content.cloneNode(true);
 						tile.querySelector(".tile").classList.add(y + "-" + x);
 						game.appendChild(tile);
@@ -65,13 +68,10 @@
 						upPressed();
 					} else if (e.key === "ArrowDown") {
 						downPressed();
-					} else if (e.key === "Escape") {
-						escPressed();
 					}
 				});
 
 				window.setInterval(() => {
-
 					gameUpdate();
 
 					for (const tile of document.querySelectorAll(".body, .head, .fruit")) {
@@ -87,83 +87,62 @@
 					if (fruit !== null) {
 						document.getElementsByClassName(fruit.x + "-" + fruit.y)[0].classList.add("fruit");
 					}
-				}, 300);
+				}, 100);
 
 				// this is where your implementation starts
-				let dir = 1; //orientation variable, 0 = up, 1 = right, 2 = down, 3 = left
+
-				let paused = false;
+				let direction = {x: 0, y: 0}
-				let justAte = false;
+				let length = 1;
-				function getRand(x) {
+
-					return Math.floor(Math.random() * x);
+				fruit = randomPlace();
+
+				function vectorAdd(a,b) {
+					return {x: a.x+b.x, y: a.y+b.y}
 				}
+
+				function randomPlace() {
+					return {x: Math.round(Math.random() * (fieldSize-1)), y: Math.round(Math.random() * (fieldSize-1))};
+				}
+
 				function gameUpdate() {
-					if(paused){
+					const oldSnake = snake[0];
-						return;
+					const newSnake = vectorAdd(oldSnake, direction);
-					}
+					newSnake.x = (fieldSize + newSnake.x) % fieldSize
+					newSnake.y = (fieldSize + newSnake.y) % fieldSize
+					snake.unshift(newSnake);
+					snake = snake.slice(0, length);
 
-					if (fruit === null) {
+					for (let i = 1; i < snake.length; i++) {
-						fruit = {x: getRand(10), y: getRand(10)};
+						if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
+							length = 1;
+							snake = [{x:0, y:0}];
+							fruit = randomPlace();
+						}
 					}
-					//console.log(dir);
-					
 					if (fruit.x === snake[0].x && fruit.y === snake[0].y) {
-						justAte = true;
+						length++;
-						fruit = null;
+						fruit = randomPlace();
-						snake.unshift({...snake[0]});
 					}
-					if (!justAte) {
-						for (let i = snake.length - 1; i > 0; i--){
-							snake[i].x = snake[i-1].x;
-							snake[i].y = snake[i-1].y;
-						}
-					}
-					switch (dir) {
-						case 1:
-							snake[0].x += 1					
-							break;
-						case 2:
-							snake[0].y += 1
-							break;
-						case 3:
-							snake[0].x -= 1
-							break;
-						case 0:
-							snake[0].y -= 1
-							break;
 
-					}
-					for (let index = snake.length - 1; index > 0; index--) {
-						const element = snake[index];
-						if (snake[0].x === element.x && snake[0].y === element.y){
-							alert('You suck at snake');
-							window.location.replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=PLahKLy8pQdCM0SiXNn3EfGIXX19QGzUG3');
 
-						}
+
-						
+				}
-					}
+
-					snake[0].x = (snake[0].x + 10) % 10;
-					snake[0].y = (snake[0].y + 10) % 10;
-					justAte = false;
-				}	
 				function leftPressed() {
-					dir = 3;
+					direction = {x: -1, y: 0};
 				}
 
 				function rightPressed() {
-					dir = 1;
+					direction = {x: 1, y: 0};
 				}
 
 				function upPressed() {
-					dir = 0;
+					direction = {x: 0, y: -1};
 				}
 
 				function downPressed() {
-					dir = 2;
+					direction = {x: 0, y: 1};
 				}
-				function escPressed() {
-					paused = !paused
-				}
-
 			});
 		</script>
 	</head>