Added Maze Solver

index.js

@@ -98,6 +98,61 @@ function updateNavbar() {
 }
 
 // Populate the table with project data
+function fillTable() {
+    const data = [
+        ["Day 1", "To-Do List", "/public/Day-1_TodoList/index.html"],
+        ["Day 2", "Digital Clock", "/public/Day-2_digital_clock/digitalclock.html"],
+        ["Day 3", "ASCII Art Generator", "/public/Day-3_AsciiArtGenerator/index.html"],
+        ["Day 4", "Password Strength Visualizer", "/public/Day-4_password_visualizer/index.html"],
+        ["Day 5", "Physics Simulation", "/public/Day-5_physics_simulation/index.html"],
+        ["Day 6", "Quote Generator", "/public/Day-6_QuoteGenerator/index.html"],
+        ["Day 7", "Character Word Counter", "/public/Day-7_CharacterWordCounter/index.html"],
+        ["Day 8", "Dice Roll Simulator", "/public/Day-8_DiceRollSimulator/index.html"],
+        ["Day 9", "Guess My Number", "/public/Day-9_Guess_My_Number/index.html"],
+        ["Day 10", "Brick Breaker", "/public/Day-10_Neon_Brick_Breaker/index.html"],
+        ["Day 11", "WeatherApp", "/public/Day-11_WeatherApp/index.html"],
+        ["Day 12", "Countdown Banner", "https://countdown-banner.vercel.app/"], /* folder Not there */
+        ["Day 13", "Coin Flip Heads/Tails", "/public/Day-13_Coin_Flip/index.html"],
+        ["Day 14", "E-waste Management Hub", "https://e-waste-management-hub.netlify.app/"],
+        ["Day 15", "Currency Converter", "/public/Day-15_Currency_Converter/index.html"],
+        ["Day 16", "Random User Generator", "/public/Day-16_Random_User_Generator/index.html"],
+        ["Day 17", "Image Search App", "/public/Day-17_Image_Search_App/index.html"],
+        ["Day 18", "WaterMedic", "https://github.com/dipmanmajumdar/WaterMedic"], /* folder Not there */
+        ["Day 19", "URL Shortener", "https://github.com/ANTIK-007/URL-Shortener"], /* folder Not there */
+        ["Day 20", "TicTacToe Game", "/public/Day-20_tictactoe/index.html"],
+        ["Day 21", "Candy Crush", "public/Day-21_candycrush/candy_crush.html"],
+        ["Day 22", "QR Code Generator", "/public/Day-22_QRCodeGenerator/index.html"],
+        ["Day 23", "Palette Generator", "public/Day-22_Palette_generator/index.html"],
+        ["Day 24", "Palette Generator", "public/Day-22_Palette_generator/index.html"],
+        ["Day 25", " Portfolio", " https://priyacodesarts.netlify.app/"],
+        ["Day 26", "GiggleBits", "public/GiggleBits/index.html"],
+        ["Day 28", "Target Reflex Test", "public/Day-28_Target_Reflex_Test/index.html"],
+        ["Day 29", "Snake And Ladder Game", "public/Snake-and-Ladder-Game/index.html"],
+        ["Day 30", "Note Taker", "public/Day-42_NoteTaker/index.html"],
+        ["Day 31", "👾Alien Hunt", "public/Day-31/index.html"],
+        ["Day 32","Rock Paper Scissor Game" ,"public/Day-23_RockPaperScissor/index.html" ],
+        ["Day 34", "Colour Picker", "public/Day-34-Colour_picker/index.html"],
+        ["Day 32","Drawing" ,"public/Day-35-Drawing/index.html" ],
+        ["Day 33", "Etch-a-Sketch" ,"./public/Etch-a-Sketch/index.html"],
+          ["Day 34"," Periodic Table", "https://learn-periodic-table.netlify.app/"],
+          ["Day 35", "Book Recommendation", "https://book-recomendation.netlify.app/"],
+          ["Day 36", "World Clock", "public/World_Clock/index.html"],
+          ["Day36", "World Clock", "public/World_Clock/index.html"],
+          ["Day 38", "Gradient Generator", "public/Gradient_Generator/index.html"],
+          ["Day 40", "Space War Game", "./public/Space-War-Game/index.html"],
+          ["Day 44", "Notes App", "./public/Day-36_Notes_App/index.html"],
+          ["Day 46", "Mood Based Music Suggester", "./public/Mood_Music_Suggester/index.html"],
+          ["Day 47", "Pomodoro App", "/public/Day-47_Pomodoro-app/index.html"],
+          ["Day 48", "Space Jumper Game", "./public/Space-Jumper-Game/index.html"],
+          ["Day 49", "CalRace", "./public/Day-45/index.html"],
+          ["Day 50", "BMI Calculator", "./public/Day-50_BMI_Calculator_Tanu/index.html"],
+          ["Day 51", "Chess", "/public/Day-51/index.html"],
+          ["Day 52", "E-Commerce_UI", "public/Day52_E-Commerce_UI/index.html"],
+          ["Day 53", "Word Guess Game"," public/Day53-Word-Guess-Game/index.html"],
+          ["Day 57", "4 in a Row", "public/Day-57_4_in_a_row/index.html"],
+          ["Day 81", "Maze Solver", "./public/Day-81_MazeSolver/index.html"],
+    ];
+}
 //function fillTable() {
     //const data = [
        // ["Day 1", "To-Do List", "/public/Day-1_TodoList/index.html"],
