scriptFor1v1.js

let arrayWords = [
  "DELTA",
  "PRAGYAN",
  "TRICHY",
  "NIT",
  "CODE",
  "WEBDEV",
  "FEST",
  "DESIGN",
  "INDUCT",
  "SPACE",
  "NODE",
  "CANVAS",
  "EXPRESS",
  "DEEP",
  "REACT",
  "GOLANG",
  "JQUERY",
  "MONGO",
  "APPLE",
  "ANDROID",
  "BOTTLE",
  "MOUSE",
];
let scoreBool = true;
let loadBool = true;
let deleteBooster = [];
let boolForBooster = false;
let boostBool = false;
let timerForBooster;
let timerForBoosterTime;
let randomWord;
let randomIndex;
let letters;
let boardSelector = document.querySelector(".game-container");
let targetSelector = document.querySelector(".sequence");
let letterX, letterY;
let started = false;
let boolTimer = true;
let velocityX = 0;
let velocityY = 0;
let velocityXv = 0;
let velocityYv = 0;
let seconds = 60;
// let scoreSelector = document.querySelector(".scoreit .score");
// let highscoreSelector = document.querySelector(".scoreit .HighScore");
let timerSelector = document.querySelector(".timer");
let gameBoxSelector = document.querySelector(".gameBox");
let gridSelector = document.querySelector(".game-container");
let resumeButtonSelector = document.querySelector(".resume");
let pauseButtonSelector = document.querySelector(".fa-pause");
let mobilePauseSelector = document.querySelector(".fa-circle-pause");
let obstotalNumber = 3;
let colorIndex;
let boolforListener = true;
let boolUp = true;
let boolDown = true;
let boolColor = -1;
let heartNumber = 1;
let heartBool = true;
let score = 0;
let headBoolean = true;
let ReloadGameNumber = 0;
// let highScore = localStorage.getItem("high-score") || 0;
//
// highscoreSelector.textContent = "HighScore = " + String(highScore);
let boolForBoosterMega = false;
let speedBoosterMegaX;
let speedBoosterMegaY;
let boolNow = false;
let letterSoundEffect = new Audio("cartoonBite.mp3");
let loseLifeSoundEffect = new Audio("loseLife.mp3");
let bonusSoundEffect = new Audio("bonus.mp3");
let wrongSoundEffect = new Audio("incorrect.mp3");
let bgMusic = new Audio("bgmusic.mp3");
let clickSoundEffect = new Audio("click.wav");
let r = document.querySelector(":root");
let clickSoundBool = true;
let displaySet = r.style.setProperty("--display", "none");
document.querySelector(".fa-volume-high").addEventListener("click", (event) => {
  if (event.target.classList.contains("emptyList")) {
    displaySet = r.style.setProperty("--display", "block");
    event.target.classList.remove("emptyList");
    clickSoundBool = false;
    clickSoundEffect.play();
    bgMusic.pause();
  } else if (!event.target.classList.contains("emptyList")) {
    displaySet = r.style.setProperty("--display", "none");
    event.target.classList.add("emptyList");
    clickSoundBool = true;
    clickSoundEffect.play();
    bgMusic.play();
  }
});
let startedBoolean = true;
let startedBooleanv = true;
bgMusic.addEventListener(
  "ended",
  function () {
    this.currentTime = 0;
    this.play();
  },
  false
);
let score1 = 0;
let score2 = 0;
let arrayOfLetters = [];
let boostBoolTime = false;
let gridX = 40;
let gridY = 40;
let gridMultiplier = 15;
let targetX;
let targetY;
targetX = 1;
targetY = 1;
let RedColorBool = false;
let speed = 140;
r.style.setProperty("--speed", `${speed}ms`);
speed = Math.max(speed, 10);
let obstacleNumber = 6;
let speedBoosterX;
let speedBoosterY;

let speedBoosterTimeX;
let speedBoosterTimeY;

let speedBoostBool = false;
let speedBoostTimeBool = false;
let boolVolume = true;
let boolForBoosterTime = false;

let diagNumber = 5;
let horiNumber = 7;
let vertiNumber = 6;
let abcda;
let abcdav;

let gameBoxSelectorForSnakes = document.querySelector(".gameBox");
let htmlSelectorForSnakes = ``;
const snakeCreator = () => {
  for (let i = 1; i <= 35; i++) {
    abcda = document.createElement(`div`);
    abcda.className = `snake${i} hideSnake`;
    document.querySelector(".gameBox").append(abcda);
  }
};
const snakeCreatorv = () => {
  for (let i = 1; i <= 35; i++) {
    abcda = document.createElement(`div`);
    abcda.className = `snake${i}v hideSnake`;
    document.querySelector(".gameBox").append(abcda);
  }
};
snakeCreatorv();
snakeCreator();
let a;
let b;
let c;

document.querySelector(".grid-state-20").addEventListener("click", () => {
  diagNumber = 4;
  horiNumber = 6;
  vertiNumber = 5;
  obstotalNumber = 1;
  gridX = 20;
  gridY = 20;
  resetAllReloadNoAudio();
  clickSoundEffect.play();
  obstacleNumber = 4;
  a = r.style.setProperty(
    "--grid-template",
    "repeat(20, 1fr) / repeat(20, 1fr)"
  );
  b = r.style.setProperty("--mobile-size", "17.5px");
  c = r.style.setProperty("--main-size", "30px");
  gridMultiplier = 30;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
});
document.querySelector(".grid-state-30").addEventListener("click", () => {
  diagNumber = 5;
  horiNumber = 7;
  vertiNumber = 6;
  obstotalNumber = 2;
  gridX = 30;
  gridY = 30;
  resetAllReloadNoAudio();
  clickSoundEffect.play();
  a = r.style.setProperty(
    "--grid-template",
    "repeat(30, 1fr) / repeat(30, 1fr)"
  );
  b = r.style.setProperty("--mobile-size", "11.6666667px");
  c = r.style.setProperty("--main-size", "20px");
  gridMultiplier = 20;
  obstacleNumber = 5;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
});

document.querySelector(".grid-state-40").addEventListener("click", () => {
  diagNumber = 6;
  horiNumber = 8;
  vertiNumber = 7;
  obstotalNumber = 3;
  gridX = 40;
  gridY = 40;
  resetAllReloadNoAudio();
  clickSoundEffect.play();
  a = r.style.setProperty(
    "--grid-template",
    "repeat(40, 1fr) / repeat(40, 1fr)"
  );
  b = r.style.setProperty("--mobile-size", "8.75px");
  c = r.style.setProperty("--main-size", "15px");
  gridMultiplier = 15;
  obstacleNumber = 6;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
});
document.querySelector(".grid-state-60").addEventListener("click", () => {
  diagNumber = 7;
  horiNumber = 9;
  vertiNumber = 8;
  obstotalNumber = 5;
  gridX = 60;
  gridY = 60;
  resetAllReloadNoAudio();
  obstacleNumber = 10;
  a = r.style.setProperty(
    "--grid-template",
    "repeat(60, 1fr) / repeat(60, 1fr)"
  );
  b = r.style.setProperty("--mobile-size", "5.833333px");
  c = r.style.setProperty("--main-size", "10px");
  gridMultiplier = 10;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
  clickSoundEffect.play();
});

document.querySelector(".grid-state-menu-20").addEventListener("click", () => {
  // numberReverse = 3;
  // addObs();
  // removeObs();
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  numbermoveOne = 4;
  numbermoveTwo = 6;
  numbermoveThree = 5;
  numbermoveFour = 6;
  numbermoveFive = 5;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  placeObstacle4();
  placeObstacle5();
  obstotalNumber = 1;
  gridX = 20;
  gridY = 20;
  resetAllReloadNoAudio();
  obstacleNumber = 4;
  a = r.style.setProperty(
    "--grid-template",
    "repeat(20, 1fr) / repeat(20, 1fr)"
  );
  c = r.style.setProperty("--main-size", "30px");
  gridMultiplier = 30;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
  clickSoundEffect.play();
});
document.querySelector(".grid-state-menu-30").addEventListener("click", () => {
  // numberReverse = 4;
  // addObs();
  // removeObs();
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  numbermoveOne = 5;
  numbermoveTwo = 7;
  numbermoveThree = 6;
  numbermoveFour = 7;
  numbermoveFive = 6;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  placeObstacle4();
  placeObstacle5();
  obstotalNumber = 2;
  gridX = 30;
  gridY = 30;
  resetAllReloadNoAudio();
  obstacleNumber = 5;
  a = r.style.setProperty(
    "--grid-template",
    "repeat(30, 1fr) / repeat(30, 1fr)"
  );
  c = r.style.setProperty("--main-size", "20px");
  gridMultiplier = 20;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
  clickSoundEffect.play();
});

document.querySelector(".grid-state-menu-40").addEventListener("click", () => {
  // numberReverse = 5;
  // addObs();
  // removeObs();
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  numbermoveOne = 6;
  numbermoveTwo = 8;
  numbermoveThree = 7;
  numbermoveFour = 8;
  numbermoveFive = 7;

  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  placeObstacle4();
  placeObstacle5();
  obstotalNumber = 3;
  gridX = 40;
  gridY = 40;
  resetAllReloadNoAudio();
  obstacleNumber = 6;
  a = r.style.setProperty(
    "--grid-template",
    "repeat(40, 1fr) / repeat(40, 1fr)"
  );
  c = r.style.setProperty("--main-size", "15px");
  gridMultiplier = 15;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
  clickSoundEffect.play();
});
document.querySelector(".grid-state-menu-60").addEventListener("click", () => {
  // numberReverse = 0;
  // addObs();
  // removeObs();
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  numbermoveOne = 7;
  numbermoveTwo = 9;
  numbermoveThree = 8;
  numbermoveFour = 9;
  numbermoveFive = 8;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  placeObstacle4();
  placeObstacle5();
  obstotalNumber = 5;
  gridX = 60;
  gridY = 60;
  resetAllReloadNoAudio();
  clickSoundEffect.play();
  a = r.style.setProperty(
    "--grid-template",
    "repeat(60, 1fr) / repeat(60, 1fr)"
  );
  c = r.style.setProperty("--main-size", "10px");
  gridMultiplier = 10;
  obstacleNumber = 10;
  placeObstacles();
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clearInterval(timerr);
  startedTimer = false;
});

// const boosterRandomPosition = () => {
//   for (let i = 0; i < 1; i++) {
//     speedBoosterX = Math.floor(Math.random() * gridX) + 1;
//     speedBoosterY = Math.floor(Math.random() * gridY) + 1;
//     if (arrayOfLetters.includes([speedBoosterY, speedBoosterX])) {
//       i--;
//     }
//   }
// };

// let movingObstacle1X;
// let movingObstacle1Y;

// const movingObstacle1 = () => {
//   for (let i = 0; i < 1; i++) {
//     movingObstacle1X = Math.max(
//       Math.floor(Math.random() * gridX - diagNumber) + 1,
//       diagNumber
//     );
//     movingObstacle1Y = Math.max(
//       Math.floor(Math.random() * gridY - diagNumber) + 1,
//       diagNumber
//     );
//   }
// };

