在网格中标记单元格纯JavaScript + p5.js框架中的Minesweeper

如何解决在网格中标记单元格纯JavaScript + p5.js框架中的Minesweeper

我一直在尝试创建一个在右键单击时标记单元格的函数。我已经有了右键单击和所有东西。唯一的问题是所有显示的单元格都在单击时被标记。 如果您对p5.js有任何疑问，请访问参考文献here。

我现在有这个：

sketch.js

var grid;
var cols;
var rows;
var w = 40;

var totalBoom = 10;

function make2DArray(cols,rows) {
  var arr = new Array(cols);
  for (var i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
  }
  return arr;
}

function setup() {
  createCanvas(400,400);
  cols = floor(width / w);
  rows = floor(height / w);
  grid = make2DArray(cols,rows);
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j] = new cell(i,j,w);
    }
  }

  var spots = [];
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      spots.push([i,j]);
    }
  }

  for (var n = 0; n < totalBoom; n++) {
    var index = floor(random(spots.length));
    var choice = spots[index];
    var i = choice[0];
    var j = choice[1];
    spots.splice(index,1);
    grid[i][j].boom = true;
  }

  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].adjacentCells();
    }
  }
}

function gameOver() {
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].revealed = true;
    }
  }
}

function win() {
  if (boom.checked = true) {

  }
}

function mousePressed() {
  if (mouseButton == LEFT) {
    for (var i = 0; i < cols; i++) {
      for (var j = 0; j < rows; j++) {
        if (grid[i][j].hasBoom(mouseX,mouseY)) {
          grid[i][j].showBoom();

          if (grid[i][j].boom) {
            gameOver();
          }
        }
         else if (mouseButton == RIGHT) {
          console.log("RIGHTCLICK");
        }
      }
    }
  }
}

function draw() {
  background(200);
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].show();
    }
  }
}

cell.js

function cell(i,w) {
  this.i = i;
  this.j = j;
  this.x = i * w;
  this.y = j * w;
  this.w = w;
  this.neighborCount = 0;

  this.boom = false;
  this.revealed = false;
  this.checked = false;
}

cell.prototype.show = function () {
  stroke(0);
  noFill();
  rect(this.x,this.y,this.w,this.w);
  if (this.revealed) {
    if (this.boom) {
      fill(floor(random(10,200)),0);
      ellipse(this.x + w * 0.5,this.y + w * 0.5,this.w * 0.5);
    } else {
      fill(125);
      stroke(12);
      rect(this.x,this.w);
      if (this.neighborCount > 0) {
        textAlign(CENTER);
        textSize(this.w * 0.5);
        fill(0);
        text(this.neighborCount,this.x + this.w * 0.5,this.y + this.w * 0.75);
      }
    }
  }
}

cell.prototype.adjacentCells = function () {
  if (this.boom) {
    this.neighborCount = -1;
    return;
  }
  var total = 0;

  for (var xoff = -1; xoff <= 1; xoff++) {
    for (var yoff = -1; yoff <= 1; yoff++) {
      var i = this.i + xoff;
      var j = this.j + yoff;
      if (i > -1 && i < cols && j > -1 && j < rows) {
        var neighbor = grid[i][j];
        if (neighbor.boom) {
          total++;
        }
      }
    }
  }
  this.neighborCount = total;
}

cell.prototype.hasBoom = function (x,y) {
  return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.w;
}

cell.prototype.showBoom = function () {
  this.revealed = true;
  if (this.neighborCount == 0) {
    this.floodFill();
  }
}

cell.prototype.floodFill = function () {
  for (var xoff = -1; xoff <= 1; xoff++) {
    for (var yoff = -1; yoff <= 1; yoff++) {
      var i = this.i + xoff;
      var j = this.j + yoff;
      if (i > -1 && i < cols && j > -1 && j < rows) {
        var neighbor = grid[i][j];
        if (!neighbor.boom && !neighbor.revealed) {
          neighbor.showBoom();
        }
      }
    }
  }
}

如果要查看代码的运行方式，请单击here

顺便说一句，不要使用类构造函数或任何这些shenigan代码的东西，它们会使我感到困惑；-;

解决方法

浏览完代码后，我发现mouseevent方法内部有一个嵌套循环，该循环用于检测当前单击的单元格，并且需要基于RIGHT | LEFT单击来为不同的操作提供正确的索引。

您正在检查RIGHT单击条件内的LEFT单击，它将永远不会成立。因此，这是修改后的代码。

function mousePressed() {
    for (var i = 0; i < cols; i++) {
      for (var j = 0; j < rows; j++) {
        /*
         * on every mouse event,we go through each cell.
         * If the click is RIGHT we will mark it check and get out of the loop.
         */ 
        if(mouseButton == RIGHT) { 
          grid[i][j].checked = true; 
          return;
        }
        if (grid[i][j].hasBoom(mouseX,mouseY)) {
          grid[i][j].showBoom(); 
 
          if (grid[i][j].boom) {
            gameOver();
          }
        }
      }
    }
}