@@ -163,9 +218,6 @@ function updateNavbar() {
 
 // See in Script Folder in app.js (where you can add your poject)];
 
-
-
-
     const tbody = document.getElementById('tableBody');
     tbody.innerHTML = '';
 

public/Day-81_MazeSolver/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Maze Game</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <h1>🧩 Maze Game</h1>
+
+  <div id="status">
+    ⏱️ Time: <span id="timer">0</span>s |
+    🎮 Moves: <span id="moves">0</span>
+  </div>
+
+  <div id="controls">
+    <label for="difficulty">Difficulty:</label>
+    <select id="difficulty" onchange="generateMaze()">
+      <option value="easy">Easy</option>
+      <option value="medium" selected>Medium</option>
+      <option value="hard">Hard</option>
+    </select>
+
+    <button onclick="generateMaze()">Generate Maze</button>
+    <button onclick="resetMaze()">Reset</button>
+  </div>
+
+  <div id="grid"></div>
+
+  <audio id="win-sound" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_7b326571fa.mp3?filename=game-win-sound-1-183061.mp3"></audio>
+
+  <script src="script.js"></script>
+</body>
+</html>

public/Day-81_MazeSolver/script.js

@@ -0,0 +1,225 @@
+const grid = document.getElementById("grid");
+const timerDisplay = document.getElementById("timer");
+const movesDisplay = document.getElementById("moves");
+const winSound = document.getElementById("win-sound");
+
+let rows = 21;
+let cols = 21;
+let wallChance = 0.2;
+let cells = [];
+let playerPos = { r: 0, c: 0 };
+let timer = 0;
+let moves = 0;
+let timerInterval;
+
+function updateStats() {
+  timerDisplay.textContent = timer;
+  movesDisplay.textContent = moves;
+}
+
+function createGrid() {
+  clearInterval(timerInterval);
+  timer = 0;
+  moves = 0;
+  updateStats();
+  grid.innerHTML = '';
+  cells = [];
+
+  grid.style.gridTemplateColumns = `repeat(${cols}, 20px)`;
+
+  for (let r = 0; r < rows; r++) {
+    const row = [];
+    for (let c = 0; c < cols; c++) {
+      const cell = document.createElement("div");
+      cell.className = "cell";
+      grid.appendChild(cell);
+      row.push(cell);
+    }
+    cells.push(row);
+  }
+
+  timerInterval = setInterval(() => {
+    timer++;
+    timerDisplay.textContent = timer;
+  }, 1000);
+}
+
+function generateMaze() {
+  const difficulty = document.getElementById("difficulty").value;
+
+  if (difficulty === "easy") {
+    rows = cols = 11;
+  } else if (difficulty === "medium") {
+    rows = cols = 21;
+  } else if (difficulty === "hard") {
+    rows = cols = 31;
+  }
+
+    if (rows % 2 === 0) rows++;
+    if (cols % 2 === 0) cols++;
+
+      generatePerfectMaze();
+    } while (!checkSolvable());
+
+
+function generateRandomMaze() {
+  let solvable = false;
+  while (!solvable) {
+    createGrid();
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const isStartOrEnd = (r <= 1 && c <= 1) || (r >= rows - 2 && c >= cols - 2);
+        if (!isStartOrEnd && Math.random() < wallChance) {
+          cells[r][c].classList.add("wall");
+        }
+      }
+    }
+
+    cells[0][0].classList.remove("wall");
+    cells[rows - 1][cols - 1].classList.remove("wall");
+
+    solvable = checkSolvable();
+  }
+
+  setPlayer();
+}
+
+function generatePerfectMaze() {
+  createGrid();
+
+  const visited = Array.from({ length: rows }, () => Array(cols).fill(false));
+  const stack = [[0, 0]];
+  visited[0][0] = true;
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      cells[r][c].classList.add("wall");
+    }
+  }
+
+  while (stack.length > 0) {
+    const [r, c] = stack.pop();
+    cells[r][c].classList.remove("wall");
+
+    const neighbors = shuffle([
+      [r - 2, c],
+      [r + 2, c],
+      [r, c - 2],
+      [r, c + 2]
+    ]);
+
+    for (const [nr, nc] of neighbors) {
+      if (
+        nr >= 0 && nc >= 0 && nr < rows && nc < cols &&
+        !visited[nr][nc]
+      ) {
+        visited[nr][nc] = true;
+        cells[(r + nr) / 2][(c + nc) / 2].classList.remove("wall");
+        stack.push([nr, nc]);
+      }
+    }
+  }
+
+  cells[0][0].classList.remove("wall");
+  cells[rows - 1][cols - 1].classList.remove("wall");
+
+  setPlayer();
+}
+
+function setPlayer() {
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      cells[r][c].classList.remove("player", "start", "end");
+    }
+  }
+
+  playerPos = { r: 0, c: 0 };
+  cells[0][0].classList.add("start", "player");
+  cells[rows - 1][cols - 1].classList.add("end");
+  cells[0][0].classList.remove("wall");
+  cells[rows - 1][cols - 1].classList.remove("wall");
+}
+
+function resetMaze() {
+  createGrid();
+  setPlayer();
+}
+
+function checkSolvable() {
+  const queue = [[0, 0]];
+  const visited = Array.from({ length: rows }, () => Array(cols).fill(false));
+  visited[0][0] = true;
+
+  const directions = [
+    [0, 1], [1, 0], [0, -1], [-1, 0],
+  ];
+
+  while (queue.length > 0) {
+    const [r, c] = queue.shift();
+    if (r === rows - 1 && c === cols - 1) return true;
+
+    for (const [dr, dc] of directions) {
+      const nr = r + dr;
+      const nc = c + dc;
+      if (
+        nr >= 0 && nc >= 0 && nr < rows && nc < cols &&
+        !visited[nr][nc] &&
+        !cells[nr][nc].classList.contains("wall")
+      ) {
+        visited[nr][nc] = true;
+        queue.push([nr, nc]);
+      }
+    }
+  }
+
+  return false;
+}
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+function movePlayer(dr, dc) {
+  const newR = playerPos.r + dr;
+  const newC = playerPos.c + dc;
+
+  if (
+    newR >= 0 && newR < rows &&
+    newC >= 0 && newC < cols &&
+    !cells[newR][newC].classList.contains("wall")
+  ) {
+    cells[playerPos.r][playerPos.c].classList.remove("player");
+    playerPos = { r: newR, c: newC };
+    cells[newR][newC].classList.add("player");
+
+    moves++;
+    updateStats();
+
+    if (newR === rows - 1 && newC === cols - 1) {
+      winSound.play();
+      clearInterval(timerInterval);
+      setTimeout(() => alert(`🎉 You won in ${moves} moves and ${timer} seconds!`), 100);
+    }
+  }
+}
+
+document.addEventListener("keydown", (e) => {
+  const keys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "w", "a", "s", "d"];
+  if (keys.includes(e.key)) {
+    e.preventDefault();
+  }
+
+  switch (e.key) {
+    case "ArrowUp": case "w": movePlayer(-1, 0); break;
+    case "ArrowDown": case "s": movePlayer(1, 0); break;
+    case "ArrowLeft": case "a": movePlayer(0, -1); break;
+    case "ArrowRight": case "d": movePlayer(0, 1); break;
+  }
+});
+
+// Initial load
+generateMaze();