// let movingObstacle2X;
// let movingObstacle2Y;
// const movingObstacle2 = () => {
//   for (let i = 0; i < 1; i++) {
//     movingObstacle2X = Math.max(
//       Math.floor(Math.random() * gridX - horiNumber) + 1,
//       horiNumber
//     );
//     movingObstacle2Y = Math.floor(Math.random() * gridY);
//   }
// };
// movingObstacle2();

// let movingObstacle3X;
// let movingObstacle3Y;
// const movingObstacle3 = () => {
//   for (let i = 0; i < 1; i++) {
//     movingObstacle3Y = Math.max(
//       Math.floor(Math.random() * gridY - vertiNumber) + 1,
//       vertiNumber
//     );
//     movingObstacle3X = Math.floor(Math.random() * gridX);
//   }
// };
// movingObstacle3();

let velocityXofObs2v1 = 0;
let velocityYofObs2v1 = 0;
let velocityXofObs2v2 = 0;
let velocityYofObs2v2 = 0;
let portalX;
let portalY;

let booldad1 = false;
let booldad2 = false;
let booldad3 = false;
let portals = [];

const portalDrop = () => {
  portals = [];
  for (let i = 0; i < 2; i++) {
    portalX = Math.floor(Math.random() * gridX) + 1;
    portalY = Math.floor(Math.random() * gridY) + 1;

    if (
      portals
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`) &&
      arrayOfLetters
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`)
    ) {
      i--;
    } else {
      portals.push([portalY, portalX]);
    }
  }
  console.log(portals);
};

// const boosterTimeRandomPosition = () => {
//   for (let i = 0; i < 1; i++) {
//     speedBoosterTimeX = Math.floor(Math.random() * gridX) + 1;
//     speedBoosterTimeY = Math.floor(Math.random() * gridY) + 1;
//     if (
//       arrayOfLetters.includes([speedBoosterTimeY, speedBoosterTimeX]) &&
//       speedBoosterTimeX === speedBoosterX &&
//       speedBoosterTimeY === speedBoosterY
//     ) {
//       i--;
//     }
//   }
// };

let startedTimer = true;
document.addEventListener("keydown", (event) => {
  // event.preventDefault();
  timerBool = true;
  if (timerBool && boolTimer) {
    timerr = setInterval(timerFunction, 1000);
  }
  boolTimer = false;

  if (
    event.key == "ArrowUp" ||
    event.key == "ArrowDown" ||
    event.key == "ArrowRight" ||
    event.key == "ArrowLeft" ||
    event.key == "w" ||
    event.key == "a" ||
    event.key == "s" ||
    event.key == "d" ||
    event.key == "W" ||
    event.key == "A" ||
    event.key == "A" ||
    event.key == "D"
  ) {
    started = true;
  }

  if (event.key == "r" || event.key == "R") {
    score1 = 0;
    score2 = 0;
    clearInterval(timerr);
    startedTimer = false;

    startedBoolean = false;

    clickSoundEffect.play();
    console.log(timerr);

    bgMusic.currentTime = 0;

    resetAllReloadNoAudio();
    document.querySelector(".bgBlur").classList.add("hideIt");
    document.querySelector(".threelivesover").classList.add("hideMe");
    megaObs = setInterval(MovingObstacleLoad, 200);

    bgMusic.play();
    resetAllReloadNoAudio();
    boolforListener = true;
    started = true;
  }

  if (event.key == "Escape") {
    clearInterval(megaObs);
    clearInterval(timerr);
    clickSoundEffect.play();
    document.querySelector(".bgBlur").classList.remove("hideIt");
    document.querySelector(".pauseMenu").classList.remove("hideIt");
    bgMusic.pause();
    velocityX = 0;
    velocityY = 0;
    velocityXv = 0;
    velocityYv = 0;
    boolforListener = false;
    started = false;
  }
  if (boolforListener) {
    if (event.key == "ArrowUp" && velocityY !== 1) {
      startedBoolean = true;
      velocityX = 0;
      velocityY = -1;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "ArrowDown" && velocityY !== -1) {
      startedBoolean = true;
      velocityX = 0;
      velocityY = 1;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "ArrowRight" && velocityX !== -1) {
      startedBoolean = true;
      velocityX = 1;
      velocityY = 0;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "ArrowLeft" && velocityX !== 1) {
      startedBoolean = true;
      velocityX = -1;
      velocityY = 0;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    }

    if (event.key == "w" && velocityYv !== 1) {
      startedBoolean = true;
      velocityXv = 0;
      velocityYv = -1;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "s" && velocityYv !== -1) {
      startedBoolean = true;
      velocityXv = 0;
      velocityYv = 1;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "d" && velocityXv !== -1) {
      startedBoolean = true;
      velocityXv = 1;
      velocityYv = 0;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    } else if (event.key == "a" && velocityXv !== 1) {
      startedBoolean = true;
      velocityXv = -1;
      velocityYv = 0;
      if (!startedTimer) {
        timerr = setInterval(timerFunction, 1000);
      }
      startedTimer = true;
      if (clickSoundBool) {
        bgMusic.play();
        bgMusic.volume = 0.5;
      }
    }
  }
});

let timerBool = false;
let timerr;
Array.from(document.querySelectorAll(".arrowit")).forEach((ele) =>
  addEventListener("click", (event) => {
    startedBoolean = true;
    timerBool = true;
    if (timerBool && boolTimer) {
      timerr = setInterval(timerFunction, 1000);
      console.log(timerr);
    }
    boolTimer = false;

    if (
      event.target.classList.contains("clickup") ||
      event.target.classList.contains("clickdown") ||
      event.target.classList.contains("clickright") ||
      event.target.classList.contains("clickleft")
    ) {
      started = true;
      bgMusic.play();
      bgMusic.volume = 0.5;
    }
    console.log("hi");

    if (boolforListener) {
      if (event.target.classList.contains("clickup") && velocityY !== 1) {
        velocityX = 0;
        velocityY = -1;
        if (!startedTimer) {
          timerr = setInterval(timerFunction, 1000);
        }
        startedTimer = true;
      } else if (
        event.target.classList.contains("clickdown") &&
        velocityY !== -1
      ) {
        velocityX = 0;
        velocityY = 1;
        if (!startedTimer) {
          timerr = setInterval(timerFunction, 1000);
        }
        startedTimer = true;
      } else if (
        event.target.classList.contains("clickright") &&
        velocityX !== -1
      ) {
        velocityX = 1;
        velocityY = 0;
        if (!startedTimer) {
          timerr = setInterval(timerFunction, 1000);
        }
        startedTimer = true;
      } else if (
        event.target.classList.contains("clickleft") &&
        velocityX !== 1
      ) {
        velocityX = -1;
        velocityY = 0;
        if (!startedTimer) {
          timerr = setInterval(timerFunction, 1000);
        }
        startedTimer = true;
      }
    }
  })
);

pauseButtonSelector.addEventListener("click", (event) => {
  clearInterval(megaObs);
  clearInterval(timerr);
  clickSoundEffect.play();
  document.querySelector(".bgBlur").classList.remove("hideIt");
  document.querySelector(".pauseMenu").classList.remove("hideIt");
  bgMusic.pause();
  velocityX = 0;
  velocityY = 0;
  velocityXv = 0;
  velocityYv = 0;
  boolforListener = false;
  started = false;
});

mobilePauseSelector.addEventListener("click", (event) => {
  clearInterval(timerr);
  clickSoundEffect.play();
  document.querySelector(".bgBlur").classList.remove("hideIt");
  document.querySelector(".pauseMenu").classList.remove("hideIt");
  bgMusic.pause();
  velocityX = 0;
  velocityY = 0;
  velocityXv = 0;
  velocityYv = 0;
  boolforListener = false;
  started = false;
});

resumeButtonSelector.addEventListener("click", (event) => {
  megaObs = setInterval(MovingObstacleLoad, 200);
  clickSoundEffect.play();
  boolforListener = true;
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");

  // started = true;
  timerr = setInterval(timerFunction, 1000);
});

const randomIt = () => {
  randomIndex = Math.floor(Math.random() * arrayWords.length);
  randomWord = arrayWords[randomIndex];
  letters = randomWord.split("");
  // arrayWords.splice(randomIndex, 1);
};
let snakeX;
let snakeY;
let snakeXv;
let snakeYv;
const snakeDrop = () => {
  snakeX = Math.floor(Math.random() * gridX) + 1;
  snakeY = Math.floor(Math.random() * gridY) + 1;
};
snakeDrop();
const snakeDropv = () => {
  snakeXv = Math.floor(Math.random() * gridX) + 1;
  snakeYv = Math.floor(Math.random() * gridY) + 1;
};
snakeDropv();

const changeFoodPosition = () => {
  letterX = Math.floor(Math.random() * gridX) + 1;
  letterY = Math.floor(Math.random() * gridY) + 1;
};
randomIt();
console.log(letters);
const placeObstacles = () => {
  obstacles = [];
  for (let i = 0; i < obstacleNumber; i++) {
    obstacleX = Math.floor(Math.random() * gridX) + 1;
    obstacleY = Math.floor(Math.random() * gridY) + 1;
    if (
      arrayOfLetters
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`) &&
      snakeX === obstacleX &&
      snakeY === obstacleY &&
      portals
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`)
    ) {
      i--;
    } else {
      obstacles.push([obstacleY, obstacleX]);
    }
  }
};

let nonClashBool = true;

const placeLetters = () => {
  nonClashBool = true;
  arrayOfLetters = [];
  for (let i = 0; i < letters.length; i++) {
    changeFoodPosition();
    if (
      letterX === snakeX &&
      letterY === snakeY &&
      arrayOfLetters
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`) &&
      portals
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`) &&
      obstacles
        .map((ele) => `${ele[0]},${ele[1]}`)
        .includes(`${letterY},${letterX}`)
    ) {
      i--;
    } else {
      for (let i = 0; i < obstacles.length; i++) {
        if (arrayOfLetters.includes(obstacles[i])) {
          i--;
          nonClashBool = false;
        }
      }
      if (nonClashBool) {
        arrayOfLetters.push([letterY, letterX]);
      }
    }
  }
};
let obstacles = [];
let obstacleX;
let obstacleY;

