Update with correct files from video tutorial

script.js

@@ -1,60 +1,55 @@
-// 1) Define DOM elements from HTML. 1
-const board = document.getElementById('game-board'); // 1
-const instructionText = document.getElementById('instruction-text'); // 12
-const logo = document.getElementById('logo'); // 12
-const score = document.getElementById('score'); // 17
-const highScoreText = document.getElementById('highScore'); // 19
+// Define HTML elements
+const board = document.getElementById('game-board');
+const instructionText = document.getElementById('instruction-text');
+const logo = document.getElementById('logo');
+const score = document.getElementById('score');
+const highScoreText = document.getElementById('highScore');
 
 // Define game variables
-const gridSize = 20; // 7
-let snake = [{ x: 10, y: 10 }]; // 2
-let food = generateFood(); // 6
-let highScore = 0; // 19
-let direction = 'right'; // 9
+const gridSize = 20;
+let snake = [{ x: 10, y: 10 }];
+let food = generateFood();
+let highScore = 0;
+let direction = 'right';
 let gameInterval;
-let gameSpeedDelay = 200; // 11
-let gameStarted = false; // 12
+let gameSpeedDelay = 200;
+let gameStarted = false;
 
-// 1) Draw game map, snake and food
+// Draw game map, snake, food
 function draw() {
-  board.innerHTML = ''; // Clear the board in case game has started previously.
-  drawSnake(); // 2) Draw snake
-  drawFood(); // 6 Draw food
+  board.innerHTML = '';
+  drawSnake();
+  drawFood();
   updateScore();
 }
 
-// 2) Draw snake function
+// Draw snake
 function drawSnake() {
   snake.forEach((segment) => {
-    const snakeElement = createGameElement('div', 'snake'); // 3
-    setPosition(snakeElement, segment); // 4
-    board.appendChild(snakeElement); // 5
+    const snakeElement = createGameElement('div', 'snake');
+    setPosition(snakeElement, segment);
+    board.appendChild(snakeElement);
   });
 }
 
-// 3) Create a snake or food cube
+// Create a snake or food cube/div
 function createGameElement(tag, className) {
   const element = document.createElement(tag);
   element.className = className;
   return element;
 }
 
-// 4) Set the position of snake or food
+// Set the position of snake or food
 function setPosition(element, position) {
-  element.style.gridColumn = position.x; // Using CSS gridColumn property to position the cube
+  element.style.gridColumn = position.x;
   element.style.gridRow = position.y;
 }
 
-// 5 Call draw as test
+// Testing draw function
 // draw();
 
-// 6) Draw food function
+// Draw food function
 function drawFood() {
-  // 20) INITIAL WAY BEFORE END TWEAK TO REMOVE FOOD RENDERING BEFORE START
-  // const foodElement = createGameElement('div', 'food');
-  // setPosition(foodElement, food);
-  // board.appendChild(foodElement);
-
   if (gameStarted) {
     const foodElement = createGameElement('div', 'food');
     setPosition(foodElement, food);
@@ -62,21 +57,19 @@ function drawFood() {
   }
 }
 
-// 7) Initial way to generate food without taking into account snake position
+// Generate food
 function generateFood() {
   const x = Math.floor(Math.random() * gridSize) + 1;
   const y = Math.floor(Math.random() * gridSize) + 1;
   return { x, y };
 }
 
-// 8) Moving the snake function
+// Moving the snake
 function move() {
-  const head = { ...snake[0] }; // Spread operator creates shalow copy and does not alter the original snake[0] object
-  switch (
-    direction // 9
-  ) {
+  const head = { ...snake[0] };
+  switch (direction) {
     case 'up':
-      head.y--; // starts at 1 from top.
+      head.y--;
       break;
     case 'down':
       head.y++;
@@ -89,52 +82,50 @@ function move() {
       break;
   }
 
-  snake.unshift(head); // Adding head object to beginning of snake array.
+  snake.unshift(head);
 
-  // snake.pop(); 10) Testing move function
+  //   snake.pop();
 
   if (head.x === food.x && head.y === food.y) {
-    food = generateFood(); // Call function again to replace food position
-    increaseSpeed(); // 14) MAKE START GAME FUNCTION FIRST! Increase game speed
+    food = generateFood();
+    increaseSpeed();
     clearInterval(gameInterval); // Clear past interval
     gameInterval = setInterval(() => {
-      // The interval ensures the continuous execution of the game loop, preventing it from blocking the event loop and allowing for smooth updates after the snake eats food. Else the game stops when eating food.
       move();
-      checkCollision(); // 15
+      checkCollision();
       draw();
-    }, gameSpeedDelay); // 11)
+    }, gameSpeedDelay);
   } else {
-    snake.pop(); // Removing last object inside snake array, if food is not eated.
+    snake.pop();
   }
 }
 
-// 10) Testing the move function
+// Test moving
 // setInterval(() => {
 //   move(); // Move first
 //   draw(); // Then draw again new position
-// }, 200); // The interval time in ms
+// }, 200);
 
-// 12) Start game function
+// Start game function
 function startGame() {
-  gameStarted = true; // Keep track of running game
-  instructionText.style.display = 'none'; // Hide text and logo on start
+  gameStarted = true; // Keep track of a running game
+  instructionText.style.display = 'none';
   logo.style.display = 'none';
   gameInterval = setInterval(() => {
     move();
     checkCollision();
-    draw(); // REMEMBER to comment out DRAW TEST on line 48!
+    draw();
   }, gameSpeedDelay);
 }
 
-// 13) Keypresses
+// Keypress event listener
 function handleKeyPress(event) {
   if (
     (!gameStarted && event.code === 'Space') ||
     (!gameStarted && event.key === ' ')
   ) {
-    startGame(); // Start game on enter key press
+    startGame();
   } else {
-    // Change direction variable based on arrows
     switch (event.key) {
       case 'ArrowUp':
         direction = 'up';
@@ -154,9 +145,8 @@ function handleKeyPress(event) {
 
 document.addEventListener('keydown', handleKeyPress);
 
-// 14)
 function increaseSpeed() {
-  // console.log('speed'); // just to have the function before start
+  //   console.log(gameSpeedDelay);
   if (gameSpeedDelay > 150) {
     gameSpeedDelay -= 5;
   } else if (gameSpeedDelay > 100) {
@@ -168,17 +158,13 @@ function increaseSpeed() {
   }
 }
 
-// 15)
 function checkCollision() {
-  // console.log('collision'); // just to have the function before start
   const head = snake[0];
 
-  // Check if snake hits walls
   if (head.x < 1 || head.x > gridSize || head.y < 1 || head.y > gridSize) {
     resetGame();
   }
 
-  // Check if snake hits itself
   for (let i = 1; i < snake.length; i++) {
     if (head.x === snake[i].x && head.y === snake[i].y) {
       resetGame();
@@ -186,32 +172,28 @@ function checkCollision() {
   }
 }
 
-// 16)
 function resetGame() {
-  updateHighScore(); // 19)
-  stopGame(); // 18)
+  updateHighScore();
+  stopGame();
   snake = [{ x: 10, y: 10 }];
   food = generateFood();
   direction = 'right';
   gameSpeedDelay = 200;
-  updateScore(); // 17)
+  updateScore();
 }
 
-// 17) REMEMBER TO CALL FUNCTION ON LINE 23!
 function updateScore() {
-  const currentScore = snake.length - 1; // -1 is added otherwise it would start at 1
+  const currentScore = snake.length - 1;
   score.textContent = currentScore.toString().padStart(3, '0');
 }
 
-// 18)
 function stopGame() {
-  clearInterval(gameInterval); // We need to stop it else snake keeps moving.
-  gameStarted = false; // We need to set it to false so we can start the game with enter again
+  clearInterval(gameInterval);
+  gameStarted = false;
   instructionText.style.display = 'block';
   logo.style.display = 'block';
 }
 
-// 19)
 function updateHighScore() {
   const currentScore = snake.length - 1;
   if (currentScore > highScore) {
@@ -220,5 +202,3 @@ function updateHighScore() {
   }
   highScoreText.style.display = 'block';
 }
-
-// 20) Tweak food rendering on line 52