Maze rendering with Two.js

maze.js

const ACTORS = {
  N: 1,
  S: 2,
  E: 4,
  W: 8,
  SP: 16,
  EP: 32,
}

class Game {
  constructor(maze, size) {
    this.size = size;
    this.maze = maze;
  }
  
  createWalls(fields, width, height) {
    const wallsLen = Math.floor(Math.random() * (width * height));
    
    for (let x = 0; x < wallsLen; x++) {
      fields[Math.floor(x / width)][x % height] = 1;
    }
    return fields;
  }
  
  renderField({ two }) {
    const rectSize = 30;
    const lineWidth = 5;
    const rectSizeH2 = rectSize / 2;
    const [xOffset, yOffset] = [0,0];
    const fields = [];
    const maze = this.maze;
    const size = this.size;
    
    const makeLine = (x1, y1, x2, y2) => {
      let line = two.makeLine(x1, y1, x2, y2);
      line.stroke = "#FFF";
      line.cap = "butt";
      line.join = "butt";
      line.linewidth = 4;
      return line;
    };

    for (let i = 0; i < size * size; i++) {
      let x = i % size;
      let y = Math.floor(i / size);
      let block = [];
      
      let rect = two.makeRectangle(x * rectSize, y * rectSize, rectSize, rectSize);
      rect.linewidth = 4;

      block.push(rect);      
      
      if (maze[i] & ACTORS.N) {
        console.log("N");
        const x1 = x * rectSize - rectSizeH2 + 2;
        const y1 = y * rectSize - rectSizeH2;
        const x2 = x1 + rectSize - 4;
        const y2 = y1;
        
        let line = makeLine(x1, y1, x2, y2);
        block.push(line);
      }
      
      if (maze[i] & ACTORS.E) {
        console.log("E");
        const x1 = x * rectSize + rectSizeH2;
        const y1 = y * rectSize - rectSizeH2 + 2;
        const x2 = x1;
        const y2 = y1 + rectSize - 4;
        
        let line = makeLine(x1, y1, x2, y2);
        block.push(line);
      }
      
      if (maze[i] & ACTORS.S) {
        console.log("S");
        const x1 = x * rectSize - rectSizeH2 + 2;
        const y1 = y * rectSize + rectSizeH2;
        const x2 = x1 + rectSize - 4;
        const y2 = y1;
        
        let line = makeLine(x1, y1, x2, y2);
        block.push(line);
      }
      
      if (maze[i] & ACTORS.W) {
        console.log("W");
        const x1 = x * rectSize - rectSizeH2;
        const y1 = y * rectSize - rectSizeH2 + 2;
        const x2 = x1;
        const y2 = y1 + rectSize - 4;
        
        let line = makeLine(x1, y1, x2, y2);
        block.push(line);
      }
      
      if (maze[i] & ACTORS.SP) {
        let circle = two.makeCircle(x * rectSize, y * rectSize, 10);
        circle.fill = "#F44";
        circle.linewidth = 3;
        block.push(circle);
      }
      
      if (maze[i] & ACTORS.EP) {
        let rect = two.makeRectangle(x * rectSize, y * rectSize, 10, 10);
        rect.fill = "#4F4";
        rect.linewidth = 3;
        block.push(rect);        
      }
   
      console.log(x, y);
      fields.push(two.makeGroup(block));
    }
    return two.makeGroup(fields);
  }
  
  moveActor(x, y) {
    
  }
  
  render({ two }) {
    const field = this.renderField({ two });
    
    // field.linewidth = 0.3;
    // field.stroke = "#000";
    field.translation.set(50, 50);
  }
  
  update() {
    // this.snake.update();
  }
  
  setSnakeDirection(x1, y) {
    // this.snake.direction = [x, y];
  }
}

var two = new Two({
  fullscreen: true,
  autostart: true,
  type: Two.Types.SVG,
})
.appendTo(document.body);

var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);