placeLetters();
let boosterArray = [];
const timerFunction = () => {
  seconds--;
  if (seconds <= 15) {
    timerSelector.style.color = "red";
  }

  if (seconds < 10 && seconds >= 0) {
    timerSelector.textContent = `0${seconds}`;
  } else if (seconds >= 10) {
    timerSelector.textContent = `${seconds}`;
  } else {
    pauseButtonSelector.style.fontSize = "0rem";
    document.querySelector(".irotatePc .fa-solid").style.fontSize = "2.7rem";
    seconds = 0;
    timerSelector.textContent = `00`;
    velocityX = 0;
    velocityY = 0;

    started = false;
    boolforListener = false;
  }

  if (seconds % 20 == 0 && seconds !== 0 && seconds !== 60) {
    speedBoosterTimeX = Math.floor(Math.random() * gridX) + 1;
    speedBoosterTimeY = Math.floor(Math.random() * gridY) + 1;
    boosterArray.push();
    boolForBoosterTime = true;
    booldad2 = true;
    setTimeout(() => {
      boolForBoosterTime = false;
      booldad2 = false;
    }, 4000);
  }

  if (seconds % 15 == 0 && seconds !== 0 && seconds !== 60) {
    speedBoosterX = Math.floor(Math.random() * gridX) + 1;
    speedBoosterY = Math.floor(Math.random() * gridY) + 1;
    boolForBooster = true;
    boosterArray.push();
    booldad1 = true;
    setTimeout(() => {
      boolForBooster = false;
      booldad1 = false;
    }, 8000);
  }
  if (seconds % 30 == 0 && seconds !== 0 && seconds !== 60) {
    speedBoosterMegaX = Math.floor(Math.random() * gridX) + 1;
    speedBoosterMegaY = Math.floor(Math.random() * gridY) + 1;
    boolForBoosterMega = true;
    boosterArray.push();
    booldad3 = true;
    setTimeout(() => {
      boolForBoosterMega = false;
      booldad3 = false;
    }, 7000);
  }
  if (seconds === 0) {
    document
      .querySelector(`.heart${heartNumber}`)

      .classList.add("animateHeart");

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        boolNow = true;

        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
      }, 600);
    } else {
      resetAll();
    }
  }
};
if (timerBool) {
  setInterval(timerFunction, 1000);
}

// document.querySelector(".irotatePc").addEventListener("click", () => {
//   clickSoundEffect.play();
//   console.log(timerr);
//   bgMusic.pause();
//   bgMusic.currentTime = 0;

//   resetAllReload();

//   clearInterval(timerr);
//   startedTimer = false;
// });

document.querySelector(".restart").addEventListener("click", () => {
  megaObs = setInterval(MovingObstacleLoad, 200);
  clearInterval(timerr);
  startedTimer = false;
  score1 = 0;
  score2 = 0;
  startedBoolean = false;
  document.querySelector(".bgBlur").classList.add("hideIt");
  document.querySelector(".pauseMenu").classList.add("hideIt");
  clickSoundEffect.play();
  console.log(timerr);
  bgMusic.pause();
  bgMusic.currentTime = 0;

  resetAllReloadNoAudio();
});

let htmlSelector;
let boolLetter = false;
let boolLoop = false;
let arrayFollow = [[snakeY, snakeX]];
let arrayFollowv = [[snakeYv, snakeXv]];
let letterKillCounter = 0;
let arrayOfLettersReversed = [...arrayOfLetters].reverse();
let index = 0;

let timerForAbitily;

boolForBooster = false;

let gridSize;

let initialX = r.style.setProperty("--initialX", `15px`);
let initialY = r.style.setProperty("--initialY", `300px`);

