2D Gitter von Objekten in p5.js

Question

Was ich versuche

ich ein Schlachtschiff Spiel zu erstellen Ich versuche zu tun, und im Moment arbeite ich das Brett auf der Zeichnung, so dass jeder Punkt ein Objekt ist. Wenn der Benutzer auf sie klickt, können sie auswählen, wo sie ihre Schlachtschiffe platzieren möchten. Ich versuche dies zu tun, indem ich jeden Punkt als Objekt in einem Array mit der Bezeichnung Kreise speichern soll.

Grid

Das Problem

Mein Problem ist, dass, wenn die Objekte zu erstellen versuche, kann ich nur das gesamte Raster als ein Objekt zu machen scheint. Hier ist der Code, den ich bisher haben (sorry für die Qualität, ich bin ein Noob!):

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

Ich habe mit der Anordnung der manipulierten für Schleifen (x, y und i), aber nichts scheint zu funktionieren und wenn ich versuche, etwas anderes, sondern ein Gitter wie die unten zu bekommen - mit jeweils O ein Objekt zu sein:

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

ich werde etwas wie eine von ihnen erhalten:

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

jede Hilfe ist sehr geschätzt, danke!

Answer 1

ich würde eine Konstruktorfunktion für den Kreis machen, wie folgt aus:

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

natürlich werden Sie mit den Werten ein wenig spielen müssen, aber das ist die Grundidee