Mircromouse

Mr-Nobody003 · Jan 18, 2025 · 075ce6c · 075ce6c
commit 075ce6c
Show file tree

Hide file tree

Showing 3 changed files with 205 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Custom Micromouse Maze</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div>
+    <label>Rows: <input type="number" id="rows" value="10" min="5" max="50"></label>
+    <label>Columns: <input type="number" id="columns" value="10" min="5" max="50"></label>
+    <button id="generateEmptyMaze">Generate Empty Maze</button>
+    <label>Obstacle Density (%): <input type="number" id="density" value="20" min="0" max="100"></label>
+    <button id="generateRandomMaze" disabled>Generate Randomized Maze</button>
+  </div>
+  <div id="maze"></div>
+  <button id="simulate" disabled>Simulate Micromouse</button>
+  <button id="clearMaze" disabled>Clear Maze</button>
+  <button id="toggleObstacleMode" disabled>Toggle Custom Obstacle Mode</button>
+  <p>Instructions: Click on the grid to set Start, End, or Obstacles.</p>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,127 @@
+document.getElementById("generateEmptyMaze").addEventListener("click", generateEmptyMaze);
+document.getElementById("generateRandomMaze").addEventListener("click", generateRandomMaze);
+document.getElementById("simulate").addEventListener("click", simulateMicromouse);
+document.getElementById("clearMaze").addEventListener("click", clearMaze);
+document.getElementById("toggleObstacleMode").addEventListener("click", toggleObstacleMode);
+
+let maze = [];
+let start = null;
+let destination = null;
+let customObstacleMode = false;
+
+function generateEmptyMaze() {
+  const rows = parseInt(document.getElementById("rows").value);
+  const cols = parseInt(document.getElementById("columns").value);
+
+  maze = Array.from({ length: rows }, () => Array(cols).fill(0));
+  start = null;
+  destination = null;
+
+  renderMaze(rows, cols);
+  document.getElementById("generateRandomMaze").disabled = false;
+  document.getElementById("toggleObstacleMode").disabled = false;
+  document.getElementById("clearMaze").disabled = false;
+}
+
+function generateRandomMaze() {
+  const density = parseInt(document.getElementById("density").value);
+
+  for (let i = 0; i < maze.length; i++) {
+    for (let j = 0; j < maze[0].length; j++) {
+      maze[i][j] = Math.random() * 100 < density ? 1 : 0;
+    }
+  }
+
+  renderMaze(maze.length, maze[0].length);
+}
+
+function renderMaze(rows, cols) {
+  const mazeDiv = document.getElementById("maze");
+  mazeDiv.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+  mazeDiv.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+  mazeDiv.innerHTML = "";
+
+  for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < cols; j++) {
+      const cell = document.createElement("div");
+      cell.className = `cell ${maze[i][j] === 1 ? "obstacle" : "empty"}`;
+      cell.dataset.row = i;
+      cell.dataset.col = j;
+      cell.addEventListener("click", () => handleCellClick(i, j));
+      mazeDiv.appendChild(cell);
+    }
+  }
+}
+
+function handleCellClick(row, col) {
+  if (customObstacleMode) {
+    maze[row][col] = maze[row][col] === 1 ? 0 : 1;
+    renderMaze(maze.length, maze[0].length);
+  } else if (!start) {
+    start = [row, col];
+    document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add("start");
+  } else if (!destination) {
+    destination = [row, col];
+    document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add("destination");
+    document.getElementById("simulate").disabled = false;
+  }
+}
+
+function simulateMicromouse() {
+  if (!start || !destination) {
+    alert("Please set both start and destination points.");
+    return;
+  }
+
+  const directions = [
+    [0, -1], [0, 1], [-1, 0], [1, 0]
+  ];
+  const queue = [[...start, 0]];
+  const visited = Array.from({ length: maze.length }, () => Array(maze[0].length).fill(false));
+  const parents = Array.from({ length: maze.length }, () => Array(maze[0].length).fill(null));
+
+  visited[start[0]][start[1]] = true;
+
+  while (queue.length) {
+    const [x, y, dist] = queue.shift();
+
+    if (x === destination[0] && y === destination[1]) {
+      reconstructPath(parents, x, y);
+      return;
+    }
+
+    for (const [dx, dy] of directions) {
+      const nx = x + dx, ny = y + dy;
+
+      if (nx >= 0 && nx < maze.length && ny >= 0 && ny < maze[0].length &&
+          maze[nx][ny] === 0 && !visited[nx][ny]) {
+        visited[nx][ny] = true;
+        queue.push([nx, ny, dist + 1]);
+        parents[nx][ny] = [x, y];
+      }
+    }
+  }
+
+  alert("No path found.");
+}
+
+function reconstructPath(parents, x, y) {
+  while (parents[x][y]) {
+    const cell = document.querySelector(`[data-row="${x}"][data-col="${y}"]`);
+    cell.classList.add("path");
+    [x, y] = parents[x][y];
+  }
+}
+
+function clearMaze() {
+  maze = Array.from({ length: maze.length }, () => Array(maze[0].length).fill(0));
+  start = null;
+  destination = null;
+  renderMaze(maze.length, maze[0].length);
+  document.getElementById("simulate").disabled = true;
+}
+
+function toggleObstacleMode() {
+  customObstacleMode = !customObstacleMode;
+  alert(customObstacleMode ? "Custom Obstacle Mode Enabled." : "Custom Obstacle Mode Disabled.");
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,54 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 20px;
+  }
+
+  label {
+    margin: 0 10px;
+  }
+
+  #maze {
+    display: grid;
+    gap: 2px;
+    margin: 20px auto;
+    width: fit-content;
+  }
+
+  .cell {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #ccc;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .cell.empty {
+    background-color: #f9f9f9;
+  }
+
+  .cell.obstacle {
+    background-color: #555;
+  }
+
+  .cell.start {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .cell.destination {
+    background-color: #f44336;
+    color: white;
+  }
+
+  .cell.path {
+    background-color: #00bcd4;
+    color: black;
+  }
+
+  .cell:hover {
+    border: 1px solid #000;
+  }
+