diff --git a/index.js b/index.js index 7b037036..9b28980f 100644 --- a/index.js +++ b/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 = ''; diff --git a/public/Day-81_MazeSolver/index.html b/public/Day-81_MazeSolver/index.html new file mode 100644 index 00000000..27754045 --- /dev/null +++ b/public/Day-81_MazeSolver/index.html @@ -0,0 +1,35 @@ + + + + + + Maze Game + + + +

🧩 Maze Game

+ +
+ ⏱️ Time: 0s | + 🎮 Moves: 0 +
+ +
+ + + + + +
+ +
+ + + + + + diff --git a/public/Day-81_MazeSolver/script.js b/public/Day-81_MazeSolver/script.js new file mode 100644 index 00000000..f884b721 --- /dev/null +++ b/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(); diff --git a/public/Day-81_MazeSolver/style.css b/public/Day-81_MazeSolver/style.css new file mode 100644 index 00000000..88becc6c --- /dev/null +++ b/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); +} 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",