script.js

const maze = document.getElementById('maze');
const status = document.getElementById('status');
const timerDisplay = document.getElementById('timer');
const scoreDisplay = document.getElementById('score');
const levelInfo = document.getElementById('level-info');

let player, goal, walls = [];
let level = 1;
let score = 0;
let timeLeft = 30;
let timerInterval;

// Levels configuration
const levels = [
  {
    walls: [
      { top: 100, left: 50, width: 200, height: 20 },
      { top: 200, left: 100, width: 20, height: 150 },
      { top: 300, left: 200, width: 150, height: 20 },
    ],
  },
  {
    walls: [
      { top: 50, left: 50, width: 20, height: 300 },
      { top: 150, left: 100, width: 300, height: 20 },
      { top: 250, left: 50, width: 200, height: 20 },
    ],
  },
  {
    walls: [
      { top: 100, left: 50, width: 300, height: 20 },
      { top: 200, left: 100, width: 20, height: 200 },
      { top: 150, left: 300, width: 20, height: 150 },
    ],
  },
];

// Create maze layout
function createMaze(level) {
  maze.innerHTML = '';
  walls = [];

  // Player
  player = document.createElement('div');
  player.id = 'player';
  player.style.top = '20px';
  player.style.left = '20px';
  maze.appendChild(player);

  // Goal
  goal = document.createElement('div');
  goal.id = 'goal';
  goal.style.top = '350px';
  goal.style.left = '350px';
  maze.appendChild(goal);

  // Walls
  levels[level - 1].walls.forEach((wallConfig) => {
    const wall = document.createElement('div');
    wall.className = 'wall';
    wall.style.top = `${wallConfig.top}px`;
    wall.style.left = `${wallConfig.left}px`;
    wall.style.width = `${wallConfig.width}px`;
    wall.style.height = `${wallConfig.height}px`;
    maze.appendChild(wall);
    walls.push(wall);
  });
}

// Start the timer
function startTimer() {
  timeLeft = 30;
  timerDisplay.textContent = timeLeft;
  timerInterval = setInterval(() => {
    timeLeft--;
    timerDisplay.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      status.textContent = 'Time is up! Game Over!';
      document.removeEventListener('keydown', movePlayer);
    }
  }, 1000);
}

// Check if colliding with walls
function isCollidingWithWall(position) {
  return walls.some((wall) => {
    const wallBounds = wall.getBoundingClientRect();
    return (
      position.left < wallBounds.right &&
      position.left + 20 > wallBounds.left &&
      position.top < wallBounds.bottom &&
      position.top + 20 > wallBounds.top
    );
  });
}

// Check if reaching the goal
function checkWin() {
  const goalBounds = goal.getBoundingClientRect();
  const playerBounds = player.getBoundingClientRect();
  if (
    playerBounds.left < goalBounds.right &&
    playerBounds.right > goalBounds.left &&
    playerBounds.top < goalBounds.bottom &&
    playerBounds.bottom > goalBounds.top
  ) {
    clearInterval(timerInterval);
    score += timeLeft * 10; // Add score
    scoreDisplay.textContent = score;
    level++;
    if (level > levels.length) {
      status.textContent = `Congratulations! You completed all levels! Final Score: ${score}`;
      document.removeEventListener('keydown', movePlayer);
    } else {
      levelInfo.textContent = `Level: ${level}`;
      createMaze(level);
      startTimer();
    }
  }
}

// Move the player
function movePlayer(e) {
  const playerPosition = {
    top: parseInt(player.style.top),
    left: parseInt(player.style.left),
  };
  const step = 10;
  const newPosition = { ...playerPosition };

  switch (e.key) {
    case 'ArrowUp':
      newPosition.top -= step;
      break;
    case 'ArrowDown':
      newPosition.top += step;
      break;
    case 'ArrowLeft':
      newPosition.left -= step;
      break;
    case 'ArrowRight':
      newPosition.left += step;
      break;
    default:
      return;
  }

  if (
    newPosition.top >= 0 &&
    newPosition.left >= 0 &&
    newPosition.top + 20 <= maze.clientHeight &&
    newPosition.left + 20 <= maze.clientWidth &&
    !isCollidingWithWall(newPosition)
  ) {
    player.style.top = `${newPosition.top}px`;
    player.style.left = `${newPosition.left}px`;
    checkWin();
  }
}

// Start the game
function startGame() {
  level = 1;
  score = 0;
  levelInfo.textContent = `Level: ${level}`;
  scoreDisplay.textContent = score;
  status.textContent = 'Use arrow keys to move the player to the goal!';
  createMaze(level);
  startTimer();
  document.addEventListener('keydown', movePlayer);
}

startGame();