p5.js 中对象的二维网格

Question

我正在尝试做什么

我正在尝试创建一个 Battleships 游戏，目前我正在绘制棋盘，以便每个点都是一个对象。这样当用户点击它们时，他们可以 select 在哪里放置他们的战舰。我试图通过将每个点作为一个对象存储在一个名为 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 都是一个对象:

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");
  }
}

当然，您需要稍微调整一下这些值，但这是基本思路

p5.js 中对象的二维网格

2D Grid of objects in p5.js

javascript

arrays

object

2d

p5.js