js随机绘制迷宫及离开迷宫路线最优解代码-html代码-BFW代码库

js随机绘制迷宫及离开迷宫路线最优解代码

代码语言：html

所属分类：其他

代码描述：js随机绘制迷宫及离开迷宫路线最优解代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
html {
  background-color: #eee;
  font-family: sans-serif;
}
h1 {
  text-align: center;
}
canvas {
  border: 1px solid #000;
  display: block;
  margin: 0 auto;
  background: #f0f0f0;
}
#controls {
  text-align: center;
  margin-top: 20px;
}
</style>

  
</head>

<body translate="no">
  <h1>Random Maze</h1>
<canvas id="mazeCanvas" width="600" height="600"></canvas>
<div id="controls">
  <input type="checkbox" id="showSolution" />
  <label for="showSolution">Show Solution</label>
</div>
  
      <script  >
const canvas = document.getElementById("mazeCanvas");
const ctx = canvas.getContext("2d");

const cols = 25;
const rows = 25;
const cellSize = canvas.width / cols;

let grid = [];
let stack = [];
let solutionPath = [];

class Cell {
  constructor(i, j) {
    this.i = i;
    this.j = j;
    this.walls = [true, true, true, true]; // top, right, bottom, left
    this.visited = false;
  }

  draw() {
    const x = this.i * cellSize;
    const y = this.j * cellSize;

    ctx.strokeStyle = "#000";
    ctx.lineWidth = 2;

    if (this.walls[0]) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + cellSize, y);
      ctx.stroke();
    }
    if (this.walls[1]) {
      ctx.beginPath();
      ctx.moveTo(x + cellSize, y);
      ctx.lineTo(x + cellSize, y + cellSize);
      ctx.stroke();
    }
    if (this.walls[2]) {
      ctx.beginPath();
      ctx.moveTo(x + cellSize, y + cellSize);
      ctx.lineTo(x, y + cellSize);
      ctx.stroke();
    }
    if (this.walls[3]) {
      ctx.beginPath();
      ctx.moveTo(x, y + cellSize);
      ctx.lineTo(x, y);
      ctx.stroke();
    }

    if (this.visited) {
      ctx.fillStyle = "#fff";
      ctx.fillRect(x, y, cellSize, cellSize);
    }
  }

  highlight(color) {
    const x = this.i * cellSize;
    const y = this.j * cellSize;
    ctx.fillStyle = color;
    ctx.fillRect(x, y, cellSize, cellSize);
  }

  checkNeighbors() {
    let neighbors = [];

    const top = grid[index(this.i, this.j - 1)];
    const right = grid[index(this.i + 1, this.j)];
    const bottom = grid[index(this.i, this.j + 1)];
    const left = grid[index(this.i - 1, this.j)];

    if (top && !top.visited) {
      neighbors.push(top);
    }
    if (right && !right.visited) {
      neighbors.push(right);
    }
    if (bottom && !bottom.visited) {
      neighbors.push(bottom);
    }
    if (left && !left.visited) {
      neighbors.push(left);
    }

    if (neighbors.length > 0) {
      const r = Math.floor(Math.random() * neighbors.length);
      return neighbors[r];
    } else {
      return undefined;
    }
  }}


function index(i, j) {
  if (i < 0 || j < 0 || i >= cols || j >= rows) {
    return -1;
  }
  return i + j * cols;
}

function setup() {
  for (let j = .........完整代码请登录后点击上方下载按钮下载查看