"use strict";

document.addEventListener("DOMContentLoaded", () => {
  const cvs = document.getElementById("game");
  const ctx = cvs.getContext("2d");
  const startBtn = document.getElementById("start");
  const description = document.getElementById("description");
  const box = 32;

  const ground = new Image();
  ground.src = "img/ground.png";

  const foodImg = new Image();
  foodImg.src = "img/food.png";

  let dead = new Audio("audio/dead.mp3");
  let eat = new Audio("audio/eat.mp3");
  let up = new Audio("audio/up.mp3");
  let right = new Audio("audio/right.mp3");
  let left = new Audio("audio/left.mp3");
  let down = new Audio("audio/down.mp3");

  let snake = [{ x: 9 * box, y: 10 * box }];
  let food = {
    x: Math.floor(Math.random() * 17 + 1) * box,
    y: Math.floor(Math.random() * 15 + 3) * box,
  };
  let score = 0;
  let d;
  let game;

  document.addEventListener("keydown", direction);
  document
    .getElementById("up")
    .addEventListener("click", () => changeDirection("UP"));
  document
    .getElementById("down")
    .addEventListener("click", () => changeDirection("DOWN"));
  document
    .getElementById("left")
    .addEventListener("click", () => changeDirection("LEFT"));
  document
    .getElementById("right")
    .addEventListener("click", () => changeDirection("RIGHT"));
  startBtn.addEventListener("click", startGame);

  function direction(event) {
    const key = event.key.toLowerCase();
    if ((key === "arrowleft" || key === "a") && d !== "RIGHT")
      changeDirection("LEFT");
    if ((key === "arrowup" || key === "w") && d !== "DOWN")
      changeDirection("UP");
    if ((key === "arrowright" || key === "d") && d !== "LEFT")
      changeDirection("RIGHT");
    if ((key === "arrowdown" || key === "s") && d !== "UP")
      changeDirection("DOWN");
  }

  function changeDirection(newDirection) {
    d = newDirection;
    if (newDirection === "LEFT") left.play();
    if (newDirection === "UP") up.play();
    if (newDirection === "RIGHT") right.play();
    if (newDirection === "DOWN") down.play();
  }

  function collision(head, array) {
    return array.some(
      (segment) => segment.x === head.x && segment.y === head.y
    );
  }

  function draw() {
    ctx.drawImage(ground, 0, 0);
    snake.forEach((segment, index) => {
      ctx.fillStyle = index === 0 ? "green" : "white";
      ctx.fillRect(segment.x, segment.y, box, box);
      ctx.strokeStyle = "red";
      ctx.strokeRect(segment.x, segment.y, box, box);
    });
    ctx.drawImage(foodImg, food.x, food.y);

    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
    if (d === "LEFT") snakeX -= box;
    if (d === "UP") snakeY -= box;
    if (d === "RIGHT") snakeX += box;
    if (d === "DOWN") snakeY += box;

    if (snakeX === food.x && snakeY === food.y) {
      score++;
      eat.play();
      food = {
        x: Math.floor(Math.random() * 17 + 1) * box,
        y: Math.floor(Math.random() * 15 + 3) * box,
      };
    } else {
      snake.pop();
    }

    let newHead = { x: snakeX, y: snakeY };
    if (
      snakeX < box ||
      snakeX > 17 * box ||
      snakeY < 3 * box ||
      snakeY > 17 * box ||
      collision(newHead, snake)
    ) {
      clearInterval(game);
      dead.play();
    }

    snake.unshift(newHead);
    ctx.fillStyle = "white";
    ctx.font = "45px Changa one";
    ctx.fillText(score, 2 * box, 1.6 * box);
  }

  function startGame() {
    description.style.display = "none";
    game = setInterval(draw, 100);
  }
});