script.js

//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 vars
const gridSize = 20;
let snake = [{x: 10, y: 10}];
let food = generateFood();
let direction = 'up';
let gameInterval;
let gameStarted = false;
let gameSpeedDelay = 200;
let highScore = 0;

//draw game map, snake, food
function draw() {
  board.innerHTML = '';
  drawSnake();
  drawFood();
  updateScore();
}

function drawSnake() {
  snake.forEach(segment => {
    const snakeElement = createGameElement('div', 'snake');

    setPosition(snakeElement, segment);
    board.appendChild(snakeElement);
  });
}

//responsible for creating food cube or snake
function createGameElement(tag, className) {
  const el = document.createElement(tag);
  el.className = className;

  return el;
}

//set the position of the snake or food
function setPosition(element, position){
  element.style.gridColumn = position.x;
  element.style.gridRow = position.y;
}

function drawFood(){

  if(gameStarted) {
    const foodElement = createGameElement('div', 'food');
    setPosition(foodElement, food);
    board.appendChild(foodElement);
  }
}

function generateFood() {
  // the +1 is to simply start at 1 and not 0
  const x = Math.floor((Math.random() * gridSize) + 1);
  const y = Math.floor((Math.random() * gridSize) + 1);

  return { x, y };
}

function move(){
  const head = { ...snake[0] };

  switch(direction){
    case 'up':
      head.y--;
      break;
    case 'down':
      head.y++;
      break;
    case 'right':
      head.x++;
      break;
    case 'left':
      head.x--;
      break;
  }
  snake.unshift(head);
  // snake.pop();
  if(head.x === food.x && head.y === food.y) {
    food = generateFood();

    increaseSpeed();
    
    clearInterval(gameInterval);

    gameInterval = setInterval(() => {
      move();
      checkCollision();
      draw();
    }, gameSpeedDelay);
  } else {
    snake.pop();
  }
}

function startGame() {
  gameStarted = true; // keep track of a running game
  instructionText.style.display = 'none';
  logo.style.display = 'none';
  gameInterval = setInterval(() => {
    move();
    checkCollision()
    draw();
  }, gameSpeedDelay)
}

//create key press event listener

function handleKeyPress(e){
  if( (!gameStarted && e.code === 'Space') || (!gameStarted && e.key === ' ')){
    startGame()
  } else {
    switch(e.key) {
      case 'ArrowUp':
        direction = 'up'
        break;
      case 'ArrowDown':
        direction = 'down'
        break;
      case 'ArrowLeft':
        direction = 'left'
        break;
      case 'ArrowRight':
        direction = 'right'
        break;
    }
  }
}

document.addEventListener('keydown', handleKeyPress);


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 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();
    }
  }
}

function resetGame(){
  updateHighScore();
  stopGame();
  snake = [{x: 10, y: 10}]
  food = generateFood()
  direction = 'right'
  gameSpeedDelay = 200;

  updateScore();
}

function updateScore(){
  const currentScore = snake.length - 1; 
  //padStart is for the 0 placeholder
  score.textContent = currentScore.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) {
    highScore = currentScore;
    highScoreText.textContent = highScore.toString().padStart(3, '0');
  } 

  highScoreText.style.display = 'block';
}


// setInterval(()=> {
//   move();
//   draw();
// }, 200)

//testing draw function
// draw();