Tic Tac Toe X and Y inversion

Question

I am making a tic-tac-toe applet. When I draw the x's, the x and y coordinates are flipped.

private byte[][] board = new byte[][] {{0, -1, -1},
                                       {-1, -1, -1},
                                       {0, 0, -1}};

where 0's are x's, 1's are o's, and -1's are blank produces on screen

My code is

private int boardSize = getWidth() < getHeight() ? getWidth():getHeight();
@Override
public void paint(Graphics gr) {
    Graphics2D g = (Graphics2D)gr;
    g.setColor(Color.BLACK);
    boardSize = getWidth() < getHeight() ? getWidth():getHeight();
    g.setStroke(new BasicStroke(boardSize/72));
    g.drawLine(boardSize/3, 0, boardSize/3, boardSize);
    g.drawLine(2*boardSize/3, 0, 2*boardSize/3, boardSize);

    g.drawLine(0, boardSize/3, boardSize, boardSize/3);
    g.drawLine(0, 2*boardSize/3, boardSize, 2*boardSize/3);

    g.setStroke(new BasicStroke(boardSize/144));

    for(byte x = 0; x < 3; x++) for(byte y = 0; y < 3; y++) if(board[x][y] == 0) drawX(g, x, y);
    else if(board[x][y] == 1) drawO(g, x, y);
}

private void drawX(Graphics2D g, byte x, byte y) {
    Stroke s = g.getStroke();

    g.setStroke(new BasicStroke(boardSize/72));
    g.drawLine(x*boardSize/3+boardSize/36, y*boardSize/3+boardSize/36, (x+1)*boardSize/3-boardSize/36, (y+1)*boardSize/3-boardSize/36);

    g.setStroke(s);
}

drawO is not yet implemneted. I don't understand why the coordiantes are flipped.

Answer 1

You should replace board[x][y] with board[y][x] since the first index represents the blocks so when x=0 the vector coming out of the matrix is {0,-1,-1}

if you don't want to change x with y,

you can switch for loops

first loop the y and then loop the x

first solution would look like this:

for(byte x = 0; x < 3; x++) for(byte y = 0; y < 3; y++) if(board[y][x] == 0) drawX(g, x, y);
   else if(board[y][x] == 1) drawO(g, x, y);

the second solution would look like this

for(byte y = 0; y < 3; y++) for(byte x = 0; x < 3; x++) if(board[x][y] == 0) drawX(g, x, y);
    else if(board[x][y] == 1) drawO(g, x, y);

Answer 2

As others have pointed out, you need to flip x and y. But I don't feel that they explain why this is the solution very well. Let me show you using some graphics instead.

You know that the coordinate system in Java Graphics looks like this:

   X
  ------------->
Y |
  |
  |
  v

But that is not what your 2D array coordinate system represents. I can tell you wrote the array so as to graphically represent the board, but if you are graphically representing 2D iteration, it works more like for (each row) for (each column) than the other way around.

Since you made y your inner loop's variable, it became your "column" coordinate, which would normally have been the X coordinate.

   y
  ------------->
x | {{0, -1, -1},
  | {-1, -1, -1},
  |  {0,  0, -1}};
  v

So you can see why you need to treat your loop variables differently by switching them.

Answer 3

If you look at how you define your board

private byte[][] board = new byte[][] {{0, -1, -1},
                                   {-1, -1, -1},
                                   {0, 0, -1}};

And how you get values out of it

board[x][y]

When you do board[x] you get the xth element of board, so if x is 0 then {0, -1, -1}, because board is an array of arrays. Then, board[x][y] gets the yth element of that array, so if y is 1 then the result will be -1.

You should swap how you retrieve elements from board, using board[y][x].