HTML5 经典迷宫图

Just another maze

maze

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3700
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var html = $('#maze')

var maze = {
  height: 35,
  width: 35,
  visited_cells: []
}

maze.init = function() {
  maze.cells = [[]];
  
  for(i = 0; i < this.width; i++) {
    maze.cells[i] = [];
    for(j = 0; j < this.height; j++) {
      maze.cells[i][j] = new Cell(i, j);
    }
  }
  
  maze.cells[0][0].start = true;
  maze.cells[this.width - 1][this.height - 1].end = true;
  maze.cells[this.width - 1][this.height - 1].walls.e = false;
  maze.cells[0][0].walls.w = false
}

maze.print = function() {
  var new_html = ''
  
  for(i = 0; i < this.width; i++) {
    for(j = 0; j < this.height; j++) {
      new_html += this.cells[i][j].print()
    }
    new_html += '<br style="clear: both"/>'
  }
  
  html.html(new_html)
}

maze.print_solution = function() {
  setTimeout(function(){
      var cell = maze.solution_copy.pop()
      document.getElementById('cell_' + cell.i + '_' + cell.j).setAttribute('data-solution', "true");
     
      if(maze.solution_copy.length != 0) maze.print_solution();
      else {
        $('#solve').text("solved").addClass('disabled')
        $('#regen').removeClass('disabled')
      }
  }, 50)
}

function RandomUniqueNumber(len){
  this.numbers = [];
  
  for(x = 0; x < len; x++) this.numbers[x] = x;
  
  this.get = function() {
    var i = Math.ceil(Math.random()*(this.numbers.length)) - 1;
    return this.numbers.splice(i, 1)[0]
  }
}

maze.mazifiy = function(i, j) {
  maze.visited_cells.push(maze.cells[i][j]);

maze.cells[i][j].visited = true;
  var invalid = true
  var randomGen = new RandomUniqueNumber(4);
  var counter = 0

while(invalid && counter < 4){
    invalid = false
    counter ++
    var randomSide = randomGen.get();

if(randomSide == 0 && i > 0 && !maze.cells[i - 1][j].visited) {
      maze.cells[i][j].walls.n = false;
      maze.cells[i - 1][j].walls.s = false
      maze.mazifiy(i - 1, j)
    }
    else if(randomSide == 1 && i < maze.height - 1 && !maze.cells[i + 1][j].visited) {
      maze.cells[i][j].walls.s = false;
      maze.cells[i + 1][j].walls.n = false
      maze.mazifiy(i + 1, j)
    }
    else if(randomSide == 2 && j < maze.width - 1 && ! maze.cells[i][j + 1].visited) {
      maze.cells[i][j].walls.e = false;
      maze.cells[i][j + 1].walls.w = false
      maze.mazifiy(i, j + 1)
    }
    else if(randomSide == 3 && j > 0 && !maze.cells[i][j - 1].visited) {
      maze.cells[i][j].walls.w = false;
      maze.cells[i][j - 1].walls.e = false
      maze.mazifiy(i, j - 1)
    } else {
      invalid = true
    }
  }

// Dead end
  maze.visited_cells.pop()
  var last = maze.visited_cells.pop()
  if(last != undefined) maze.mazifiy(last.i, last.j)
}

maze.solve = function(i, j) {  
  var cell = maze.cells[i][j];
  
  if(cell.end) return true
  if(cell.path) return false
  
  cell.path = true
  
  if(i > 0 && !cell.walls.n) {
    if(maze.solve(i - 1, j)) {
      maze.solution.push(cell);
      return true;
    }
  }
  
  if(i < maze.height - 1 && !cell.walls.s) {
    if(maze.solve(i + 1, j)) {
      maze.solution.push(cell);
      return true;
    }
  }
  
  if(j > 0 && !cell.walls.w) {
    if(maze.solve(i, j - 1)) {
      maze.solution.push(cell);
      return true;
    }
  }
  
  if(j < maze.width - 1 && !cell.walls.e) {
    if(maze.solve(i, j + 1)) {
      maze.solution.push(cell);
      return true;
    }
  }
  
  return false;
}

maze.visited_cells = [];
maze.solution = [];
maze.init()
maze.mazifiy(0, 0);
maze.print()

$('#regen').click(function(){
  $('#solve').text("solve").removeClass('disabled')
  $(this).addClass('disabled')
  maze.visited_cells = [];
  maze.solution = [];
  maze.init()
  maze.mazifiy(0, 0);
  maze.print()
  $(this).removeClass('disabled')
})

$('#solve').click(function(){
  $(this).text("solving...").addClass('disabled')
  $('#regen').addClass('disabled')
  maze.solution = [];
  maze.solve(0,0);
  maze.solution_copy = maze.solution.concat([])
  maze.print_solution()
})

编译

CSS

html, body {
  background: white;
  width: 100%;
  height: 100%;
  font-family: monospace; }

h1 {
  font-size: 50px;
  font-family: Lobster;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
  font-weight: 400;
  text-align: center;
  color: #333;
  text-shadow: 1px 1px 3px #777; }

#btns {
  text-align: center;
  margin-bottom: 40px; }

.btn {
  border: 7px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  color: #fff;
  position: relative;
  transition: all 0.2s ease; }

.btn.disabled {
  opacity: 0.5;
  pointer-events: none; }

.btn:active {
  top: 1px; }

#solve {
  background: #56bb56; }

#solve:hover {
  background: #429142; }

#solve:active {
  background: #7adc7a; }

#regen {
  background: #b52424; }

#regen:hover {
  background: #8e1717; }

#regen:active {
  background: #e63c3c; }

#maze-holder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 565px;
  display: table; }

#maze {
  font-size: 0;
  width: 565px;
  height: 565px;
  border: 15px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 0 0 1000000px #f0f0f0;
  z-index: -1; }

.cell {
  color: #333;
  height: 23px;
  width: 23px;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 -7px -7px 0;
  position: relative; }

.cell[data-north=true] {
  border-top: 7px solid; }

.cell[data-south=true] {
  border-bottom: 7px solid; }

.cell[data-east=true] {
  border-right: 7px solid; }

.cell[data-west=true] {
  border-left: 7px solid; }

.cell[data-solution=true]:not([data-start=true]):not([data-end=true]):before {
  background: #e2e215;
  content: "a";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1; }

.cell[data-start=true] {
  background: #56bb56;
  z-index: 1; }

.cell[data-end=true] {
  background: #b52424;
  z-index: 1; }

HTML

Just another maze

maze

编辑器支持Emmet

快捷键

Just another maze

maze

HTML5 Canvas 3D六边形迷宫图

HTML5 在线迷宫生成器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：