From 00fa843df6e2f6aed80802133e0e2339affa72b0 Mon Sep 17 00:00:00 2001 From: pragya-4 Date: Sun, 10 Aug 2025 22:33:32 +0530 Subject: [PATCH 1/5] Added Maze Solver --- index.js | 1 + public/Day-67_MazeSolver/index.html | 35 +++++ public/Day-67_MazeSolver/script.js | 225 ++++++++++++++++++++++++++++ public/Day-67_MazeSolver/style.css | 48 ++++++ 4 files changed, 309 insertions(+) create mode 100644 public/Day-67_MazeSolver/index.html create mode 100644 public/Day-67_MazeSolver/script.js create mode 100644 public/Day-67_MazeSolver/style.css diff --git a/index.js b/index.js index f034bb42..d215cbef 100644 --- a/index.js +++ b/index.js @@ -151,6 +151,7 @@ function fillTable() { ["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 67", "Maze Solver", "public/Day-67_MazeSolver/index.html"], ]; const tbody = document.getElementById('tableBody'); diff --git a/public/Day-67_MazeSolver/index.html b/public/Day-67_MazeSolver/index.html new file mode 100644 index 00000000..27754045 --- /dev/null +++ b/public/Day-67_MazeSolver/index.html @@ -0,0 +1,35 @@ + + + + + + Maze Game + + + +

🧩 Maze Game

+ +
+ ⏱️ Time: 0s | + 🎮 Moves: 0 +
+ +
+ + + + + +
+ +
+ + + + + + diff --git a/public/Day-67_MazeSolver/script.js b/public/Day-67_MazeSolver/script.js new file mode 100644 index 00000000..f884b721 --- /dev/null +++ b/public/Day-67_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(); diff --git a/public/Day-67_MazeSolver/style.css b/public/Day-67_MazeSolver/style.css new file mode 100644 index 00000000..88becc6c --- /dev/null +++ b/public/Day-67_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); +} From 027f19542f42d34cb4bde838da10005daf763acf Mon Sep 17 00:00:00 2001 From: pragya-4 Date: Sun, 10 Aug 2025 22:42:08 +0530 Subject: [PATCH 2/5] Changed Day 67 to Day 81 --- index.js | 2 +- public/{Day-67_MazeSolver => Day-81_MazeSolver}/index.html | 0 public/{Day-67_MazeSolver => Day-81_MazeSolver}/script.js | 0 public/{Day-67_MazeSolver => Day-81_MazeSolver}/style.css | 0 4 files changed, 1 insertion(+), 1 deletion(-) rename public/{Day-67_MazeSolver => Day-81_MazeSolver}/index.html (100%) rename public/{Day-67_MazeSolver => Day-81_MazeSolver}/script.js (100%) rename public/{Day-67_MazeSolver => Day-81_MazeSolver}/style.css (100%) diff --git a/index.js b/index.js index d215cbef..8c4621ee 100644 --- a/index.js +++ b/index.js @@ -151,7 +151,7 @@ function fillTable() { ["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 67", "Maze Solver", "public/Day-67_MazeSolver/index.html"], + ["Day 81", "Maze Solver", "public/Day-67_MazeSolver/index.html"], ]; const tbody = document.getElementById('tableBody'); diff --git a/public/Day-67_MazeSolver/index.html b/public/Day-81_MazeSolver/index.html similarity index 100% rename from public/Day-67_MazeSolver/index.html rename to public/Day-81_MazeSolver/index.html diff --git a/public/Day-67_MazeSolver/script.js b/public/Day-81_MazeSolver/script.js similarity index 100% rename from public/Day-67_MazeSolver/script.js rename to public/Day-81_MazeSolver/script.js diff --git a/public/Day-67_MazeSolver/style.css b/public/Day-81_MazeSolver/style.css similarity index 100% rename from public/Day-67_MazeSolver/style.css rename to public/Day-81_MazeSolver/style.css From f6907968b4cf18094624e241dd8febe8dd366144 Mon Sep 17 00:00:00 2001 From: pragya-4 Date: Sun, 10 Aug 2025 23:07:29 +0530 Subject: [PATCH 3/5] Changed Day81 --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 85028e75..fd881613 100644 --- a/index.js +++ b/index.js @@ -152,9 +152,9 @@ function fillTable() { ["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-67_MazeSolver/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"], From 3ab0cd3d02945652b2587639991e39543e8a707b Mon Sep 17 00:00:00 2001 From: pragya-4 Date: Sun, 10 Aug 2025 23:25:09 +0530 Subject: [PATCH 4/5] Checking --- index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/index.js b/index.js index fd881613..9b28980f 100644 --- a/index.js +++ b/index.js @@ -98,7 +98,6 @@ function updateNavbar() { } // Populate the table with project data - main function fillTable() { const data = [ ["Day 1", "To-Do List", "/public/Day-1_TodoList/index.html"], @@ -130,7 +129,6 @@ function fillTable() { ["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"], @@ -152,7 +150,7 @@ function fillTable() { ["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"], + ["Day 81", "Maze Solver", "./public/Day-81_MazeSolver/index.html"], ]; } //function fillTable() { @@ -220,10 +218,6 @@ function fillTable() { // See in Script Folder in app.js (where you can add your poject)]; - - - main - const tbody = document.getElementById('tableBody'); tbody.innerHTML = ''; From 2c0ca530219b317e209a332d75af7314f39af60f Mon Sep 17 00:00:00 2001 From: pragya-4 Date: Mon, 11 Aug 2025 17:23:06 +0530 Subject: [PATCH 5/5] Added project to main page --- scripts/app.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/scripts/app.js b/scripts/app.js index eb9dbf61..f4f725c1 100644 --- a/scripts/app.js +++ b/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",