School Java Project Chinese Chess (6)
Moving pieces with a mouse
This day arrives finally. We’ll use mouse to tell our app to do something for us dynamically, instead of writing the predefined instructions in our source code. New terminologies like interface, listener sound really scaring, at least to me when I first learned Java, which was the first Object Oriented programming language I encountered. By the main idea about how they are used in this app is not hard to grasp.
With the help of an interface named MouseListener, we tell computer to call a specific method we provide when the mouse is pressed, and another specific method when the mouse is released, and so on. It’s really that simple. Let’s start to get a feeling of how all these work.
We need to implement an interface MouseListener, and provide 5 empty methods to make the compiler happy. One extra line addMouseListener(...) tells the system who promised to provide the above mentioned 5 specific methods, whose signatures are specified by interface MouseListener.
...
import java.awt.event.MouseListener;
import java.awt.event.MouseEvent;
...
class CChessPanel extends JPanel implements MouseListener {
static int orgX = 83, orgY = 83, side = 67; private CChessBoard brd; CChessPanel(CChessBoard brd) {
this.brd = brd;
addMouseListener(this);
} public void mousePressed(MouseEvent me) {}
public void mouseReleased(MouseEvent me) {}
public void mouseClicked(MouseEvent me) {}
public void mouseEntered(MouseEvent me) {}
public void mouseExited(MouseEvent me) {}
...
}
It compiles and is executable. But nothing changes if we run it. Let’s write some code to print out where we click the mouse. Add two lines in method mousePressed(MouseEvent me):
public void mousePressed(MouseEvent me) {
Point mouseTip = me.getPoint();
System.out.println(mouseTip);
}Compile (javac CChess.java) and run (java CChess) the app. Then click the mouse here and there to see output like:
java.awt.Point[x=153,y=151]
java.awt.Point[x=82,y=76]
java.awt.Point[x=221,y=155]
java.awt.Point[x=285,y=154]Those x y values are coordinates in screen pixels. Play with it and find where the (0, 0) point is located on screen.
Next, instead of clicking the mouse, let’s press it, drag it and release it. We can also improve the output a little bit:
public void mousePressed(MouseEvent me) {
Point mouseTip = me.getPoint();
System.out.println("mousePressed at (" + mouseTip.x + ", " + mouseTip.y + ")");
} public void mouseReleased(MouseEvent me) {
Point mouseTip = me.getPoint();
System.out.println("mouseReleased at (" + mouseTip.x + ", " + mouseTip.y + ")");
}
Give it a try and see something like this:
mousePressed at (150, 153)
mouseReleased at (217, 220)
mousePressed at (7, 6)
mouseReleased at (84, 83)Time to do a little math. How to convert our screen pixel coordinates to our logical coordinates represented with col and row? The result is this helper method:
private Point xyToColRow(Point xy) {
return new Point((xy.x - orgX + side/2)/side, (xy.y - orgY + side/2)/side);
}Guess what? Now we can easily make a move using mouse. Add an instance variable in class CChessPanel to remember where we pick up a piece to move. We need it at the moment (mouse released) when we drop the moving piece.
class XiangqiPanel extends JPanel implements MouseListener {
...
private Point fromColRow;
...
public void mousePressed(MouseEvent me) {
fromColRow = xyToColRow(me.getPoint());
}public void mouseReleased(MouseEvent me) {
if (fromColRow == null) return;
Point toColRow = xyToColRow(me.getPoint());
if (brd.validMove(fromColRow.x, fromColRow.y, toColRow.x, toColRow.y)) {
brd.movePiece(fromColRow.x, fromColRow.y, toColRow.x, toColRow.y);
System.out.println(brd);
repaint(); // redraw the updated game board
}
...
}
As an example, we drag the red king and move it down by one step:
The printed out logical board also reflects this move of king:
0 1 2 3 4 5 6 7 8
0 R N B G K G B N R
1 . . . . . . . . .
2 . C . . . . . C .
3 P . P . P . P . P
4 . . . . . . . . .
5 . . . . . . . . .
6 p . p . p . p . p
7 . c . . . . . c .
8 . . . . . . . . .
9 r n b g k g b n r 0 1 2 3 4 5 6 7 8
0 R N B G . G B N R
1 . . . . K . . . .
2 . C . . . . . C .
3 P . P . P . P . P
4 . . . . . . . . .
5 . . . . . . . . .
6 p . p . p . p . p
7 . c . . . . . c .
8 . . . . . . . . .
9 r n b g k g b n r
Next, we’ll drag the moving piece with the mouse.
These programming concepts were used in this post:
