Snake

script.js

@@ -1,11 +1,11 @@
-// Define HTML elements
+// 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
+// Game variables
 const gridSize = 20;
 let snake = [{ x: 10, y: 10 }];
 let food = generateFood();
@@ -15,7 +15,14 @@ let gameInterval;
 let gameSpeedDelay = 200;
 let gameStarted = false;
 
-// Draw game map, snake, food
+// Swipe variables
+let touchStartX = 0;
+let touchStartY = 0;
+let touchEndX = 0;
+let touchEndY = 0;
+const minSwipeDistance = 30;
+
+// Draw game
 function draw() {
   board.innerHTML = '';
   drawSnake();
@@ -25,153 +32,119 @@ function draw() {
 
 // Draw snake
 function drawSnake() {
-  snake.forEach((segment) => {
-    const snakeElement = createGameElement('div', 'snake');
-    setPosition(snakeElement, segment);
+  snake.forEach(segment => {
+    const snakeElement = document.createElement('div');
+    snakeElement.className = 'snake';
+    snakeElement.style.gridColumnStart = segment.x;
+    snakeElement.style.gridRowStart = segment.y;
     board.appendChild(snakeElement);
   });
 }
 
-// Create a snake or food cube/div
-function createGameElement(tag, className) {
-  const element = document.createElement(tag);
-  element.className = className;
-  return element;
-}
-
-// Set the position of snake or food
-function setPosition(element, position) {
-  element.style.gridColumn = position.x;
-  element.style.gridRow = position.y;
-}
-
-// Testing draw function
-// draw();
-
-// Draw food function
+// Draw food
 function drawFood() {
-  if (gameStarted) {
-    const foodElement = createGameElement('div', 'food');
-    setPosition(foodElement, food);
-    board.appendChild(foodElement);
-  }
+  if (!gameStarted) return;
+  const foodElement = document.createElement('div');
+  foodElement.className = 'food';
+  foodElement.style.gridColumnStart = food.x;
+  foodElement.style.gridRowStart = food.y;
+  board.appendChild(foodElement);
 }
 
 // Generate food
 function generateFood() {
-  const x = Math.floor(Math.random() * gridSize) + 1;
-  const y = Math.floor(Math.random() * gridSize) + 1;
-  return { x, y };
+  return {
+    x: Math.floor(Math.random() * gridSize) + 1,
+    y: Math.floor(Math.random() * gridSize) + 1
+  };
 }
 
-// Moving the snake
+// Move snake
 function move() {
   const head = { ...snake[0] };
   switch (direction) {
-    case 'up':
-      head.y--;
-      break;
-    case 'down':
-      head.y++;
-      break;
-    case 'left':
-      head.x--;
-      break;
-    case 'right':
-      head.x++;
-      break;
+    case 'up': head.y--; break;
+    case 'down': head.y++; break;
+    case 'left': head.x--; break;
+    case 'right': head.x++; break;
   }
-
   snake.unshift(head);
 
-  //   snake.pop();
-
   if (head.x === food.x && head.y === food.y) {
     food = generateFood();
     increaseSpeed();
-    clearInterval(gameInterval); // Clear past interval
-    gameInterval = setInterval(() => {
-      move();
-      checkCollision();
-      draw();
-    }, gameSpeedDelay);
-  } else {
-    snake.pop();
-  }
+    resetInterval();
+  } else snake.pop();
 }
 
-// Test moving
-// setInterval(() => {
-//   move(); // Move first
-//   draw(); // Then draw again new position
-// }, 200);
-
-// Start game function
+// Start game
 function startGame() {
-  gameStarted = true; // Keep track of a running game
+  if (gameStarted) return;
+  gameStarted = true;
   instructionText.style.display = 'none';
   logo.style.display = 'none';
-  gameInterval = setInterval(() => {
-    move();
-    checkCollision();
-    draw();
-  }, gameSpeedDelay);
+  gameInterval = setInterval(() => { move(); checkCollision(); draw(); }, gameSpeedDelay);
 }
 
-// Keypress event listener
-function handleKeyPress(event) {
-  if (
-    (!gameStarted && event.code === 'Space') ||
-    (!gameStarted && event.key === ' ')
-  ) {
-    startGame();
-  } else {
-    switch (event.key) {
-      case 'ArrowUp':
-        direction = 'up';
-        break;
-      case 'ArrowDown':
-        direction = 'down';
-        break;
-      case 'ArrowLeft':
-        direction = 'left';
-        break;
-      case 'ArrowRight':
-        direction = 'right';
-        break;
-    }
-  }
+// Keyboard control
+function handleKeyPress(e) {
+  if (!gameStarted && (e.code === 'Space' || e.key === ' ')) startGame();
+  if (e.key === 'ArrowUp' && direction !== 'down') direction = 'up';
+  if (e.key === 'ArrowDown' && direction !== 'up') direction = 'down';
+  if (e.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
+  if (e.key === 'ArrowRight' && direction !== 'left') direction = 'right';
 }
-
 document.addEventListener('keydown', handleKeyPress);
 
-function increaseSpeed() {
-  //   console.log(gameSpeedDelay);
-  if (gameSpeedDelay > 150) {
-    gameSpeedDelay -= 5;
-  } else if (gameSpeedDelay > 100) {
-    gameSpeedDelay -= 3;
-  } else if (gameSpeedDelay > 50) {
-    gameSpeedDelay -= 2;
-  } else if (gameSpeedDelay > 25) {
-    gameSpeedDelay -= 1;
+// Swipe control
+board.addEventListener('touchstart', e => {
+  const touch = e.touches[0];
+  touchStartX = touch.clientX;
+  touchStartY = touch.clientY;
+});
+board.addEventListener('touchend', e => {
+  const touch = e.changedTouches[0];
+  touchEndX = touch.clientX;
+  touchEndY = touch.clientY;
+  handleSwipe();
+});
+board.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
+
+function handleSwipe() {
+  const dx = touchEndX - touchStartX;
+  const dy = touchEndY - touchStartY;
+  if (Math.abs(dx) < minSwipeDistance && Math.abs(dy) < minSwipeDistance) return;
+  if (Math.abs(dx) > Math.abs(dy)) {
+    if (dx > 0 && direction !== 'left') direction = 'right';
+    else if (dx < 0 && direction !== 'right') direction = 'left';
+  } else {
+    if (dy > 0 && direction !== 'up') direction = 'down';
+    else if (dy < 0 && direction !== 'down') direction = 'up';
   }
+  if (!gameStarted) startGame();
 }
 
+// Increase speed
+function increaseSpeed() {
+  if (gameSpeedDelay > 150) gameSpeedDelay -= 5;
+  else if (gameSpeedDelay > 100) gameSpeedDelay -= 3;
+  else if (gameSpeedDelay > 50) gameSpeedDelay -= 2;
+  else if (gameSpeedDelay > 25) gameSpeedDelay -= 1;
+}
+
+function resetInterval() {
+  clearInterval(gameInterval);
+  gameInterval = setInterval(() => { move(); checkCollision(); draw(); }, gameSpeedDelay);
+}
+
+// Collision
 function checkCollision() {
   const head = snake[0];
-
-  if (head.x < 1 || head.x > gridSize || head.y < 1 || head.y > gridSize) {
-    resetGame();
-  }
-
-  for (let i = 1; i < snake.length; i++) {
-    if (head.x === snake[i].x && head.y === snake[i].y) {
-      resetGame();
-    }
-  }
+  if (head.x < 1 || head.x > gridSize || head.y < 1 || head.y > gridSize) resetGame();
+  for (let i = 1; i < snake.length; i++) if (head.x === snake[i].x && head.y === snake[i].y) resetGame();
 }
 
+// Reset game
 function resetGame() {
   updateHighScore();
   stopGame();
@@ -179,21 +152,19 @@ function resetGame() {
   food = generateFood();
   direction = 'right';
   gameSpeedDelay = 200;
-  updateScore();
+  draw();
 }
 
+// Score
 function updateScore() {
-  const currentScore = snake.length - 1;
-  score.textContent = currentScore.toString().padStart(3, '0');
+  score.textContent = (snake.length - 1).toString().padStart(3, '0');
 }
-
 function stopGame() {
   clearInterval(gameInterval);
   gameStarted = false;
   instructionText.style.display = 'block';
   logo.style.display = 'block';
 }
-
 function updateHighScore() {
   const currentScore = snake.length - 1;
   if (currentScore > highScore) {