Work 19. Feb

html/tasks/chapter_10/snake/oppgave.html

@@ -16,6 +16,12 @@
       <canvas id="game"></canvas>
 
       <button class="big" id="start">Start game</button>
+      score: <span id="score"></span> Highscore: <span id="highscore"></span>
+      <form id="pixelAmountForm">
+        <label for="pixelAmount">Size of map:</label>
+        <input type="number" id="pixelAmount" min="5" max="40" value="20">
+        <input type="submit" value="Apply">
+      </form>
 
     </div>
 

html/tasks/chapter_10/snake/script.js

@@ -1,26 +1,27 @@
-// @ts-check
-
 /* Initialize variables */
 const pixelSize = 20; //Cannot be odd
-const pixelAmount = 20;
+let pixelAmount = 20;
+let score = 0;
+if (localStorage.highscore) {
+  var highscore = localStorage.highscore; //TODO: global let inside if statement?
+} else {
+  highscore = 0;
+}
 
 /* Register HTML DOM elements by variables */
 const canvas = document.getElementById('game');
-const game = canvas.getContext('2d');
+const ctx = canvas.getContext('2d');
-const startButton = document.getElementById('start');
+const startButton = document.getElementById('start'); //TODO: Add canvas size selector, score, higscore,
-
+const pixelAmountInput = document.getElementById('pixelAmount');
-/* Add event listeners */
+const pixelAmountForm = document.getElementById('pixelAmountForm');
-document.addEventListener('keydown', updateDirection, false);
-startButton.addEventListener('click', gameLoop, false);
 
 /* Initialize HTML */
 canvas.style.display = 'block';
-game.canvas.width = game.canvas.height = pixelSize * pixelAmount;
+ctx.canvas.width = ctx.canvas.height = (pixelAmount + 1) * pixelSize;
 canvas.style.backgroundColor = '#ffffff';
 
 /* Snake object */
 const snake = {
-  speed: 5, //in FPS
   direction: 'right',
   color: '#00ff00',
   tail: [
@@ -32,21 +33,22 @@ const snake = {
 
   /* Draw the snake by the tail array */
   draw() {
-    game.fillStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const clearPosition = this.tail.pop().map(point => point * pixelSize);
+    ctx.clearRect(clearPosition[0], clearPosition[1], pixelSize, pixelSize);
 
     for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) {
       /* Correct tailpoint x and y to actual size */
       const realPosition = this.tail[tailPoint].map(point => point * pixelSize);
 
-      game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
+      ctx.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
     }
   },
 
   /* Generate the next tail array */
   updateTail() {
-    const realPosition = this.tail.pop().map(point => point * pixelSize);
+    //Add new point to tail based on snake direction
-    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]]);
@@ -62,45 +64,110 @@ const snake = {
         break;
     }
   },
+
+  tailCrossing() {
+    return new Set(this.tail).size !== this.tail.length; //TODO: fix function
+  },
 };
 
 /* Apple object */
 const apple = {
-  position: [20, 20],
+  position: [Math.floor(pixelAmount / 2), Math.floor(pixelAmount / 2)],
   color: 'red',
 
   /* Generate new coordinates */
-  generate() {
+  generatePosition() {
-    this.position.map(() => Math.floor(Math.random() * pixelAmount));
+    this.position = this.position.map(
+      () => Math.floor(Math.random() * pixelAmount) //TODO: Don't put the apple on top of the snake
+    );
+    console.debug(`%cApple position: ${this.position}`, 'color: red');
   },
 
   /* Draw the apple */
   draw() {
     const realPosition = this.position.map(point => point * pixelSize);
 
-    game.fillStyle = this.color;
+    ctx.fillStyle = this.color;
-    game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
+    ctx.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize);
   },
 };
 
-/* Wrapper function for gameloop */
+/* Handles everything that happens on the canvas */
-function gameLoop() {
+const game = {
-  /* Slow down loop by snake speed*/
+  fps: 5,
-  setTimeout(() => {
+  over: false,
-    window.requestAnimationFrame(gameLoop);
-    gameUpdate();
-  }, 1000 / snake.speed);
-}
 
-/* Function that is being run each tick */
+  /* Game init function */
-function gameUpdate() {
+  init() {
+    apple.draw();
+  },
+
+  /* Game loop function */
+  loop() {
     /* Draw snake */
-  snake.draw();
     snake.updateTail();
+    snake.draw();
 
-  if (snake.tail[0] === apple.position) {
+    if (JSON.stringify(snake.tail[0]) === JSON.stringify(apple.position)) {
+      console.debug('Snake ate apple');
+      score += 1;
+      snake.updateTail();
+      apple.generatePosition();
+      apple.draw();
+    }
+    if (
+      snake.tail[0][0] > pixelAmount ||
+      snake.tail[0][1] > pixelAmount ||
+      snake.tail[0][0] < 0 ||
+      snake.tail[0][1] < 0 ||
+      snake.tailCrossing()
+    ) {
+      this.over = true;
+    }
+  },
+};
+
+/* Wrapper function requesting a gameloop */
+function getLoop() {
+  /* Slow down loop by game fps */
+  setTimeout(() => {
+    window.requestAnimationFrame(getLoop);
+    game.loop();
+
+    if (game.over) {
+      console.debug('Game over'); //TODO: Exit game loop properly
+
+      if (score > highscore) {
+        console.debug('New highcore');
+        highscore = score;
+        window.localStorage.setItem('highscore', highscore);
       }
     }
+  }, 1000 / game.fps);
+}
+
+/* Add event listeners */
+document.addEventListener('keydown', updateDirection, false);
+startButton.addEventListener(
+  'click',
+  () => {
+    game.init();
+    getLoop();
+  },
+  false
+);
+pixelAmountForm.addEventListener('submit', updatePixelAmount, false);
+
+/* Updates size of canvas */
+function updatePixelAmount(evt) {
+  evt.preventDefault();
+  pixelAmount = parseInt(pixelAmountInput.value);
+  console.debug('Updated canvas size');
+  ctx.canvas.width = ctx.canvas.height = (pixelAmount + 1) * pixelSize;
+}
+
+/* Clear higscore from localStorage */
+const clearHighscore = () => (localStorage.highscore = 0);
 
 /* Update direction for snake */
 function updateDirection(evt) {
@@ -133,5 +200,7 @@ function updateDirection(evt) {
         snake.direction = 'down';
       }
       break;
+
+    //TODO: Add pause function
   }
 }