work 18. Feb 2020

html/tasks/chapter_10/snake/script.js

@@ -1,8 +1,8 @@
 // @ts-check
 
 /* Initialize variables */
-const pixelSize = 20;
-const pixelAmount = 40;
+const pixelSize = 20; //Cannot be odd
+const pixelAmount = 20;
 
 /* Register HTML DOM elements by variables */
 const canvas = document.getElementById('game');
@@ -13,52 +13,46 @@ const startButton = document.getElementById('start');
 document.addEventListener('keydown', updateDirection, false);
 startButton.addEventListener('click', gameLoop, false);
 
-/* Initialize HTML with functions */
+/* Initialize HTML */
 canvas.style.display = 'block';
-canvas.style.width = canvas.style.height = `${pixelSize * pixelAmount}px`;
+game.canvas.width = game.canvas.height = pixelSize * pixelAmount;
 canvas.style.backgroundColor = '#ffffff';
 
-/* Snake class */
-class snake {
-  constructor() {
-    this.x = 0;
-    this.y = 0;
-    this.speed = 5;
-    this.direction = 'left';
-    this.tail = [
-      [3, 0],
-      [2, 0],
-      [1, 0],
-      [0, 0],
-    ];
-    this.color = '#00ff00';
-  }
+/* Snake object */
+const snake = {
+  speed: 5, //in FPS
+  direction: 'right',
+  color: '#00ff00',
+  tail: [
+    [3, 0],
+    [2, 0],
+    [1, 0],
+    [0, 0],
+  ],
 
+  /* Draw the snake by the tail array */
   draw() {
     game.fillStyle = this.color;
+
     for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) {
       /* Correct tailpoint x and y to actual size */
-      const pixelPosition = this.tail[tailPoint].map(
-        point => point * pixelSize
-      );
-      game.fillRect(
-        pixelPosition[0],
-        pixelPosition[1],
-        pixelPosition[0] + pixelSize,
-        pixelPosition[1] + pixelSize
-      );
-    }
-  }
+      const realPosition = this.tail[tailPoint].map(point => point * pixelSize);
 
+      game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
+    }
+  },
+
+  /* Generate the next tail array */
   updateTail() {
-    this.tail.pop();
+    const realPosition = this.tail.pop().map(point => point * pixelSize);
+    game.clearRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
 
     switch (this.direction) {
       case 'left':
-        this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]);
+        this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]);
         break;
       case 'right':
-        this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]);
+        this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]);
         break;
       case 'up':
         this.tail.unshift([this.tail[0][0], this.tail[0][1] - 1]);
@@ -67,57 +61,77 @@ class snake {
         this.tail.unshift([this.tail[0][0], this.tail[0][1] + 1]);
         break;
     }
-  }
-}
+  },
+};
 
-/* Apple class */
-class apple {
-  constructor() {
-    this.x = 0;
-    this.y = 0;
-  }
-}
+/* Apple object */
+const apple = {
+  position: [20, 20],
+  color: 'red',
 
-const Snake = new snake();
+  /* Generate new coordinates */
+  generate() {
+    this.position.map(() => Math.floor(Math.random() * pixelAmount));
+  },
+
+  /* Draw the apple */
+  draw() {
+    const realPosition = this.position.map(point => point * pixelSize);
+
+    game.fillStyle = this.color;
+    game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
+  },
+};
 
 /* Wrapper function for gameloop */
 function gameLoop() {
-  /* Slow down loop */
+  /* Slow down loop by snake speed*/
   setTimeout(() => {
     window.requestAnimationFrame(gameLoop);
     gameUpdate();
-  }, 1000 / Snake.speed);
+  }, 1000 / snake.speed);
 }
 
 /* Function that is being run each tick */
 function gameUpdate() {
   /* Draw snake */
-  Snake.draw();
-  Snake.updateTail();
+  snake.draw();
+  snake.updateTail();
+
+  if (snake.tail[0] === apple.position) {
+  }
 }
 
 /* Update direction for snake */
 function updateDirection(evt) {
   const key = evt.code;
 
-  console.log(key);
+  console.debug(`Pressed %c${key}`, 'color: red');
 
   switch (key) {
     case 'ArrowLeft':
       evt.preventDefault();
-      Snake.direction = 'left';
+      if (snake.direction !== 'right') {
+        snake.direction = 'left';
+      }
       break;
     case 'ArrowRight':
       evt.preventDefault();
-      Snake.direction = 'right';
+      if (snake.direction !== 'left') {
+        snake.direction = 'right';
+      }
       break;
     case 'ArrowUp':
       evt.preventDefault();
-      Snake.direction = 'up';
+      if (snake.direction !== 'down') {
+        snake.direction = 'up';
+      }
       break;
     case 'ArrowDown':
       evt.preventDefault();
-      Snake.direction = 'down';
+      if (snake.direction !== 'up') {
+        snake.direction = 'down';
+      }
       break;
   }
 }