let initialXv = r.style.setProperty("--initialXv", `30px`);
let initialYv = r.style.setProperty("--initialYv", `250px`);
// r.style.setProperty("--finalX", `15px`);
// r.style.setProperty("--finalY", `15px`);
const resetLetters = () => {
  RedColorBool = false;
  boolColor = -1;
  gameBoxSelector.classList.add("animationAddGreen");
  setTimeout(() => {
    gameBoxSelector.classList.remove("animationAddGreen");
  }, 1000);
  timerSelector.style.color = "rgb(18, 236, 2)";
  setTimeout(() => {
    timerSelector.style.color = "white";
  }, 1000);
  index = 0;
  speed += 10;
  speed = Math.max(speed, 10);
  r.style.setProperty("--speed", `${speed}ms`);
  randomIt();
  placeLetters();
  targetValueChanger();
  targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
  targetSelector.style.gridTemplateRows = `repeat(1,50px)`;
};
let testNumber = 0;
let boolSet = true;
portalDrop();
placeObstacles();
// movingObstacle1();
let d;
let velocityXofObs1 = 0;
let velocityYofObs1 = 0;
const gameLoad = () => {
  snakeX += velocityX;
  snakeY += velocityY;
  snakeXv += velocityXv;
  snakeYv += velocityYv;
  htmlSelector = ``;

  if (boolForBooster) {
    htmlSelector += `<div style = "grid-area: ${speedBoosterY}/${speedBoosterX}"><div class="booster"></div></div>`;
  }

  if (boolForBoosterTime) {
    htmlSelector += `<div style = "grid-area: ${speedBoosterTimeY}/${speedBoosterTimeX}"><div class="boosterTime"></div></div>`;
  }

  if (boolForBoosterMega) {
    htmlSelector += `<div style = "grid-area: ${speedBoosterMegaY}/${speedBoosterMegaX}"><div class="boosterMega"></div></div>`;
  }

  for (let i = 0; i < portals.length; i++) {
    htmlSelector += `<div class = "portal" style = "grid-area: ${portals[i][0]}/${portals[i][1]}"></div>`;
  }

  if (snakeX === portals[0][1] && snakeY === portals[0][0]) {
    document
      .querySelector(".headsnake")
      .parentElement.removeChild(document.querySelector(".headsnake"));
    headBoolean = false;

    // for (let i = 1; i < arrayFollow.length - 1; i++) {
    //   document
    //     .querySelector(`.snake${i}`)
    //     .parentElement.removeChild(document.querySelector(`.snake${i}`));
    // }
    for (let i = 1; i <= arrayFollow.length; i++) {
      document.querySelector(`.snake${i}`).style.transition = "none";
    }

    console.log("i=0");

    snakeX = portals[1][1];
    snakeY = portals[1][0];
    abcda = document.createElement(`div`);
    abcda.className = `headsnake`;
    document.querySelector(".gameBox").append(abcda);
    setTimeout(() => {
      for (let i = 1; i <= arrayFollow.length; i++) {
        document.querySelector(
          `.snake${i}`
        ).style.transition = ` all var(--speed) linear`;
      }
      // for (let i = 1; i < arrayFollow.length; i++) {
      //   abcda = document.createElement(`div`);
      //   abcda.className = `snake${i} hideSnake`;
      //   document.querySelector(".gameBox").append(abcda);
      // }
    }, arrayFollow.length * speed);
  } else if (snakeX === portals[1][1] && snakeY === portals[1][0]) {
    document
      .querySelector(".headsnake")
      .parentElement.removeChild(document.querySelector(".headsnake"));
    headBoolean = false;
    // for (let i = 1; i < arrayFollow.length - 1; i++) {
    //   document
    //     .querySelector(`.snake${i}`)
    //     .parentElement.removeChild(document.querySelector(`.snake${i}`));
    // }
    for (let i = 1; i <= arrayFollow.length; i++) {
      document.querySelector(`.snake${i}`).style.transition = "none";
    }

    //   console.log("i=1");

    snakeX = portals[0][1];
    snakeY = portals[0][0];
    abcda = document.createElement(`div`);
    abcda.className = `headsnake`;
    document.querySelector(".gameBox").append(abcda);
    setTimeout(() => {
      for (let i = 1; i <= arrayFollow.length; i++) {
        document.querySelector(
          `.snake${i}`
        ).style.transition = `all var(--speed) linear`;
      }
      // for (let i = 1; i < arrayFollow.length; i++) {
      //   abcda = document.createElement(`div`);
      //   abcda.className = `snake${i} hideSnake`;
      //   document.querySelector(".gameBox").append(abcda);
      // }
    }, arrayFollow.length * speed);
  }

  //

  if (snakeXv === portals[0][1] && snakeYv === portals[0][0]) {
    document
      .querySelector(".headsnakev")
      .parentElement.removeChild(document.querySelector(".headsnakev"));
    headBoolean = false;

    // for (let i = 1; i < arrayFollow.length - 1; i++) {
    //   document
    //     .querySelector(`.snake${i}`)
    //     .parentElement.removeChild(document.querySelector(`.snake${i}`));
    // }
    for (let i = 1; i <= arrayFollowv.length; i++) {
      document.querySelector(`.snake${i}v`).style.transition = "none";
    }

    console.log("i=0");

    snakeXv = portals[1][1];
    snakeYv = portals[1][0];
    abcda = document.createElement(`div`);
    abcda.className = `headsnakev`;
    document.querySelector(".gameBox").append(abcda);
    setTimeout(() => {
      for (let i = 1; i <= arrayFollowv.length; i++) {
        document.querySelector(
          `.snake${i}v`
        ).style.transition = ` all var(--speed) linear`;
      }
      // for (let i = 1; i < arrayFollow.length; i++) {
      //   abcda = document.createElement(`div`);
      //   abcda.className = `snake${i} hideSnake`;
      //   document.querySelector(".gameBox").append(abcda);
      // }
    }, arrayFollowv.length * speed);
  } else if (snakeXv === portals[1][1] && snakeYv === portals[1][0]) {
    document
      .querySelector(".headsnakev")
      .parentElement.removeChild(document.querySelector(".headsnakev"));
    headBoolean = false;
    // for (let i = 1; i < arrayFollow.length - 1; i++) {
    //   document
    //     .querySelector(`.snake${i}`)
    //     .parentElement.removeChild(document.querySelector(`.snake${i}`));
    // }
    for (let i = 1; i <= arrayFollowv.length; i++) {
      document.querySelector(`.snake${i}v`).style.transition = "none";
    }

    //   console.log("i=1");

    snakeXv = portals[0][1];
    snakeYv = portals[0][0];
    abcda = document.createElement(`div`);
    abcda.className = `headsnakev`;
    document.querySelector(".gameBox").append(abcda);
    setTimeout(() => {
      for (let i = 1; i <= arrayFollowv.length; i++) {
        document.querySelector(
          `.snake${i}v`
        ).style.transition = `all var(--speed) linear`;
      }
      // for (let i = 1; i < arrayFollow.length; i++) {
      //   abcda = document.createElement(`div`);
      //   abcda.className = `snake${i} hideSnake`;
      //   document.querySelector(".gameBox").append(abcda);
      // }
    }, arrayFollowv.length * speed);
  }
  //

  for (let i = 0; i < obstacles.length; i++) {
    htmlSelector += `<div class = "obstacle" style = "grid-area: ${obstacles[i][0]}/${obstacles[i][1]}"></div>`;
  }
  for (let i = 0; i < obstacles.length; i++) {
    if (snakeX === obstacles[i][1] && snakeY === obstacles[i][0]) {
      velocityX = 0;
      velocityY = 0;
      seconds = 0;
      boolforListener = false;
      started = false;
      score2 -= 40;
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityX = 0;
          velocityY = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;

          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }

    if (snakeXv === obstacles[i][1] && snakeYv === obstacles[i][0]) {
      velocityXv = 0;
      velocityYv = 0;
      seconds = 0;
      boolforListener = false;
      started = false;
      score1 -= 40;
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityXv = 0;
          velocityYv = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }
  }

  for (let i = 0; i < arrayOfLetters.length; i++) {
    if (arrayOfLetters[i][0] === snakeY && arrayOfLetters[i][1] === snakeX) {
      if (
        document.querySelector(`.letter${i}`).textContent === letters[index]
      ) {
        letterSoundEffect.play();
        RedColorBool = false;
        boolColor++;
        console.log(boolColor);

        index++;
        console.log(letters[letters.length - 1 - i]);
        score2 += 20;
        colorIndex = index;

        console.log(score);
        console.log(document.querySelector(`.letter${i}`).textContent);
        targetValueChanger();
        letterKillCounter += 1;
        console.log(letterKillCounter);

        arrayFollow.push([snakeY, snakeX]);
        arrayOfLetters[i] = "";
        console.log(arrayOfLetters);
        speed -= 5;

        speed = Math.max(speed, 20);
        d = r.style.setProperty("--speed", `${speed}ms`);
        clearInterval(timerTarget);
        startTimer();
      } else {
        wrongSoundEffect.play();
        document.querySelector(`.lettersIt${i}`).classList.add("redLetter");
        RedColorBool = true;
        gameBoxSelector.classList.add("animationAdd");
        setTimeout(() => {
          gameBoxSelector.classList.remove("animationAdd");
        }, 1000);
        timerSelector.style.color = " rgb(153, 0, 0)";
        setTimeout(() => {
          timerSelector.style.color = "white";
        }, 800);
        arrayFollow.unshift([snakeY, snakeX]);
        arrayFollow.unshift([snakeY, snakeX]);
        targetValueChanger();
        seconds -= 4;
        speed = Math.max(speed, 10);
        score2 -= 30;
        speed -= 7;
        d = r.style.setProperty("--speed", `${speed}ms`);
      }
    }
  }
  for (let i = 0; i < arrayOfLetters.length; i++) {
    if (arrayOfLetters[i][0] === snakeYv && arrayOfLetters[i][1] === snakeXv) {
      if (
        document.querySelector(`.letter${i}`).textContent === letters[index]
      ) {
        letterSoundEffect.play();
        RedColorBool = false;
        boolColor++;
        console.log(boolColor);

        index++;
        console.log(letters[letters.length - 1 - i]);
        score1 += 20;
        colorIndex = index;

        console.log(score);
        console.log(document.querySelector(`.letter${i}`).textContent);
        targetValueChanger();
        letterKillCounter += 1;
        console.log(letterKillCounter);

        arrayFollowv.push([snakeYv, snakeXv]);
        arrayOfLetters[i] = "";
        console.log(arrayOfLetters);
        speed -= 5;

        speed = Math.max(speed, 20);
        d = r.style.setProperty("--speed", `${speed}ms`);
        clearInterval(timerTarget);
        startTimer();
      } else {
        wrongSoundEffect.play();
        document.querySelector(`.lettersIt${i}`).classList.add("redLetter");
        RedColorBool = true;
        gameBoxSelector.classList.add("animationAdd");
        setTimeout(() => {
          gameBoxSelector.classList.remove("animationAdd");
        }, 1000);
        timerSelector.style.color = " rgb(153, 0, 0)";
        setTimeout(() => {
          timerSelector.style.color = "white";
        }, 800);
        arrayFollowv.unshift([snakeYv, snakeXv]);
        arrayFollowv.unshift([snakeYv, snakeXv]);
        targetValueChanger();
        seconds -= 4;
        speed = Math.max(speed, 10);
        score1 -= 30;
        speed -= 7;
        d = r.style.setProperty("--speed", `${speed}ms`);
      }
    }
  }
  document.querySelector(".score1").textContent = score1;
  document.querySelector(".score2").textContent = score2;

  if (letterKillCounter === arrayOfLetters.length) {
    console.log("goodd");

    resetLetters();
    letterKillCounter = 0;
    seconds += 5;
  }

  for (let i = 0; i < arrayOfLetters.length; i++) {
    if (!arrayOfLetters[i] == "") {
      htmlSelector += `<div class = "letter letter${i}" style="grid-area:${arrayOfLetters[i][0]}/${arrayOfLetters[i][1]}"><div class = "letterBlock" >${letters[i]}</div></div>`;
    }
  }

  if (snakeX < 1) {
    loadBool = false;
    velocityX = 0;
    velocityY = 0;
    if (scoreBool) score2 -= 40;
    scoreBool = false;
    velocityXv = 0;
    velocityYv = 0;
    seconds = 0;
    started = false;
    boolforListener = false;

    if (document.querySelector(`.heart${heartNumber}`).classList) {
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");
    }

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        boolNow = true;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeX > gridX) {
    velocityX = 0;
    velocityY = 0;
    velocityXv = 0;
    velocityYv = 0;
    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score2 -= 40;
    scoreBool = false;
    if (document.querySelector(`.heart${heartNumber}`).classList) {
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");
    }

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        boolNow = true;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeY < 1) {
    velocityX = 0;
    velocityY = 0;
    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score2 -= 40;
    scoreBool = false;
    document
      .querySelector(`.heart${heartNumber}`)

      .classList.add("animateHeart");

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        boolNow = true;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeY > gridY) {
    velocityX = 0;
    velocityY = 0;

    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score2 -= 40;
    scoreBool = false;
    document
      .querySelector(`.heart${heartNumber}`)

      .classList.add("animateHeart");

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;
        // document.querySelector(".yourscore").textContent = `Score: ${score} `;
        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
        boolNow = true;
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  }

  ////////////////////
  if (snakeXv < 1) {
    loadBool = false;
    velocityX = 0;
    velocityY = 0;
    if (scoreBool) score1 -= 40;
    scoreBool = false;
    velocityXv = 0;
    velocityYv = 0;
    seconds = 0;
    started = false;
    boolforListener = false;

    if (document.querySelector(`.heart${heartNumber}`).classList) {
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");
    }

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
        boolNow = true;
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeXv > gridX) {
    velocityX = 0;
    velocityY = 0;
    velocityXv = 0;
    velocityYv = 0;
    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score1 -= 40;
    scoreBool = false;
    if (document.querySelector(`.heart${heartNumber}`).classList) {
      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");
    }

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
        boolNow = true;
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeYv < 1) {
    velocityX = 0;
    velocityY = 0;
    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score1 -= 40;
    scoreBool = false;
    document
      .querySelector(`.heart${heartNumber}`)

      .classList.add("animateHeart");

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;

        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
        boolNow = true;
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  } else if (snakeYv > gridY) {
    velocityX = 0;
    velocityY = 0;

    seconds = 0;
    boolforListener = false;
    started = false;
    if (scoreBool) score1 -= 40;
    scoreBool = false;
    document
      .querySelector(`.heart${heartNumber}`)

      .classList.add("animateHeart");

    setTimeout(() => {
      document
        .querySelector(`.heart${heartNumber - 1}`)

        .classList.add("displayHidden");
    }, 600);

    if (heartBool) {
      heartBool = false;
      heartNumber++;
    }
    ReloadGameNumber++;
    if (ReloadGameNumber === 3) {
      setTimeout(() => {
        clearInterval(megaObs);
        clearInterval(timerr);
        bgMusic.pause();
        velocityX = 0;
        velocityY = 0;
        boolforListener = false;
        started = false;
        // document.querySelector(".yourscore").textContent = `Score: ${score} `;
        document.querySelector(".bgBlur").classList.remove("hideIt");
        document.querySelector(".threelivesover").classList.remove("hideMe");
        document.querySelector(
          ".player1scoreit"
        ).innerHTML = `Player1: <span>${score1}</span>`;
        document.querySelector(
          ".player2scoreit"
        ).innerHTML = `Player2: <span>${score2}</span>`;
        if (score1 > score2) {
          document.querySelector(".winner").textContent = "PLAYER1 WON";
        }
        if (score2 > score1) {
          document.querySelector(".winner").textContent = "PLAYER2 WON";
        }
        if (score1 == score2) {
          document.querySelector(".winner").textContent = "DRAW";
        }
        boolNow = true;
      }, 600);
    } else {
      resetAll();
    }

    startedBoolean = false;
  }
  /////////////////////////////

  if (started) {
    for (let i = arrayFollow.length - 1; i > 0; i--) {
      arrayFollow[i] = arrayFollow[i - 1];
    }
    arrayFollow[0] = [snakeY, snakeX];
  }
  if (started) {
    for (let i = arrayFollowv.length - 1; i > 0; i--) {
      arrayFollowv[i] = arrayFollowv[i - 1];
    }
    arrayFollowv[0] = [snakeYv, snakeXv];
  }

  for (let i = 0; i <= arrayFollow.length - 1; i++) {
    if (i === 0) {
      e = r.style.setProperty(
        "--initialX",
        `${(arrayFollow[i][1] - 1) * gridMultiplier}px`
      );
      f = r.style.setProperty(
        "--initialY",
        `${(arrayFollow[i][0] - 1) * gridMultiplier}px`
      );
    } else if (i !== 0 && startedBoolean) {
      if (
        document.querySelector(`.snake${i}`).classList.contains("hideSnake")
      ) {
        document.querySelector(`.snake${i}`).classList.remove("hideSnake");
      }

      document.querySelector(`.snake${i}`).style.top = `${
        (arrayFollow[i][0] - 1) * gridMultiplier
      }px`;
      document.querySelector(`.snake${i}`).style.left = `${
        (arrayFollow[i][1] - 1) * gridMultiplier
      }px`;
      boardSelector.innerHTML = htmlSelector;
    }
  }

  for (let i = 0; i <= arrayFollowv.length - 1; i++) {
    if (i === 0) {
      e = r.style.setProperty(
        "--initialXv",
        `${(arrayFollowv[i][1] - 1) * gridMultiplier}px`
      );
      f = r.style.setProperty(
        "--initialYv",
        `${(arrayFollowv[i][0] - 1) * gridMultiplier}px`
      );
    } else if (i !== 0 && startedBooleanv) {
      if (
        document.querySelector(`.snake${i}v`).classList.contains("hideSnake")
      ) {
        document.querySelector(`.snake${i}v`).classList.remove("hideSnake");
      }

      document.querySelector(`.snake${i}v`).style.top = `${
        (arrayFollowv[i][0] - 1) * gridMultiplier
      }px`;
      document.querySelector(`.snake${i}v`).style.left = `${
        (arrayFollowv[i][1] - 1) * gridMultiplier
      }px`;
      boardSelector.innerHTML = htmlSelector;
    }
  }

  if (
    arrayFollow[0][1] === speedBoosterX &&
    arrayFollow[0][0] === speedBoosterY &&
    booldad1
  ) {
    console.log("cool");
    speed -= 10;
    speed = Math.max(speed, 10);
    r.style.setProperty("--speed", `${speed}ms`);
    clearInterval(timerTarget);
    startTimer();
    console.log(speed);
    boolForBooster = false;
    booldad1 = false;
    bonusSoundEffect.play();
  }

  if (
    arrayFollow[0][1] === speedBoosterTimeX &&
    arrayFollow[0][0] === speedBoosterTimeY &&
    booldad2
  ) {
    console.log("cool");
    seconds += 10;
    speed += 10;
    speed = Math.max(speed, 10);
    r.style.setProperty("--speed", `${speed}ms`);
    clearInterval(timerTarget);
    startTimer();
    boolForBoosterTime = false;
    booldad2 = false;
    bonusSoundEffect.play();
  }

  if (
    arrayFollow[0][1] === speedBoosterMegaX &&
    arrayFollow[0][0] === speedBoosterMegaY &&
    booldad3
  ) {
    bonusSoundEffect.play();
    if (arrayFollow.length >= 15) {
      for (let i = arrayFollow.length - 8; i < arrayFollow.length; i++) {
        document.querySelector(`.snake${i}`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollow.splice(arrayFollow.length - 8, 7);
    } else if (arrayFollow.length >= 10 && arrayFollow.length < 15) {
      for (let i = arrayFollow.length - 6; i < arrayFollow.length; i++) {
        document.querySelector(`.snake${i}`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollow.splice(arrayFollow.length - 6, 5);
    }
    if (arrayFollow.length >= 8 && arrayOfLetters.length < 10) {
      for (let i = arrayFollow.length - 5; i < arrayFollow.length; i++) {
        document.querySelector(`.snake${i}`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollow.splice(arrayFollow.length - 5, 4);
    } else if (arrayFollow.length < 8 && arrayFollow.length >= 5) {
      for (let i = arrayFollow.length - 4; i < arrayFollow.length; i++) {
        document.querySelector(`.snake${i}`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollow.splice(arrayFollow.length - 4, 3);
    } else if (arrayFollow.length >= 2 && arrayFollow.length < 5) {
      for (let i = arrayFollow.length - 2; i < arrayFollow.length; i++) {
        document.querySelector(`.snake${i}`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollow.splice(arrayFollow.length - 2, 1);
    }

    booldad3 = false;
    boolForBoosterMega = false;
  }

  if (
    arrayFollowv[0][1] === speedBoosterX &&
    arrayFollowv[0][0] === speedBoosterY &&
    booldad1
  ) {
    console.log("cool");
    speed -= 10;
    speed = Math.max(speed, 10);
    r.style.setProperty("--speed", `${speed}ms`);
    clearInterval(timerTarget);
    startTimer();
    console.log(speed);
    boolForBooster = false;
    booldad1 = false;
    bonusSoundEffect.play();
  }

  if (
    arrayFollowv[0][1] === speedBoosterTimeX &&
    arrayFollowv[0][0] === speedBoosterTimeY &&
    booldad2
  ) {
    console.log("cool");
    seconds += 10;
    speed += 10;
    speed = Math.max(speed, 10);
    r.style.setProperty("--speed", `${speed}ms`);
    clearInterval(timerTarget);
    startTimer();
    boolForBoosterTime = false;
    booldad2 = false;
    bonusSoundEffect.play();
  }

  if (
    arrayFollowv[0][1] === speedBoosterMegaX &&
    arrayFollowv[0][0] === speedBoosterMegaY &&
    booldad3
  ) {
    bonusSoundEffect.play();
    if (arrayFollowv.length >= 15) {
      for (let i = arrayFollowv.length - 8; i < arrayFollowv.length; i++) {
        document.querySelector(`.snake${i}v`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollowv.splice(arrayFollowv.length - 8, 7);
    } else if (arrayFollowv.length >= 10 && arrayFollow.length < 15) {
      for (let i = arrayFollowv.length - 6; i < arrayFollowv.length; i++) {
        document.querySelector(`.snake${i}v`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollowv.splice(arrayFollowv.length - 6, 5);
    }
    if (arrayFollowv.length >= 8 && arrayFollowv.length < 10) {
      for (let i = arrayFollowv.length - 5; i < arrayFollowv.length; i++) {
        document.querySelector(`.snake${i}v`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollowv.splice(arrayFollowv.length - 5, 4);
    } else if (arrayFollowv.length < 8 && arrayFollowv.length >= 5) {
      for (let i = arrayFollowv.length - 4; i < arrayFollowv.length; i++) {
        document.querySelector(`.snake${i}v`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollowv.splice(arrayFollowv.length - 4, 3);
    } else if (arrayFollowv.length >= 2 && arrayFollowv.length < 5) {
      for (let i = arrayFollowv.length - 2; i < arrayFollowv.length; i++) {
        document.querySelector(`.snake${i}v`).classList.add("hideSnake");
      }
      deleteBooster = arrayFollowv.splice(arrayFollowv.length - 2, 1);
    }

    booldad3 = false;
    boolForBoosterMega = false;
  }

  for (let i = 3; i < arrayFollow.length; i++) {
    if (
      i !== 0 &&
      arrayFollow[0][0] === arrayFollow[i][0] &&
      arrayFollow[0][1] === arrayFollow[i][1]
    ) {
      console.log(arrayFollow[i]);
      console.log(arrayFollow);
      if (scoreBool) score2 -= 40;
      scoreBool = false;
      velocityX = 0;
      velocityY = 0;

      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)
        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityX = 0;
          velocityY = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }
  }

  for (let i = 3; i < arrayFollowv.length; i++) {
    if (
      i !== 0 &&
      arrayFollowv[0][0] === arrayFollowv[i][0] &&
      arrayFollowv[0][1] === arrayFollowv[i][1]
    ) {
      if (scoreBool) score1 -= 40;
      scoreBool = false;
      velocityXv = 0;
      velocityYv = 0;

      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)
        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityXv = 0;
          velocityYv = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }
  }

  boardSelector.innerHTML = htmlSelector;
};

targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
targetSelector.style.gridTemplateRows = `repeat(1,50px)`;
const resetAll = () => {
  // score1 = 0;
  // score2 = 0;
  scoreBool = true;
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  for (let i = 1; i <= 35; i++) {
    if (!document.querySelector(`.snake${i}`).classList.contains("hidesnake")) {
      document.querySelector(`.snake${i}`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}`).style.top = "none";
    document.querySelector(`.snake${i}`).style.left = "none";
  }

  for (let i = 1; i <= 35; i++) {
    if (
      !document.querySelector(`.snake${i}v`).classList.contains("hidesnake")
    ) {
      document.querySelector(`.snake${i}v`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}v`).style.top = "none";
    document.querySelector(`.snake${i}v`).style.left = "none";
  }
  letterKillCounter = 0;

  loseLifeSoundEffect.play();
  boolforListener = false;
  setTimeout(() => {
    boolforListener = true;
  }, 600);
  document;
  heartBool = true;
  portalDrop();
  timerSelector.style.color = "white";
  index = 0;

  speed = 140;
  // speed = Math.max(speed, 10);
  r.style.setProperty("--speed", `140ms`);

  clearInterval(timerTarget);
  startTimer();
  snakeDrop();
  snakeDropv();
  velocityX = 0;
  velocityY = 0;
  arrayFollow = [[snakeY, snakeX]];
  velocityXv = 0;
  velocityYv = 0;
  arrayFollowv = [[snakeYv, snakeXv]];
  started = false;

  seconds = 61;
  randomIt();

  boolColor = -1;

  RedColorBool = false;
  targetValueChanger();
  placeObstacles();
  timerFunction();

  targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
  targetSelector.style.gridTemplateRows = `repeat(1,50px)`;
  haveBorder = 0;

  placeLetters();
};

const resetAllReload = () => {
  // score1 = 0;
  // score2 = 0;
  scoreBool = true;
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  for (let i = 1; i <= 35; i++) {
    if (!document.querySelector(`.snake${i}`).classList.contains("hidesnake")) {
      document.querySelector(`.snake${i}`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}`).style.top = "none";
    document.querySelector(`.snake${i}`).style.left = "none";
  }
  for (let i = 1; i <= 35; i++) {
    if (
      !document.querySelector(`.snake${i}v`).classList.contains("hidesnake")
    ) {
      document.querySelector(`.snake${i}v`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}v`).style.top = "none";
    document.querySelector(`.snake${i}v`).style.left = "none";
  }
  loseLifeSoundEffect.play();
  ReloadGameNumber = 0;
  boolforListener = false;
  setTimeout(() => {
    boolforListener = true;
  }, 600);
  document
    .querySelector(`.heart${1}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${1}`)

    .classList.remove("animateHeart");
  document
    .querySelector(`.heart${2}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${2}`)

    .classList.remove("animateHeart");
  document
    .querySelector(`.heart${3}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${3}`)

    .classList.remove("animateHeart");
  heartNumber = 1;
  heartBool = true;
  letterKillCounter = 0;
  pauseButtonSelector.style.fontSize = "3.5rem";

  timerSelector.style.color = "white";
  index = 0;
  boolColor = -1;
  RedColorBool = false;
  speed = 140;
  // speed = Math.max(speed, 10);
  r.style.setProperty("--speed", `140ms`);

  clearInterval(timerTarget);
  startTimer();
  snakeDrop();
  snakeDropv();
  velocityX = 0;
  velocityY = 0;
  arrayFollow = [[snakeY, snakeX]];
  arrayFollow = [[snakeY, snakeX]];
  velocityXv = 0;
  velocityYv = 0;
  arrayFollowv = [[snakeYv, snakeXv]];
  started = false;
  score = 0;
  seconds = 61;
  randomIt();

  boolColor = -1;
  targetValueChanger();
  portalDrop();
  timerFunction();
  placeObstacles();
  targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
  targetSelector.style.gridTemplateRows = `repeat(1,50px)`;
  haveBorder = 0;

  placeLetters();
};

const resetAllReloadNoAudio = () => {
  // score1 = 0;
  // score2 = 0;
  scoreBool = true;
  numbermove1 = 0;
  numbermove2 = 0;
  numbermove3 = 0;
  numbermove4 = 0;
  numbermove5 = 0;
  booland1 = true;
  booland2 = true;
  booland3 = true;
  booland4 = true;
  booland5 = true;
  placeObstacle1();
  placeObstacle2();
  placeObstacle3();
  for (let i = 1; i <= 35; i++) {
    if (!document.querySelector(`.snake${i}`).classList.contains("hidesnake")) {
      document.querySelector(`.snake${i}`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}`).style.top = "none";
    document.querySelector(`.snake${i}`).style.left = "none";
  }
  for (let i = 1; i <= 35; i++) {
    if (
      !document.querySelector(`.snake${i}v`).classList.contains("hidesnake")
    ) {
      document.querySelector(`.snake${i}v`).classList.add("hideSnake");
    }

    document.querySelector(`.snake${i}v`).style.top = "none";
    document.querySelector(`.snake${i}v`).style.left = "none";
  }
  letterKillCounter = 0;
  ReloadGameNumber = 0;
  boolforListener = false;
  setTimeout(() => {
    boolforListener = true;
  }, 600);
  document
    .querySelector(`.heart${1}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${1}`)

    .classList.remove("animateHeart");
  document
    .querySelector(`.heart${2}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${2}`)

    .classList.remove("animateHeart");
  document
    .querySelector(`.heart${3}`)

    .classList.remove("displayHidden");

  document
    .querySelector(`.heart${3}`)

    .classList.remove("animateHeart");
  heartNumber = 1;
  heartBool = true;

  pauseButtonSelector.style.fontSize = "3.5rem";

  timerSelector.style.color = "white";
  index = 0;
  boolColor = -1;
  RedColorBool = false;
  speed = 140;
  // speed = Math.max(speed, 10);
  r.style.setProperty("--speed", `140ms`);
  snakeDrop();
  snakeDropv();
  clearInterval(timerTarget);
  startTimer();

  velocityX = 0;
  velocityY = 0;
  arrayFollow = [[snakeY, snakeX]];
  arrayFollow = [[snakeY, snakeX]];
  velocityXv = 0;
  velocityYv = 0;
  arrayFollowv = [[snakeYv, snakeXv]];
  started = false;
  score = 0;
  seconds = 61;
  randomIt();
  boolColor = -1;
  targetValueChanger();
  portalDrop();
  timerFunction();
  placeObstacles();
  targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
  targetSelector.style.gridTemplateRows = `repeat(1,50px)`;
  haveBorder = 0;

  placeLetters();
};
let targetHtmlSelector = ``;
let timerTarget;
const startTimer = () => {
  timerTarget = setInterval(gameLoad, speed);
};
startTimer();
const targetValueChanger = () => {
  targetHtmlSelector = ``;
  targetSelector.innerHTML = targetHtmlSelector;

  for (let i = 0; i < letters.length; i++) {
    if (i <= boolColor) {
      targetHtmlSelector += `<div class="targetLetter lettersIt${i}" style="grid-area:${targetY}/${
        targetX + i
      };color:green"><div class = "letterBlock seqLetter" >${
        letters[i]
      }</div></div>`;
    } else if (RedColorBool) {
      targetHtmlSelector += `<div class="targetLetter lettersIt${i}" style="grid-area:${targetY}/${
        targetX + i
      };color:red"><div class = "letterBlock seqLetter" >${
        letters[i]
      }</div></div>`;
      RedColorBool = false;
    } else {
      targetHtmlSelector += `<div class="targetLetter lettersIt${i}" style="grid-area:${targetY}/${
        targetX + i
      };color:white"><div class = "letterBlock seqLetter" >${
        letters[i]
      }</div></div>`;
    }

    targetSelector.innerHTML += targetHtmlSelector;
  }
};
targetValueChanger();

let obstacle1X;
let obstacle1Y;

let obstacle2X = 20;
let obstacle2Y = 20;

let obstacle3X = 25;
let obstacle3Y = 25;

let obstacle4X = 30;
let obstacle4Y = 30;

let obstacle5X = 35;
let obstacle5Y = 35;
console.log(obstacles);

let numbermoveOne = 8;

let numbermoveTwo = 6;

let numbermoveThree = 7;
let numbermoveFour = 6;
let numbermoveFive = 7;
let boolagain = false;
const placeObstacle1 = () => {
  for (let i = 0; i < 1; i++) {
    obstacle1X = Math.max(
      Math.floor(Math.random() * (gridX - numbermoveOne)) + 1,
      1
    );
    obstacle1Y = Math.floor(Math.random() * gridY) + 1;

    for (let j = 1; j <= numbermoveOne; j++) {
      if (obstacles.includes([obstacle1Y, obstacle1X + numbermoveOne])) {
        i--;
        boolagain = true;
        break;
      }
    }
    if (!boolagain) {
      for (let j = 1; j <= numbermoveOne; j++) {
        if (
          snakeX >= obstacle1X &&
          snakeX <= obstacle1X + numbermoveOne &&
          snakeY === obstacle1Y
        ) {
          i--;

          break;
        }
      }
    }
  }

  boolagain = false;
};
placeObstacle1();
const placeObstacle2 = () => {
  for (let i = 0; i < 1; i++) {
    obstacle2X = Math.floor(Math.random() * gridX + 1);
    obstacle2Y = Math.max(
      Math.floor(Math.random() * gridY - numbermoveTwo) + 1,
      1
    );

    for (let j = 1; j <= numbermoveTwo; j++) {
      if (obstacles.includes([obstacle2Y + numbermoveTwo, obstacle2X])) {
        i--;
        boolagain = true;
        break;
      }
    }
    if (!boolagain) {
      for (let j = 1; j <= numbermoveTwo; j++) {
        if (
          snakeX === obstacle2X &&
          snakeY >= obstacle2Y &&
          snakeY <= obstacle2Y + numbermoveTwo
        ) {
          i--;

          break;
        }
      }
    }
  }

  boolagain = false;
};
placeObstacle2();
const placeObstacle3 = () => {
  for (let i = 0; i < 1; i++) {
    obstacle3X = Math.max(
      Math.floor(Math.random() * (gridX - numbermoveThree)) + 1,
      1
    );
    obstacle3Y = Math.floor(Math.random() * gridY) + 1;
    for (let j = 1; j <= numbermoveThree; j++) {
      if (obstacles.includes([obstacle3Y, obstacle3X + numbermoveThree])) {
        i--;
        boolagain = true;
        break;
      }
    }
    if (!boolagain) {
      for (let j = 1; j <= numbermoveThree; j++) {
        if (
          snakeX >= obstacle3X &&
          snakeX <= obstacle3X + numbermoveThree &&
          snakeY === obstacle3Y
        ) {
          i--;

          break;
        }
      }
    }
  }

  boolagain = false;
};
const placeObstacle4 = () => {
  for (let i = 0; i < 1; i++) {
    obstacle4X = Math.max(
      Math.floor(Math.random() * (gridX - numbermoveFour)) + 1,
      1
    );
    obstacle3Y = Math.floor(Math.random() * gridY) + 1;
    for (let j = 1; j <= numbermoveFour; j++) {
      if (obstacles.includes([obstacle4Y, obstacle4X + numbermoveFour])) {
        i--;
        boolagain = true;
        break;
      }
    }
    if (!boolagain) {
      for (let j = 1; j <= numbermoveFour; j++) {
        if (snakeX === obstacle4X + numbermoveFour && snakeY === obstacle4Y) {
          i--;

          break;
        }
      }
    }
  }

  boolagain = false;
};

const placeObstacle5 = () => {
  for (let i = 0; i < 1; i++) {
    obstacle5X = Math.floor(Math.random() * gridX + 1);
    obstacle5Y = Math.max(
      Math.floor(Math.random() * gridY - numbermoveFive) + 1,
      1
    );

    for (let j = 1; j <= numbermoveFive; j++) {
      if (obstacles.includes([obstacle5Y + numbermoveFive, obstacle5X])) {
        i--;
        boolagain = true;
        break;
      }
    }
    if (!boolagain) {
      for (let j = 1; j <= numbermoveFive; j++) {
        if (snakeX === obstacle5X && snakeY === obstacle5Y + numbermoveFive) {
          i--;

          break;
        }
      }
    }
  }

  boolagain = false;
};

placeObstacle3();
placeObstacle4();
placeObstacle5();
booland1 = true;
booland2 = true;
booland3 = true;
booland4 = true;
booland5 = true;

let vel_obstacle1X = 0;
let vel_obstacle1Y = 0;
let vel_obstacle2X = 0;
let vel_obstacle2Y = 0;
let vel_obstacle3X = 0;
let vel_obstacle3Y = 0;
let vel_obstacle4X = 0;
let vel_obstacle4Y = 0;
let vel_obstacle5X = 0;
let vel_obstacle5Y = 0;

let numbermove1 = 0;
let numbermove2 = 0;
let numbermove3 = 0;
let numbermove4 = 0;
let numbermove5 = 0;
r.style.setProperty("--finalX", `${(obstacle1X - 1) * gridMultiplier}px`);
r.style.setProperty("--finalY", `${(obstacle1Y - 1) * gridMultiplier}px`);

r.style.setProperty("--finalX1", `${(obstacle2X - 1) * gridMultiplier}px`);
r.style.setProperty("--finalY1", `${(obstacle2Y - 1) * gridMultiplier}px`);

r.style.setProperty("--finalX2", `${(obstacle3X - 1) * gridMultiplier}px`);
r.style.setProperty("--finalY2", `${(obstacle3Y - 1) * gridMultiplier}px`);

r.style.setProperty("--finalX3", `${(obstacle4X - 1) * gridMultiplier}px`);
r.style.setProperty("--finalY3", `${(obstacle4Y - 1) * gridMultiplier}px`);

r.style.setProperty("--finalX4", `${(obstacle5X - 1) * gridMultiplier}px`);
r.style.setProperty("--finalY4", `${(obstacle5Y - 1) * gridMultiplier}px`);

const createObs = () => {
  for (let i = 1; i < 4; i++) {
    let bcda = document.createElement(`div`);
    bcda.className = `obstacles${i}`;
    document.querySelector(".gameBox").append(bcda);
  }
};

createObs();
numberReverse = 5;
const removeObs = () => {
  if (numberReverse > 0) {
    for (let i = numberReverse; i <= 5; i++) {
      document.querySelector(`.obstacles${i}`).style.display = "none";
    }
  }
};
const addObs = () => {
  if (numberReverse > 0) {
    for (let i = 1; i <= 5; i++) {
      document.querySelector(`.obstacles${i}`).style.display = "block";
    }
  }
};

const MovingObstacleLoad = () => {
  for (let i = 1; i < 4; i++) {
    if (i === 1 && booland1) {
      obstacle1X += vel_obstacle1X;
      obstacle1Y += vel_obstacle1Y;
      numbermove1++;
      if (numbermove1 < numbermoveOne && numbermove1 > 0) {
        vel_obstacle1X = 1;

        // numbermove+=1
      } else if (numbermove1 === numbermoveOne) {
        numbermove1 = -numbermoveOne;
      } else {
        vel_obstacle1X = -1;
      }

      r.style.setProperty("--finalX", `${(obstacle1X - 1) * gridMultiplier}px`);
      r.style.setProperty("--finalY", `${(obstacle1Y - 1) * gridMultiplier}px`);
    } else if (i === 2 && booland2) {
      obstacle2X += vel_obstacle2X;
      obstacle2Y += vel_obstacle2Y;
      numbermove2++;
      if (numbermove2 < numbermoveTwo && numbermove2 > 0) {
        vel_obstacle2Y = 1;

        // numbermove+=1
      } else if (numbermove2 === numbermoveTwo) {
        numbermove2 = -numbermoveTwo;
      } else {
        vel_obstacle2Y = -1;
      }

      r.style.setProperty(
        "--finalX1",
        `${(obstacle2X - 1) * gridMultiplier}px`
      );
      r.style.setProperty(
        "--finalY1",
        `${(obstacle2Y - 1) * gridMultiplier}px`
      );
    } else if (i === 3 && booland3) {
      obstacle3X += vel_obstacle3X;
      obstacle3Y += vel_obstacle3Y;
      numbermove3++;
      if (numbermove3 < numbermoveThree && numbermove3 > 0) {
        vel_obstacle3X = 1;

        // numbermove+=1
      } else if (numbermove3 === numbermoveThree) {
        numbermove3 = -numbermoveThree;
      } else {
        vel_obstacle3X = -1;
      }

      r.style.setProperty(
        "--finalX2",
        `${(obstacle3X - 1) * gridMultiplier}px`
      );
      r.style.setProperty(
        "--finalY2",
        `${(obstacle3Y - 1) * gridMultiplier}px`
      );
    } else if (i === 4 && booland4) {
      obstacle4X += vel_obstacle4X;
      obstacle4Y += vel_obstacle4Y;
      numbermove4++;
      if (numbermove4 < numbermoveFour && numbermove4 > 0) {
        vel_obstacle4X = 1;

        // numbermove+=1
      } else if (numbermove4 === numbermoveFour) {
        numbermove4 = -numbermoveFour;
      } else {
        vel_obstacle4X = -1;
      }

      r.style.setProperty(
        "--finalX3",
        `${(obstacle4X - 1) * gridMultiplier}px`
      );
      r.style.setProperty(
        "--finalY3",
        `${(obstacle4Y - 1) * gridMultiplier}px`
      );
    } else if (i === 5 && booland5) {
      obstacle5X += vel_obstacle5X;
      obstacle5Y += vel_obstacle5Y;
      numbermove5++;
      if (numbermove5 < numbermoveFive && numbermove5 > 0) {
        vel_obstacle5Y = 1;

        // numbermove+=1
      } else if (numbermove5 === numbermoveFive) {
        numbermove5 = -numbermoveFive;
      } else {
        vel_obstacle5Y = -1;
      }

      r.style.setProperty(
        "--finalX4",
        `${(obstacle5X - 1) * gridMultiplier}px`
      );
      r.style.setProperty(
        "--finalY4",
        `${(obstacle5Y - 1) * gridMultiplier}px`
      );
    }
  }

  for (let i = 0; i < arrayFollow.length; i++) {
    if (
      (arrayFollow[i][1] <= obstacle1X + 1 &&
        arrayFollow[i][1] >= obstacle1X - 1 &&
        arrayFollow[i][0] === obstacle1Y) ||
      (arrayFollow[i][1] <= obstacle3X + 1 &&
        arrayFollow[i][1] >= obstacle3X - 1 &&
        arrayFollow[i][0] === obstacle3Y)
    ) {
      score2 -= 40;

      velocityX = 0;
      velocityY = 0;
      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityX = 0;
          velocityY = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    } else if (
      arrayFollow[i][0] <= obstacle2Y + 1 &&
      arrayFollow[i][0] >= obstacle2Y - 1 &&
      arrayFollow[i][1] === obstacle2X
    ) {
      score2 -= 40;
      velocityX = 0;
      velocityY = 0;
      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityX = 0;
          velocityY = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }
  }
  //
  for (let i = 0; i < arrayFollowv.length; i++) {
    if (
      (arrayFollowv[i][1] <= obstacle1X + 1 &&
        arrayFollowv[i][1] >= obstacle1X - 1 &&
        arrayFollowv[i][0] === obstacle1Y) ||
      (arrayFollowv[i][1] <= obstacle3X + 1 &&
        arrayFollowv[i][1] >= obstacle3X - 1 &&
        arrayFollowv[i][0] === obstacle3Y)
    ) {
      score1 -= 40;
      velocityXv = 0;
      velocityYv = 0;
      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityXv = 0;
          velocityYv = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");

          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    } else if (
      arrayFollowv[i][0] <= obstacle2Y + 1 &&
      arrayFollowv[i][0] >= obstacle2Y - 1 &&
      arrayFollowv[i][1] === obstacle2X
    ) {
      score1 -= 40;
      velocityXv = 0;
      velocityYv = 0;
      seconds = 0;
      boolforListener = false;
      started = false;

      document
        .querySelector(`.heart${heartNumber}`)

        .classList.add("animateHeart");

      setTimeout(() => {
        document
          .querySelector(`.heart${heartNumber - 1}`)

          .classList.add("displayHidden");
      }, 600);

      if (heartBool) {
        heartBool = false;
        heartNumber++;
      }
      ReloadGameNumber++;
      if (ReloadGameNumber === 3) {
        setTimeout(() => {
          clearInterval(megaObs);
          clearInterval(timerr);
          bgMusic.pause();
          velocityXv = 0;
          velocityYv = 0;
          boolforListener = false;
          started = false;

          document.querySelector(".bgBlur").classList.remove("hideIt");
          document.querySelector(".threelivesover").classList.remove("hideMe");
          document.querySelector(
            ".player1scoreit"
          ).innerHTML = `Player1: <span>${score1}</span>`;
          document.querySelector(
            ".player2scoreit"
          ).innerHTML = `Player2: <span>${score2}</span>`;
          if (score1 > score2) {
            document.querySelector(".winner").textContent = "PLAYER1 WON";
          }
          if (score2 > score1) {
            document.querySelector(".winner").textContent = "PLAYER2 WON";
          }
          if (score1 == score2) {
            document.querySelector(".winner").textContent = "DRAW";
          }
          boolNow = true;
        }, 600);
      } else {
        resetAll();
      }
    }
  }
};
let saveBool = true;
let megaObs = setInterval(MovingObstacleLoad, 200);
// let localStorageObject;
// document.querySelector(".save").addEventListener("click", (event) => {
//   console.log(event.target.classList);

//   console.log("clickedmeee");

//   localStorageObject = {
//     // displaySet: displaySet,
//     // a: a,
//     // b: b,
//     // c: c,
//     // d: d,
//     // initialX,
//     // initialY,
//     // e: e,
//     // f: f,
//     boolNow: boolNow,
//     numbermove1: numbermove1,
//     numbermove2: numbermove2,
//     numbermove3: numbermove3,
//     deleteBooster: deleteBooster,
//     boolForBooster: boolForBooster,
//     timerForBooster: timerForBooster,
//     timerForBoosterTime: timerForBoosterTime,
//     randomWord: randomWord,
//     randomIndex: randomIndex,
//     letters: letters,
//     letterX: letterX,
//     letterY: letterY,
//     started: started,
//     boolTimer: boolTimer,
//     velocityX: velocityX,
//     velocityY: velocityY,
//     seconds: seconds,
//     obstotalNumber: obstotalNumber,
//     colorIndex: colorIndex,
//     boolforListener: boolforListener,
//     boolUp: boolUp,
//     boolDown: boolDown,
//     boolColor: boolColor,
//     heartNumber: heartNumber,
//     headBoolean: headBoolean,
//     ReloadGameNumber: ReloadGameNumber,
//     highScore: highScore,
//     boolForBoosterMega: boolForBoosterMega,
//     speedBoosterMegaX: speedBoosterMegaX,
//     speedBoosterMegaY: speedBoosterMegaY,
//     r: document.querySelector(":root"),
//     clickSoundBool: clickSoundBool,
//     startedBoolean: startedBoolean,
//     arrayOfLetters: arrayOfLetters,
//     boostBoolTime: boostBoolTime,
//     gridX: gridX,
//     gridY: gridY,
//     gridMultiplier: gridMultiplier,
//     targetX: targetX,
//     targetY: targetY,
//     RedColorBool: RedColorBool,
//     speed: speed,
//     obstacleNumber: obstacleNumber,
//     speedBoosterX: speedBoosterX,
//     speedBoosterY: speedBoosterY,
//     speedBoosterTimeX: speedBoosterTimeX,
//     speedBoosterTimeY: speedBoosterTimeY,
//     speedBoostBool: speedBoostBool,
//     speedBoostTimeBool: speedBoostTimeBool,
//     boolVolume: boolVolume,
//     boolForBoosterTime: boolForBoosterTime,
//     diagNumber: diagNumber,
//     horiNumber: horiNumber,
//     vertiNumber: vertiNumber,
//     abcda: abcda,
//     movingObstacle1X: movingObstacle1X,
//     movingObstacle1Y: movingObstacle1Y,
//     movingObstacle2X: movingObstacle2X,
//     movingObstacle2Y: movingObstacle2Y,
//     movingObstacle3X: movingObstacle3X,
//     movingObstacle3Y: movingObstacle3Y,
//     velocityXofObs2v1: velocityXofObs2v1,
//     velocityYofObs2v1: velocityYofObs2v1,
//     velocityXofObs2v2: velocityXofObs2v2,
//     velocityYofObs2v2: velocityYofObs2v2,
//     portalX: portalX,
//     portalY: portalY,
//     portals: portals,
//     startedTimer: startedTimer,
//     timerBool: timerBool,
//     timerr: timerr,
//     snakeX: snakeX,
//     snakeY: snakeY,
//     nonClashBool: nonClashBool,
//     obstacles: obstacles,
//     obstacleX: obstacleX,
//     obstacleY: obstacleY,
//     htmlSelector: htmlSelector,
//     boolLetter: boolLetter,
//     boolLoop: boolLoop,
//     arrayFollow: arrayFollow,
//     letterKillCounter: letterKillCounter,
//     arrayOfLettersReversed: arrayOfLettersReversed,
//     index: index,
//     timerForAbitily: timerForAbitily,
//     boolForBooster: boolForBooster,
//     gridSize: gridSize,
//     testNumber: testNumber,
//     boolSet: boolSet,
//     velocityXofObs1: velocityXofObs1,
//     velocityYofObs1: velocityYofObs1,
//     targetHtmlSelector: targetHtmlSelector,

//     obstacle1X: obstacle1X,
//     obstacle1Y: obstacle1Y,
//     obstacle2X: obstacle2X,
//     obstacle2Y: obstacle2Y,
//     obstacle3X: obstacle3X,
//     obstacle3Y: obstacle3Y,
//     numbermove: numbermove,
//     boolagain: boolagain,
//     vel_obstacle1X: vel_obstacle1X,
//     vel_obstacle1Y: vel_obstacle1Y,
//     vel_obstacle2X: vel_obstacle2X,
//     vel_obstacle2Y: vel_obstacle2Y,
//     vel_obstacle3X: vel_obstacle3X,
//     vel_obstacle3Y: vel_obstacle3Y,
//     numbermove1: numbermove1,
//     numbermove2: numbermove2,
//     numbermove3: numbermove3,
//   };
//   localStorage.setItem("save-state", JSON.stringify(localStorageObject));
// });

// document.querySelector(".load").addEventListener("click", () => {
//   loadState();
// });

// let GameSafe;
// const loadState = () => {
//   GameSafe = JSON.parse(localStorage.getItem("save-state"));
//   if (GameSafe) {
//     console.log("working");

//     // displaySet = GameSafe.displaySet;

//     // a = GameSafe.a;
//     // b = GameSafe.b;
//     // c = GameSafe.c;
//     // d = GameSafe.d;
//     // initialX;
//     // initialY;
//     // e = GameSafe.e;
//     // f = GameSafe.f;
//     boolNow = GameSafe.boolNow;
//     numbermove1 = GameSafe.numbermove1;
//     numbermove2 = GameSafe.numbermove2;
//     numbermove3 = GameSafe.numbermove3;
//     deleteBooster = GameSafe.deleteBooster;
//     boolForBooster = GameSafe.boolForBooster;
//     timerForBooster = GameSafe.timerForBooster;
//     timerForBoosterTime = GameSafe.timerForBoosterTime;
//     randomWord = GameSafe.randomWord;
//     randomIndex = GameSafe.randomIndex;
//     letters = GameSafe.letters;
//     letterX = GameSafe.letterX;
//     letterY = GameSafe.letterY;
//     started = GameSafe.started;
//     boolTimer = GameSafe.boolTimer;
//     velocityX = GameSafe.velocityX;
//     velocityY = GameSafe.velocityY;
//     seconds = GameSafe.seconds;
//     obstotalNumber = GameSafe.obstotalNumber;
//     colorIndex = GameSafe.colorIndex;
//     boolforListener = GameSafe.boolforListener;
//     boolUp = GameSafe.boolUp;
//     boolDown = GameSafe.boolDown;
//     boolColor = GameSafe.boolColor;
//     heartNumber = GameSafe.heartNumber;
//     headBoolean = GameSafe.headBoolean;
//     ReloadGameNumber = GameSafe.ReloadGameNumber;
//     highScore = GameSafe.highScore;
//     boolForBoosterMega = GameSafe.boolForBoosterMega;
//     speedBoosterMegaX = GameSafe.speedBoosterMegaX;
//     speedBoosterMegaY = GameSafe.speedBoosterMegaY;
//     // r = GameSafe.r;
//     clickSoundBool = GameSafe.clickSoundBool;
//     startedBoolean = GameSafe.startedBoolean;
//     arrayOfLetters = GameSafe.arrayOfLetters;
//     boostBoolTime = GameSafe.boostBoolTime;
//     gridX = GameSafe.gridX;
//     gridY = GameSafe.gridY;
//     gridMultiplier = GameSafe.gridMultiplier;
//     targetX = GameSafe.targetX;
//     targetY = GameSafe.targetY;
//     RedColorBool = GameSafe.RedColorBool;
//     speed = GameSafe.speed;
//     obstacleNumber = GameSafe.obstacleNumber;
//     speedBoosterX = GameSafe.speedBoosterX;
//     speedBoosterY = GameSafe.speedBoosterY;
//     speedBoosterTimeX = GameSafe.speedBoosterTimeX;
//     speedBoosterTimeY = GameSafe.speedBoosterTimeY;
//     speedBoostBool = GameSafe.speedBoostBool;
//     speedBoostTimeBool = GameSafe.speedBoostTimeBool;
//     boolVolume = GameSafe.boolVolume;
//     boolForBoosterTime = GameSafe.boolForBoosterTime;
//     diagNumber = GameSafe.diagNumber;
//     horiNumber = GameSafe.horiNumber;
//     vertiNumber = GameSafe.vertiNumber;
//     abcda = GameSafe.abcda;
//     movingObstacle1X = GameSafe.movingObstacle1X;
//     movingObstacle1Y = GameSafe.movingObstacle1Y;
//     movingObstacle2X = GameSafe.movingObstacle2X;
//     movingObstacle2Y = GameSafe.movingObstacle2Y;
//     movingObstacle3X = GameSafe.movingObstacle3X;
//     movingObstacle3Y = GameSafe.movingObstacle3Y;
//     velocityXofObs2v1 = GameSafe.velocityXofObs2v1;
//     velocityYofObs2v1 = GameSafe.velocityYofObs2v1;
//     velocityXofObs2v2 = GameSafe.velocityXofObs2v2;
//     velocityYofObs2v2 = GameSafe.velocityYofObs2v2;
//     portalX = GameSafe.portalX;
//     portalY = GameSafe.portalY;
//     portals = GameSafe.portals;
//     startedTimer = GameSafe.startedTimer;
//     timerBool = GameSafe.timerBool;
//     timerr = GameSafe.timerr;
//     snakeX = GameSafe.snakeX;
//     snakeY = GameSafe.snakeY;
//     nonClashBool = GameSafe.nonClashBool;
//     obstacles = GameSafe.obstacles;
//     obstacleX = GameSafe.obstacleX;
//     obstacleY = GameSafe.obstacleY;
//     htmlSelector = GameSafe.htmlSelector;
//     boolLetter = GameSafe.boolLetter;
//     boolLoop = GameSafe.boolLoop;
//     arrayFollow = GameSafe.arrayFollow;
//     letterKillCounter = GameSafe.letterKillCounter;
//     arrayOfLettersReversed = GameSafe.arrayOfLettersReversed;
//     index = GameSafe.index;
//     timerForAbitily = GameSafe.timerForAbitily;
//     boolForBooster = GameSafe.boolForBooster;
//     gridSize = GameSafe.gridSize;
//     testNumber = GameSafe.testNumber;
//     boolSet = GameSafe.boolSet;
//     velocityXofObs1 = GameSafe.velocityXofObs1;
//     velocityYofObs1 = GameSafe.velocityYofObs1;
//     targetHtmlSelector = GameSafe.targetHtmlSelecto;

//     obstacle1X = GameSafe.obstacle1X;
//     obstacle1Y = GameSafe.obstacle1Y;
//     obstacle2X = GameSafe.obstacle2X;
//     obstacle2Y = GameSafe.obstacle2Y;
//     obstacle3X = GameSafe.obstacle3X;
//     obstacle3Y = GameSafe.obstacle3Y;
//     numbermove = GameSafe.numbermove;
//     boolagain = GameSafe.boolagain;
//     vel_obstacle1X = GameSafe.vel_obstacle1X;
//     vel_obstacle1Y = GameSafe.vel_obstacle1Y;
//     vel_obstacle2X = GameSafe.vel_obstacle2X;
//     vel_obstacle2Y = GameSafe.vel_obstacle2Y;
//     vel_obstacle3X = GameSafe.vel_obstacle3X;
//     vel_obstacle3Y = GameSafe.vel_obstacle3Y;
//     numbermove1 = GameSafe.numbermove1;
//     numbermove2 = GameSafe.numbermove2;
//     numbermove3 = GameSafe.numbermove3;
//     if (heartNumber === 1) {
//       console.log("continue");
//       if (
//         document
//           .querySelector(`.heart1`)

//           .classList.contains("displayHidden")
//       ) {
//         document
//           .querySelector(`.heart1`)

//           .classList.remove("displayHidden");
//       }
//       if (
//         document
//           .querySelector(`.heart2`)

//           .classList.contains("displayHidden")
//       ) {
//         document
//           .querySelector(`.heart2`)

//           .classList.remove("displayHidden");
//       }

//       if (
//         document
//           .querySelector(`.heart3`)

//           .classList.contains("displayHidden")
//       ) {
//         document
//           .querySelector(`.heart3`)

//           .classList.remove("displayHidden");
//       }
//     } else if (heartNumber === 2) {
//       document
//         .querySelector(`.heart1`)

//         .classList.add("displayHidden");
//       if (
//         document
//           .querySelector(`.heart2`)

//           .classList.contains("displayHidden")
//       ) {
//         document
//           .querySelector(`.heart2`)

//           .classList.remove("displayHidden");
//       }
//     } else if (heartNumber === 3) {
//       document
//         .querySelector(`.heart1`)

//         .classList.add("displayHidden");
//       document
//         .querySelector(`.heart2`)

//         .classList.add("displayHidden");
//     }
//     targetSelector.style.gridTemplateColumns = `repeat(${letters.length},50px)`;
//     targetSelector.style.gridTemplateRows = `repeat(1,50px)`;

//     timerFunction();

//     // clearInterval(timerTarget);
//     // setInterval(gameLoad, speed);
//     // for (let i = 1; i <= 35; i++) {
//     //   abcda = document.createElement(`div`);
//     //   abcda.className = `snake${i} hideSnake`;
//     //   document.querySelector(".gameBox").append(abcda);
//     // }
//     // r.style.setProperty("--initialX", `15px`);
//     // r.style.setProperty("--initialY", `300px`);
//     // if (boolForBooster) {
//     //   htmlSelector += `<div style = "grid-area: ${speedBoosterY}/${speedBoosterX}"><div class="booster"></div></div>`;
//     // }

//     // if (boolForBoosterTime) {
//     //   htmlSelector += `<div style = "grid-area: ${speedBoosterTimeY}/${speedBoosterTimeX}"><div class="boosterTime"></div></div>`;
//     // }

//     // if (boolForBoosterMega) {
//     //   htmlSelector += `<div style = "grid-area: ${speedBoosterMegaY}/${speedBoosterMegaX}"><div class="boosterMega"></div></div>`;
//     // }

//     // for (let i = 0; i < portals.length; i++) {
//     //   htmlSelector += `<div class = "portal" style = "grid-area: ${portals[i][0]}/${portals[i][1]}"></div>`;
//     // }
//     // for (let i = 0; i < arrayOfLetters.length; i++) {
//     //   if (!arrayOfLetters[i] == "") {
//     //     htmlSelector += `<div class = "letter letter${i}" style="grid-area:${arrayOfLetters[i][0]}/${arrayOfLetters[i][1]}"><div class = "letterBlock" >${letters[i]}</div></div>`;
//     //   }
//     // }
//     // for (let i = 0; i <= arrayFollow.length - 1; i++) {
//     //   if (i === 0) {
//     //     e = r.style.setProperty(
//     //       "--initialX",
//     //       `${(arrayFollow[i][1] - 1) * gridMultiplier}px`
//     //     );
//     //     f = r.style.setProperty(
//     //       "--initialY",
//     //       `${(arrayFollow[i][0] - 1) * gridMultiplier}px`
//     //     );
//     //   } else if (i !== 0 && startedBoolean) {
//     //     // htmlSelector += `<div class = "snake${i}"></div>`;
//     //     if (
//     //       document.querySelector(`.snake${i}`).classList.contains("hideSnake")
//     //     ) {
//     //       document.querySelector(`.snake${i}`).classList.remove("hideSnake");
//     //     }

//     //     document.querySelector(`.snake${i}`).style.top = `${
//     //       (arrayFollow[i][0] - 1) * gridMultiplier
//     //     }px`;
//     //     document.querySelector(`.snake${i}`).style.left = `${
//     //       (arrayFollow[i][1] - 1) * gridMultiplier
//     //     }px`;
//     //     boardSelector.innerHTML = htmlSelector;
//     //     // r.style.setProperty("--finalX", `${(arrayFollow[i][1] - 1) * 15}px`);
//     //     // r.style.setProperty("--finalY", `${(arrayFollow[i][0] - 1) * 15}px`);
//     //   }
//     // }

//     // r.style.setProperty("--speed", `${speed}ms`);
//     // r.style.setProperty("--finalX", `${(obstacle1X - 1) * gridMultiplier}px`);
//     // r.style.setProperty("--finalY", `${(obstacle1Y - 1) * gridMultiplier}px`);

//     // r.style.setProperty("--finalX1", `${(obstacle2X - 1) * gridMultiplier}px`);
//     // r.style.setProperty("--finalY1", `${(obstacle2Y - 1) * gridMultiplier}px`);

//     // r.style.setProperty("--finalX2", `${(obstacle3X - 1) * gridMultiplier}px`);
//     // r.style.setProperty("--finalY2", `${(obstacle3Y - 1) * gridMultiplier}px`);
//     targetValueChanger();
//   }
// };