p5.j​​s

Question

我想做什么

我正在尝试创建战舰游戏，目前我正在绘制棋盘，以便每个地点都是一个物体。因此，当用户点击它们时，他们可以选择放置战列舰的位置。我试图通过将每个点作为一个对象存储在一个名为circles的数组中来做到这一点。

Grid

问题

我的问题是，在尝试创建对象时，我似乎只能将整个网格作为一个对象。这是我到目前为止的代码（抱歉质量，我是菜鸟！）：

var circles = [];
var x = 100;
var y = 100;
for(i = 0; i < 2; i++) {
    circles[i] = {
        drawGrid: function() {
            for (var x = 100; x <= 1000; x += 100) {
                for (var y = 100; y <=1000; y += 100) {
                    fill(0);
                    ellipse(x,y,20,20);
                }
            }
        }
    }
}

function setup() {
    createCanvas(1100,1100);
}

function draw() {
    for(i = 0; i < 2; i++) {
        circles[i].drawGrid();
    }
}

我已经篡改了for循环（x，y和i）的排列但似乎没有任何工作，如果我尝试其他任何东西，而不是像下面那样得到一个网格 - 每个O都是一个对象：< / p>

O O O O 
O O O O
O O O O
O O O O

我会得到类似以下内容之一：

1) O O O O   | 2) O
   O         |      O
   O         |        O
   O         |          O

非常感谢任何帮助，谢谢！

Answer 1

我会为圆圈创建一个构造函数，如下所示：

var circles = [];

function setup() {
  createCanvas(500, 500);
  //there's a "b" for every "a"
  for (var a = 10; a < width; a += 30) {
    for (var b = 10; b < height; b += 30) {
      //add the circles to the array at x = a and y = b
      circles.push(new Circle(a, b));
    }
  }
  console.log(circles.length);

}

function draw() {
  background(50);
  for (var b = 0; b < circles.length; b++) {
    circles[b].show();
    //console.log("shown");
  }
}

function Circle(x, y) {
  this.x = x;
  this.y = y;

  this.show = function() {
    fill(255);
    noStroke();
    ellipse(this.x, this.y, 10, 10);
    //console.log("showing");
  }
}

当然你必须稍微玩一下这些值，但这是基本的想法