Battleships game in processing

Processing Coding Questions
1

So I’m pretty new to Processing 3, and I need to make a game of battleships for an assignment. I have come to the part where I need to make a grid and be able to check which grid is being clicked. This is where I have a problem. I tried to create a grid, it doesn’t quite match te size of the rectangle I set.
This is the piece of my code that is drawing the grids.

void setup() {
  size(500, 500);
}

void draw() {
  final int XPLAYFIELD1 = width/4;
  final int YPLAYFIELD1= height/2;
  final int XPLAYFIELD2 = width/4*3;
  final int YPLAYFIELD2 = height/2;
  final int LENGTHPLAYFIELD = width/3;
  final int LEFTPLAYFIELD1 = XPLAYFIELD1 - LENGTHPLAYFIELD/2;
  final int TOPPLAYFIELD1 = YPLAYFIELD1 - LENGTHPLAYFIELD/2;
  final int LEFTPLAYFIELD2 = XPLAYFIELD2 - LENGTHPLAYFIELD/2;
  final int TOPPLAYFIELD2 = YPLAYFIELD2 - LENGTHPLAYFIELD/2;
  final int gridAmount = 10;
  int gridSize = LENGTHPLAYFIELD/gridAmount;

  int[][] playfield1 = new int[gridAmount][gridAmount];



  //settings
  rectMode(CENTER);

  //playfield 1
  fill(#000000);
  stroke(0);
  noFill();
  rect(XPLAYFIELD1, YPLAYFIELD1, LENGTHPLAYFIELD, LENGTHPLAYFIELD);

  for (int row = 0; row < LENGTHPLAYFIELD; row+=gridSize) {
    line(LEFTPLAYFIELD1+row, TOPPLAYFIELD1, LEFTPLAYFIELD1+row, TOPPLAYFIELD1+LENGTHPLAYFIELD);
  }
  
  for (int column = 0; column < LENGTHPLAYFIELD; column+=gridSize){
    line(LEFTPLAYFIELD1, TOPPLAYFIELD1+column, LEFTPLAYFIELD1+LENGTHPLAYFIELD, TOPPLAYFIELD1+column);
  }

  //playfield 2
  rect(XPLAYFIELD2, YPLAYFIELD2, LENGTHPLAYFIELD, LENGTHPLAYFIELD);


  for (int row = 0; row < LENGTHPLAYFIELD; row+=gridSize) {
    line(LEFTPLAYFIELD2+row, TOPPLAYFIELD2, LEFTPLAYFIELD2+row, TOPPLAYFIELD2+LENGTHPLAYFIELD);
  }
  
  for (int column = 0; column < LENGTHPLAYFIELD; column+=gridSize){
    line(LEFTPLAYFIELD2, TOPPLAYFIELD2+column, LEFTPLAYFIELD2+LENGTHPLAYFIELD, TOPPLAYFIELD2+column);
  }
}

For some reason there is a little bit of space left over on the right and the bottom of the grid. Anyone know why this is happening and how to fix this? Thanks!

2

yes the width LENGTHPLAYFIELD and the grid not fit,

also not see why you make lines and rectangles

play

// grid of rectangles,
int x = 20, y = 140, w = 18, h = w, offset = 2, grid = 10, many = grid*grid;

void setup() {
  size(500, 500);
  fill(50, 150, 0);
}

void draw() {
  background(200, 200, 0);
  x = 20;
  drawGrid();     // F1
  x+=width/2;
  drawGrid();     // F2
}

void drawGrid() {
  for ( int i =0; i < many; i++) {
    int xi = x+(i%grid)*(w+offset);
    int yi = y+(floor(i/grid))*(h+offset);
    rect(xi, yi, w, h);   // or any other shape/text on that position
  }
}