# Battleships game in processing

**URL:** <https://discourse.processing.org/t/battleships-game-in-processing/15050>\
**Category:** Coding Questions\
**Created:** [October 30, 2019, 2:50pm UTC](https://discourse.processing.org/t/battleships-game-in-processing/15050 "2019-10-30T14:50:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aDavid903](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@aDavid903](https://discourse.processing.org/u/aDavid903)\
**Post date:** [October 30, 2019, 2:50pm UTC](https://discourse.processing.org/t/battleships-game-in-processing/15050/1 "2019-10-30T14:50:45Z")

</div>

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.

```auto
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!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 30, 2019, 3:35pm UTC](https://discourse.processing.org/t/battleships-game-in-processing/15050/2 "2019-10-30T15:35:45Z")

</div>

yes the width `LENGTHPLAYFIELD` and the grid not fit,

also not see why you make lines and rectangles

play

```auto
// 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
  }
}

```