// const field = [6, 12, 10, 3, 2, 3, 1, 5, 9];
// const field = [4, 12, 12, 12, 10, 6, 10, 6, 10, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 5, 9, 5, 9];
// const field = [4 ,12 ,12 ,12 ,12 ,12 ,12 ,12 ,12 ,10 ,2 ,6 ,10 ,6 ,10 ,6 ,10 ,6 ,10 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,5 ,9 ,5 ,9 ,5 ,9 ,5 ,9 ,5 ,9]
// const field = [2 ,6 ,12 ,14 ,12 ,10 ,6 ,12 ,12 ,10 ,3 ,3 ,6 ,9 ,6 ,9 ,5 ,10 ,2 ,3 ,3 ,1 ,7 ,10 ,5 ,12 ,10 ,3 ,3 ,3 ,5 ,10 ,3 ,3 ,6 ,10 ,3 ,3 ,5 ,9 ,6 ,9 ,1 ,3 ,3 ,5 ,9 ,7 ,12 ,10 ,5 ,12 ,10 ,3 ,5 ,12 ,10 ,5 ,8 ,3 ,6 ,8 ,5 ,9 ,4 ,10 ,5 ,12 ,10 ,3 ,7 ,14 ,12 ,14 ,12 ,13 ,12 ,8 ,3 ,3 ,3 ,5 ,10 ,1 ,6 ,12 ,10 ,6 ,9 ,3 ,5 ,8 ,5 ,12 ,13 ,8 ,5 ,13 ,12 ,9];
// const field = [2 ,6 ,12 ,12 ,10 ,6 ,12 ,10 ,6 ,10 ,5 ,9 ,4 ,10 ,5 ,9 ,6 ,9 ,1 ,3 ,6 ,12 ,12 ,11 ,6 ,10 ,3 ,6 ,14 ,11 ,7 ,10 ,2 ,5 ,9 ,3 ,3 ,3 ,3 ,3 ,1 ,3 ,7 ,12 ,12 ,9 ,3 ,3 ,3 ,1 ,6 ,9 ,5 ,10 ,2 ,6 ,9 ,1 ,5 ,10 ,7 ,10 ,6 ,13 ,9 ,5 ,12 ,12 ,10 ,3 ,3 ,3 ,5 ,10 ,6 ,10 ,6 ,12 ,9 ,3 ,3 ,3 ,4 ,9 ,3 ,5 ,9 ,6 ,10 ,3 ,1 ,5 ,12 ,12 ,13 ,12 ,12 ,9 ,5 ,9];
const field = [20 ,10 ,6 ,14 ,12 ,10 ,4 ,12 ,12 ,10 ,6 ,9 ,3 ,5 ,10 ,5 ,10 ,6 ,12 ,9 ,5 ,10 ,1 ,6 ,9 ,2 ,3 ,5 ,12 ,10 ,2 ,5 ,10 ,3 ,6 ,11 ,3 ,6 ,12 ,11 ,7 ,10 ,5 ,9 ,1 ,3 ,3 ,5 ,10 ,3 ,3 ,7 ,12 ,12 ,12 ,9 ,5 ,10 ,3 ,3 ,3 ,3 ,6 ,12 ,12 ,12 ,10 ,3 ,3 ,3 ,3 ,3 ,3 ,4 ,14 ,8 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,6 ,11 ,6 ,9 ,3 ,3 ,3 ,1 ,5 ,45 ,9 ,1 ,5 ,12 ,13 ,9 ,1];
const size = 10;
const game = new Game(field, size);
game.render({ two });

document.addEventListener("keyup", e => {
  const { code } = e;
  if ("ArrowUp" === code) {
    game.moveActor(0, -1);
  } else if ("ArrowDown" === code) {
    game.moveActor(0, 1);
  } else if ("ArrowRight" === code) {
    game.moveActor(1, 0);
  } else if ("ArrowLeft" === code) {
    game.moveActor(-1, 0);
  }
});

two.bind("update", function (frameCount) {
  if (frameCount % 20 === 0) {
    game.update();  
  }
  rect.rotation += 0.001;
});