Add files via upload

ManoharGajangi-1037 · Jun 20, 2023 · b1ddd92 · b1ddd92
commit b1ddd92
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 0 deletions.
diff --git a/green.png b/green.png
diff --git a/home.jpeg b/home.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="main">
+
+   <div class="heading"><h1>Lets Have Fun With Mario</h1></div>
+  <div class="maze-container"></div>
+  <div class="buttons">
+    <button class="start-btn"  onclick="handleStartClick()">Start</button>
+    <button class="clear-btn"  onclick="ClearAll()">Clear</button>
+
+  </div>
+</div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/mario.jpeg b/mario.jpeg
diff --git a/obstacle.png b/obstacle.png
diff --git a/script.js b/script.js
@@ -0,0 +1,243 @@
+const numRows = 10;
+const numCols = 10;
+let maze = [];
+let startRow = null;
+let startCol = null;
+let endRow = null;
+let endCol = null;
+let path = [];
+const startbutton=document.getElementsByClassName("start-btn");
+// Initialize the maze
+   function initializeMaze() {
+  maze = Array.from({ length: numRows }, () => Array(numCols).fill('cell'));
+}
+
+
+function ClearAll(){
+    initializeMaze();
+    const mazeContainer = document.querySelector('.maze-container');
+  mazeContainer.innerHTML = '';
+  document.body.style.backgroundColor="red";
+  maze.forEach((row, rowIndex) => {
+    row.forEach((cell, colIndex) => {
+      const cellElement = document.createElement('div');
+      cellElement.classList.add('cell');
+
+      if (cell === 'obstacle') {
+        cellElement.classList.add('cell');
+      } else if (rowIndex === startRow && colIndex === startCol) {
+            startRow = null;
+            startCol = null;
+            endRow = null;
+            endCol = null;
+        cellElement.classList.add('cell');
+      } else if (rowIndex === endRow && colIndex === endCol) {
+        cellElement.classList.add('cell');
+      } else if (cell === 'path') {
+        cellElement.classList.add('cell');
+      }
+
+      cellElement.addEventListener('click', function() {
+        handleCellClick(rowIndex, colIndex);
+      });
+
+      mazeContainer.appendChild(cellElement);
+    });
+  });
+
+}
+// Render the maze
+function renderMaze() {
+  const mazeContainer = document.querySelector('.maze-container');
+  mazeContainer.innerHTML = '';
+
+  maze.forEach((row, rowIndex) => {
+    row.forEach((cell, colIndex) => {
+      const cellElement = document.createElement('div');
+      cellElement.classList.add('cell');
+
+      if (cell === 'obstacle') {
+        cellElement.classList.add('obstacle');
+      } else if (rowIndex === startRow && colIndex === startCol) {
+        cellElement.classList.add('start');
+      } else if (rowIndex === endRow && colIndex === endCol) {
+        cellElement.classList.add('end');
+      } else if (cell === 'path') {
+        cellElement.classList.add('path');
+      }
+
+      cellElement.addEventListener('click', function() {
+        handleCellClick(rowIndex, colIndex);
+      });
+
+      mazeContainer.appendChild(cellElement);
+    });
+  });
+}
+
+// Function to handle cell click events
+function handleCellClick(row, col) {
+  if (maze[row][col] === 'obstacle') {
+    maze[row][col] = 'cell';
+  } else if (maze[row][col] === 'cell') {
+    if (startRow === null && startCol === null) {
+      maze[row][col] = 'start';
+      startRow = row;
+      startCol = col;
+    } else if (endRow === null && endCol === null) {
+      maze[row][col] = 'end';
+      endRow = row;
+      endCol = col;
+    } else {
+      maze[row][col] = 'obstacle';
+    }
+  } else if (maze[row][col] === 'start') {
+    maze[row][col] = 'cell';
+    startRow = null;
+    startCol = null;
+  } else if (maze[row][col] === 'end') {
+    maze[row][col] = 'cell';
+    endRow = null;
+    endCol = null;
+  }
+  renderMaze();
+}
+
+
+// Function to find the shortest path using breadth-first search (BFS)
+function findShortestPath(row, col) {
+    const queue = [[row, col]];
+    const visited = Array.from({ length: numRows }, () => Array(numCols).fill(false));
+    const parent = {};
+
+    visited[row][col] = true;
+
+    while (queue.length > 0) {
+      const [currentRow, currentCol] = queue.shift();
+
+      if (currentRow === endRow && currentCol === endCol) {
+        document.body.style.backgroundColor = 'green';
+        break; // Exit the loop if the end cell is reached
+      }
+
+      const neighbors = [
+        [currentRow - 1, currentCol], // Up
+        [currentRow + 1, currentCol], // Down
+        [currentRow, currentCol - 1], // Left
+        [currentRow, currentCol + 1] // Right
+      ];
+
+      for (const [neighborRow, neighborCol] of neighbors) {
+        if (
+          neighborRow >= 0 &&
+          neighborRow < numRows &&
+          neighborCol >= 0 &&
+          neighborCol < numCols &&
+          !visited[neighborRow][neighborCol] &&
+          maze[neighborRow][neighborCol] !== 'obstacle'
+        ) {
+          queue.push([neighborRow, neighborCol]);
+          visited[neighborRow][neighborCol] = true;
+          parent[`${neighborRow},${neighborCol}`] = [currentRow, currentCol];
+        }
+      }
+    }
+
+    // Reconstruct the shortest path
+    let currentCell = [endRow, endCol];
+    const shortestPath = [];
+
+    while (currentCell) {
+      shortestPath.unshift(currentCell);
+      currentCell = parent[`${currentCell[0]},${currentCell[1]}`];
+    }
+
+    return shortestPath;
+  }
+
+  // Function to handle the start button click event
+
+  function handleStartClick() {
+    if (startRow === null || startCol === null || endRow === null || endCol === null) {
+      alert('Please set the start and end points.');
+      return;
+    }
+
+    const shortestPath = findShortestPath(startRow, startCol);
+
+    if (shortestPath.length > 0) {
+
+      for (const [row, col] of shortestPath) {
+        maze[row][col] = 'path';
+      }
+
+      renderMaze();
+    } else {
+      document.body.style.backgroundColor = 'red';
+      alert('No valid path found.');
+    }
+  }
+
+
+// Function to find the path using backtracking
+// // Function to find the path using backtracking
+// let shortestPath = null; // Variable to store the shortest path
+
+// // Function to find the shortest path using depth-first search (DFS) with backtracking
+// function findShortestPath(row, col, visited, currentPath) {
+//   if (row < 0 || row >= numRows || col < 0 || col >= numCols || visited[row][col] || maze[row][col] === 'obstacle') {
+//     return;
+//   }
+
+//   visited[row][col] = true;
+
+//   if (row === endRow && col === endCol) {
+//     if (shortestPath === null || currentPath.length < shortestPath.length) {
+//       shortestPath = currentPath.slice(); // Store the current path as the new shortest path
+//     }
+//     visited[row][col] = false; // Reset visited flag for backtracking
+//     return;
+//   }
+
+//   currentPath.push({ row, col });
+
+//   // Explore the neighboring cells (up, down, left, right)
+//   findShortestPath(row - 1, col, visited, currentPath); // Up
+//   findShortestPath(row + 1, col, visited, currentPath); // Down
+//   findShortestPath(row, col - 1, visited, currentPath); // Left
+//   findShortestPath(row, col + 1, visited, currentPath); // Right
+
+//   currentPath.pop(); // Remove the current cell from the current path
+//   visited[row][col] = false; // Reset visited flag for backtracking
+// }
+
+// // Function to handle the start button click event
+// function handleStartClick() {
+//   if (startRow === null || startCol === null || endRow === null || endCol === null) {
+//     alert('Please set the start and end points.');
+//     return;
+//   }
+
+//   const visited = Array.from({ length: numRows }, () => Array(numCols).fill(false));
+//   shortestPath = null;
+
+//   findShortestPath(startRow, startCol, visited, []);
+
+//   if (shortestPath !== null) {
+//     maze[startRow][startCol] = 'start';
+//     maze[endRow][endCol] = 'end';
+//     document.body.style.backgroundColor = 'green';
+
+//     for (const { row, col } of shortestPath) {
+//       maze[row][col] = 'path';
+//     }
+
+//     renderMaze();
+//   } else {
+//     document.body.style.backgroundColor = 'red';
+//     alert('No valid path found.');
+//   }
+// }
+
+initializeMaze();
+renderMaze();
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+.main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.heading{
+  background-color: black;
+  color:white;
+  width: 500px;
+  text-align: center;
+  border-radius: 5px;
+}
+.maze-container {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(10, 1fr);
+    gap: 0.5px;
+    width: 500px;
+    height: 500px;
+    justify-content: center;
+    margin: auto;
+    background-color: rgb(226, 187, 31);
+  }
+
+  .cell {
+    background-color: white;
+    border: 1px solid black;
+  }
+
+  .obstacle {
+    background-image: url("obstacle.png");
+  background-size: cover;
+  background-position: center;
+  }
+  .start{
+  background-image: url("mario.jpeg");
+  background-size: cover;
+  background-position: center;
+}
+
+
+  .end {
+    background-image: url("home.jpeg");
+  background-size: cover;
+  background-position: center;
+
+  }
+
+  .path {
+    background-image: url("green.png");
+    background-size: cover;
+    background-position: center;
+  }
+  .start-btn{
+    border-radius: 5px;
+    width:100px;
+    height:30px;
+  }
+  .clear-btn{
+    border-radius: 5px;
+    width:100px;
+    height:30px;
+  }
+  .start-btn:hover{
+    background-color:black;
+    color:whitesmoke;
+    font-size: medium;
+    font-weight: 200;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  }
+  .clear-btn:hover{
+    background-color:black;
+    color:whitesmoke;
+    font-size: medium;
+    font-weight: 200;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  }