document.title = '迷路';

var h = 19;
var w = 19;
var ary = [];

console.log(ary);

function isWall(i,j) {
  var isOut = i === 0 || i === h-1 || j === 0 || j === w-1;
  var isIn = i % 2 === 0 && j % 2 === 0;
  return isOut || isIn;
}

function setClear() {
 ary = Array.from(Array(h), () => new Array(w));
  for (let i = 0; i < h; i++) {
    for (let j = 0; j < w; j++) {
      if (isWall(i,j)){
        ary[i][j] = 1;
      } else {
        ary[i][j] = 0;
      }
    }
  }
  console.log(ary);
}

function rand(n) {
  return Math.floor(Math.random() * n);
}

function setMaze() {
  for (let y = 2; y < h-1; y += 2) {
    for (let x = 2; x < w-1; x += 2) {

      const direction = ["right", "down"];

      if (y == 2) {
        direction.push("up");
      }
 
      if (ary[y][x - 1] == 0) {
        direction.push("left");
      }
      switch (direction[rand(direction.length)]) {
        case "up":
          ary[y - 1][x] = 1;
          break;
        case "right":
          ary[y][x + 1] = 1;
          break;
        case "down":
          ary[y + 1][x] = 1;
          break;
        case "left":
          ary[y][x - 1] = 1;
          break;
      }
    }
  }

  ary[0][1] = 2;
  ary[h-1][w - 2] = 3;
  console.log(ary);
}



setClear();
setMaze();

var isPos = function(i,j){
  if(isWall(i,j)){return;}
  if(ary[i-1][j] === 2 || ary[i+1][j] === 2 || ary[i][j-1] === 2 || ary[i][j+1] === 2){
    return true;
  }
}
var walk = function(pos){
  if(!pos.hasClass('v0')){return;}
  var i = Number(pos.attr('i'));
  var j = Number(pos.attr('j'));
  if(isPos(i,j)){
    pos.removeClass('v0');
    pos.addClass('v2');
    ary[i][j] = 2;
  }
}

var setStage  =function(){

  var table = $('<div>',{id:'table'});
  $('#demo').empty();
  $('#demo').append(table);

  ary.forEach(function(rows,i){
    var row = $('<div>');
    row.addClass('flex')
    table.append(row);
    rows.forEach(function(v,j){
      var col = $('<div>');
      col.addClass('v'+v);
      col.attr({i:i,j:j});
      row.append(col);
      col.css({width:'calc(100vmin / '+w+')',height:'calc(100vmin / '+h+')'})
      col.on('mouseover', function(){var pos = $(this);walk(pos);});
      col.on('touchstart', function(){var pos = $(this);walk(pos);});
      col.on('click', function(){
        if($(this).hasClass('v3')){
          h=h+2;
          w=w+2;
          setClear();
          setMaze();
          setStage();
        }
      });
    });
  });
}
$(function(){
  setStage();
});

html,body{
  overflow:hidden;
}

#demo{
  background-color:#000000;
}
#table{
  width:100vmin;
  margin:0 auto;
}
#table div div{
}

.flex{
  display:flex;
}

.v0{
  background-color:#ffffff;
}
.v1{
  background-color:#000000;
}
.v2{
  background-color:#ff0000;
}
.v3{
  background-color:#0000ff;
}
.v3:hover{
  background-color:#00ff00;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-maze/