标记网格中的单元格（普通 JavaScript + p5.js 框架中的扫雷）

Question

我一直在尝试制作一个 function 在右键单击时标记单元格。 我已经有右键单击和所有的东西。 唯一的问题是所有显示的单元格都会在点击时被标记。 如果您对 p5.js 有任何疑问，请访问此处的参考资料。

我现在有这个：

草图.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();
    }
  }
}

细胞.js

function cell(i, j, 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, 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.y, this.w, 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();
        }
      }
    }
  }
}

如果您想查看代码是如何运行的，请单击此处

顺便说一句，不要使用 class 构造函数或任何这些恶作剧代码东西，它们让我感到困惑；-;

Answer 1

通过您的代码后，我发现您在 mouseevent 方法中有一个嵌套循环，用于检测当前单击的单元格，并且需要基于RIGHT | LEFT的不同操作的正确索引。 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();
          }
        }
      }
    }
}