javascripthtml5-canvas

I’m making a maze generator

So I’m making a maze generator, but the entrance locations don’t add up. Currently, the entrance markers aren’t on the room tiles, so I’m trying to fix that.

Here’s what I made:

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>

I’m expecting that the entrances (the green rectangles) are where the entrances to the rooms are. I couldn’t figure out how to format the code properly for Stack Overflow.`

Solution

  • I figured it out: I just had to change a few + to - and vice versa. Here’s my new js code:

    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')

    I spent a bit more time to add some features to my code, such as converting overlapping to junctions and actually making it look normal, but I encountered another issue: for some reason, the array that I added to track the position of the tiles is already full right after I define it. I only changed the drawRoom function:

    tiles = [];
console.log(tiles);
var sz = 1;
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;
  if (tiles.includes((x,y))) {
    console.log('overlap')
    rooms--;
  } else {
    context.fillRect(this.centerX-this.size/2,this.centerY-this.size/2, dimentions.width / 10, dimentions.height / 10)
    tiles.push((x,y));
  }
  console.log((tiles.includes([x,y])))
  context.fillStyle = 'white';

  if (this.entrance == 'N') {
    context.fillRect(this.centerX-this.size/(10/sz),this.centerY-this.size/2, this.size/(5/sz), this.size * 3 / 5)
  } else if (this.entrance == 'E') {
    context.fillRect(this.centerX-this.size/10,this.centerY-this.size/(10/sz), this.size *3 / 5, this.size/(5/sz))
  } else if (this.entrance == 'S') {
    context.fillRect(this.centerX-this.size/(10/sz),this.centerY-
                     this.size/10, this.size/(5/sz), this.size *3 / 5)
  } else if (this.entrance == 'W') {
    context.fillRect(this.centerX-this.size/2,this.centerY-
                     this.size/(10/sz), this.size * 3 / 5, this.size/(5/sz))
  }
  if (this.exit == 'N') {
    context.fillRect(this.centerX-this.size/(10/sz),this.centerY-this.size/2, this.size/(5/sz), this.size * 3 / 5)
  } else if (this.exit == 'E') {
    context.fillRect(this.centerX-this.size/10,this.centerY-this.size/(10/sz), this.size *3 / 5, this.size/(5/sz))
  } else if (this.exit == 'S') {
    context.fillRect(this.centerX-this.size/(10/sz),this.centerY-
                     this.size/10, this.size/(5/sz), this.size *3 / 5)
  } else if (this.exit == 'W') {
    context.fillRect(this.centerX-this.size/2,this.centerY-
                     this.size/(10/sz), this.size * 3 / 5, this.size/(5/sz))
  }
}