let m;

​

function setup() {

  createCanvas(400, 400);

  offset = 10;

  m = new Mat(10);

}

​

function draw() {

  background(220);

  m.display();

  // m.getIndex(mouseX, mouseY);

}

​

function mouseClicked() {

  m.update();

}

​

class Mat {

  constructor(n) {

    this.n = n;

    this.mat = [];

    this.state = [];

    this.w = (width - 2 * offset) / n;

    this.bombs = 0;

    this.bombsMarked = 0;

    this.remaining = n*n;

    this.gameState = -1;

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

      this.mat[i] = [];

      this.state[i] = [];

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

        this.mat[i][j] = 0;

        this.state[i][j] = 0;

        if (random() < 0.1) {

          this.mat[i][j] = -1;

          this.bombs++;

        }

      }

    }

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

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

        if (this.mat[i][j] == 0) {

          this.mat[i][j] = this.isBomb(i - 1, j - 1) + this.isBomb(i - 1, j) + this.isBomb(i - 1, j + 1) + this.isBomb(i, j + 1) + this.isBomb(i + 1, j + 1) + this.isBomb(i + 1, j) + this.isBomb(i + 1, j - 1) + this.isBomb(i, j - 1);

          //console.log(this.mat[i][j]);

        }

      }

    }

  }

​

  isBomb(i, j) {

    if (i < 0 || i > this.n - 1 || j < 0 || j > this.n - 1) return 0;

    return this.mat[i][j] === -1 ? 1 : 0;

  }

​

  getIndex(x, y) {

    let i = floor((x - offset) / this.w);

    let j = floor((y - offset) / this.w);

    return {

      i,

      j

    };

  }

​

  display() {

    stroke(0);

    for (let i = 0; i < this.n; i++) {

      for (let j = 0; j < this.n; j++) {

        switch(max(this.state[i][j],this.gameState)){

          case 0:

            fill(255);

            rect(offset + i * this.w, offset + j * this.w, this.w, this.w);

            break;

          case 1:

            switch(this.mat[i][j]){

              default :

                fill(220);

                rect(offset + i * this.w, offset + j * this.w, this.w, this.w);

                fill(0);

                text(this.mat[i][j], (i + 0.5) * this.w + offset, (j + 0.5) * this.w + offset);

                break;

              case 0:

                fill(220);

                rect(offset + i * this.w, offset + j * this.w, this.w, this.w);

                break;

              case -1:

                fill(255, 0, 0);

                rect(offset + i * this.w, offset + j * this.w, this.w, this.w);

                break;

            }

            break;

            case -1:

            fill(255, 0, 0);

            rect(offset + i * this.w, offset + j * this.w, this.w, this.w);

            break;

        }

      }

    }

  }

​

  update() {

    let {

      i,

      j

    } = this.getIndex(mouseX, mouseY);

​

    if (mouseButton === LEFT)

      this.changeState(i, j);

    else if (mouseButton === RIGHT) {

      this.markBomb(i, j);

    }

    console.log({bombs : this.bombs, marked : this.bombsMarked, remaning: this.remaining});

    if (this.bombs === this.bombsMarked && this.bombs === this.remaining) {

      console.log('%cYou win','color:blue;font-size:20px');

    }

  }

​

  markBomb(i, j) {

    if (this.state[i][j] === 0) {

      this.state[i][j] = -1;      

      this.bombsMarked ++;

    }

  }

​

  changeState(i, j) {

    if (i < 0 || i > this.n - 1 || j < 0 || j > this.n - 1 || this.state[i][j] > 0) return;

    this.remaining--;

    if(this.state[i][j] === -1){

      this.bombsMarked--;

    }

    this.state[i][j] = 1;

    if (this.mat[i][j] === 0) {

      this.changeState(i - 1, j - 1);

      this.changeState(i - 1, j);

      this.changeState(i - 1, j + 1);

      this.changeState(i, j + 1);

      this.changeState(i + 1, j + 1);

      this.changeState(i + 1, j);

      this.changeState(i + 1, j - 1);

      this.changeState(i, j - 1);

    } else if (this.mat[i][j] < 0) {

      console.log("%cGame Over","color:red;font-size:20px");

    }

  }

}

​

​

document.oncontextmenu = function() {

  return false;

}