我正在制作迷宫生成器

Question

所以我正在制作一个迷宫生成器，但入口位置并没有加起来。 目前，入口标记不在房间瓷砖上，所以我正在尝试解决这个问题。

这是我做的：

const canvas = document.getElementById('Canvas');
var dimentions = {
  width: canvas.width,
  height: canvas.height
}
const context = canvas.getContext('2d');
var open = ['N',"E",'S','W'];
var rooms = 0;
class room {
  constructor(x, y, entrance) {
    this.x = x;
    this.y = y;
    this.entrance = entrance;
    this.exit = open[(Math.floor(Math.random() * open.length))]
    while (this.exit == this.entrance) {
      this.exit = open[(Math.floor(Math.random() * open.length))]
    }
    context.fillStyle = 'black';
    console.log(this.entrance,this.exit,this.x,this.y);
    drawRoom(this.x,this.y,this.entrance,this.exit)
    rooms+=1;
    if (rooms < 10) {
      newRoom(this.x,this.y,this.exit);
    }
  }
}
function drawRoom(x,y,entrance,exit) {
  this.x = x;
  this.y = y;
  this.centerX = (this.x*dimentions.width/10)+dimentions.width/2;
  this.centerY = (this.y*dimentions.height/10)+dimentions.height/2;
  this.size = dimentions.width/10;
  this.entrance = entrance;
  this.exit = exit;
  context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, dimentions.width / 10, dimentions.height / 10)
  context.fillStyle = 'green';
  context.fillRect(this.centerX,this.centerY,1,1)
  if (this.entrance == 'N') {
    context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, this.size, this.size / 10)
  } else if (this.entrance == 'E') {
    context.fillRect(this.centerX+this.size/2-this.size/10,this.centerY+this.size/2, this.size / 10, this.size)
  } else if (this.entrance == 'S') {
    context.fillRect(this.centerX-this.size/2,this.centerY+this.size/2-this.size/10, this.size, this.size / 10)
  } else if (this.entrance == 'W') {
    context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, this.size / 10, this.size)
  }
}
function newRoom(x, y, exit) {
  //console.log(x,y,exit)
  console.log(y)
  if (exit == 'N') {
    return new room(x, y+1, 'S');
  } else if (exit == 'E') {
    return new room(x+1, y, 'W');
  } else if (exit == 'S') {
    return new room(x, y-1, 'N');
  } else if (exit == 'W') {
    return new room(x-1, y, 'E');
  }
  //console.log(x,67,y,67,exit,67)
}
newRoom(0,0,'N')

<canvas id='Canvas' width='500' height='500'></canvas>

我预计入口（绿色矩形）就是房间的入口。 我不知道如何为 Stack Overflow 正确设置代码格式。`

Answer 1

我想通了： 我只需要将一些 + 更改为 - ，反之亦然。 这是我的新 js 代码：

const canvas = document.getElementById('Canvas');
var dimentions = {
  width: canvas.width,
  height: canvas.height
}
const context = canvas.getContext('2d');
var open = ['N',"E",'S','W'];
var rooms = 0;
class room {
  constructor(x, y, entrance) {
    this.x = x;
    this.y = y;
    this.entrance = entrance;
    this.exit = open[(Math.floor(Math.random() * open.length))]
    while (this.exit == this.entrance) {
      this.exit = open[(Math.floor(Math.random() * open.length))]
    }
    context.fillStyle = 'black';
    console.log(this.entrance,this.exit,this.x,this.y);
    drawRoom(this.x,this.y,this.entrance,this.exit)
    rooms+=1;
    if (rooms < 10) {
      newRoom(this.x,this.y,this.exit);
    }
  }
}
function drawRoom(x,y,entrance,exit) {
  this.x = x;
  this.y = y;
  this.centerX = (this.x*dimentions.width/10)+dimentions.width/2;
  this.centerY = (this.y*dimentions.height/10)+dimentions.height/2;
  this.size = dimentions.width/10;
  this.entrance = entrance;
  this.exit = exit;
  context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, dimentions.width / 10, dimentions.height / 10)
  context.fillStyle = 'green';
  context.fillRect(this.centerX,this.centerY,1,1)
  if (this.entrance == 'N') {
    context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, this.size, this.size / 10)
  } else if (this.entrance == 'E') {
    context.fillRect(this.centerX+this.size/2-this.size/10,this.centerY-this.size/2, this.size / 10, this.size)
  } else if (this.entrance == 'S') {
    context.fillRect(this.centerX-this.size/2,this.centerY+this.size/2-
                     this.size/10, this.size, this.size / 10)
  } else if (this.entrance == 'W') {
    context.fillRect(this.centerX-this.size/2,this.centerY-
                     this.size/2, this.size / 10, this.size)
  }
  context.fillStyle = 'red';
  context.fillRect(this.centerX,this.centerY,1,1)
  if (this.exit == 'N') {
    context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, this.size, this.size / 10)
  } else if (this.exit == 'E') {
    context.fillRect(this.centerX+this.size/2-this.size/10,this.centerY-this.size/2, this.size / 10, this.size)
  } else if (this.exit == 'S') {
    context.fillRect(this.centerX-this.size/2,this.centerY+this.size/2-
                     this.size/10, this.size, this.size / 10)
  } else if (this.exit == 'W') {
    context.fillRect(this.centerX-this.size/2,this.centerY-
                     this.size/2, this.size / 10, this.size)
  }
}
function newRoom(x, y, exit) {
  console.log(y)
  if (exit == 'N') {
    return new room(x, y-1, 'S');
  } else if (exit == 'E') {
    return new room(x+1, y, 'W');
  } else if (exit == 'S') {
    return new room(x, y+1, 'N');
  } else if (exit == 'W') {
    return new room(x-1, y, 'E');
  }
}
newRoom(0,0,'N')