let w = 40;

let grid = [];

​

let player1;

let player2;

​

function setup() {

  createCanvas(800, 800);

  cols = floor(width / w);

  rows = floor(height / w);

​

  player1 = new Player(0, 0, "red");

  player2 = new Player(cols - 1, rows - 1, "blue");

​

  for (let j = 0; j < rows; j++) {

    for (let i = 0; i < cols; i++) {

      let cell = new Cell(i, j);

      grid.push(cell);

    }

  }

​

  player1.currentCell = grid[0];

  player2.currentCell = grid[cols * rows - 1];

}

​

function draw() {

  background(51);

​

  for (let i = 0; i < grid.length; i++) {

    grid[i].show();

  }

​

  player1.show();

  player2.show();

​

  player1.checkCollision();

  player2.checkCollision();

​

  player1.update();

  player2.update();

​

  if (player1.currentCell === player2.currentCell) {

    player1.x -= player1.speedX;

    player1.y -= player1.speedY;

​

    player2.x -= player2.speedX;

    player2.y -= player2.speedY;

  }

}

​

function index(i, j) {

  if (i < 0 || j < 0 || i > cols - 1 || j > rows - 1) {

    return -1;

  }

  return i + j * cols;

}

​

class Cell {

  constructor(i, j) {

    this.i = i;

    this.j = j;

    this.walls = [true, true, true, true];

    this.visited = false;

  }

​

  checkNeighbors() {

    let neighbors = [];

​

    let top = grid[index(this.i, this.j - 1)];

    let right = grid[index(this.i + 1, this.j)];

    let bottom = grid[index(this.i, this.j + 1)];

    let left = grid[index(this.i - 1, this.j)];

​

    if (top && !top.visited) {

      neighbors.push(top);

    }

    if (right && !right.visited) {

      neighbors.push(right);

    }

    if (bottom && !bottom.visited) {

      neighbors.push(bottom);

    }

    if (left && !left.visited) {

      neighbors.push(left);

    }

​

    if (neighbors.length > 0) {

      let r = floor(random(0, neighbors.length));

      return neighbors[r];

    } else {

      return undefined;

    }

  }

​

  highlight() {

    let x = this.i * w;

    let y = this.j * w;

    noStroke();

    fill(0, 0, 255, 100);

    rect(x, y, w, w);

  }

​

  show() {

    let x = this.i * w;

    let y = this.j * w;

    stroke(255);

    if (this.walls[0]) {

      line(x, y, x + w, y);

    }

    if (this.walls[1]) {

      line(x + w, y, x + w, y + w);

    }

    if (this.walls[2]) {

      line(x + w, y + w, x, y + w);

    }

    if (this.walls[3]) {

      line(x, y + w, x, y);

    }

​

    if (this.visited) {

      noStroke();

      fill(255, 0, 255, 100);

      rect(x, y, w, w);

    }

  }

}

​

class Player {

  constructor(i, j, color) {

    this.i = i;

    this.j = j;

    this.x = i * w + w / 2;

    this.y = j * w + w / 2;

    this.color = color;

    this.speedX = 0;

    this.speedY = 0;

    this.currentCell = null;

  }

​

  show() {

    noStroke();

    fill(this.color);

    ellipse(this.x, this.y, w / 2);

  }

​

  checkCollision() {

    let index = this.i + this.j * cols;

​

    let currentCell = grid[index];

    let x = currentCell.i * w;

    let y = currentCell.j * w;

​

    // check collision with walls

    if (this.speedX > 0 && currentCell.walls[1]) {

      this.speedX = 0;

    }

    if (this.speedX < 0 && currentCell.walls[3]) {

      this.speedX = 0;

    }

    if (this.speedY > 0 && currentCell.walls[2]) {

      this.speedY = 0;

    }

    if (this.speedY < 0 && currentCell.walls[0]) {

      this.speedY = 0;

    }

  }

​

  update() {

    this.i = floor(this.x / w);

    this.j = floor(this.y / w);

​

    let index = this.i + this.j * cols;

    this.currentCell = grid[index];

​

    // move player based on keyboard input

    if (this.color === "red") {

      if (keyIsDown(87)) {

        // W key

        this.speedY = -1;

        this.speedX = 0;

      } else if (keyIsDown(83)) {

        // S key

        this.speedY = 1;

        this.speedX = 0;

      } else if (keyIsDown(65)) {

        // A key

        this.speedX = -1;

        this.speedY = 0;

      } else if (keyIsDown(68)) {

        // D key

        this.speedX = 1;

        this.speedY = 0;

      }

    } else if (this.color === "blue") {

      if (keyIsDown(UP_ARROW)) {

        this.speedY = -1;

        this.speedX = 0;

      } else if (keyIsDown(DOWN_ARROW)) {

        this.speedY = 1;

        this.speedX = 0;

      } else if (keyIsDown(LEFT_ARROW)) {

        this.speedX = -1;

        this.speedY = 0;

      } else if (keyIsDown(RIGHT_ARROW)) {

        this.speedX = 1;

        this.speedY = 0;

      }

    }

​

    this.x += this.speedX * w;

    this.y += this.speedY * w;

    this.speedX = 0;

    this.speedY = 0;

  }

}

​