Matching graphical gridto 2d array grid

Question

what I am trying to do is find where on my picture of a board game a person clicked and change the value according to it in my 2d array. It's kind of like tic tac toe but bigger and you place the stones on the intersections. So far I was able to get my x and y position of my mouse and check if the user clicked the first top left hand intersection and that works but I was thinking of writing some sort of for loop that will check all of the intersection points.

This is my code for checking the top intersection

if ((x >= 278 && x <= 285) && ( y >= 160 && y <= 175))
    {
        System.out.println("intersection 1 clicked");
    }

So my question is how would I write my for loop to check all of the intersections? Even the logic is just fine if you don't feel like writing code.

Thanks in advance any help is much appreciated.

https://i.stack.imgur.com/yzPTA.png this is my program running the top left hand stone is my cursor

https://i.stack.imgur.com/l6UrW.png and this is my code

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

As shown here, you can calculate the screen coordinate based on the desired grid coordinate. Click and drag to capture a SIZE square of the screen, then mouse over it to see how mouseMoved() works. A similar approach is used in this MapPanel.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 01 '13 at 18:33

trashgod

203,806
29
246
1,045

DannyMo · Accepted Answer · 2013-06-01T20:44:45.927

1

I think a for-loop would over-complicate things. You could instead write a few statements to translate between screen space and board space.

Say your screen space is 800px by 600px and you have a 10 x 10 game board represented by a 2-dimensional array: board[10][10]. Let's also say that you start drawing the board at a 10px offset from 0,0 and your board is 500px wide. In this case you know how much screen space each cell on your board occupies:

int boardScreenWidth = 500;
int cellWidth = boardScreenWidth / boardWidth;
           // = 500px / 10 
           // = 50px

Start by ignoring clicks that don't touch the board:

int boardStartX = 10; 
if (mouseX < boardStartX || mouseX >= boardStartX + boardScreenWidth)
  return; // The user clicked somewhere to the left or right of the board

Then, if the click was on the board, you will need to adjust the mouse position based on the board's offset from 0 (so that clicking at x=10px is like clicking at x=0 in terms of the board's position). With this information it becomes easy to translate an x-coordinate in screen space to an index in board:

int mouseX = 320; // user clicked at x=320
mouseX = mouseX - boardStartX; // adjust based on board's position
int boardX = mouseX / cellWidth;
        // = 310 / 50
        // = 6

You could find boardY similarly and then access the cell that was clicked at board[boardX][boardY].

Edit: To get screen coordinates from an index in your board, use the same logic above but solve for mouseX:

int boardX = (mouseX - boardStartX) / cellWidth;
// ==> boardX * cellWidth = mouseX - boardStartX
// ==> (boardX * cellWidth) + boardStartX = mouseX
// or...
int screenX = boardStartX + (boardX * cellWidth);

Note that this is the edge of the cell. The entire cell will span from screenX to screenX + cellWidth. The center of the cell is at screenX + cellWidth / 2

edited Jun 01 '13 at 20:44

answered Jun 01 '13 at 18:33

DannyMo

11,344
4
31
37

I see how this is easier, what I worry about is because I am placing on intersection not in the cell its going to be a little off. I draw my board at 0,0. The array and grid both are 19x19. The board is 441 pixels wide from the start to the first intersection it is 13 pixels and each cell is 21 pixels wide. I'll see if I can do the math above using my numbers. Thank you this is a lot of help – user2259774 Jun 01 '13 at 19:24
Quick questions, once I have my grid coordinates like 13 x 4 how would I turn that back into screen coordinates to draw my stone? – user2259774 Jun 01 '13 at 20:33
@user2259774 Updated my answer. Another way to think of it is if you know each cell is `50px` wide and you start drawing the grid at `15px`, then the 13th cell's position on the screen is going to be at `15px + (50px + 50px ... 13 times ...)` – DannyMo Jun 01 '13 at 20:47
I see, that really simple. Thank you! – user2259774 Jun 01 '13 at 21:05
@damo Now I can get the location of where I need to draw the stone how would I draw once and not let it update the position again? If I draw it from my paint its going to keep updating it. I can create a separate method to draw the stone but I would need to call that from the paint which is like drawing it in paint. – user2259774 Jun 01 '13 at 21:12
I'm not sure I understand what you're asking. It might be worth posting another question with a simple code example that reproduces the problem. – DannyMo Jun 01 '13 at 21:18
@damo Got it, I'll do that. Thanks. – user2259774 Jun 01 '13 at 21:23

Matching graphical gridto 2d array grid

2 Answers2