public/Day-81_MazeSolver/style.css

@@ -0,0 +1,48 @@
+body {
+  font-family: 'Segoe UI', sans-serif;
+  text-align: center;
+  background: #626060;
+}
+
+h1 {
+  margin: 20px 0 10px;
+}
+
+#status {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+#controls {
+  margin-bottom: 20px;
+}
+
+#grid {
+  display: grid;
+  justify-content: center;
+  gap: 1px;
+}
+
+.cell {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #ddd;
+  background: white;
+  transition: background 0.2s ease;
+}
+
+.wall {
+  background: rgb(75, 74, 74);
+}
+
+.start {
+  background: #4caf50;
+}
+
+.end {
+  background: #e91e63;
+}
+
+.player {
+  background: rgb(0, 8, 255);
+}

scripts/app.js

@@ -445,6 +445,15 @@ class WebDev100Days {
         technologies: ["HTML", "CSS", "JavaScript"],
         features: ["Responsive Design", "Smooth Animations", "Contact Form"]
       },
+      {
+        originalDay: 81,
+        name: "Maze Solver",
+        description: "Solve mazes interactively with difficulty levels.",
+        demoLink: "./public/Day-81_MazeSolver/index.html",
+        category: "games",
+        technologies: ["HTML", "CSS", "JavaScript"],
+        features: ["Interactive Gameplay", "Difficulty Levels", "Maze Generation", "Keyboard Controls"]
+       },
       {
         originalDay: 101,
         name: "Etch-a-Sketch",